jqplot resize chart when resizing browser

Question

Is there an easy way to auto-resize a jqplot chart when resizing the browser? I have been looking on Google, and haven't found anything.

Mark · Accepted Answer · 2016-09-23T00:39:54.083

30

Resizing jqplots is discussed here.

To make it work when the browser is resized, bind the replot function up with the window.resize event:

$(window).resize(function() {
      plot1.replot( { resetAxes: true } );
});

Running code:

$(document).ready(function(){
    var plot1 = $.jqplot ('container', [[3,7,9,1,4,6,8,2,5]], {});
    
    $(window).resize(function() {
          plot1.replot( { resetAxes: true } );
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css">
     
<div id="container"></div>

edited Sep 23 '16 at 00:39

answered Jul 21 '12 at 00:38

Mark

106,305
20
172
230

9

Yea this should do +1. In my resize method I also add the below code - just before I call the `replot()`. This way I make sure the `barWidth` will also be rescaled. `$.each(plot.series, function(index, series) { series.barWidth = undefined; }); ` – Boro Jul 23 '12 at 14:23
3

[Sample showing the problem.](http://jsfiddle.net/RNPxQ/22/) [Sample showing the solution.](http://jsfiddle.net/RNPxQ/21/) – Boro Jul 23 '12 at 14:34
@Mark The fiddle doesn't display anything. I added all the jqplot files from https://cdnjs.com/libraries/jqPlot that are embedded in the html of the fiddle and still nothing displays. Can you or someone tell me how to render the fiddle to see the solution?. – Chris22 Sep 23 '16 at 00:31
@Chris22, see updates to question. Moved the example code into a stack snippet. – Mark Sep 23 '16 at 00:40
@Mark thanks. I read that article already and that solution is not what I need. I was hoping to be able to have the pie chart and the legend in separate columns for responsive flow on resize. (the legend to stack vertically under the pie chart on resize). But it doesn't appear possible. I can't put the legend in a column of it's own. – Chris22 Sep 23 '16 at 01:24

score 5 · Answer 2 · answered Nov 21 '13 at 17:41

I've found that using replot doesn't always give consistent results if you've got a lot of options on your graphs. The only way I've found to have complex graphs cope with window resizes is to get brutal and destroy it and rebuild it.

function () {

    var plot;

    var renderGraph = function() {
        plot = $.jqplot('chartId', yourChartData, yourChartOptions);
    }

    renderGraph();

    var resizeGraph = function() {
        if (plot)
            plot.destroy();
        renderGraph();
    }

    $(window).resize(function() {
        resizeGraph();
    });
}

this method worked so much better than attempting to change the size using replot. Sure, we're using a little more resources but it's definitely consistent. Hats off to @Giles — roshambo, Jul 25 '14 at 23:25

jqplot resize chart when resizing browser

2 Answers2