The drawing API circle object


[No canvas support]

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>
    var line = new RGraph.Line({
        id: 'cvs',
        data: [4,9,1,3,2,6,5],
        options: {
            labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            hmargin: 5,
            tickmarks: 'endcircle',
            colors: ['black'],
            textAccessible: true,
            textSize: 14
        }
    }).draw()
    
    var x      = line.coords[2][0]
    var y      = line.coords[2][1]
    var radius = 15;

    var circle = new RGraph.Drawing.Circle({
        id: 'cvs',
        x: x,
        y: y,
        radius: radius,
        options: {
            strokestyle: 'black',
            fillstyle: 'rgba(255,0,0,0.7)',
            tooltips: ['<b>Example</b><br />This is an example tooltip'],
            shadow: true,
            shadowOffsetx: 0,
            shadowOffsety: 0,
            textAccessible: true,
            textSize: 14,
            shadowBlur: 5,
            eventsClick: function (e, shape) {alert('In the click listener!');},
            eventsMousemove: function (e, shape) {e.target.style.cursor = 'pointer';}
        }
    }).draw();
</script>

Properties

 

Colors

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

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

 

Shadow

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

shadowColor
The color of the shadow.
Default: gray

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

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

 

Interactive features

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

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

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

 

Events

eventsClick
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

eventsMousemove
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

highlightStyle
By default this is null but you can set it to a function if you wish so that function is called to do the chart highlighting. Its passed the shape object as an argument.
Default: null

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

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

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

Comments

Add a new comment...