canvasjs shift with json database

• November 4, 2019 at 6:25 pm #27301
  
  mahmadakbar

  hi, im try to make dynami data like https://canvasjs.com/html5-javascript-dynamic-chart/, but i have some problem to sift my data, my data just continue to grow but not shifting

  this my js code

  window.onload = function () {
      var dataPoints1 = [];
      var dataPoints2 = [];
  
      var chart = new CanvasJS.Chart("chartContainer", {
          exportEnabled: true,
          zoomEnabled: true,
          theme: "light2",
          title:{
              text: "Grafik Suhu dan Kelembapan"
          },
          toolTip: {
              shared: true,
          },
          legend:{
              cursor:"pointer",
              verticalAlign: "bottom",
              horizontalAlign: "left",
              dockInsidePlotArea: true,
              itemclick: toogleDataSeries
          },
          axisX:{
              labelFontSize: 15,
              valueFormatString: "HH:mm:ss",
              crosshair: {
                  enabled: true,
                  snapToDataPoint: true
              }
          },
          axisY: {
              interval: 10,
              valueFormatString: "0.0#",
              crosshair: {
                  enabled: true
              }
          },
          data: [{
              type: "line",
              name: "Kelembapan",
              markerSize: 7,
              xValueFormatString:"DD MMM HH:mm:ss <br/>-------------------------",
              yValueFormatString:"0.0'%'",
              showInLegend: true,
              lineDashType: "dash", 
              dataPoints: dataPoints1
          },
          {
              type: "line",
              name: "Suhu",
              markerSize: 7,
              color: "#e74c3c",
              yValueFormatString:"0.0'&deg;'C",
              showInLegend: true, 
              dataPoints: dataPoints2
          }]
  
      });    
  
      function toogleDataSeries(e){
          if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
              e.dataSeries.visible = false;
          } else{
              e.dataSeries.visible = true;
          }
          chart.render();
      };
  
      
      var updateInterval = 1000;
      var dataLength = 10;
      function updateChart(){
          function addData (data){
  
              for (var i = 0; i < data.length; i++) {
                  dataPoints1.push({
                      x: new Date(data[i].datta0),
                      y: data[i].datta1
                  });
                  dataPoints2.push({
                      x: new Date(data[i].datta0),
                      y: data[i].datta2
                  });
              }
  
          }
          $.getJSON("http://localhost/graphTest/graph1/data2.php", addData); 
  
          if (dataPoints1.length > dataLength) {
              dataPoints1.shift();
              dataPoints2.shift();
          }
          
          chart.render();         
                  
      };
  
   
      updateChart(dataLength);    
      setInterval(function(){updateChart()}, updateInterval);
  
      chart.render();    
    
  
  };

  November 6, 2019 at 8:50 pm #27320
  
  Manoj Mohan

  @mahmadakbar,

  Can you kindly share a sample project reproducing the issue along with sample data over Google-Drive or Onedrive so that we can look into the code, run it locally to understand the scenario better and help you resolve?

  —
  Manoj Mohan
  Team CanvasJS