Home forums Chart Support Multiple Spline Chart from nested JSON

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #27917

    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
        }
      ]
    }
    #27940

    @mwick,

    Please take a look at this JSFiddle.

    —-
    Manoj Mohan
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.