How to make flot responsive?

Question

In the following fiddle:

How can I make the graph's width change if the window width changes?

code:

$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
    d1.push([i, Math.sin(i)]);

var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

$.plot($("#placeholder"), [ d1, d2, d3 ]);
});

Do you need Flot to be responsive to the window size when opened or to resize with the window? — Spencer, Jun 21 '13 at 19:33

score 22 · Accepted Answer · edited May 23 '17 at 12:18

22

Try something like this:

Flot will auto draw to the container it's in. So if your div is responsive Flot will be responsive.

http://jsfiddle.net/9x7aJ/2029/

then all you have to do is redraw the flot if your window resizes:

You can watch to see if the window resizes with:

    window.onresize = function(event) {
    ...
}

(see: JavaScript window resize event)

edited May 23 '17 at 12:18

Community

1
1

answered Jun 21 '13 at 19:36

Spencer

914
13
22

This works great but in my case you also need to clean the chart everytime. Example code `window.onresize = function(event) { plot2.destroy(); //and then plot2 = $.jqplot........}` – baron_bartek Jul 31 '20 at 09:29

score 22 · Answer 2 · answered Feb 24 '14 at 11:44

22

Also there's a official flot resize plugin

http://people.iola.dk/olau/flot/examples/resize.html

answered Feb 24 '14 at 11:44

aqm

2,718
21
29

2

This seems like the much simpler, native solution. I tried to do it manually, similar to the accepted answer, but I had issues presumably because my flot chart was in an angular directive. Using the resize plugin fixed all my issues instantly. – Mordred Jun 23 '14 at 17:27
1

would definitely also recommend upgrading to the latest flot (0.8.3 as of writing), it has some excellent IE8 error fixes, which i had to previously monkey patch the official flot with try-catching – aqm Jun 24 '14 at 09:34

score 1 · Answer 3 · answered Dec 06 '16 at 04:48

1

Just include jquery.flot.resize.min.js script from https://github.com/flot/flot in your page. It will become responsive.

answered Dec 06 '16 at 04:48

Arif Warsi

11
1

score 1 · Answer 4 · answered May 03 '17 at 04:23

I had the same problem and the solution was:

<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.resize.js"></script>
<script src="./jquery.flot.axislabels.js"></script>

score 0 · Answer 5 · edited Oct 14 '17 at 19:36

0

Just use some css. Any modern browser can use (inline, stylesheet):

<div id="chart" style="width: 100%!important"></div>

edited Oct 14 '17 at 19:36

Nagy Vilmos

1,738
18
41

answered Oct 14 '17 at 18:45

Logan Butler

1

How to make flot responsive?

5 Answers5

Linked