proper concat for hourlies
[scannr.git] / js / flotr2 / examples / old_examples / json-data.html
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 &copy; 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>