Commits

Bruno Harbulot committed d2e1399

Adding example to illustrate the issue with central aligment of the legend when positioned south (outsideGrid).

Comments (0)

Files changed (1)

+<?php 
+    $title = "Legends";
+    // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
+?>
+<?php include "opener.php"; ?>
+
+<!-- Example scripts go here -->
+
+<p>The most basic jqPlot chart takes a series of data and plots a line.  No options need to be supplied.  Data is passed in as an array of series.  A series can be either an array of y values or an array of [x,y] data pairs.  If y values only, x values are assigned like 1, 2, 3, ...  Note, for this plot you don't need any plugins.</p>
+
+<div id="chart1" style="height:400px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
+<div id="chart2" style="height:400px; width:500px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+  
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  // Some simple loops to build up data arrays.
+  var cosPoints = [];
+  for (var i=0; i<2*Math.PI; i+=1){ 
+    cosPoints.push([i, Math.cos(i)]); 
+  }
+   
+  var sinPoints = []; 
+  for (var i=0; i<2*Math.PI; i+=0.4){ 
+     sinPoints.push([i, 2*Math.sin(i-.8)]); 
+  }
+   
+  var powPoints1 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+      powPoints1.push([i, 2.5 + Math.pow(i/4, 2)]); 
+  }
+   
+  var powPoints2 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+      powPoints2.push([i, -2.5 - Math.pow(i/4, 2)]); 
+  }
+
+  var cosPoints2 = [];
+  for (var i=0; i<2*Math.PI; i+=1){ 
+      cosPoints2.push([i, Math.cos(1+2*i)]); 
+  }
+
+  var sinPoints2 = []; 
+  for (var i=0; i<2*Math.PI; i+=0.4){ 
+      sinPoints2.push([i, 1.8*Math.sin(1.3*i-.8)]); 
+  }
+
+  var powPoints3 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+      powPoints3.push([i, 2.5 + Math.pow(i/5, 3)]); 
+  }
+
+  var powPoints4 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+      powPoints4.push([i, -2.5 + Math.pow(-i/5, 5)]); 
+  }
+
+  var linePoints1 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+	  linePoints1.push([i, 1 + 3.0*i]); 
+  }
+
+  var linePoints2 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+	  linePoints2.push([i, 5 - 3.0*i]); 
+  }
+
+  var data1 = [cosPoints, sinPoints, powPoints1, powPoints2, cosPoints2, sinPoints2, powPoints3, powPoints4, linePoints1, linePoints2];
+
+  var plot1 = $.jqplot('chart1', data1, 
+    { 
+      title:'Many axes and many series with long names', 
+      // Set default options on all series, turn on smoothing.
+      seriesDefaults: {
+          rendererOptions: {
+              smooth: true
+          }
+      },
+      axes: {
+          	xaxis: {},
+          	yaxis: {},
+          	y2axis: {},
+          	y3axis: {},
+          	y4axis: {},
+          	y5axis: {},
+          	y6axis: {},
+          	y7axis: {},
+          	y8axis: {},
+          	y9axis: {}
+      },
+      // Series options are specified as an array of objects, one object
+      // for each series.
+      series:[ 
+          {
+            // Change our line width and use a diamond shaped marker.
+            lineWidth:2, 
+            markerOptions: { style:'diamond' },
+            yaxis: "yaxis",
+            label: "This is Series 1"
+          }, 
+          {
+            // Don't show a line, just show markers.
+            // Make the markers 7 pixels with an 'x' style
+            showLine:false, 
+            markerOptions: { size: 7, style:"x" },
+            yaxis: "y2axis",
+            label: "This is Series 2"
+          },
+          { 
+            // Use (open) circlular markers.
+            markerOptions: { style:"circle" },
+            yaxis: "y3axis",
+            label: "This is Series 3"
+          }, 
+          {
+            // Use a thicker, 5 pixel line and 10 pixel
+            // filled square markers.
+            lineWidth:5, 
+            markerOptions: { style:"filledSquare", size:10 },
+            yaxis: "y4axis",
+            label: "This is Series 4"
+          }, 
+          {
+              yaxis: "y5axis",
+              label: "This is Series 5"
+          }, 
+          {
+              yaxis: "y6axis",
+              label: "This is Series 6"
+          }, 
+          {
+              yaxis: "y7axis",
+              label: "This is Series 7"
+          }, 
+          {
+              yaxis: "y8axis",
+              label: "This is Series 8"
+          }, 
+          {
+              yaxis: "y9axis",
+              label: "This is Series 9"
+          }, 
+          {
+              yaxis: "y9axis",
+              label: "This is Series 10"
+          }
+      ],
+      "legend": {
+            'show': true,
+            'showLabels': true,
+            'rendererOptions': {
+                'numberColumns': 4
+            },
+            'placement': 'outsideGrid',
+            'location': 's',
+            'shrinkGrid': true
+        }
+    }
+  );
+   
+});
+</script>
+
+<script class="code" type="text/javascript">
+$(document).ready(function(){
+  // Some simple loops to build up data arrays.
+  var cosPoints = [];
+  for (var i=0; i<2*Math.PI; i+=1){ 
+    cosPoints.push([i, Math.cos(i)]); 
+  }
+   
+  var sinPoints = []; 
+  for (var i=0; i<2*Math.PI; i+=0.4){ 
+     sinPoints.push([i, 2*Math.sin(i-.8)]); 
+  }
+   
+  var powPoints1 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+      powPoints1.push([i, 2.5 + Math.pow(i/4, 2)]); 
+  }
+   
+  var powPoints2 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+      powPoints2.push([i, -2.5 - Math.pow(i/4, 2)]); 
+  }
+
+  var cosPoints2 = [];
+  for (var i=0; i<2*Math.PI; i+=1){ 
+      cosPoints2.push([i, Math.cos(1+2*i)]); 
+  }
+
+  var sinPoints2 = []; 
+  for (var i=0; i<2*Math.PI; i+=0.4){ 
+      sinPoints2.push([i, 1.8*Math.sin(1.3*i-.8)]); 
+  }
+
+  var powPoints3 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+      powPoints3.push([i, 2.5 + Math.pow(i/5, 3)]); 
+  }
+
+  var powPoints4 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+      powPoints4.push([i, -2.5 + Math.pow(-i/5, 5)]); 
+  }
+
+  var linePoints1 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+	  linePoints1.push([i, 1 + 3.0*i]); 
+  }
+
+  var linePoints2 = []; 
+  for (var i=0; i<2*Math.PI; i+=1) { 
+	  linePoints2.push([i, 5 - 3.0*i]); 
+  }
+
+  var data2 = [cosPoints, sinPoints, powPoints1, powPoints2, cosPoints2, sinPoints2, powPoints3, powPoints4, linePoints1, linePoints2];
+
+  var plot2 = $.jqplot('chart2', data2, 
+    { 
+      title:'Many axes and many series with long names', 
+      // Set default options on all series, turn on smoothing.
+      seriesDefaults: {
+          rendererOptions: {
+              smooth: true
+          }
+      },
+      axes: {
+          	xaxis: {},
+          	yaxis: {},
+          	y2axis: {},
+          	y3axis: {},
+          	y4axis: {},
+          	y5axis: {},
+          	y6axis: {},
+          	y7axis: {},
+          	y8axis: {},
+          	y9axis: {}
+      },
+      // Series options are specified as an array of objects, one object
+      // for each series.
+      series:[ 
+          {
+            // Change our line width and use a diamond shaped marker.
+            lineWidth:2, 
+            markerOptions: { style:'diamond' },
+            yaxis: "yaxis",
+            label: "This is Series 1"
+          }, 
+          {
+            // Don't show a line, just show markers.
+            // Make the markers 7 pixels with an 'x' style
+            showLine:false, 
+            markerOptions: { size: 7, style:"x" },
+            yaxis: "y2axis",
+            label: "This is Series 2"
+          },
+          { 
+            // Use (open) circlular markers.
+            markerOptions: { style:"circle" },
+            yaxis: "y3axis",
+            label: "This is Series 3"
+          }, 
+          {
+            // Use a thicker, 5 pixel line and 10 pixel
+            // filled square markers.
+            lineWidth:5, 
+            markerOptions: { style:"filledSquare", size:10 },
+            yaxis: "y4axis",
+            label: "This is Series 4"
+          }, 
+          {
+              yaxis: "y5axis",
+              label: "This is Series 5"
+          }, 
+          {
+              yaxis: "y6axis",
+              label: "This is Series 6"
+          }, 
+          {
+              yaxis: "y7axis",
+              label: "This is Series 7"
+          }, 
+          {
+              yaxis: "y8axis",
+              label: "This is Series 8"
+          }, 
+          {
+              yaxis: "y9axis",
+              label: "This is Series 9"
+          }, 
+          {
+              yaxis: "y9axis",
+              label: "This is Series 10"
+          }
+      ],
+      "legend": {
+            'renderer': $.jqplot.EnhancedLegendRenderer,
+            'show': true,
+            'showLabels': true,
+            'rendererOptions': {
+                'numberColumns': 4
+            },
+            'placement': 'outsideGrid',
+            'location': 's',
+            'shrinkGrid': true
+        }
+    }
+  );
+   
+});
+</script>
+
+<!-- End example scripts -->
+
+<!-- Don't touch this! -->
+
+<?php include "commonScripts.html" ?>
+
+<!-- End Don't touch this! -->
+
+<!-- Additional plugins go here -->
+
+  <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
+  <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
+  <script class="include" type="text/javascript" src="../src/plugins/jqplot.enhancedLegendRenderer.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>