From 770ba5201f5c60b2bb36602ff9d359f641e33125 Mon Sep 17 00:00:00 2001 From: Yves Fischer Date: Sun, 23 Oct 2011 21:14:40 +0200 Subject: Charting with flask, rgraph and custom "timeseries database" --- schall/static/RGraph/docs/dynamic.html | 232 +++++++++++++++++++++++++++++++++ 1 file changed, 232 insertions(+) create mode 100644 schall/static/RGraph/docs/dynamic.html (limited to 'schall/static/RGraph/docs/dynamic.html') diff --git a/schall/static/RGraph/docs/dynamic.html b/schall/static/RGraph/docs/dynamic.html new file mode 100644 index 0000000..ceb86e4 --- /dev/null +++ b/schall/static/RGraph/docs/dynamic.html @@ -0,0 +1,232 @@ + + + + + + RGraph: HTML5 Javascript charts library - Updating your charts dynamically + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Updating your charts dynamically

+ + + + [No canvas support] + + +

+ The example on the right shows a line chart that automatically updates itself every 15 milliseconds. An ideal + use for this could be showing a networks bandwidth usage, or a servers load value. +

+ +

+ This particular example shows a stacked line chart with two data series, though if you're showing load/stress values, a + non-filled chart might be a better choice. +

+ +

+ To get up-to-date data from your server you could simply have the page refresh itself, storing the data on the server, + or use AJAX if you want the data stored client-side. +

+ +

+ Be careful of the data types you use to pass the data to RGraph - you should use numbers to represent values, not strings. +

+ +
+ + 
+<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
+
+<script>
+    d1 = [];
+    d2 = [];
+    
+    // Pre-pad the arrays with 100 null values
+    for (var i=0; i< 100; ++i) {
+        d1.push(null);
+        d2.push(null);
+    }
+
+    function getGraph(id, d1, d2)
+    {
+        var graph = new RGraph.Line(id, d1, d2);
+        graph.Set('chart.background.barcolor1', 'white');
+        graph.Set('chart.background.barcolor2', 'white');
+        graph.Set('chart.title.xaxis', 'Time');
+        graph.Set('chart.filled', true);
+        graph.Set('chart.fillstyle', ['#daf1fa', '#faa']);
+        graph.Set('chart.colors', ['rgb(169, 222, 244)', 'red']);
+        graph.Set('chart.linewidth', 3);
+        graph.Set('chart.ymax', 20);
+        graph.Set('chart.xticks', 25);
+
+        return graph;
+    }
+    
+    function drawGraph (e)
+    {
+        // Clear the canvas and redraw the chart
+        RGraph.Clear(document.getElementById("cvs"));
+        var graph = getGraph('cvs', d1, d2);
+        graph.Draw();
+        
+        // Add some data to the data arrays
+        d1.push(RGraph.random(5, 10));
+        d2.push(RGraph.random(5, 10));
+        
+        // Get rid of the first values of the arrays
+        if (d1.length > 100) {
+            d1 = RGraph.array_shift(d1);
+            d2 = RGraph.array_shift(d2);
+        }
+
+        setTimeout(drawGraph,25);
+    }
+    
+    drawGraph();
+</script>
+
+ + + \ No newline at end of file -- cgit v1.2.1