RGraph: Odometer documentation

The example file is here.

<script>
    window.onload = function ()
    {
        // ID, MINIMUM, MAXIMUM, INDICATED VALUE
        var odo = new RGraph.Odometer('myOdo', 0, 100, 18);
        
        odo.Set('chart.green.start', 0);
        odo.Set('chart.green.end', 75);
        odo.Set('chart.yellow.start', 75);
        odo.Set('chart.yellow.end', 90);
        odo.Set('chart.red.start', 90);
        odo.Set('chart.red.end', 100);
        odo.Set('chart.label.space', 50);
        odo.Set('chart.needle.thickness', 2);
    
        odo.Draw();
    }
</script>

Available properties

You can use these properties to control how the bar graph apears.

chart.green.start The value that the green area should begin at.
Default: null
chart.green.end The value that the green area should end at.
Default: null
chart.yellow.start The value that the yellow area should begin at.
Default: null
chart.yellow.end The value that the yellow area should end at.
Default: null
chart.red.start The value that the red area should begin at.
Default: null
chart.red.end The value that the red area should end at.
Default: null
chart.label.area The width of the area that labels are put in.
Default: 35
chart.needle.thickness How thick the needle is.
Default: 2
chart.needle.style The style that is applied to the needle.
Default: #000
chart.needle.head This controls whether the arrow head on the end of the needle is displayed.
Default: true
chart.gutter The width of the area outside the odometer.
Default: 25
chart.title The title text.
Default: no title set
chart.value The indicated value
Default: none - must be given - also an argument to the constructor
chart.start The start value.
Default: none - must be given - also an argument to the constructor
chart.end The end value.
Default: none - must be given - also an argument to the constructor
chart.shadow.inner Whether a drop shadow is applied to the inner circle of the Odometer
Default: false
chart.shadow.outer Whether a drop shadow is applied to the whole Odometer.
Default: false
chart.text.size The size of the text.
Default: 12
chart.contextmenu An array of context menu items. More information on context menus is here.
Default: [] (An empty array)
chart.title.vpos This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null
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
chart.title.color The color of the title.
Default: black