FlotChart setupGrid() doesn't update X-Axis

Question

I am working on a realtime chart and I am pushing new data to array but even after calling setupGrid() and draw(), the chart doesn't update X-Axis data.

this.plot = $.plot($("#chart"), [this.plotData], this.plotOptions);

In methods, I am doing this:

function updateChart() {
    this.plotData.push([this.plotIdx, this.serverinfo.cpu])
    this.plot.setData([this.plotData]);
    this.plot.setupGrid();
    this.plot.draw();
    this.plotIdx++;

    setTimeout(() => this.updateChart(), 10000);
} 

I am not sure what am I doing wrong

Answer 1

Solved it myself. Looks like setupGrid() doesn't calculate dataset and update axes automatically. You need to update x-axis range yourself. So, to solve the problem, what I did is this:

function updateChart() {
    this.plotData.push([this.plotIdx, this.serverinfo.cpu])
    this.plot.setData([this.plotData]);

    //Used API to manually update x-axis range and it works
    var axes = this.plot.getAxes();
    axes.xaxis.options.max = this.plotIdx;

    this.plot.setupGrid();
    this.plot.draw();

    this.plotIdx++;

    setTimeout(() => this.updateChart(), 10000);
} 

I used Flot's getAxes() API to get axes and updated x-axis' max range and it works. :)

Special thanks to this JSFiddle: https://jsfiddle.net/jfazler/gQaUz/