Solve for the total every transaction is going in. (Google chart) - ajax

Question

I have a chart where I need to calculate the amount I'm earning as time goes by. In this chart, I have the amount (red line). My target is to calculate the total of every transaction that is going in. My current code is not working properly because when the time is 18:26:23 it is 1000 amount when it is 18:26:24, it is still 1000... It should be 2000. It should solve for the sum over time. I have provided my codes below and a screenshot of my current system and my target. Thank you in advance.
Views:
<div class="col-md-12">
<!-- LINE CHART -->
<div class="card card">
<div class="card-header">
<h3 class="card-title">Stats Per Day</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" style="width:30%;">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="chart">
<div id="wholechart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></div>
</div>
</div>
<!-- /.card-body -->
</div>
</div>
Ajax:
function sampleeesasw(){
$.ajax({
type: 'post',
url: '<?=site_url('report/datas')?>',
dataType:'json',
success: function(result) {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function(){drawChart(result);});
function drawChart(result) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'req');
data.addColumn('number', 'total');
data.addColumn('number', 'amount');
var dataArray =[];
$.each(result,function(i,obj){
dataArray.push([obj.req,parseInt(obj.total),parseInt(obj.amount)]);
});
data.addRows(dataArray );
var options = {
seriesType: "line",
};
var chart = new google.visualization.ComboChart(document.getElementById('wholechart')).
// Line,Bar,Area,Clomun,pie
draw(data, {curveType: "function",
vAxes: {0: {logScale: false},
1: {logScale: false, maxValue: 2}},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1},
2:{targetAxisIndex:1}}}
);
}
}
});
}
setInterval(function(){
sampleeesasw()
},1000);
Controller:
public function datas(){
$data= $this->reports->wholedatachart();
foreach($data as $row){
$data['req']=$row['req'];
$data['amount']=$row['amount'];
$data['total']=$row['total'];
}
echo json_encode($data);
}
Model:
function wholedatachart(){
$query=$this->db->query("SELECT timeProcess as 'req', transID as 'total', amount as 'amount' FROM tbl_transaction");
return $query->result_array();
}

Answer 1

You can do calculation part inside your drawChart function. Inside that function you can simply total value of amount then , save it in some variable and pass it to your dataArray.push(..).
Demo Code :
//suppose data look like this..
var result = [{
"req": "1",
"amount": 2000,
"total": 1000
},{
"req": "2",
"amount": 1000,
"total": 1000
},{
"req": "3",
"amount": 1000,
"total": 1000
}]
function sampleeesasw() {
/*$.ajax({
type: 'post',
url: '',
dataType: 'json',
success: function(result) {*/
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(function() {
drawChart(result);
});
function drawChart(result) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'req');
data.addColumn('number', 'total');
data.addColumn('number', 'amount');
var dataArray = [];
var total=0 //intialze..
$.each(result, function(i, obj) {
total +=parseInt(obj.amount)//add on each iteration
dataArray.push([obj.req, parseInt(obj.total), parseInt(total)]); //add value here ..
});
data.addRows(dataArray);
var options = {
seriesType: "line",
};
var chart = new google.visualization.ComboChart(document.getElementById('wholechart')).draw(data, {
curveType: "function",
vAxes: {
0: {
logScale: false
},
1: {
logScale: false,
maxValue: 2
}
},
series: {
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1
},
2: {
targetAxisIndex: 1
}
}
});
}
/* }
});*/
}
setInterval(function() {
sampleeesasw()
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="col-md-12">
<!-- LINE CHART -->
<div class="card card">
<div class="card-header">
<h3 class="card-title">Stats Per Day</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" style="width:30%;">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="chart">
<div id="wholechart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></div>
</div>
</div>
<!-- /.card-body -->
</div>
</div>

Answer 2

I think you can try this one, you need to increment the amount of each data, you can use a temporary variable and increment all the amount.
I edited the answer sorry my bad.
change your controller to
public function datas(){
$data= $this->reports->wholedatachart();
$tempAmount = 0;
foreach($data as $row){
$tempAmount = $tempAmount + $row['amount'];
$output[]=array(
'req' => $timeline['time'],
'amount' => $tempAmount,
'amount' => $row['amount'],
);
}
echo json_encode($output);
}
if you want to add the total also you can do the same thing