HighCharts with Multiple Series

Question

Below is my table data and I have converted the same to JSON and linked it to HighCharts . But I'm not sure how to show the different series in the spline .My series will be "LIST" and on X axis the "Time" and Y will carry Status of each series 0 and 1 respectively.

The series "LIST" can be any as of now it shows "A" ,"B","C" respectively , it can have more or less.Based on the available series the chart should be plotted.I have pasted the JSON data of the table too.

LIST  Time   Status
 A     22:05   0
 B     22:10   1
 C     22:30   1
 A     22:40   0
 C     22:50   1
 B     22:60   1

 [{"LIST":"A","Status":"0","Time":"22:05"},{"LIST":"B","Status":"1","Time":"22:10"},
 {"LIST":"C","Status":"1","Time":"22:30"},{"LIST":"A","Status":"0","Time":"22:40"},
 {"LIST":"C","Status":"1","Time":"22:50"},{"LIST":"B","Status":"1","Time":"22:60"}]

I have tried the following in the code but to no avail. Below is the code

 var handlerURL = "http://localhost:50687/Handler.ashx;
         $.ajax({
             url: handlerURL,
             type: "GET",
             datatype: "json",
             contentType: 'application/json',
             complete: function (json) {
                 var jsonData = jQuery.parseJSON(json.responseText);
                 var List = _.pluck(jsonData, 'List');
                 period = _.pluck(jsonData, 'Time');
                 status = _.pluck(jsonData, 'Status');
                 //                     var dateTime = [];
                 //                     for (i = 0; i < period.length; i++) {
                 //                         dateTime = (period[i]);
                 //                     }
             }

         });
          options = {
             chart: {
                 renderTo: 'container',
                 type: 'spline',
                 marginRight: 130,
                 marginBottom: 50
             },

             setOptions: ({
                 global: { useUTC: true }
             }),

             title: {
                 text: 'Live Data',
                 x: -20
             },
             subtitle: {
                 text: '',
                 x: -30
             },
             xAxis: {
                 categories: period,
                 type: 'datetime',
                 tickPixelInterval: 100,
                 plotLines: [{
                     width: 5,
                     color: '#808080'
                 }]
             },
             yAxis: {
                 min: 0, max: 1,
                 title: {
                     text: 'Status'
                 },
                 plotLines: [{
                     value: 0,
                     width: 1,
                     color: '#808080'
                 }]
             },
             tooltip: {
                 formatter: function () {
                     return '<b>' + this.series.name + '</b><br/>' +
                        this.x + ': ' + this.y;
                 }
             },
             legend: {
                 layout: 'vertical',
                 align: 'right',
                 verticalAlign: 'top',
                 x: -10,
                 y: 100,
                 borderWidth: 0
             },
             series: [{
                 data: status
             }]
         }

         options.xAxis.categories = period;
         chart = new Highcharts.Chart(options);

Answer 1

In general there is a couple of advices:

• you can use or categorized axis, or datetime, not both in the same time:

    xAxis: { // categories: period, - remove that? type: 'datetime', tickPixelInterval: 100, plotLines: [{ width: 5, color: '#808080' }] }, 

• to create multiple series, you need multiple series objects in array, just like this:

    series: [{ data: status_1 }, { data: status_2 }] 

• status_1/status_2 etc. should be that format:

    [[timestamp1, value1], [timestamp2, value2], ... , [timestampN, vlaueN]]