Redrawing jqPlot

Question

I am working with a jqPlot and was wondering if theres a way to resize/redraw it when someone changes the window size. I know there is a redraw function but im not sure how to really invoke it... Can someone give me some pointers 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 an array thats populated right before this code and chart1 is the div where the chart is plotted.

Any ideas?

Thanks,

Craig

Answered before here: http://stackoverflow.com/q/7212922/ – aknosis Mar 15 '12 at 16:07 — aknosis, Mar 15 '12 at 16:07

score 8 · Answer 1 · answered Apr 12 '12 at 17:42

This page on resizable plots is helpful: http://www.jqplot.com/deploy/dist/examples/resizablePlot.html

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

First, assign your plot 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 there it will rescale the axes as well (you do lose any min/max you may have set though). See this page for more info on replot: http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot.

score 2 · Answer 2 · answered Jun 24 '15 at 09:52

I used

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

so it doesn't keep replotting for every pixel, but rather at the end of the resize.

score 0 · Answer 3 · answered Mar 24 '12 at 09:14

0

Normally jqplot chart occupies the full area which the chart div ID holds. So try to find a way which re-size the div and redraw the chart calling redraw on plot object.

answered Mar 24 '12 at 09:14

Juliyanage Silva

2,529
1
21
33

Redrawing jqPlot

3 Answers3