Want to use push to add two line plots

[ispybadguys]

I have a chart with the following code

   
      var chart = new CanvasJS.Chart("chartContainer",
                                     {
                                          animationEnabled: true,
                                          zoomEnabled: true,
                                          theme: "dark2",
                                          title: {
                                            text: "All-Sky Stars"
                                          },
                                          axisX:{
                                            title: "time",
                                            gridThickness: 2,
                                            interval:30,
                                            intervalType: "minute",
                                            interlacedColor: "#292949",
                                            labelAngle: -60
                                          },     axisY: {
                                            logarithmic: false,
                                            title: "Number of Stars",
                                            titleFontColor: "#6D78AD",
                                            lineColor: "#6D78AD",
                                            gridThickness: 0,
                                            lineThickness: 1,
                                            labelFormatter: addSymbols
                                          },
                                                axisY2: {
                                            title: "Percent Clouds",
                                            titleFontColor: "#51CDA0",
                                            logarithmic: false,
                                            lineColor: "#51CDA0",
                                            gridThickness: 0,
                                            lineThickness: 1,
                                            labelFormatter: addSymbols
                                          },
                                      data: [
                                      {
                                       xValueType: "dateTime",
                                       dataPoints: []
        }
        ]
      });
    chart.render();
     // Check if the MQTT topic is 'canvasJS' to add point to chart
      if (topic === 'canvasJS') {
        var dataPoint = JSON.parse(message.payloadString);
        updateChart(dataPoint);
        chart.render();
      } 
 // Update the chart with new data
    function updateChart(dataPoint) {
        chart.options.data[0].dataPoints.push(dataPoint);
//        chart.render();
    }
    function addSymbols(e) {
      var suffixes = ["", "K", "M", "B", "T"];
      var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0);
      if (order > suffixes.length - 1)
        order = suffixes.length - 1;
      var suffix = suffixes[order];
      return CanvasJS.formatNumber(e.value / Math.pow(1000, order), "#,##0.##") + suffix;
  }

My JSON looks like this {“x”:1687209355000,”y”:0}
I want to add another series to this chart. What does the push statement look like to add an additional series point?

Also can I have a JSON that has most Y values like {“x”:1687209355000,”y1″:10,”y2″:40}

Any help is much appreciated! Your canvasJS has let me make a great chart.

Kurt

[Thangaraj Raman]

@ispybadguys,

The datapoint object only accepts x and y values as of now. Your JSON can be in this format – {“x”:1687209355000,”y1″:10,”y2″:40}, however, you will have to parse the JSON data in the format accepted by CanvasJS and then pass them as datapoints to the chart. Please check the code snippet below:

for(var i = 0; i < jsonData.length; i++) {
    chart.options.data[0].dataPoints.push({x: jsonData[i].x, y: jsonData[i].y1})
    chart.options.data[1].dataPoints.push({x: jsonData[i].x, y: jsonData[i].y2})
}

—
Thangaraj Raman
Team CanvasJS