public/javascripts/jqplot/examples/resizablePlot.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Resizable Plots</title>
   7
   8     <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
   9     <link rel="stylesheet" type="text/css" href="examples.min.css" />
  10     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
  11     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
  12
  13   <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
  14     <script class="include" type="text/javascript" src="../jquery.min.js"></script>
  15
  16
  17 </head>
  18 <body>
  19     <div class="logo">
  20    <div class="nav">
  21    <a class="nav" href="../../../index.php"><span>&gt;</span>Home</a>
  22    <a class="nav"  href="../../../docs/"><span>&gt;</span>Docs</a>
  23    <a class="nav"  href="../../download/"><span>&gt;</span>Download</a>
  24    <a class="nav" href="../../../info.php"><span>&gt;</span>Info</a>
  25    <a class="nav"  href="../../../donate.php"><span>&gt;</span>Donate</a>
  26    </div>
  27 </div>
  28     <div class="example-content">
  29
  30     <div class="example-nav">
  31   <a href="point-labels.html">Previous</a> <a href="./">Examples</a> <a href="rotated-tick-labels.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35
  36   <style type="text/css">
  37   body {
  38     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  39   }
  40
  41   p, pre {
  42     margin: 1.5em;
  43   }
  44
  45   body table {
  46     margin: 2em;
  47   }
  48
  49     #resizable1, #resizable2 {
  50       width: 440px;
  51       height: 330px;
  52       margin-top: 2em;
  53       margin-bottom: 2em;
  54       padding: 1.2em;
  55     }
  56
  57
  58     .jqplot-target {
  59       font-size: 16px;
  60     }
  61
  62     .ui-resizable-helper {
  63       border: 2px solid gray;
  64     }
  65   </style>
  66
  67 <p>Plot targets can be placed inside of resizable containers for dynamic plot sizing.  The examples here use the jQuery UI package for resizing functionality.</p>
  68
  69     <table><tr>
  70       <td>
  71 <div id="resizable1" class="ui-widget-content">
  72     <div id="chart1" style="height:96%; width:96%;"></div>
  73 </div>
  74 </td>
  75 <td>
  76
  77 <p>The first plot has good resize performance in Firefox, Safari and other canvas enabled browsers.  The plot will resize dynamically with the container.  IE performance will be slow since IE doesn't natively support the canvas element.</p>
  78
  79 <p>Resizing is handled by binding a handler to the 'resize' event. The handler function replots the plot during resize.  Here, the plot targets's height and width must be specified as a percentage of the container and the container must be visible.</p>
  80
  81 <p>The event handler looks like:</p>
  82 <pre>
  83     $('#resizable1').bind('resize', function(event, ui) {
  84         plot1.replot( { resetAxes: true } );
  85     });
  86 </pre>
  87 </td>
  88 </tr></table>
  89 <table><tr>
  90   <td>
  91
  92 <div id="resizable2" class="ui-widget-content">
  93     <div id="chart2" style="height:96%; width:96%;"></div>
  94 </div>
  95 </td>
  96 <td>
  97 <p>The second plot uses an alternative sizing method that is more responsive in all browsers, especially IE.  The differnece?  First, the plot target is given a static height and width that will fit inside the resizable container.  Then, instead of resizing dynamically with the container, the plots replot() method is called at the end of the resize.  When resizing is done, the plot targets hieght and width are set to a percentage of the container's and then the replot method is called.</p>
  98
  99 <p>Also, an options object is passed into the replot method.  It contains a single option, resetAxes, which, if true, resets all axes so the min, max, numberTicks and tickInterval are recalculated.</p>
 100 <pre>
 101     $('#resizable2').bind('resizestop', function(event, ui) {
 102         $('#chart2').height($('#resizable2').height()*0.96);
 103         $('#chart2').width($('#resizable2').width()*0.96);
 104         plot2.replot({resetAxes:true});
 105     });
 106 </pre>
 107
 108 <p>You can also pass in option objects to reset specific axes like:</p>
 109
 110 <pre>
 111     {resetAxes:['yaxis', 'y2axis']};
 112
 113     or
 114
 115     {resetAxes:{yaxis:true, y2axis:true}};
 116 </pre>
 117
 118 </td></tr></table>
 119
 120 <pre class="code brush:js"></pre>
 121
 122
 123   <script type="text/javascript" class="code">
 124
 125   $(document).ready(function(){
 126
 127     $.jqplot._noToImageButton = true;
 128
 129     var l1 = [18, 36, 41, 93, 100, 115, 133, 129, 119, 107, 91, 146, 169];
 130     var l2 = [[8, 66], [13, 46], [22,14]];
 131     var l3 = [[3.3, 7], [9.5, 22], [12.1, 37], [18.6, 95], [24, 102]];
 132
 133     var options = {
 134       title: "Lines",
 135       legend:{show:true, location:'se'},
 136       seriesDefaults:{trendline:{show:true, type:"exp"}},
 137       axes:{
 138         yaxis:{
 139           renderer:$.jqplot.LogAxisRenderer
 140         }
 141       }
 142     };
 143
 144     $("#resizable1").resizable({delay:20});
 145     $("#resizable2").resizable({delay:20, helper:'ui-resizable-helper'});
 146
 147     $('#resizable1').bind('resize', function(event, ui) {
 148         // pass in resetAxes: true option to get rid of old ticks and axis properties
 149         // which should be recomputed based on new plot size.
 150         plot1.replot( { resetAxes: true } );
 151     });
 152
 153     $('#resizable2').bind('resizestop', function(event, ui) {
 154         $('#chart2').height($('#resizable2').height()*0.96);
 155         $('#chart2').width($('#resizable2').width()*0.96);
 156         // pass in resetAxes: true option to get rid of old ticks and axis properties
 157         // which should be recomputed based on new plot size.
 158         plot2.replot( { resetAxes:true } );
 159     });
 160
 161     var plot1 = $.jqplot('chart1', [l1, l3],  options);
 162     var plot2 = $.jqplot('chart2', [l1, l3],  options);
 163
 164   });
 165
 166   </script>
 167
 168 <!-- End example scripts -->
 169
 170 <!-- Don't touch this! -->
 171
 172
 173     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 174     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 175     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 176     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 177 <!-- End Don't touch this! -->
 178
 179 <!-- Additional plugins go here -->
 180
 181   <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 182   <script class="include" type="text/javascript" src="../plugins/jqplot.logAxisRenderer.min.js"></script>
 183   <script class="include" type="text/javascript" src="../plugins/jqplot.trendline.min.js"></script>
 184
 185   <link class="include" type="text/css" href="jquery-ui/css/smoothness/jquery-ui.min.css" rel="Stylesheet" />
 186   <script class="include" type="text/javascript" src="jquery-ui/js/jquery-ui.min.js"></script>
 187 <!-- End additional plugins -->
 188
 189
 190         </div>
 191         <script type="text/javascript" src="example.min.js"></script>
 192
 193 </body>
 194
 195
 196 </html>