Flot chart won't draw my points

Question

My problem lies here in this picture. I am trying to draw a graph with sensor data as my points (X,y). When the webpage loads it reads a csv files and sends this data to an ajax call from my codebhind. This is what my code behind is returning:

var myData = new Stats { 
                Time = dataContainer.time,
                LhXVals = dataContainer.lhXVals,
                LhYVals = dataContainer.lhYVals,
                LhZVals = dataContainer.lhZVals,
                RhXVals = dataContainer.rhXVals,
                RhYVals = dataContainer.rhYVals
            };

Here is what my Stats class looks like. I parse the data then store it in Lists.

I then send this to the ajax call. Here is my success function for the ajax:

        var time = new Array();
        var lhXVals = new Array();
        var cumulative = new Array();
        var data2;

success: function (result) {
                        time = result.d.Time; //Time is a List<double>
                        lhXVals = result.d.LhXVals; //Left-Hand-X-Values is a List<double>, both are the same size

                        //check if time and lhXVals are empty, if not proceed
                        if (time.length > 0 || lhXVals.legnth > 0) {
                            for (var i = 0; i < time.length; ++i) {
                                //only grabbing little bit of data just to test, 
                                //only taking first 2 elements
                                if (i == 6)
                                    break;
                                //use the time data ex:(510.2838439) as my X-axes
                                //use the left-hand-X-Values ex:(23.9384384) as my Y-axes
                                debugger;
                                cumulative.push([parseFloat(time[i]), parseFloat(lhXVals[i])]);//data2 was a manually populated example i used before
                                data2 = [[4.53123342, 0], [4.9039293, 24.89323233], [6, 0], [6, -12.134], [8, 0], [8, 6.932]];

                                //an index in the "cumulative" array would look like this:
                                // [0]: [510.2838439,23.9384384]
                            }
                        }
                        updateOnce(cumulative);

the updateOnce(cumulative); function accepts my cumulative array of points which i use in my flot.setData() method to draw the new graph.

function updateOnce(cumulative) {
                debugger;
                plot.setData([cumulative]);
                plot.draw();//draws nothing
            }

However the big problem is that when the plot.draw(); gets drawn there is nothing on my chart and I have no clue why. I've tried everything I can think of. I've tried parsing the data to float, and leaving it but doesn't changing anything. My data in " cumulative" is stored precisely the same as the manual array(var data) I created for graph points but it just won't work and I've been pulling my hair out.

EDIT For the comment below. I initially set it up like this :

function updateOnce(cumulative) {
                debugger;
                plot.setData([cumulative]);
                plot.draw(); //draws nothing
            }

            //implementing getData Last
            var plot = $.plot("#placeholder", [getData()], {
                series: {
                    shadowSize: 0   // Drawing is faster without shadows
                },
                yaxis: {
                    min: -50,
                    max: 50
                },
                xaxis: {
                    show: true
                }
            });

I return data which is a manually set array of points(x,y) so it will draw something first on the graph, which it does. Then when the ajax finally returns some data, I initiate the redraw with the returned data.

Answer 1

If the axes min/max change on a setData call you need to call plot.setupGrid() to recalculate the axeses. From the documentation, bolding mine:

setData(data)

You can use this to reset the data used. Note that axis scaling, ticks, legend etc. will not be recomputed (use setupGrid() to do that). You'll probably want to call draw() afterwards.

You can use this function to speed up redrawing a small plot if you know that the axes won't change. Put in the new data with setData(newdata), call draw(), and you're good to go. Note that for large datasets, almost all the time is consumed in draw() plotting the data so in this case don't bother.

setupGrid()

Recalculate and set axis scaling, ticks, legend etc.

Note that because of the drawing model of the canvas, this function will immediately redraw (actually reinsert in the DOM) the labels and the legend, but not the actual tick lines because they're drawn on the canvas. You need to call draw() to get the canvas redrawn.