I'm working on HighCharts Spline Irregular Data. Here the data is passed as
data: [
[Date.UTC(1970, 9, 27), 0 ],
[Date.UTC(1970, 10, 10), 0.6 ],
[Date.UTC(1970, 10, 18), 0.7 ],
[Date.UTC(1970, 11, 2), 0.8 ],
[Date.UTC(1970, 11, 9), 0.6 ],
[Date.UTC(1970, 11, 16), 0.6 ],
]
But, I'm sending the data from the python backend via AJAX call as
data: [
"2013-11-07 00:10:27", 0 ],
"2013-11-07 00:10:27", 1 ],
"2013-11-07 00:10:27", 2 ],
"2013-11-07 00:10:27", 3 ],
"2013-11-07 00:10:27", 4 ],
"2013-11-07 00:10:27", 5 ],
]
So, the data points does not gets plotted. How do I convert the datetime to UTC or any other format of datetime at the backend(python), which will enable Highcharts to plot the correct X and Y-axis points.?
Here is what I've tried.
Since the UTC time Date.UTC(1970, 9, 27)
returns the number of seconds, hence I'm converting the time to the total number of secs passed since 1970-1-1 behind the scenes.
time = "2013-11-06 18:00:00"
time = ((datetime.datetime.strptime(time, '%Y-%m-%d %H:%M:%S'))-datetime.datetime(1970,1,1)).total_seconds()
and then passing it to the UI., hence my data is send as
[[1383760800.0, 1870.2000000000007], [1383762600.0, 0.30000000000000004], [1383761700.0, 4.299999999999802]]
Now when I pass this data to the highcharts, the Y-axis shows correct value but the X-axis(on which the datetime needed to plotted) shows time as 05:52.
How can I correct it?
Here is my Highcharts code.
function comparison_chart(result) {
var MAXPOINTS = 20;
Highcharts.setOptions({
global: {
useUTC: false,
}
});
$('#container').highcharts({
chart: {
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
if(series.data.length > MAXPOINTS){
series.addPoint([x, y], true, true);
}
else{
series.addPoint([x, y], true, false);
}
},5000);
},
}
},
title: {
text: 'Energy Chart'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
tooltip: {
formatter: function() {
var s;
s = this.y + 'kWh';
return s;
}
},
series: [{
type: 'spline',
name: 'Random data',
data: result,
showInLegend: true,
}]
});
}