I am working on a project that involves creating a dynamic Highstock chart to showcase the daily influx of emails. The data is stored in a JSON file that gets updated every day, and you can see a snippet of it below:
[{
"name": "Month",
"data": [1471993200000, 1472079600000, 1472166000000, ...]
},{
"name": "numOfEmails:",
"data": [6973, 19953, 24802, ...]
}]
Currently, I'm facing an issue with the formatting of the dates on the xAxis when using type: 'datetime'. It displays as 00:00:00.010, 00:00:00.020, ....
https://i.stack.imgur.com/ITdg5.png
The JavaScript code snippet responsible for rendering the chart is provided 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've attempted to adjust the xAxis labels using the format {value:%d/%m/%Y}, but without success. I also experimented with altering the JSON file to match the desired date format instead of EPOCH time, which worked in HighCharts but not in HighStock. My primary motivation behind choosing HighStock was for its slider functionality and enhanced date range options.