CODEWITHSUNDEEP
javascriptjqueryflot
CaptainBli
CaptainBli

Reputation: 4201

FLOT is only charting one value or is not drawing the whole graph

My Flot chart is not graphing all my points. It seems that the graph is only showing one of the values, just one bar in this case (no phone company jokes here). Here is the initializer:

var mMainPlot= $.plot("#mainPlot", [{ data: getRandomData(), color: "rgba(20,60,200,0.9)" }], {
    bars: { show: true, barWidth: 0.8, fill: true, fillColor: "rgba(20,60,200,0.5)" },
    series: {
        color: "rgba(0,0,60,1)",
        lineWidth: 0,
        shadowSize: 4   //Faster w/o shadows
    },
    yaxis: {
        min: 20,
        tickSize: 20,
        tickFormatter: function (point) {
            return (point % 40 === 0) ? "" : point.toString();
        },
        max: 140
    },
    xaxis: {
        show: false
    },
    crosshair: {
        mode: "x", lineWidth: 12
    },
    grid: {
        hoverable: true, autoHighlight: false
    }
});

On a regular update, I query data from the server:

function update() {
    mMainPlot.setData([getOutsideData(LiveData)]);
    mMainPlot.draw();
}

function getOutsideData(values) {
    var largestVal = 0;
    var res = [];
    var i = 0;
    for (i = 0; i < values.length; i++) {
        res.push([i, values[i]]);
        if (values[i] > largestVal)
            largestVal = values[i];
    }
    return res;
}

where getOutsideData returns: [Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]]. As the plot is a bar graph it only shows one bar. I can debug the functions and even the mMainPlot plot data holds the updating values that come from the server and changes with every update.

Upvotes: 0

Views: 846

Answers (1)

CaptainBli
CaptainBli

Reputation: 4201

As it turns out, one does not need to call setupGrid() every time an update to the grid occurs. Simply calling draw() is sufficient as long as the graph data is the only changing variable. As stated in the comments to the question, setupGrid() should be called any time something other than the data is updated/changed.

In my case, the data was the only thing changing but the problem came from the initialization of the plot. 

var mMainPlot= $.plot("#mainPlot", [{ data: getRandomData(), color: "rgba(20,60,200,0.9)" }], {

This built up my plot but the getRandomData() only returned a single data point. So the plot only continued to display a single data point. I updated the function to return the 13 points that I wished to have when the real data started streaming and it worked.

Moral: If you want to update your charts, be sure to initialize your plot correctly so that it will have the right number of data points to begin with. If these change then call setupGrid() again to clean up the mis-aligned chart.

Upvotes: 1

Related Questions