Plotting multiple points in highchart timeseries - highcharts

Question

I have data that looks like this in JSON format. I have two data series with same time line. When I try to plot them in highstock, all my time-stamps are shown as starting in 1970s. Can anyone point me what would be wrong with my JSON format?
Reason I am not using - pointStart and pointInterval: is because sometime pointIntervals can be irregular and hence need to send in the dates.
{
"chart_data": {
"dates": [
1406876400000,
1406876700000,
1406877000000,
1406877300000,
1406877600000,
1406877900000,
1406878200000,
1406878500000,
1406878800000
],
"values": [
{
"data": [
54,
50,
62,
65,
65,
55,
51,
53,
57
]
},
{
"data": [
84,
70,
80,
78,
77,
84,
73,
83,
77
]
}
]
}
}
My Javascript method to display this data is below.
<script type="text/javascript">
$(document).ready(function() {
var chartOptions = {
chart: {
renderTo: 'chart_panel',
type: 'line',
zoomType: 'x'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
title: {text: 'Temperature & Humidity' },
subtitle: {text: 'My-Text' },
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
day: '%b %e',
hour: '%b %e',
year: '%b'
}
},
yAxis: {
min: 0,
title: {
text: 'Temperature (°F)/Humidity (%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{}],
rangeSelector : {
inputEnabled: true,
selected: '0'
},
};
var chartDataUrl = '{% url "chart_data_json" object.id %}';
function loadChart() {
$.getJSON(chartDataUrl,
function(data) {
var seriesOptions = [];
var obj1 = {};
var obj2 = {};
avgByDayOptions.xAxis.categories = data['chart_data']['dates'];
obj1.name = "Temperature";
obj1.data = data['chart_data']['values'][0]['data'];
obj2.data = data['chart_data']['values'][1]['data'];
obj2.name = "Humidity";
seriesOptions[0] = obj1;
seriesOptions[1] = obj2;
chartOptions.series = seriesOptions;
var chart = new Highcharts.StockChart( chartOptions,
function(chart){
// apply the date pickers
setTimeout(function(){
$('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
.datepicker()
},0)
}
);
Highcharts.setOptions({ global: { useUTC: false } });
});
}
loadChart();
});

Answer 1

It was may bad once I passed the data in following format everything started work as expected. Just posting reply to my own question in case someone runs into similar issue?
{
"chart_data": {
"values": [
{
"data": [
[
1406851200000,
54
],
[
1406851500000,
50
],
[
1406851800000,
62
],
[
1406852100000,
65
],
[
1406852400000,
65
],
[
1406852700000,
55
],
[
1406853000000,
51
],
[
1406853300000,
53
],
[
1406853600000,
57
]
]
},
{
"data": [
[
1406851200000,
84
],
[
1406851500000,
70
],
[
1406851800000,
80
],
[
1406852100000,
78
],
[
1406852400000,
77
],
[
1406852700000,
84
],
[
1406853000000,
73
],
[
1406853300000,
83
],
[
1406853600000,
77
]
]
}
]
}
}