Search code examples
jqplot

jqplot resize chart when resizing browser


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.


Solution

  • 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>