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/animation_segments.html | 147 ++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 schall/static/RGraph/docs/animation_segments.html (limited to 'schall/static/RGraph/docs/animation_segments.html') diff --git a/schall/static/RGraph/docs/animation_segments.html b/schall/static/RGraph/docs/animation_segments.html new file mode 100644 index 0000000..025f750 --- /dev/null +++ b/schall/static/RGraph/docs/animation_segments.html @@ -0,0 +1,147 @@ + + + + + + RGraph: HTML5 Javascript charts library - Animated Pie chart + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + +

RGraph: HTML5 Javascript charts library - An example of an animated & interactive Pie chart

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

+ This example shows animated segment separation. This used to be something that had to be done seperately, however now it's + built into the Pie chart as a tooltip effect. You can utilise the effect by using the chart.highlight.style setting + like this: +

+ +
+ + + 
+<script>
+    window.onload = function ()
+    {
+        var pie = new RGraph.Pie('cvs', [24,43,51,16,26,23,35]);
+        pie.Set('chart.strokestyle', 'rgba(0,0,0,0)');
+        pie.Set('chart.labels', ['Richard','John','Kev','Lou','Pete','Fred','Bob']);
+        pie.Set('chart.tooltips', ['Richard','John','Kev','Lou','Pete','Fred','Bob']);
+        pie.Set('chart.highlight.style', 'explode');
+        pie.Set('chart.labels.sticks', true);
+        pie.Set('chart.radius', 100);
+        pie.Draw();
+    }
+</script>
+
+ +

+ « Back to animation page +

+ + + \ No newline at end of file -- cgit v1.2.1