Redrawing jqPlot

Question

I am working with jqPlot and wondering if there is a way to resize / redraw it when someone resizes the window. I know that there is a redraw function, but I'm not sure how to really call it ... Can someone give me some guidance on how to do this?

Here is my code:

$.jqplot('chart1', [line1], { title:'Users Per Day', axes:{ xaxis:{ renderer:$.jqplot.DateAxisRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer , // tickInterval:'1 week', tickOptions:{ formatString:'%b %#d, %y', angle:-30 } }, yaxis:{ tickOptions:{ formatString:'%.1f' } } }, highlighter: { show: true, sizeAdjust: 7.5 }, cursor: { show: false /*show: true, zoom: true, showTooltip: false */ } }); 

'line1' is the array that is populated right before this code, and chart1 is the div where the chart is displayed.

Any ideas?

Thanks,

Craig

Answer 1

This resizable paragraph page is useful: http://www.jqplot.com/deploy/dist/examples/resizablePlot.html

This is how I solved your specific problem for the project I'm working on (I just use your code as an example):

First assign your graph to a variable:

 plot = $.jqplot('chart1', [line1], { title:'Users Per Day', axes:{ xaxis:{ renderer:$.jqplot.DateAxisRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer , // tickInterval:'1 week', tickOptions:{ formatString:'%b %#d, %y', angle:-30 } }, yaxis:{ tickOptions:{ formatString:'%.1f' } } }, highlighter: { show: true, sizeAdjust: 7.5 }, cursor: { show: false /*show: true, zoom: true, showTooltip: false */ } }); 

Then on your page add this function:

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

With resetAxes, it will also change the scale of the axes (you will lose any min / max that you may have set). See this page for more information about replot: http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot .

Answer 2

I used

  var timer; $(window).resize(function () { clearTimeout(timer); timer = setTimeout(function () { plot.replot({}); }, 100); }); 

so that it does not keep repeating for each pixel, but rather at the end of the resizing.

Answer 3

Typically, a jqplot diagram occupies the entire area that contains the div div identifier. Therefore, try to find a way that resizes the div and redraws the chart that calls to redraw the plot object.