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>
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');