Re: Multiple charts in the same plot

[Ced]

That link didn't work for me.

It is definitely possible to have multiple graphs on one page.  I don't really understand what you mean by "multiple charts in the same plot."
You can have multiple series in the same graph, and you can also have multiple graphs on one page.
You can align multiple graphs on the page using html and css to set the appropriate div size and position.  The graphs will fit those divs accordingly.

This example shows two graphs on the same page.
http://people.iola.dk/olau/flot/examples/visitors.html

Hope this helps.

[Michael Wood]

On 4 November 2012 06:05, Ced <leroux...@gmail.com> wrote:
>
> That link didn't work for me.
>
> It is definitely possible to have multiple graphs on one page. I don't
> really understand what you mean by "multiple charts in the same plot."
> You can have multiple series in the same graph, and you can also have
> multiple graphs on one page.
> You can align multiple graphs on the page using html and css to set the
> appropriate div size and position. The graphs will fit those divs
> accordingly.

I found that I needed to set the Y-axis label width as well to make
sure they lined up.

Like the docs say:

"labelWidth" and "labelHeight" specifies a fixed size of the tick
labels in pixels. They're useful in case you need to align several
plots.

> This example shows two graphs on the same page.
> http://people.iola.dk/olau/flot/examples/visitors.html
>
> Hope this helps.

--
Michael Wood <esio...@gmail.com>

[Ced]

Here's how you set the crosshair on multiple graphs.

This example assumes each of your graph div have id="subplotX" like this:

<div id="subplot1" style="width:400px;height:250px"></div>
<div id="subplot2" style="width:400px;height:250px"></div>

etc...

Make sure your plot options enable the crosshair:

var options = {
  crosshair: {
    mode: 'x'
  }
}

var sp1 = null; // subplot 1
var sp2 = null; // subplot 2

sp1 = $.plot($('#subplot1'), sp1data, sp1opts);
sp2 = $.plot($('#subplot2'), sp2data, sp2opts);

$('[id^=subplot]').bind('plothover', function (evt, pos, item) {
  sp1.setCrosshair(pos);
  sp2.setCrosshair(pos);
});

$('[id^=subplot]').bind('mouseleave', function (evt) {
  sp1.clearCrosshair();
  sp2.clearCrosshair();
});

[Pal Szasz]

Hi!

Thank you all for the answers! I don't know why the screenshot link doesn't work anymore, but basically it was the screenshot of the battery graph from an android phone (Settings->Battery)

I will try to add multiple plots with fixed labels.

/Pal

--
/Pal Szasz

[kpd]

Pal,

Here is the key part from a sample that plots a bar chart over a filled-line chart:

        myFlot = $.plot($("#placeholder"), [
                {data:result.total_meters, color:"#3515b0", lines:{show:true, fill:true}, points:{show:false}, bars:{show:false, barWidth:4*24*60*60*1000}, yaxis:2     },
                {data:result.data, color:"#14d100", lines:{show:showLines}, points:{show:false}, bars:{show:showBars, barWidth:4*24*60*60*1000}     }
            , 
            ],
            {
xaxis: { mode: "time",  timeformat:"%m/%d<br>%y", color:"#ffffff"  },
yaxis: {min:0, tickFormatter: commaFormatter, color:"#ffffff"},
y2axis: {tickFormatter: commaFormatter, color:"#ffffff"},
crosshair: { mode: "xy", color:"#ffd100" },
grid: { backgroundColor: { colors: ["#444", "#777"] }, hoverable:true, mouseActiveRadius:16 },
});