public/javascripts/jqplot/examples/data-renderers.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>AJAX and JSON Data Loading via Data Renderers</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="dashedLines.html">Previous</a> <a href="./">Examples</a> <a href="date-axes.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35
  36 <p>Data renderers allow jqPlot to pull data from any external source (e.g. a function implementing an AJAX call).  Simply assign the external source to the "dataRenderer" plot option.  The only requirement on data renderers is that it must return a valid jqPlot data array.</p>
  37
  38 <div id="chart1" style="height:300px; width:500px;"></div>
  39
  40 <pre class="code prettyprint brush: js"></pre>
  41
  42
  43 <p>Data renderers get passed options by the plot.  The signiture for a data renderer is:</p>
  44
  45
  46 <pre class="brush: js">
  47 function(userData, plotObject, options) {
  48   ...
  49   return data;
  50 }
  51 </pre>
  52
  53
  54 <p>Where userData is whatever data was passed into the plot, plotObject is a reference back to the plot itself, and options are any options passed into the plots "dataRendererOption" option.  The following example shows a more complicated example which uses ajax pulls data from an external json data source.</p>
  55
  56 <div id="chart2" style="height:300px; width:500px;"></div>
  57
  58 <pre class="code prettyprint brush: js"></pre>
  59
  60
  61 <script class="code" type="text/javascript">
  62 $(document).ready(function(){
  63   // Our data renderer function, returns an array of the form:
  64   // [[[x1, sin(x1)], [x2, sin(x2)], ...]]
  65   var sineRenderer = function() {
  66     var data = [[]];
  67     for (var i=0; i<13; i+=0.5) {
  68       data[0].push([i, Math.sin(i)]);
  69     }
  70     return data;
  71   };
  72
  73   // we have an empty data array here, but use the "dataRenderer"
  74   // option to tell the plot to get data from our renderer.
  75   var plot1 = $.jqplot('chart1',[],{
  76       title: 'Sine Data Renderer',
  77       dataRenderer: sineRenderer
  78   });
  79 });
  80 </script>
  81
  82
  83 <script class="code" type="text/javascript">
  84 $(document).ready(function(){
  85   // Our ajax data renderer which here retrieves a text file.
  86   // it could contact any source and pull data, however.
  87   // The options argument isn't used in this renderer.
  88   var ajaxDataRenderer = function(url, plot, options) {
  89     var ret = null;
  90     $.ajax({
  91       // have to use synchronous here, else the function
  92       // will return before the data is fetched
  93       async: false,
  94       url: url,
  95       dataType:"json",
  96       success: function(data) {
  97         ret = data;
  98       }
  99     });
 100     return ret;
 101   };
 102
 103   // The url for our json data
 104   var jsonurl = "./jsondata.txt";
 105
 106   // passing in the url string as the jqPlot data argument is a handy
 107   // shortcut for our renderer.  You could also have used the
 108   // "dataRendererOptions" option to pass in the url.
 109   var plot2 = $.jqplot('chart2', jsonurl,{
 110     title: "AJAX JSON Data Renderer",
 111     dataRenderer: ajaxDataRenderer,
 112     dataRendererOptions: {
 113       unusedOptionalUrl: jsonurl
 114     }
 115   });
 116 });
 117 </script>
 118
 119
 120 <!-- End example scripts -->
 121
 122 <!-- Don't touch this! -->
 123
 124
 125     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 126     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 127     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 128     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 129 <!-- End Don't touch this! -->
 130
 131 <!-- Additional plugins go here -->
 132
 133     <script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.json2.min.js"></script>
 134
 135 <!-- End additional plugins -->
 136
 137
 138         </div>
 139         <script type="text/javascript" src="example.min.js"></script>
 140
 141 </body>
 142
 143
 144 </html>