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/combine.html | 463 +++++++++++++++++++++++++++++++++ 1 file changed, 463 insertions(+) create mode 100644 schall/static/RGraph/docs/combine.html (limited to 'schall/static/RGraph/docs/combine.html') diff --git a/schall/static/RGraph/docs/combine.html b/schall/static/RGraph/docs/combine.html new file mode 100644 index 0000000..e3193d9 --- /dev/null +++ b/schall/static/RGraph/docs/combine.html @@ -0,0 +1,463 @@ + + + + + + RGraph: HTML5 Javascript charts library - combining bar and line charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + +

RGraph: HTML5 Javascript charts library - Combining charts

+ + + + + + +

Combining bar and line charts

+ + [No canvas support] + + + +

+ This is an example of combining Bar and Line charts. It's quite straight-forward, and the code here shows you how it can be achieved. +

+ +

+ If the values for the line and bar result in different Y scales you may need to specify the chart.ymax property for each chart + so that the scales are the same. The line turns off Y labels so as not to overwrite the Bars labels. +

+ + Tooltips + +

+ You can have tooltips on the Line and Bar chart by setting chart.tooltips.highlight to false, as shown. + The order in which you create the charts is also important, you must define the Bar chart first, and subsequently the Line + chart. +

+ +

Update - 28th August 2011

+

+ You can now have tooltips on both the Line chart and the Bar chart, as is shown in the chart here. Keep in mind + that you will need to have highlighting turned off on both chart types - chart.tooltips.highlight. +

+ +
+<script>
+    line.Set('chart.tooltips.highlight', false);
+    bar.Set('chart.tooltips.highlight', false);
+</script>
+
+ +

+ Because the tooltips are only triggered by the Line chart, you should put all of the information, for both the Line and the + Bar chart, in the tooltips. +

+ + +

Combining Line charts

+ + + [No canvas support] + + +

+ Another type of chart you may want is a line chart with Y axes on both sides, as illustrated on the right. You should + be careful with this chart type as it can easily lead to confusion. +

+ +

+ This chart is made up from two line charts, one with the Y axis on the left and one on the right. The code that makes up + this chart is below. +

+ +

+ The only reason to combine line charts is to get Y axes on the left and right. If you simply want mutiple lines, + you can do this without combining any charts. See the line chart example page +

+ +
+ + 
+<script>
+    window.onload = function
+    {
+        line2 = new RGraph.Line('myCanvas2', [51,22,23,33,35,23,32,45]);
+        line2.Set('chart.hmargin', 10);
+        line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']);
+        line2.Set('chart.linewidth', 3);
+        line2.Set('chart.shadow', true);
+        line2.Set('chart.shadow.offsetx', 2);
+        line2.Set('chart.shadow.offsety', 2);
+        line2.Set('chart.ymax', 65);
+        line2.Set('chart.units.post', 'l');
+        line2.Set('chart.noxaxis', true);
+        line2.Set('chart.noendxtick', true);
+        line2.Set('chart.title', 'An example of axes both sides');
+        line2.Draw();
+
+        line3 = new RGraph.Line('myCanvas2', [42,50,51,23,46,48,65,11]);
+        line3.Set('chart.hmargin', 10);
+        line3.Set('chart.linewidth', 3);
+        line3.Set('chart.shadow', true);
+        line3.Set('chart.shadow.offsetx', 2);
+        line3.Set('chart.shadow.offsety', 2);
+        line3.Set('chart.yaxispos', 'right');
+        line3.Set('chart.noendxtick', true);
+        line3.Set('chart.background.grid', false);
+        line3.Set('chart.ymax', 65);
+        line3.Set('chart.colors', ['blue', 'red']);
+        line3.Set('chart.units.pre', '$');
+        line3.Set('chart.key', ['Cost', 'Volume']);
+        line3.Set('chart.key.background', 'rgba(255,255,255,0.5)');
+        line3.Draw();
+    }
+</script>
+
+ + + + \ No newline at end of file -- cgit v1.2.1