HighChart how to use object array - arrays

Question

json file:
[{
"key_as_string": "2017-05-09",
"doc_count": 1874
}, {
"key_as_string": "2017-05-10",
"doc_count": 2680
}, {
"key_as_string": "2017-05-11",
"doc_count": 2717
}, {
"key_as_string": "2017-05-12",
"doc_count": 2147
}, {
"key_as_string": "2017-05-13",
"doc_count": 984
}, {
"key_as_string": "2017-05-14",
"doc_count": 1302
}, {
"key_as_string": "2017-05-15",
"doc_count": 2217
}
I couldn't know how to use object data on the HighChart
when i use it
$.getJSON('/data/user_signedup.json', function(data) {
options.series[0].name = "NewUser"
options.series[0].data = data;
console.log("series", options.series);
var chart = new Highcharts.Chart(options);
});
then It dosen't work anything:
so I wonder how to use object data set
(key_as_string vlaue ,match x-value)
(doc_count vlaue ,match y-value)
I can draw only y.value by making only number array
$.getJSON('/data/user_signedup.json', function(data) {
options.series[0].name = "NewUser"
options.series[0].data =[];
data.forEach(function(item){
options.series[0].data.push(item.doc_count)
})
console.log("series", options.series);
var chart = new Highcharts.Chart(options);
});
chart option setting
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Daily New User'
},
subtitle: {
text: ' 2017-05-09 ~2017-06-08'
},
yAxis: {
title: {
text: 'Number of new Users'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x}: {point.y}명',
// maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.key_as_string) + ':<br/> ' +
// this.doc_count + ' visits'
},
plotOptions: {
series: {
allowPointSelect: true
}
},
series: [{},{},{}]
};

Answer 1

You can pass custom data by setting data array with json. for x-axis point, use name key and for y-axis point, use y key.
Try this:
$.getJSON('/data/user_signedup.json', function(data) {
options.series[0].name = "NewUser"
options.series[0].data =[];
data.forEach(function(item){
options.series[0].data.push({name:key_as_string,y:item.doc_count})
})
console.log("series", options.series);
var chart = new Highcharts.Chart(options);
});
and updated highchart configuration to this:
xAxis: {
type: 'category'
}