1ntgr 1ntgr - 1 month ago 20
Javascript Question

epoch datetime not displaying correctly in HighStock chart

I am creating a Highstock chart to display the amount of emails received per day. I have a JSON file which updates daily, can be seen below:

[{
"name": "Month",
"data": [1471993200000, 1472079600000, 1472166000000, 1472252400000, 1472338800000, 1472425200000, 1472511600000, 1472598000000, 1472684400000, 1472770800000, 1472857200000, 1472943600000, 1473030000000, 1473116400000, 1473202800000, 1473289200000, 1473375600000, 1473462000000, 1473548400000, 1473634800000, 1473721200000, 1473807600000, 1473894000000, 1473980400000, 1474066800000, 1474153200000, 1474239600000, 1474326000000, 1474412400000, 1474498800000, 1474585200000, 1474671600000, 1474758000000, 1474844400000, 1474930800000, 1475017200000, 1475103600000, 1475190000000, 1475276400000, 1475362800000, 1475449200000, 1475535600000, 1475622000000, 1475708400000, 1475794800000, 1475881200000, 1475967600000, 1476054000000, 1476140400000, 1476226800000, 1476313200000, 1476399600000, 1476486000000, 1476572400000, 1476658800000, 1476745200000, 1476831600000, 1476918000000, 1477004400000, 1477090800000, 1477177200000, 1477263600000, 1477350000000, 1477436400000, 1477522800000, 1477609200000, 1477695600000, 1477782000000, 1477872000000, 1477958400000, 1478044800000, 1478131200000, 1478217600000]
},{
"name": "numOfEmails:",
"data": [6973, 19953, 24802, 11488, 3430, 5067, 4967, 11634, 11852, 5326, 11096, 10412, 11031, 7645, 181808, 50117, 68233, 8274, 140612, 166004, 46222, 17730, 236838, 85155, 22113, 90837, 21981, 58824, 90409, 32079, 126217, 165484, 152788, 8028, 85894, 12304, 10294, 3568, 100334, 131946, 8691, 7572, 7721, 253608, 817, 116161, 1104148, 1250817, 15616, 270738, 123211, 150237, 69436, 84920, 189798, 101596, 48121, 120699, 82919, 10025, 281948, 37501, 50315, 15240, 115791, 15799, 19682, 29942, 2128, 23952, 149181, 6535, 5]
}]


for the xAxis, I am using
type: 'datetime'
but displays the date as
00:00:00.010, 00:00:00.020, ...


enter image description here

The JavaScript file I'm using to render the chart is below:

$(document).ready(function() {
var options = {
chart: {
renderTo: 'container_chart',
type: 'area',
},
title: {
text: 'Emails received daily'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},

xAxis: {
type: 'datetime'
},

yAxis: {
title: {
text: 'Number received'
},
},
legend: {
enabled: false
},

plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: []
}

$.getJSON("./emailsCaptured_c2.json", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.stockChart(options);
});
});


I have tried adjusting the xAxis to:

labels: {
format: '{value:%d/%m/%Y}'
}
}


which is how I want it formatted, but haven't had any luck I've also tried having the JSON file formatted in that way, rather than EPOCH, which seems to work in HighCharts, but not HighStock. The reason I chose HighStock is for the slider and the additional date range options.

Answer

The mistake you do is defining categories for axis. Highstock does not support category axis and in fact your data do not hove x values so the chart starts from 0000000000000.

You can map the values to be in the format [timestamp, value] like this:

var series = {
  name: json[1].name,
  data: (function () {
    var data = [], i = 0, dataLen = json[0].data.length;

    for (; i < dataLen; i++) {
      data.push([json[0].data[i], json[1].data[i]]);
    }

    return data;
  })()
};

example: https://jsfiddle.net/vqhuo3hf/1/

Comments