CODEWITHSUNDEEP
graphflot
Andy Gardner
Andy Gardner

Reputation: 31

Simple flot graph not updating

I'm trying to create a simple flot line graph and update it on a timer and I only want to display the last 10 points of data. But I only ever see the axis and not the graph plot. Also, I see the x axis change with the extra data but the y axis remain the same and do not correspond to the additional data. My code is as following:

var dataSet = [];
var PlotData;
var x = 0;
var y = 0;
var plot = null;

function EveryOneSec()
{
    if (dataSet.length == 10)
    {
        dataSet.shift();
    }
    x++;
    y += 2;
    dataSet("[" + x + ", " + y + "]");

    PlotData = { label: "line 1", data: [ dataSet ], color: "green" };

    if (plot == null)
    {
        plot = $.plot($("#placeholder"), [ PlotData ], { lines: {show: true}, points:          {show: true}});
    }
    else
    {
        plot.setData([ PlotData ]);
        plot.setupGrid();
        plot.draw();
    }
    setTimeout(EveryOneSec, 1000);
}

I have tried with and without the call to setupGrid() but this makes no difference to the axis display or graph plot. The x axis stop changing when I get the ticks 0 to 9 plotted even though x is incrementing past that, and the y axis remains static. I believe the code is correct above in terms of passing arrays of data, so why is the graph not appearing?

Upvotes: 3

Views: 1279

Answers (1)

Ryley
Ryley

Reputation: 21226

OK, you have two problems here.

First, you're not appending to your dataSet correctly. I'm not sure what the syntax you've got is doing, but what you need in each slot of the array is [x,y], which you can achieve with Array.push.

This:

dataSet("[" + x + ", " + y + "]");

Should look like this:

dataSet.push([x , y]);

And when you create your series object PlotData, you don't need to store your data inside of another array, so instead of this:

PlotData = { label: "line 1", data: [ dataSet ], color: "green" };

You need this:

PlotData = { label: "line 1", data:  dataSet , color: "green" };

See it working here: http://jsfiddle.net/ryleyb/qJEXH/

Upvotes: 2

Related Questions