Hey people this is my first post but I'm an avid user of Stack overflow for previous solutions, I wouldn't have posted it if I could find the answer.
I'm using the following that uses the high charts events->load function to update the 12 data points as it's needed, which in my case is once every minute. I'm just wondering what I'm doing wrong in this code.
graphpage.html:
<script src='scripts/jquery-latest.js'></script>
<script src='scripts/highcharts.js'></script>
<div class="col-sm-12 col-lg-12">
<div class="graph-unit">
<dtitle>Other Information</dtitle>
<hr>
<div class="section-graph">
<div id="active_power_container"></div>
</div>
</div>
<script src="scripts/getgraphdata.php"></script>
getgraphdata.php:
<?
require_once 'datastuff.php';
header('Content-Type: text/javascript');
?>
var collector_id='<?=$db->currentUser?>';
var meter_id=3;
var samples=60;
var mod=2;
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'active_power_container',
defaultSeriesType: 'line',
events: {
load: function() {
var date,
series1 = this.series[0],
series2 = this.series[1],
series3 = this.series[2],
series4 = this.series[3],
series5 = this.series[4],
series6 = this.series[5],
series7 = this.series[6],
series8 = this.series[7],
series9 = this.series[8],
series10 = this.series[9],
series11 = this.series[10],
series12 = this.series[11],
$sQry = '/i/data/graph_widget_data.php?collector_id='+collector_id+'&limit=1';
setInterval(function() {
$.get($sQry , null, function(tsv) {
tsv = tsv.split(/\n/g);
$.each(tsv, function(i, line) {
line = line.split(/\t/);
var date = line[0];
series1.addPoint([date, line[1]], true, true);
series2.addPoint([date, line[2]], true, true);
series3.addPoint([date, line[3]], true, true);
series4.addPoint([date, line[4]], true, true);
series5.addPoint([date, line[5]], true, true);
series6.addPoint([date, line[6]], true, true);
series7.addPoint([date, line[7]], true, true);
series8.addPoint([date, line[8]], true, true);
series9.addPoint([date, line[9]], true, true);
series10.addPoint([date, line[10]], true, true);
series11.addPoint([date, line[11]], true, true);
series12.addPoint([date, line[12]], true, true);
});
});
}, 1000);
}
}
},
credits: {
enabled: false
},
title: {
text: 'Active Power chart (meter: '+meter_id+')',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
hour: '%I %p',
minute: '%I:%M %p'
}
},
yAxis: {
title: {
text: 'Active Power (Watts) '
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [<? $query = $db->DB("SELECT long_description,short_description FROM `desc_tbl` WHERE `id` = '{$db->getdata(3)}'");
$num_rows = $query->num_rows;
$i = 1;
while($row = $query->fetch_assoc()){
$title = $row['short_description'];
if($title == ""){ $title = $row['long_description']; }
?>{
name: '<?=$title?>'
}<? if($i < $num_rows){echo ","; $i++; } }?>]
}
sQry= '/i/data/graph_widget_data.php?collector_id='+collector_id+'&meter_id='+parseInt(meter_id)+'&samples='+parseInt(samples)+'&mod='+parseInt(mod);
jQuery.get(sQry , null, function(tsv) {
var lines = [];
traffic = [];
traffic1 = [];
traffic2 = [];
traffic3 = [];
traffic4 = [];
traffic5 = [];
traffic6 = [];
traffic7 = [];
traffic8 = [];
traffic9 = [];
traffic10 = [];
traffic11 = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i, line) {
line = line.split(/\t/);
//date = Date.parse(line[0] +' UTC');
date = line[0];
traffic.push([
parseInt(date),
parseFloat(line[1].replace(',', ''))
]);
traffic1.push([
parseInt(date),
parseFloat(line[2].replace(',', ''))
]);
traffic2.push([
parseInt(date),
parseFloat(line[3].replace(',', ''))
]);
traffic3.push([
parseInt(date),
parseFloat(line[4].replace(',', ''))
]);
traffic4.push([
parseInt(date),
parseFloat(line[5].replace(',', ''))
]);
traffic5.push([
parseInt(date),
parseFloat(line[6].replace(',', ''))
]);
traffic6.push([
parseInt(date),
parseFloat(line[7].replace(',', ''))
]);
traffic7.push([
parseInt(date),
parseFloat(line[8].replace(',', ''))
]);
traffic8.push([
parseInt(date),
parseFloat(line[9].replace(',', ''))
]);
traffic9.push([
parseInt(date),
parseFloat(line[10].replace(',', ''))
]);
traffic10.push([
parseInt(date),
parseFloat(line[11].replace(',', ''))
]);
traffic11.push([
parseInt(date),
parseFloat(line[12].replace(',', ''))
]);
});
} catch (e) { }
options.series[0].data = traffic;
options.series[1].data = traffic1;
options.series[2].data = traffic2;
options.series[3].data = traffic3;
options.series[4].data = traffic4;
options.series[5].data = traffic5;
options.series[6].data = traffic6;
options.series[7].data = traffic7;
options.series[8].data = traffic8;
options.series[9].data = traffic9;
options.series[10].data = traffic10;
options.series[11].data = traffic11;
chart = new Highcharts.Chart(options);
});
});
The sQry outputs a line like:
1401896202400 0 0 0 0 0 97 0 0 0 0 0 0
Which is fine as it's getting the latest query but it doesn't do anything with it. When I remove the events->load stuff it works fine, I can't seem to pinpoint my mistake. Any help would be highly appreciated :)
Thanks.
