RGraph: Javascript charts and graph 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']
Labels and text
chart.value.label
This controls whether the Thermometers value is shown in text.
Default: true
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
Interactive features
chart.adjustable
Defaulting to false, this determines whether your bar chart will be adjustable.
Default: false
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
