CODEWITHSUNDEEP
javascriptperformancejqchart
Mahendra
Mahendra

Reputation: 457

How to refresh jqChart line or bar chart without redrawing the whole chart but draw for the last new point added

I have a jqChart line chart and I want the chart data to be changed periodically as received from a real time data source like an ajax call . That works, but the problem is the line chart redraws the whole chart every time. Think of a situation I have lakhs of points already drawn and couple of points are being added every second(or few miliseconds) and it tries to draw the whole chart every time.

How can I update or reload the chart without drawing the whole thing again? Is there any property value to be set?

Chart data changes according to an setInterval call simulating an ajax scenario as below:

chart.html

<!DOCTYPE html>
<html>
<head>
    <title>
    Line Chart : update chart 
</title>
  <link rel="stylesheet" type="text/css" href="css/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" media="screen" 
       href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/smoothness/jquery-ui.css" />
    <script src="js/jquery-3.6.0.js" type="text/javascript"></script> 
    <script src="js/jquery.jqChart-4.1.0.js" type="text/javascript"></script> 
    <script src="js/jquery.jqRangeSlider.min.js" type="text/javascript"></script> 
    <script src="js/jquery.mousewheel.js" type="text/javascript"></script>
     <script src="chart.js" type="text/javascript"></script>
    
    <script lang="javascript" type="text/javascript">
  
    </script>

</head>
<body>
    <div>
          <div id="selector" style="width: max; height: max;"></div>  
    </div>
</body>
</html>

chart.js


var logdata = [[]];
 



$(document).ready(function () {

    // adding a million datapoints initailly
    for (var i = 0; i < 1000000; i++) {
        yValue = Math.round(Math.random() * 100);
        logdata.push([new Date(), yValue]);
    }

    initializeChart();
    setInterval(updateChart, 100);
    function initializeChart() {
        $('#selector').jqChart({
            title: {
                text: 'Chart : with update '
            },
            axes: [
                {
                    type: 'category',
                    location: 'bottom',
                    zoomEnabled: false,
                    minimum: 0,
                    maximum: 100
                },
                {
                    'type': 'dateTime',
                    'location': 'bottom'  
                    'lineWidth': 2
                }
            ],
            series: [
                {
                    title: 'update',
                    axisY: 'right',
                    "type": "line",
                    "strokeStyle": "#139346",
                    "fillStyle": "#139346",
                    "lineWidth": 3,
                    "markers": null,
                    "showInScene": true,
                    data: logdata
                }
            ]
        });
    }

    function updateChart() {

        var series = $('#selector').jqChart('option', 'series')
        var yValue = Math.round(Math.random() * 100);

        // remove one element if size grows beyond the limit          
        if (series[0].data.length > 1000000) {
            series[0].data.splice(0, 1);
        }
        // add a new element 
        series[0].data.push([new Date(), yValue]);
        
        $('#selector').jqChart('update');
    }

});

I have tried this above code sample and I expect the chart points to be drawn diferentially rather than being drawn the whole chart each time.

Upvotes: 0

Views: 47

Answers (0)

Related Questions