RGraph - Free HTML5 and JavaScript charts

The RGraph drawing API - The circle object

Please remember to link to the RGraph website and give your feedback here. Thanks!

The circle object allows you to add a circle to your charts. You could use this as a "button" to provide extra information (with the circle tooltip) or simply to highlight a point. The circle object is very similar in function to the rect object.

Usage example

<script>
    window.onload = function (e)
    {
        var line = new RGraph.Line('cvs', [4,9,1,3,2,6,5])
            .Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
            .Set('chart.hmargin', 5)
            .Set('chart.tickmarks', 'endcircle')
            .Set('chart.colors', ['black'])
            .Draw();
        
        var circle = new RGraph.Drawing.Circle('cvs',line.coords[2][0],line.coords[2][1],15)
            .Set('chart.strokestyle', 'black')
            .Set('chart.fillstyle', 'rgba(255,0,0,0.7)')
            .Set('chart.tooltips', ['<b>Example</b><br />This is an example tooltip'])
            //.Set('chart.events.click', function (e, shape) {alert('In the click listener!');})
            //.Set('chart.events.mousemove', function (e, shape) {e.target.style.cursor = 'pointer';})
            .Draw();
    }
</script>

Colors

chart.strokestyle
The color used to stroke the circle.
Default: transparent

chart.fillstyle
The color used to fill the circle.
Default: red

Shadow

chart.shadow
This controls whether the shadow is enabled or not.
Default: false

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

chart.shadow.offsetx
The X offset that the shadow is drawn at.
Default: 3

chart.shadow.offsety
The Y offset that the shadow is drawn at.
Default: 3

Interactive features

chart.tooltips
The tooltip for the circle. Even though you can only have one - this should still be an array: mycircle.Set('chart.tooltips', ['The tooltip']);
Default: null

chart.tooltips.event
This can be onclick or onmousemove and controls what event is used to trigger the tooltip.
Default: onclick

chart.tooltips.highlight
This stipulates whether the circle will be highlighted when the tooltip is shown.
Default: true

Events

chart.events.click
If you want to add your own onclick function you can do so by assigning it to this property. See here for details.
Default: null

chart.events.mousemove
If you want to add your own onmousemove function you can do so by assigning it to this property. See here for details.
Default: null

Miscellaneous

chart.highlight.stroke
This is the color that the circle is highlighted (the stroke) in when the tooltip is shown.
Default: black

chart.highlight.fill
This is the color that the circle is highlighted in (the fill) when the tooltip is shown.
Default: rgba(255,255,255,0.7)

chart.linewidth
This is the linewidth that is used when stroking the circle.
Default: 2