Highcharts: create multiple series using JSON data

Question

I am trying to create a line, spline chart using JSON data. I want multiple series but I am confused on how to do that. Right now I am able to create one with one series but this one doesn't look right either. Plus I don't see the legend either. Please help on how I can fix this. Right now I only have the code for starts . I also want to completes to my chart. I want the legends to say start and complete

JSON Data:

[
{
    "date": "2019-07-07",
    "starts": 42,
    "completes": 142
},
{
    "date": "2019-07-08",
    "starts": 2,
    "completes": 90
},
{
    "date": "2019-07-09",
    "starts": 28,
    "completes": 175
}
]

My Code:

<div id="container"></div>

let theAPI = `the json file`

$.getJSON(theAPI, result => {
    let main_chart_data = [];

    result.forEach((d, i) => {
        let date_chart = new Date(d.date);
        main_chart_data.push([date_chart, d.starts, ]);
    });

    let main_chart_options = buildChart({
        chart_type: 'spline',
        height: 265
    });
    main_chart_options.legend.enabled = false;
    main_chart_options.lang = {
        'noData': 'There is currently no data available.'
    };
    main_chart_options.series = [{
        data: main_chart_data
    }];

    main_chart_options.tooltip = {
        formatter: function() {
            let tooltip = `
      <span style="font-weight:500;">${moment(this.x).format('MMM DD - ha')}</span>
      <br />
      <span>${addCommas(this.y)}</span>
    `;
            return tooltip;
        },
        useHTML: true
    }

    new Highcharts.chart('container', main_chart_options);

    let total_pvs = result.reduce((a, c) => {
        return a += c.starts;
    }, 0);

})

This is my result now:

Spline - Highchart

Answer 1

You can achieve it by splitting the JSON data into two separate series to look like that:

[{
  "name": "starts",
  "data": [{
    "x": 1562457600000, // date in milliseconds
    "y": 42
  }, {
    "x": 1562544000000,
    "y": 2
  }, {
    "x": 1562630400000,
    "y": 28
  }]
}, {
  "name": "completes",
  "data": [{
    "x": 1562457600000,
    "y": 142
  }, {
    "x": 1562544000000,
    "y": 90
  }, {
    "x": 1562630400000,
    "y": 175
  }]
}]

Check this demo to see how you can make it:

• https://jsfiddle.net/BlackLabel/tjLvh89b/