<!DOCTYPE html> <html> <head> <title>AJAX and JSON Data Loading via Data Renderers</title> <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" /> <link rel="stylesheet" type="text/css" href="examples.min.css" /> <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" /> <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" /> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]--> <script class="include" type="text/javascript" src="../jquery.min.js"></script> </head> <body> <div class="logo"> <div class="nav"> <a class="nav" href="../../../index.php"><span>></span>Home</a> <a class="nav" href="../../../docs/"><span>></span>Docs</a> <a class="nav" href="../../download/"><span>></span>Download</a> <a class="nav" href="../../../info.php"><span>></span>Info</a> <a class="nav" href="../../../donate.php"><span>></span>Donate</a> </div> </div> <div class="example-content"> <div class="example-nav"> <a href="dashedLines.html">Previous</a> <a href="./">Examples</a> <a href="date-axes.html">Next</a></div> <!-- Example scripts go here --> <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> <div id="chart1" style="height:300px; width:500px;"></div> <pre class="code prettyprint brush: js"></pre> <p>Data renderers get passed options by the plot. The signiture for a data renderer is:</p> <pre class="brush: js"> function(userData, plotObject, options) { ... return data; } </pre> <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> <div id="chart2" style="height:300px; width:500px;"></div> <pre class="code prettyprint brush: js"></pre> <script class="code" type="text/javascript"> $(document).ready(function(){ // Our data renderer function, returns an array of the form: // [[[x1, sin(x1)], [x2, sin(x2)], ...]] var sineRenderer = function() { var data = [[]]; for (var i=0; i<13; i+=0.5) { data[0].push([i, Math.sin(i)]); } return data; }; // we have an empty data array here, but use the "dataRenderer" // option to tell the plot to get data from our renderer. var plot1 = $.jqplot('chart1',[],{ title: 'Sine Data Renderer', dataRenderer: sineRenderer }); }); </script> <script class="code" type="text/javascript"> $(document).ready(function(){ // Our ajax data renderer which here retrieves a text file. // it could contact any source and pull data, however. // The options argument isn't used in this renderer. var ajaxDataRenderer = function(url, plot, options) { var ret = null; $.ajax({ // have to use synchronous here, else the function // will return before the data is fetched async: false, url: url, dataType:"json", success: function(data) { ret = data; } }); return ret; }; // The url for our json data var jsonurl = "./jsondata.txt"; // passing in the url string as the jqPlot data argument is a handy // shortcut for our renderer. You could also have used the // "dataRendererOptions" option to pass in the url. var plot2 = $.jqplot('chart2', jsonurl,{ title: "AJAX JSON Data Renderer", dataRenderer: ajaxDataRenderer, dataRendererOptions: { unusedOptionalUrl: jsonurl } }); }); </script> <!-- End example scripts --> <!-- Don't touch this! --> <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script> <!-- End Don't touch this! --> <!-- Additional plugins go here --> <script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.json2.min.js"></script> <!-- End additional plugins --> </div> <script type="text/javascript" src="example.min.js"></script> </body> </html>