source: Dev/trunk/RGraph/docs/dynamic.html @ 201

Last change on this file since 201 was 77, checked in by fpvanagthoven, 14 years ago

RGraph
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.