CODEWITHSUNDEEP
jqueryjsonflot
csm232s
csm232s

Reputation: 1660

Multiple time charts with jQuery flot

I am attempting to display this months (chart 1) and last months (chart 2) visitor count on one chart with Flot. I currently have chart 1 working, but I'm not sure how to overlay with with chart 2 due to the x-axis (date).

JSON Data

Current working code:

$.getJSON('jsondata.txt',function(json){
    var visits = [json.visits];
    var options = {
        xaxis: {
            mode: "time",
        },
        grid: { hoverable: true, clickable: true },
        lines: { show: true },
        points: { show: true }
    }
    var plot = $.plot($('.chart'),visits,options);      
});

Upvotes: 0

Views: 2251

Answers (1)

Ryley
Ryley

Reputation: 21226

What you need is to explore the xaxes array/option in flot. From the API.txt:

Here's an example of configuring a single x axis and two y axes (we can leave options of the first y axis empty as the defaults are fine):

{
 xaxes: [ { position: "top" } ],
 yaxes: [ { }, { position: "right", min: 20 } ]   
}

So in your case, instead of defining xaxis, you specify something like this:

xaxes: [  { mode: "time" }, { mode: "time" } ]

And then you'll need series objects instead of just arrays, and assign each one to a different axis:

var visits = { 
    data: json.visits,
    xaxis: 1
};
var prevVisits = { 
    data: json.prevVisits,
    xaxis: 2
};

Finally, instead of plotting just visits, you would plot [visits,prevVisits]

See it in action here: http://jsfiddle.net/ryleyb/SBrkW/

Upvotes: 1

Related Questions