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

RGraph: HTML5 Javascript charts library - Thermometer charts documentation

+ + +

+ Thermometer charts, along with progress bars, are a prime candidate for use in a status panel. Much like the progress bars, + but the design may be better suited to your application/website etc. +

+ +

+ The example file is here. +

+ + + + 
 
+<script>
+    window.onload = function ()
+    {
+        var thermometer = new RGraph.Thermometer('myCanvas', data);
+        thermometer.Set('chart.gutter.left', 45);
+        thermometer.Set('chart.gutter.right', 45);
+        thermometer.Set('chart.colors', ['rgba(255,0,0,1)']);
+        thermometer.Draw();
+    }
+</script>
+
+ + +

Properties

+ +

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

+ +

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

+ + + + + +

Margins

+ + + chart.gutter.left
+ The left gutter of the chart, (the gutter is where the labels and title are)).
+ Default: 15

+ + + chart.gutter.right
+ The right gutter of the chart, (the gutter is where the labels and title are).
+ Default: 15

+ + + chart.gutter.top
+ The top gutter of the chart, (the gutter is where the labels and title are).
+ Default: 15

+ + + chart.gutter.bottom
+ The bottom gutter of the chart, (the gutter is where the labels and title are).
+ Default: 15

+ + +

Colors

+ + + chart.colors
+ An array of the colors of the actual bars.
+ Default: An array - ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0']

+ + + + +

Titles

+ + + chart.title.side
+ This is the text that is used as the side title on the left hand side of the thermometer.
+ 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: null

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

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

+ + + chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
+ Default: 0.5

+ + +

Labels and text

+ + + chart.value.label
+ This controls whether the Thermometers value is shown in text.
+ Default: true

+ + + chart.ylabels.count
+ A value that controls how many Y labels there are. Keep in mind that if you use this it may result in decimals, + and to see the full number you may need to use chart.scale.decimals.
+ Default: 10

+ + +

Shadow

+ + + chart.shadow
+ Whether a drop shadow is applied.
Default: true

+ + + chart.shadow.color
+ The color of the shadow.
Default: gray

+ + + chart.shadow.offsetx
+ The X offset of the shadow.
Default: 0

+ + + chart.shadow.offsety
+ The Y offset of the shadow.
Default: 0

+ + + chart.shadow.blur
+ The severity of the shadow blurring effect.
Default: 15

+ + +

Scale

+ + + chart.scale.visible
+ Defaulting to false, this controls whether the scale is visible.
+ Default: false

+ + + chart.scale.decimals
+ This allows you to control the amount of decimals that the labels have.
+ Default: 0

+ + +

Interactive features

+ + + chart.adjustable
+ Defaulting to false, this determines whether your bar chart will be adjustable.
+ Default: false

+ + + chart.contextmenu
+ An array of context menu items. More information on context menus is here.
+ Default: [] (An empty array)

+ + + chart.resizable
+ Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event + handlers this has to install code on, This feature is unlikely to work with other dynamic features (the + context menu is fine however).
+ Default: false

+ + + chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
+ Default: false

+ + + chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
+ Default: black

+ + +

Zoom

+ + + chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
+ Default: canvas

+ + + chart.zoom.factor
+ This is the factor that the chart will be zoomed by (bigger values means more zoom)
+ Default: 1.5

+ + + chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
+ Default: true

+ + + chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
+ Default: true

+ + + chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
+ Default: right

+ + + chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
+ Default: down

+ + + chart.zoom.delay
+ The delay (in milliseconds) between frames.
+ Default: 50

+ + + chart.zoom.frames
+ The number of frames in the zoom animation.
+ Default: 10

+ + + chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
+ Default: true

+ + + chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
+ Default: 75

+ + + chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
+ Default: 75

+ + + chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
+ Default: true

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