1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Flotr: JSON Data Example</title> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="../lib/yepnope.js"></script> </head> <body> <!-- ad --> <div id="wrapper"> <h1></h1> <div id="container" style="display:none;width:600px;height:300px;"></div> <button disabled="disabled" id="json-btn">Request JSON</button> <h2>Example</h2> <p> This example shows you how to use JSON data with Flotr. The canvas container is hidden when the page is loaded. By pressing the button a GET request is send to <a href="json.txt">json.txt</a>. This returns a JSON string with data for three series. When the returned json is a valid object, the canvas container is shown and the graph is rendered with <code>Flotr.draw()</code>. Here's the requested json: </p> <pre><code class="javascript">{ series:[{ data:[[0,1],[1,4],[2,3],[3,6],[4,4.5]], points:{show:true}, lines:{show:true} }, [[0,0.5],[1,0.6],[2,1.8],[3,0.9],[4,2]], [[0,1.5],[1,2],[2,4.5],[3,3.5],[4,5.5]] ], options:{ mouse:{track:true}, xaxis:{noTicks:10, tickDecimals:1} } }</code></pre> <p> Let me give you one advise about JSON. To make sure you receive the data in the right format, use the Firefox extension <a href="http://www.getfirebug.com" title="Firebug Javascript Debug Extension">Firebug</a> to <code>console.log</code> (print) the response. With Firebug you can examine the Ajax request and it's response. Also, it's worth reading <a href="http://prototypejs.org/learn/json">Introduction to JSON</a> on PrototypeJS.org. </p> <p>Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a>, play with the <a href="../../playground/index.html" title="Flotr playground">playground</a> or read the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.</p> <h2>The Code</h2> <pre id="code-view"><code class="javascript"></code></pre> <div id="footer">Copyright © 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a></div> </div> <!-- ad --> <script type="text/javascript"> function example(){ var f = null, button = $('json-btn'); button.disabled = false; button.observe('click', function(){ /** * The json.txt contains a valid json string. Imagine this string * is generated by some server-side script. */ new Ajax.Request('json.txt', { method:'get', onSuccess: function(transport){ /** * Parse (eval) the JSON from the server. */ var json = transport.responseText.evalJSON(); if(json.series && json.options){ /** * The json is valid! Display the canvas container. */ $('container').show(); /** * Draw the graph using the JSON data. Of course the * options are optional. */ f = Flotr.draw($('container'), json.series, json.options); } } }); }); } </script> <!-- analytics --> </body> <script type="text/javascript" src="includes.js"></script> </html> |