Points not updating at given interval in flotJS : Javascript

Question

So I am plotting a flotjs chart using Random Data generation. The chart is working fine and smooth. But the problem arises in the speed of the chart data points rendering. What I want is to generate over 100 points in one second(125 to be exact), that's why I have set the updataInterval variable to 1000/130.

So as per the Calculation 130 points should be displayed in One Second. But as I can see the Console, as well as the chart render. The plotting speed seems to be very less. around 40 to 50 points per second.

I precisely want the chart to plot around 125 points in 1 second.

What I Have tried using the Sources so far is...

$(function () {

    var data = [];
    var dataset;
    var totalPoints = 1000;
    var updateInterval = 8;
    var now = new Date().getTime();
    var startDate = new Date().getTime();

    for (var i = 0; i < totalPoints; i++) {
        data.push([now - (totalPoints - i) * updateInterval, null]);
    }

    function GetData() {
        if (data.length > totalPoints) {
            data.shift();
        }
        var y = Math.random() * 100;
        var temp = [now += updateInterval, y];
        console.log(temp);      
        data.push(temp);
    }

    var options = {
        series: {
            lines: {
                show: true,
                lineWidth: 1,
               // fill: true
            }
        },
        xaxis: {
            mode: "time",
            tickSize: [2, "second"],
            tickFormatter: function (v, axis) {
                var date = new Date(v);
                if (date.getTime() < startDate) {
                    return "";
                } else if (date.getSeconds() % 20 == 0) {
                    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                    return hours + ":" + minutes + ":" + seconds;
                } else {
                    return "";
                }
            },
            axisLabel: "Time",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10
        },
        yaxis: {
            min: 0,
            max: 100,
            tickSize: 5,
            tickFormatter: function (v, axis) {
                if (v % 10 == 0) {
                    return v + "%";
                } else {
                    return "";
                }
            },
            axisLabel: "CPU loading",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 6
        },
        legend: {
            labelBoxBorderColor: "#fff"
        },
        grid: {
            backgroundColor: "#000000",
            tickColor: "#008040"
        }
    };

    $(document).ready(function () {
        GetData();

        dataset = [{
            label: "CPU",
            data: data,
            color: "#00FF00"
        }];

        $.plot($("#placeholder"), dataset, options);

        function update() {
            GetData();
            $.plot($("#placeholder"), dataset, options)
            setTimeout(update, 1000/130);
        }

        update();
    });
});

I have also created a fiddle for it.

as you can see the above code. I set the Update interval to 1000/130 to plot 130 data points in one second. but the data rendering is much slower than it's supposed to be.

Please Help me out, if this is possible in flotjs charting library. if not I am open to any other charting library suggestion, provided the data flow visualization should be same as the above fiddle example.

@sayalok . I corrected the fiddle please check the above question's link . or just click https://jsfiddle.net/abnitchauhan/yq3Lp0hz/7/ — debRoo, Sep 17 '19 at 11:37

score 0 · Answer 1 · answered Sep 17 '19 at 11:40

There many tricks to increase your refresh speed, like using requestAnimationFrame instead of setTimeout (Why is requestAnimationFrame better than setInterval or setTimeout), or compute all your point before trying to refresh (there two different logic, maybe you should separate them in your code).

The major improvement is do not create a new plot at each refresh, but only refresh existing as you can show on this topic: Refresh/Reload Flot In Javascript

Points not updating at given interval in flotJS : Javascript

1 Answers1