CODEWITHSUNDEEP
javascriptflot
tardomatic
tardomatic

Reputation: 2436

Flot: Graph with Date/Time as x axis not plotting correctly

I am trying to display values over time, but no matter what data I try and plot, nothing appears on the graph. JsFiddle here.

See code below. What am I doing wrong?

HTML:

<div id="theGraph"></div>

CSS:

#theGraph{
    height:300px;
    width:500px;
}

Javascript: 

var graphData = [
    [new Date("2015-03-13T08:00").getTime(), 2],
    [new Date("2015-03-15T00:00").getTime(), 3]
];

var options = {
    series: {
        lines: {
            show: true,
            lineWidth: 2
        },
        points: {
            show: true
        }
    },
    lines: {
        show: true
    },
    points: {
        show: true
    },
    yaxis: {
        min: 0,
        max: 5
    },
    xaxis: {
        mode: 'time',
        minTickSize: [1, 'hour'],
        min: new Date("2015-03-13T00:00").getTime(), 
        max: new Date("2015-03-15T08:00").getTime(), 
        timeformat: '%m/%d %H:%M'
    }
};

$.plot($('#theGraph'), graphData, options);

Upvotes: 0

Views: 851

Answers (1)

Shibaji Chakraborty
Shibaji Chakraborty

Reputation: 75

$.plot method takes the place holder / id of your div where you want to plot the graph. $.plot('#id',.....) also do the same.

And only one problem in your code $.plot(). The argument 'graphData' should be in [] braces as $.plot expects array of series data.

Modified Code:

$.plot($('#theGraph'), [graphData], options);

You can mention may data series to draw multiple lines in flot.

 var d1 = [], d2 =[], d3 =[];
 $.plot($('#theGraph'), [d1,d2,d3], options);

Upvotes: 1

Related Questions