Multiple Spline Chart from nested JSON

[mwick]

Hi,

i want so generate a spline chart with multi series by json. X should be seconds with miliseconds. Y is interger.

But i can´t get it to work.

var dps = [];
var dataSeries = [];

var chartCyclesBySensors = new CanvasJS.Chart("cyclesSensors", {
    title:{
    },
    axisX:{
    },
    axisY :{
    },
    toolTip: {
        shared: "true"
    },
    legend:{
    },
    data: [{
        type: "spline",
        markerSize: 3,
        visible: true,
        showInLegend: true,
        dataPoints: dps,
    }
    ] 
});

$.when(
  $.getJSON(jsonurl, function(data) {
    dataPointsLastCycles.push({data});
    $.each(data,function(index, object){
       dps[index] = [];
       $.each(data[index], function(key, val) {
        date = val.time;
        dps[index].push({
            x: new Date(date),
            y: val.value
        });
      });
      dataSeries.push({
        name: index,
        type: "spline",
        showInLegend: true,
        dataPoints: dps[index]
      });
    });
  })
).then(function() {
    console.log(dps);
    chartCyclesBySensors.render();
});

JSON:

{
  "50": [
    {
      "time": 1578389673.253741,
      "value": 183
    },
    {
      "time": 1578389674.253741,
      "value": 181
    },
    {
      "time": 1578389675.253741,
      "value": 157
    },
    {
      "time": 1578389676.253741,
      "value": 169
    },
    {
      "time": 1578389677.253741,
      "value": 176
    },
    {
      "time": 1578389678.253741,
      "value": 169
    },
    {
      "time": 1578389679.253741,
      "value": 173
    },
    {
      "time": 1578389680.253741,
      "value": 195
    },
    {
      "time": 1578389681.253741,
      "value": 160
    },
    {
      "time": 1578389682.253741,
      "value": 175
    },
    {
      "time": 1578389683.253741,
      "value": 176
    }
  ],
  "51": [
    {
      "time": 1578389673.253741,
      "value": 184
    },
    {
      "time": 1578389674.253741,
      "value": 173
    },
    {
      "time": 1578389675.253741,
      "value": 193
    },
    {
      "time": 1578389676.253741,
      "value": 166
    },
    {
      "time": 1578389677.253741,
      "value": 189
    },
    {
      "time": 1578389678.253741,
      "value": 192
    },
    {
      "time": 1578389679.253741,
      "value": 168
    },
    {
      "time": 1578389680.253741,
      "value": 191
    },
    {
      "time": 1578389681.253741,
      "value": 181
    },
    {
      "time": 1578389682.253741,
      "value": 151
    },
    {
      "time": 1578389683.253741,
      "value": 154
    }
  ],
  "52": [
    {
      "time": 1578389673.253741,
      "value": 156
    },
    {
      "time": 1578389674.253741,
      "value": 168
    },
    {
      "time": 1578389675.253741,
      "value": 153
    },
    {
      "time": 1578389676.253741,
      "value": 154
    },
    {
      "time": 1578389677.253741,
      "value": 193
    },
    {
      "time": 1578389678.253741,
      "value": 157
    },
    {
      "time": 1578389679.253741,
      "value": 151
    },
    {
      "time": 1578389680.253741,
      "value": 177
    },
    {
      "time": 1578389681.253741,
      "value": 150
    },
    {
      "time": 1578389682.253741,
      "value": 156
    },
    {
      "time": 1578389683.253741,
      "value": 172
    }
  ],
  "53": [
    {
      "time": 1578389673.253741,
      "value": 200
    },
    {
      "time": 1578389674.253741,
      "value": 165
    },
    {
      "time": 1578389675.253741,
      "value": 177
    },
    {
      "time": 1578389676.253741,
      "value": 192
    },
    {
      "time": 1578389677.253741,
      "value": 191
    },
    {
      "time": 1578389678.253741,
      "value": 183
    },
    {
      "time": 1578389679.253741,
      "value": 152
    },
    {
      "time": 1578389680.253741,
      "value": 179
    },
    {
      "time": 1578389681.253741,
      "value": 164
    },
    {
      "time": 1578389682.253741,
      "value": 200
    },
    {
      "time": 1578389683.253741,
      "value": 165
    }
  ],
  "54": [
    {
      "time": 1578389673.253741,
      "value": 180
    },
    {
      "time": 1578389674.253741,
      "value": 154
    },
    {
      "time": 1578389675.253741,
      "value": 159
    },
    {
      "time": 1578389676.253741,
      "value": 179
    },
    {
      "time": 1578389677.253741,
      "value": 176
    },
    {
      "time": 1578389678.253741,
      "value": 187
    },
    {
      "time": 1578389679.253741,
      "value": 150
    },
    {
      "time": 1578389680.253741,
      "value": 190
    },
    {
      "time": 1578389681.253741,
      "value": 178
    },
    {
      "time": 1578389682.253741,
      "value": 171
    },
    {
      "time": 1578389683.253741,
      "value": 198
    }
  ],
  "55": [
    {
      "time": 1578389673.253741,
      "value": 194
    },
    {
      "time": 1578389674.253741,
      "value": 156
    },
    {
      "time": 1578389675.253741,
      "value": 170
    },
    {
      "time": 1578389676.253741,
      "value": 171
    },
    {
      "time": 1578389677.253741,
      "value": 153
    },
    {
      "time": 1578389678.253741,
      "value": 165
    },
    {
      "time": 1578389679.253741,
      "value": 179
    },
    {
      "time": 1578389680.253741,
      "value": 177
    },
    {
      "time": 1578389681.253741,
      "value": 154
    },
    {
      "time": 1578389682.253741,
      "value": 150
    },
    {
      "time": 1578389683.253741,
      "value": 191
    }
  ]
}

[Manoj Mohan]

@mwick,

Please take a look at this JSFiddle.

—-
Manoj Mohan
Team CanvasJS