source: Dev/branches/jQueryUI/client/RGraph/docs/dynamic.html @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.
File size: 9.5 KB
Line 
1<?php ob_start('ob_gzhandler') ?>
2<!DOCTYPE html>
3<html>
4<head>
5    <meta http-equiv="X-UA-Compatible" content="chrome=1">
6    <!--
7        /**
8        * o------------------------------------------------------------------------------o
9        * | This file is part of the RGraph package - you can learn more at:             |
10        * |                                                                              |
11        * |                          http://www.rgraph.net                               |
12        * |                                                                              |
13        * | This package is licensed under the RGraph license. For all kinds of business |
14        * | purposes there is a small one-time licensing fee to pay and for non          |
15        * | commercial  purposes it is free to use. You can read the full license here:  |
16        * |                                                                              |
17        * |                      http://www.rgraph.net/LICENSE.txt                       |
18        * o------------------------------------------------------------------------------o
19        */
20    -->
21    <title>RGraph: Javascript charts and graph library - Updating your charts dynamically</title>
22   
23    <meta name="keywords" content="rgraph html5 canvas charts docs dynamic" />
24    <meta name="description" content="RGraph: Javascript charts and graph library - Updating your charts dynamically" />
25   
26    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
27    <meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
28    <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
29
30    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
31    <link rel="icon" type="image/png" href="/favicon.png">
32   
33    <script src="../libraries/RGraph.common.core.js" ></script>
34    <script src="../libraries/RGraph.common.context.js" ></script>
35    <script src="../libraries/RGraph.line.js" ></script>
36    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
37
38    <script>
39      var _gaq = _gaq || [];
40      _gaq.push(['_setAccount', 'UA-54706-2']);
41      _gaq.push(['_trackPageview']);
42   
43      (function() {
44        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
45        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
46        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
47      })();
48    </script>
49</head>
50<body>
51
52   
53    <!-- Social networking buttons -->
54        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
55            <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20charts%20types&title=RGraph:Javascript%20charts%20and%20graphs%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /></a>
56            <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+and+graph+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank"><img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" /></a>
57        </div>
58
59        <script>
60            // Opera fix
61            if (navigator.userAgent.indexOf('Opera') == -1) {
62              document.getElementById("social_icons").style.position = 'fixed';
63            }
64        </script>
65    <!-- Social networking buttons -->
66
67
68<div id="breadcrumb">
69    <a href="../index.html">RGraph: Javascript charts and graph library</a>
70    >
71    <a href="index.html">Documentation</a>
72    >
73    Updating your charts dynamically
74</div>
75
76    <h1>RGraph: <span>Javascript charts and graph library</span> - Updating your charts dynamically</h1>
77
78    <script>
79        if (RGraph.isIE8()) {
80            document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a> to see some screenshots.</div>');
81        }
82    </script>
83
84    <canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas>
85    <script>
86        window.onload = function (e)
87        {
88            d1 = [];
89            d2 = [];
90       
91            // Pre-pad the arrays with 100 null values
92            for (var i=0; i<100; ++i) {
93                d1.push(null);
94                d2.push(null);
95            }
96
97            function getGraph(id, d1, d2)
98            {
99                var graph = new RGraph.Line(id, d1, d2);
100                graph.Set('chart.xticks', 100);
101                graph.Set('chart.background.barcolor1', 'white');
102                graph.Set('chart.background.barcolor2', 'white');
103                graph.Set('chart.title.xaxis', 'Time >>>');
104                graph.Set('chart.title.yaxis', 'Bandwidth (MB/s)');
105                graph.Set('chart.title.vpos', 0.5);
106                graph.Set('chart.title', 'Bandwidth used by servers 1 and 2');
107                graph.Set('chart.filled', true);
108                graph.Set('chart.fillstyle', ['#daf1fa', '#faa']);
109                graph.Set('chart.colors', ['rgb(169, 222, 244)', 'red']);
110                graph.Set('chart.linewidth', 1);
111                //graph.Set('chart.ylabels.inside', true);
112                graph.Set('chart.yaxispos', 'right');
113                graph.Set('chart.ymax', 20);
114                graph.Set('chart.xticks', 25);
115   
116                return graph;
117            }
118       
119            function drawGraph ()
120            {
121                RGraph.Clear(document.getElementById("cvs"));
122               
123                var graph = getGraph('cvs', d1, d2);
124                graph.Draw();
125               
126                // Add some data to the data arrays
127                var r1 = RGraph.random(7, 9);
128                var r2 = RGraph.random(7, 10);
129
130                d1.push(r1);
131                d2.push(r2);
132               
133                if (d1.length > 100) {
134                    d1 = RGraph.array_shift(d1);
135                    d2 = RGraph.array_shift(d2);
136                }
137   
138                if (document.all && RGraph.isIE8()) {
139                    alert('[MSIE] Sorry, Internet Explorer 8 is not fast enough to support animated charts');
140                } else {
141                    setTimeout(drawGraph,25);
142                }
143            }
144       
145            drawGraph();
146        }
147    </script>
148   
149    <p>
150        The example on the right shows a  line chart that automatically updates itself every 15 milliseconds. An ideal
151        use for this could be showing a networks bandwidth usage, or a servers load value.
152    </p>
153   
154    <p>
155        This particular example shows a stacked line chart with two data series, though if you're showing load/stress values, a
156        non-filled chart might be a better choice.
157    </p>
158   
159    <p>
160        To get up-to-date data from your server you could simply have the page refresh itself, storing the data on the server,
161        or use <a href="index.html#ajax">AJAX</a> if you want the data stored client-side.
162    </p>
163   
164    <p>
165        Be careful of the data types you use to pass the data to RGraph - you should use numbers to represent values, not strings.
166    </p>
167
168    <br clear="all" />
169   
170    <pre class="code">
171&lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
172
173&lt;script&gt;
174    d1 = [];
175    d2 = [];
176   
177    // Pre-pad the arrays with 100 null values
178    for (var i=0; i&lt; 100; ++i) {
179        d1.push(null);
180        d2.push(null);
181    }
182
183    function getGraph(id, d1, d2)
184    {
185        var graph = new RGraph.Line(id, d1, d2);
186        graph.Set('chart.background.barcolor1', 'white');
187        graph.Set('chart.background.barcolor2', 'white');
188        graph.Set('chart.title.xaxis', 'Time');
189        graph.Set('chart.filled', true);
190        graph.Set('chart.fillstyle', ['#daf1fa', '#faa']);
191        graph.Set('chart.colors', ['rgb(169, 222, 244)', 'red']);
192        graph.Set('chart.linewidth', 3);
193        graph.Set('chart.ymax', 20);
194        graph.Set('chart.xticks', 25);
195
196        return graph;
197    }
198   
199    function drawGraph (e)
200    {
201        // Clear the canvas and redraw the chart
202        RGraph.Clear(document.getElementById("cvs"));
203        var graph = getGraph('cvs', d1, d2);
204        graph.Draw();
205       
206        // Add some data to the data arrays
207        d1.push(RGraph.random(5, 10));
208        d2.push(RGraph.random(5, 10));
209       
210        // Get rid of the first values of the arrays
211        if (d1.length > 100) {
212            d1 = RGraph.array_shift(d1);
213            d2 = RGraph.array_shift(d2);
214        }
215
216        setTimeout(drawGraph,25);
217    }
218   
219    drawGraph();
220&lt;/script&gt;
221</pre>
222
223</body>
224</html>
Note: See TracBrowser for help on using the repository browser.