/usr/share/doc/libjs-flotr/examples/json-data.html is in libjs-flotr 0.2.1~r301-1.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
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 95 96 97 98 | <!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="../flotr/lib/prototype.js"></script>
<script type="text/javascript" src="examples.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../flotr/lib/excanvas.js"></script>
<script type="text/javascript" src="../flotr/lib/base64.js"></script>
<![endif]-->
<script type="text/javascript" src="../flotr/lib/canvas2image.js"></script>
<script type="text/javascript" src="../flotr/lib/canvastext.js"></script>
<script type="text/javascript" src="../flotr/flotr-0.2.1.js"></script>
</head>
<body>
<!-- ad -->
<div id="wrapper">
<h1></h1>
<div id="container" style="display:none;width:600px;height:300px;"></div>
<button 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">
var f = null;
$('json-btn').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>
</html>
|