Question

I’am trying to construct a time series graph where the x-axes represent time and the y-axes represents a number from [0,100]. I have a live data stream that is providing the [x,y] coordinates for the next time series point. Experimenting with flot I realized every time a plot happens the previous plot is erased leaving us with the new plot only, how can I “append/render” the new points to the old plot.

For example in the following code:

    $(function () {
        var d1 = [];
        for (var i = 0; i < 14; i += 0.5)
            d1.push([i, Math.sin(i)]);

        var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

        // a null signifies separate line segments
        var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];


        $.plot($("#placeholder"), [ d2 ]);
        $.plot($("#placeholder"), [ d1 ]);


    });

d2 will be plotted but then d1 will overwrite d2 plot. How can I append new points to the plot and how can I update x amount of seconds?

Answer 1

are you wanting to graph them side by side. If so this is what you want:

$.plot($("#placeholder"), [ d2, d1 ]);

this will create two series and plot them on top of one another. as for scrolling through the data by one seconds I suggest looking at this example