Dynamic x-axis on a real-time flot chart?

Question

Is there a way to update the x-axis on a real time flot chart?

I want something like this -> (http://www.flotcharts.org/flot/examples/realtime/index.html) but as you can see, there are no values on the x-axis..

So, is there a way to shift the x-axis values as the chart shifts?

Thanks in advance!

Answer 1

You first need to show the x axis:

var plot = $.plot("#placeholder", [ getRandomData() ], {
    xaxis: {
        show: true
    }
});

Then on every data update you need to update the grid as well:

function update() {
    plot.setData([getRandomData()]);
    plot.setupGrid(); // updating the grid
    plot.draw();
    setTimeout(update, updateInterval);
}

Check this plunker for example.