RGraph: Progress bar documentation

The example file is here.

<script>
    window.onload = function ()
    {
        var myProgress = new RGraph.Progess('myProgress', 78, 500);
    
        // Create a gradient for the progress meter
        gradient = myProgress.context.createLinearGradient(25,0,225,0);
        gradient.addColorStop(1, 'rgba(255,255,255,1)');
        gradient.addColorStop(0, 'rgba(0,255,0,1)');
    
        myProgress.Set('chart.color', gradient);
        myProgress.Draw();
    }
</script>

Available properties

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

chart.color The color of the bar. This can be a solid color, or a gradient that you create.
Default: #0c0
chart.tickmarks Whether the tickmarks are drawn.
Default: true
chart.gutter The size of the gutter.
Default: 25
chart.max The maximum value. You don't need to set this because it's one of the arguments to the constructor.
chart.numticks How many tick marks there are.
Default: 10
chart.background.color The background color.
Default: #eee
chart.orientation Either horizontal (the default) or vertical determining how the progress bar is shown.
Default: horizontal
chart.shadow Whether the progress bar has a shadow. This uses the canvas shadow API and therefore is only supported on Chrome 2, Safari 3.1 and Firefox 3.1 (and above).
Default: false
chart.shadow.offsetx The X offset of the progress bar shadow.
Default: 3
chart.shadow.offsety The Y offset of the progress bar shadow.
Default: 3
chart.shadow.color The color of the shadow.
Default: rgba(0,0,0,0.5)
chart.shadow.blur The blurring effect that is applied to the shadow.
Default: 3
chart.text.size The size of the text.
Default: 12
chart.units.pre The units that the Y scale is measured in (these are preppend to the number).
Default: none
chart.units.post The units that the Y scale is measured in (these are appended to the number).
Default: none
chart.title The title of the progress bar.
Default: An empty string
chart.tooltips An array, albeit one element only. This is shown when the progress bar is clicked on. This can contain HTML.
Default: An empty array
chart.tooltip.effect The animated effect used for showing the tooltip. Can be either fade or expand.
Default: fade
chart.labels Labels that are applied to the graph.
Default: An empty array
chart.contextmenu An array of context menu items. More information on context menus is here.
Default: [] (An empty array)
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.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.title.color The color of the title.
Default: black
chart.tickmarks.color The color used for tickmarks.
Default: black
chart.text.color The color used for the text labels.
Default: black

You can set these properties by using the Set() method. Eg:

myProgress.Set('name', 'value');