Commits

Chris Leonello  committed a88de47

Updated core tests with grid options.
Added additional example files for distribution.

  • Participants
  • Parent commits 07698a9

Comments (0)

Files changed (6)

File NDdata/Menu.txt

 File: jqPlot  (no auto-title, jqplot.core.js)
 File: Usage  (no auto-title, usage.txt)
 File: Options Tutorial  (no auto-title, optionsTutorial.txt)
+File: jqPlot Options  (no auto-title, jqPlotOptions.txt)
 File: Change Log  (changes.txt)
 Link: Unit Tests & Examples  (../../tests/)
 
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Simple Test</title>
+  <!--[if IE]><script language="javascript" type="text/javascript" src="./src/excanvas.js"></script><![endif]-->
+  
+  <link rel="stylesheet" type="text/css" href="./src/jquery.jqplot.css" />
+  
+  <!-- BEGIN: load jquery -->
+  <script language="javascript" type="text/javascript" src="./src/jquery-1.3.2.min.js"></script>
+  <!-- END: load jquery -->
+  
+  <!-- BEGIN: load jqplot -->
+  <script language="javascript" type="text/javascript" src="./src/jquery.jqplot.js"></script>
+  <script language="javascript" type="text/javascript" src="./src/plugins/jqplot.dateAxisRenderer.js"></script>
+  <!-- END: load jqplot -->
+  <style type="text/css" media="screen">
+    .jqplot-axis {
+      font-size: 0.85em;
+    }
+    .jqplot-legend {
+      font-size: 0.75em;
+    }
+  </style>
+  <script type="text/javascript" language="javascript">
+  
+  $(document).ready(function(){
+
+
+line1 = [['2009/06/15', 5], ['2009/06/16', 1], ['2009/06/17', 3], ['2009/06/18', 7], ['2009/06/19', 9], ['2009/06/20', 5], ['2009/06/21', 2]];
+
+plot1 = $.jqplot('chart1', [line1], {
+  legend: {show:true, location: 'nw', yoffset: 6},
+axes: {
+   xaxis: {
+		renderer: $.jqplot.DateAxisRenderer,
+    // ticks: ['2009/06/15', '2009/06/16', '2009/06/17', '2009/06/18', '2009/06/19', '2009/06/20', '2009/06/21']
+    ticks: [['2009/06/15', 'Monday'], ['2009/06/16', 'Tuesday'],['2009/06/17', 'Wednesday'], ['2009/06/18', 'Thursday'],['2009/06/19','Friday'], ['2009/06/20', 'Saturday'], ['2009/06/21','Sunday']]
+		}
+  }
+});
+
+
+  });
+  </script>
+  </head>
+  <body>
+    <div id="chart1" style="margin-top:20px; margin-left:20px; width:400px; height:200px;"></div>
+    <div id="chart2" style="margin-top:20px; margin-left:20px; width:300px; height:200px;"></div>
+  </body>
+</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Simple Test</title>
+  <!--[if IE]><script language="javascript" type="text/javascript" src="./src/excanvas.js"></script><![endif]-->
+  
+  <link rel="stylesheet" type="text/css" href="./src/jquery.jqplot.css" />
+  
+  <!-- BEGIN: load jquery -->
+  <script language="javascript" type="text/javascript" src="./src/jquery-1.3.2.min.js"></script>
+  <!-- END: load jquery -->
+  
+  <!-- BEGIN: load jqplot -->
+  <script language="javascript" type="text/javascript" src="./src/jquery.jqplot.js"></script>
+  <script language="javascript" type="text/javascript" src="./src/plugins/jqplot.dateAxisRenderer.js"></script>
+  <script language="javascript" type="text/javascript" src="./src/plugins/jqplot.categoryAxisRenderer.js"></script>
+  <!-- END: load jqplot -->
+  <style type="text/css" media="screen">
+    .jqplot-axis {
+      font-size: 0.85em;
+    }
+  </style>
+  <script type="text/javascript" language="javascript">
+  
+  $(document).ready(function(){
+    
+line1 = [4, 2, 9, 16];
+line2 = [3, 7, 6, 3];
+line3 = [5, 1, 5, 4];
+
+plot3 = $.jqplot('chart', [line1, line2, line3], {
+    stackSeries: true,
+    legend: {
+        show: true,
+        location: 'nw'
+    },
+    title: 'Acme Company Unit Sales',
+    seriesDefaults: {
+        fill: true,
+        showMarker: false
+    },
+    series: [{
+        label: 'Traps Division'
+    },
+    {
+        label: 'Decoy Division',
+        fill: true
+    },
+    {
+        label: 'Harmony Division'
+    }],
+    axes: {
+        xaxis: {
+                        renderer: $.jqplot.CategoryAxisRenderer,
+            ticks: ['a', 'b', 'c', 'd'],
+            tickOptions: {
+                formatString: '%s'
+            }
+        },
+        yaxis: {
+            min: 0,
+            max: 30
+        }
+    }
+
+});
+
+  });
+  </script>
+  </head>
+  <body>
+    <div id="chart" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
+  </body>
+</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Simple Test</title>
+  <!--[if IE]><script language="javascript" type="text/javascript" src="./src/excanvas.js"></script><![endif]-->
+  
+  <link rel="stylesheet" type="text/css" href="./src/jquery.jqplot.css" />
+  
+  <!-- BEGIN: load jquery -->
+  <script language="javascript" type="text/javascript" src="./src/jquery-1.3.2.min.js"></script>
+  <!-- END: load jquery -->
+  
+  <!-- BEGIN: load jqplot -->
+  <script language="javascript" type="text/javascript" src="./src/jquery.jqplot.js"></script>
+  <script language="javascript" type="text/javascript" src="./src/plugins/jqplot.dateAxisRenderer.js"></script>
+  <script language="javascript" type="text/javascript" src="./src/plugins/jqplot.dragable.js"></script>
+  <script language="javascript" type="text/javascript" src="./src/plugins/jqplot.trendline.js"></script>
+  <!-- END: load jqplot -->
+
+<script language="javascript" type="text/javascript">
+  
+  $(document).ready(function(){
+
+    s1 = [['23-May-08',1],['24-May-08',4],['25-May-08',2],['26-May-08', 6]];
+    s2 = [['23-May-08',2],['24-May-08',3],['25-May-08',7],['26-May-08', 4]];
+
+    mp = $.jqplot('chart1',[s1, s2],{
+            title: 'mytitle',
+            axes: {
+                xaxis: {
+                    renderer: $.jqplot.DateAxisRenderer, //working
+                    tickOptions: {
+                        formatString: '%H:%S' //working
+                    },
+                    numberTicks: 12 //working
+                },
+                yaxis: {
+                    tickOptions: {
+                        formatString: '%.2f' //working
+                    }
+                }
+            },
+series:[{
+  markerOptions:{style:'diamond'},
+  dragable: {
+  color: '#ff3366',
+      constrainTo: 'x'
+  },
+  trendline: {
+        color: '#cccccc'
+  }
+}, {
+  isDragable: false,
+  trendline: {
+    show:false
+  }
+}
+]
+    });
+  });
+</script>
+  </head>
+  <body>
+    <div id="chart1" style="margin-top:20px; margin-left:20px; width:500px; height:400px;"></div>
+    <div id="chart2" style="margin-top:20px; margin-left:20px; width:300px; height:200px;"></div>
+  </body>
+</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Simple Test</title>
+  <!--[if IE]><script language="javascript" type="text/javascript" src="./src/excanvas.js"></script><![endif]-->
+  
+  <link rel="stylesheet" type="text/css" href="./src/jquery.jqplot.css" />
+  
+  <!-- BEGIN: load jquery -->
+  <script language="javascript" type="text/javascript" src="./src/jquery-1.3.2.min.js"></script>
+  <!-- END: load jquery -->
+  
+  <!-- BEGIN: load jqplot -->
+  <script language="javascript" type="text/javascript" src="./src/jquery.jqplot.js"></script>
+
+  <!-- END: load jqplot -->
+  <style type="text/css" media="screen">
+    .jqplot-axis {
+      font-size: 0.85em;
+    }
+    .jqplot-title {
+      font-size: 1.1em;
+    }
+  </style>
+  <script type="text/javascript" language="javascript">
+  
+  $(document).ready(function(){
+
+    var l1 = [2, 3, 1, 4, 3];
+    var l2 = [1, 4, 3, 2, 5];
+
+
+    plot1 = $.jqplot('chart', [l1, l2], {
+      title:'Plot with Grid Customization',
+        grid:{background:'#dfdfdf', gridLineColor:'#accf9b', borderWidth:2.5}
+    });
+
+
+  });
+  </script>
+  </head>
+  <body>
+    <div id="chart" style="margin-top:20px; margin-left:20px; width:360px; height:300px;"></div>
+  </body>
+</html>

File tests/coretests.php

             
       genplot(o, {comment:c});
       
-      c = 'Axes ticks are computed automatically from the data, but can be customized if desired.  Ticks can be specified as an array of [value, label] pairs, or as a 1-D array of values. <p>Here the y axis ticks use a custom format string ("%d") to produce integer tick labels.  The default format string is %.1f and can be customized to any sprintf style format string.';
+      c = 'Axes ticks are computed automatically from the data, but can be customized if desired.  Ticks can be specified as an array of [value, label] pairs, or as a 1-D array of values. <p>Here the y axis ticks use a custom format string ("%d") to produce integer tick labels.  The default format string is %.1f and can be customized to any sprintf style format string.  <p>Additionally, the grid background color and grid line color have been changed';
       
       o = "line1=[[1,1],[1.5, 2.25],[2,4],[2.5,6.25],[3,9],[3.5,12.25],[4,16]]; \
       line2=[25, 12.5, 6.25, 3.125]; \
       yticks = [-5, 0, 5, 10, 15, 20, 25, 30]; \
       plot5 = $.jqplot('_target_', [line1, line2], \
       {legend:{show:true}, title:'Customized Axes Ticks', \
+      grid: {background:'#f3f3f3', gridLineColor:'#accf9b'}, \
       series:[{label:'Rising line', markerOptions:{style:'square'}}, {label:'Declining line'}], \
       axes:{xaxis:{ticks:xticks}, yaxis:{ticks:yticks, tickOptions:{formatString:'%d'}}}});";