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,
}]
});
}
The problem is that HighCharts expects time series data to be given in milliseconds, not seconds so you will need to put in a multiplier of 1000.
You can convert from your strings to milliseconds since epoch like so:
>>> int(datetime.datetime.strptime("2013-11-07 00:10:27", "%Y-%m-%d %H:%M:%S").strftime('%s')) * 1000
1383811827000
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With