canvasjs shift with json database

[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();    
  

};

[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