Create a Real time chart updated via ajax call that shows time accurately

[Andrew Mclaughlan]

I am trying to use Flot to create a real time chart that is updated via ajax. I am basing my code on the following: http://www.jqueryflottutorial.com/tester-11.html

Is this out of date?

I was wandering why the time axis along the bottom back to front? And I have also noticed that it does not keep time accurately and it gets further out of sync the longer its left running. Can this be overcome?

I want to create a server monitoring chart similar to one i linked which will be updated via calls to a php script does anybody have a better example that one I posted?

[Ced]

That example is creating timestamps by incrementally adding the update interval.  This will add up tiny errors over time which explains why the plot gets out of sync.
The timestamp should come from the server along with each new value.

If you want to reverse the direction of the x-axis, you can define transform functions in your axis options.  See documentation here.

[Ced]

The initData function of that example also produces data with incorrect timestamps in the future.  It starts at the current timestamp and fills the plot with data by adding the update interval to each X value.
This means every time it creates a new data point, it is ~8.33 minutes in the future.

Here's a similar example I posted recently.  Although this example doesn't use ajax, at least it uses the current timestamp for all new data and it uses a better method to remove old points.
https://jsfiddle.net/vkvmpL6o/

[Andrew Mclaughlan]

I have sorted out most of the problems with that code by doing the following:

changed now += updateInterval to now = new Date().getTime(); in the update(_data)function so that new data points always have the current time.

Added now -= totalPoints * updateInterval; at the beginning of the initData() function so that the current time is at the right end of the x-axis instead of the left end.

 change the tickFormatter function to:

tickFormatter: function (v, axis) {
        var date = new Date(v);
        if (date.getSeconds() == 0) {
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            return hours + ":" + minutes;
        } else {
            return "";
        }
    },

and and directly call GetData(); at the end of the document.ready() function (instead of the setTimeout(GetData, updateInterval);

 

But I would like to see if there is some way I could smooth out the chart? Would it be possible to create a smooth flowing chart similar to the one on the flot charts homepage using Ajax? I realise its been redrawn every time it updates so what about if I provided an array of data ahead of time on the chart as in to give it a head start then just keep updating to keep it smooth?

[Andrew Mclaughlan]

Why does it start off with wide grid points then they gradually get shorter as the data comes in? Anyway to avoid that?

On Tuesday, 9 August 2016 15:42:21 UTC+1, Andrew Mclaughlan wrote:

[Ced]

Here's an updated example for you: https://jsfiddle.net/vkvmpL6o/1/

Rather that write your own tickFormatter function, I think the option you're looking for is:

xaxis: {
 minTickSize: [1, "minute"]
}

You can manually set the xaxis minimum each update.  This avoids you needing to generate data on initialization.

options.xaxis.min = now - DATA_AGE_LIMIT;

Lastly, I would not recommend making the plot scroll smoothly.  The scrolling example on Flot's homepage updates every 40ms which is 25 times per second.
Since you're using ajax to poll the server, this would mean 25 requests to the server every second.  I don't see any benefit to doing this other than being purely cosmetic, and is in fact detrimental to your server's ability to handle its usual load.