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

RGraph: HTML5 Javascript charts library - Gauge charts documentation

+ + + +

+ Gauge charts are another variant of the Odometer/Meter and may be more suited to your design. +

+ +

+ The example file is here. +

+ + + + 
 
+<script>
+    window.onload = function ()
+    {    
+        var gauge = new RGraph.Gauge('cvs', 0, 100, 46);
+        gauge.Set('chart.title', 'Bandwidth');
+        gauge.Draw();
+    }
+</script>
+
+ + +

Properties

+ +

+ You can use these properties to control how the Gauge chart apears. You can set them by using the Set() method. Eg: +

+ +

+ myGauge.Set('name', 'value'); +

+ + + + + +

Margins

+ + + chart.gutter.left
+ The left gutter of the chart.
+ Default: 5

+ + + chart.gutter.right
+ The right gutter of the chart.
+ Default: 5

+ + + chart.gutter.top
+ The top gutter of the chart.
+ Default: 5

+ + + chart.gutter.bottom
+ The bottom gutter of the chart.
+ Default: 5

+ + + +

Labels and text

+ + + chart.text.font
+ The font that is used for the text.
+ Default: Verdana

+ + + chart.text.color
+ The color of the text.
+ Default: #666

+ + + chart.text.size
+ The size of the text
+ Default: 10

+ + +

Titles

+ + + chart.title
+ The title of the chart, if any.
+ Default: (An empty string)

+ + +chart.title.font
+The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)
+Default: Verdana

+ + +chart.title.size
+The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.
+Default: 14

+ + +chart.title.bold
+Whather the title is bold or not.
+Default: true

+ + + chart.title.color
+ The color that the title is rendered in.
+ Default: #333

+ + +

Scale

+ + + chart.scale.decimals
+ The number of decimals used in the labels
+ Default: 0

+ + + chart.units.pre
+ The units that the Y axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".
+ Default: '' (An empty string)

+ + + chart.units.post
+ The units that the Y axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".
+ Default: '' (An empty string)

+ + +

Colors

+ + + + chart.red.start
+ The point at which the red area starts.
+ Default: 90% of the max

+ + + chart.red.color
+ The red color.
+ Default: #DC3912

+ + + chart.yellow.color
+ The yellow color.
+ Default: #FF9900

+ + + chart.green.end
+ The point at which the green area ends.
+ Default: 70% of the max

+ + + chart.green.color
+ The green color.
+ Default: rgba(0,0,0,0)

+ + +

Needle

+ + + chart.needle.tail
+ Whether the tail for the needle is shown.
+ Default: false

+ + +

Miscellaneous

+ + + chart.border.width
+ The width of the border that goes around the Gauge.
+ Default: 10

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