Home forums Using CanvasJS canvasjs shift with json database

This topic contains 1 reply, has 2 voices, and was last updated by  Manoj Mohan 2 weeks, 1 day ago.

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

    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();    
      
    
    };
    #27320

    @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

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

You must be logged in to reply to this topic.