How to resize a Flot graph when its containing div changes size

Question

I'm using the Flot graphing library jQuery plugin and I haven't found a good way to handle resizing the graph when it's containing <div> changes size (for example, due to window resizing). When handling the onresize event, I've made sure that the width and height of the containing <div>are updated to the correct size and then tried calling both setupGrid and draw on the plot object but with no effect. I've had some success with the approach of just removing and readding the containing <div> and replotting the graph in it. However, this seems to be prone to getting stuck in infinite resize event loops if I have to add other <div> elements to the document at the same time (like for tooltips for the graph) as I'm guessing those can trigger resize events as well? Is there a good way to handle it that I'm missing?

(I'm also using ExplorerCanvas for IE in order to be able to use Flot, if that might have anything to do with it. I haven't really tried in any other browsers yet)

Shang

Answer 1

I have found just binding to the resize event on the window and calling plot works really well. For example I have my data and options stored in variables on the page. Then I setup this on $(document).ready():

$(window).resize(function() {$.plot($('#graph_div'), data, opts);});

Fong

Here's a working example from their site: people.iola.dk/olau/flot/examples/resize.html – Dormancy

I actually like the way you have done this. It removes the need for the resize plugin too. The only downside i have noticed is a slight judder when resizing but nothing major. Thanks! – Austerlitz

Answer 2

The latest version of the flot API docs, at least, describes a resize event which works as advertised.

resize()

Tells Flot to resize the drawing canvas to the size of the placeholder. You need to run setupGrid() and draw() afterwards as canvas resizing is a destructive operation. This is used internally by the resize plugin.

Glutamine

plot.resize(); plot.setupGrid(); plot.draw(); works for me where plot is: var plot = $.plot($('#graph_div'), data, opts); – Neelyneeoma

Answer 3

I just found a solution to this myself. I've wrapped my call to $.plot() so that may be the original cause of my specific problem but flot refused to resize in a timely manner even when I used the jQuery resize event. Here's my code change that fixed everything:

$(window).resize(function() {
    // erase the flot graph, allowing the div to shrink correctly
    $('#graph_div').text(''); 

    // redraw the graph in the correctly sized div
    $.plot($('#graph_div'), data, opts);
});

Basilius

Answer 4

The easiest way is to use the resize plugin. It's demonstrated here: http://www.flotcharts.org/flot/examples/resize/

But you just add

<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>

Penetrating

Answer 5

I seem to have found a solution, although I'm not entirely sure why it works. I'm still using the approach of removing and readding the containing <div> from the document and replotting the graph in it. However where previously I had been doing

window.onresize = redrawFunc;  //redrawFunc removes and readds the containing div and replots

which seemed to be prone to getting into what seemed to be an infinite loop depending on what the redrawFunc did to the document.

Instead I tried using jQuery's resize binding

$(window).resize = redrawFunc;

So far, no matter what other changes I make to the document in the redrawFunc I haven't had a problem with this approach getting stuck in a loop yet. I'm just not sure why.

Shang