Want to use push to add two line plots

• June 20, 2023 at 2:54 am #43134
  
  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

  June 21, 2023 at 6:50 pm #43156
  
  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