Commits

Chris Leonello committed 7e057d4

Modify/update examples.

  • Participants
  • Parent commits 5db1dcf

Comments (0)

Files changed (2)

File examples/pieTest2.html

     }
   </style>
   
-    <script type="text/javascript">    
-    $(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-        $('#code').load('pieTest2.js');
-        $('#code').dialog({
-			height: 'auto',
-			width: 600,
-			modal: true,
-			autoOpen: false,
-			resizable: true,
-			draggable: true,
-			show: 'fold'
-		});
+    <script type="text/javascript">   
+    
+$(document).ready(function(){
 
+    $.jqplot.config.enablePlugins = true;
+
+    s1 = [['a',2], ['b',6], ['c',7], ['d',10]];
+    s2 = [['a', 4], ['b', 7], ['c', 6], ['d', 3]];
+    s3 = [['a', 2], ['b', 1], ['c', 3], ['d', 3]];
+    s4 = [['a', 4], ['b', 3], ['c', 2], ['d', 1]];
+    
+    s5 = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
+    
+    plot1 = $.jqplot('chart1', [s1], {
+        seriesDefaults:{
+            renderer:$.jqplot.PieRenderer
+        },
+        legend: {show:true}
     });
+    
+    plot2 = $.jqplot('chart2', [s2], {
+        seriesDefaults: {
+            renderer:$.jqplot.PieRenderer,
+            rendererOptions:{
+                sliceMargin: 4,
+                startAngle: -90
+            }
+        }
+    });
+
+    plot3 = $.jqplot('chart3', [s3], {
+        captureRightClick: true,
+        seriesDefaults:{
+            renderer:$.jqplot.PieRenderer,
+            shadow: false,
+            rendererOptions:{
+                startAngle: 90,
+                sliceMargin: 4,
+                highlightMouseDown: true
+            }
+        },
+        legend: {
+            show: true,
+            location: 'e',
+            placement: 'outside'
+        }      
+    });
+
+    plot5 = $.jqplot('chart5', [s5], {
+        seriesDefaults:{
+            renderer:$.jqplot.PieRenderer
+        }
+    });
+    
+    plot6 = $.jqplot('chart6', [[1,2,3,4]]);
+    
+    $('#chart1').bind('jqplotDataClick', 
+        function (ev, seriesIndex, pointIndex, data) {
+            $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
+        }
+    );
+    
+    $('#chart2').bind('jqplotDataHighlight', 
+        function (ev, seriesIndex, pointIndex, data) {
+            $('#info2').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
+        }
+    );
+    
+    $('#chart2').bind('jqplotDataUnhighlight', 
+        function (ev) {
+            $('#info2').html('Nothing');
+        }
+    ); 
+    
+    $('#chart3').bind('jqplotDataRightClick', 
+        function (ev, seriesIndex, pointIndex, data) {
+            $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
+        }
+    );  
+    
+    $(document).unload(function() {$('*').unbind(); });
+});    
+    
+    
+     
+    // $(document).ready(function(){
+  //     $.jqplot.config.enablePlugins = true;
+  //       $('#code').load('pieTest2.js');
+  //       $('#code').dialog({
+		// 	height: 'auto',
+		// 	width: 600,
+		// 	modal: true,
+		// 	autoOpen: false,
+		// 	resizable: true,
+		// 	draggable: true,
+		// 	show: 'fold'
+		// });
+
+    // });
     </script> 
     
   </head>
   <body>
 <?php include "nav.inc"; ?>
 <div id="code"></div>
-    <p>To create pie plots, you have to include the "jqplot.pieRenderer.js" file in your source.  You can view the javascript that generated these plots by clicking the "View Code" button below.</p>
-    <button id="seecode" onclick="$('#code').dialog('open');">View Code</button>
+    <p>To create pie plots, you have to include the "jqplot.pieRenderer.js" file in your source.</p>
 
     <p>Below is a default pie plot.  Slices will highlight on mouseover.  Events are triggered when you mouseover a slice and also when you click on a slice.  Here We capture the 'jqplotDataClick' event and display the clicked series index, point index and data values.<p>
     

File examples/pieTest4.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery-1.6.1.js"></script>
   <!-- END: load jquery -->  
   
   <!-- BEGIN: load jqplot -->
         margin: 2em 0;
     }
   </style>
-  
-<script id="example_1" type="text/javascript">$(document).ready(function(){
+
+<script class="code" type="text/javascript">$(document).ready(function(){
 	jQuery.jqplot.config.enablePlugins = true;
 	plot1 = jQuery.jqplot('chart1', 
-		[[['Verwerkende industrie', 9],['Retail', 0], ['Primaire producent', 38], 
-		['Out of home', 0],['Groothandel', 0], ['Grondstof', 9], ['Consument', 3], ['Bewerkende industrie', 0]]], 
+		[[['Verwerkende FruedenStrudle industrie', 9],['Retail', 8], ['Primaire producent', 7], 
+		['Out of home', 6],['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]], 
 		{
 			title: ' ', 
-			seriesDefaults: {renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin:2 } }, 
-			legend: { show:true }
+			seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4 } }, 
+			legend: { show:true, location: 'e' }
 		}
 	);
 });
 </script>
 
-<script type="text/javascript">
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot2 = jQuery.jqplot('chart2', 
+    [[['Verwerkende industrie', 9],['Retail', 0], ['Primaire producent', 0], 
+    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 3], ['Bewerkende industrie', 2]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4 } }, 
+      legend: { show:true, location: 'ne', rendererOptions: {numberRows: 1}, placement:'inside'}
+    }
+  );
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot3 = jQuery.jqplot('chart3', 
+    [[['Verwerkende industrie', 9],['Retail', 0], ['Primaire producent', 0], 
+    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 2]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4 } }, 
+      legend: { show:true, location: 's' }
+    }
+  );
+
+  
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot4 = jQuery.jqplot('chart4', 
+    [[['Verwerkende industrie', 30],['Retail', 0], ['Primaire producent', 0], 
+    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 1]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4 } }, 
+      legend: { show:true, location: 'n' }
+    }
+  );
+
+  
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot5 = jQuery.jqplot('chart5', 
+    [[['Verwerkende FruedenStrudel industrie', 100],['Retail', 0], ['Primaire producent', 0], 
+    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 1]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4 } }, 
+      legend: { show:true, location: 'nw' }
+    }
+  );
+
+  
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot6 = jQuery.jqplot('chart6', 
+    [[['Verwerkende industrie', 100]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4 } }, 
+      legend: { show:true, location: 'se' }
+    }
+  );
+
+  
+});
+</script>
+
+
+<script type="text/javascript">    
     $(document).ready(function(){
-        
-        $('#code_1').html($('#example_1').html());
+        $('script.code').each(function(index) {
+            $('pre.code').eq(index).text($(this).html());
+        });
+        $('script.common').each(function(index) {
+            $('pre.common').eq(index).html($(this).html());
+        });
         $(document).unload(function() {$('*').unbind(); });
-
     });
 </script> 
     
                
     <div id="chart1" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
     
-    <pre id="code_1"></pre>
+    <pre class="code"></pre>
  
+    <div id="chart2" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
     
- 
+    <pre class="code"></pre>
+
+    <div id="chart3" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code"></pre>
+  
+    <div id="chart4" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code"></pre>
+
+    <div id="chart5" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code"></pre>
+
+    <div id="chart6" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code"></pre>
   </body>
 </html>