1

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: [{},{},{}]
};
slavoo
  • 5,798
  • 64
  • 37
  • 39
Dali
  • 31
  • 4
  • 1
    edit your question and post it clearly? – lalithkumar Jun 26 '17 at 04:37
  • You need to parse json so it has the correct format - see documentation for the explanation https://www.highcharts.com/docs/chart-concepts/series Basically, you need to convert 'key as string' to 'x' and 'doc_count' to 'y'. – morganfree Jun 26 '17 at 09:22
  • thank you for fast and kind reply :D I should learn more api – Dali Jun 26 '17 at 10:31

1 Answers1

0

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'
}
Jayesh Agarwal
  • 138
  • 1
  • 13