Share RGraph:
Share RGraph on Twitter Share RGraph on Google Plus Share RGraph on Facebook Follow RGraph on LinkedIn

The RGraph drawing API - The rect object

[No canvas support]

The rect object allows you to add a rectangle to your charts. The rectangle can be used as a way to provide an extra tooltip (for example) to your users.


Usage example

<script>
    window.onload = function (e)
    {
        var line = new RGraph.Line('cvs', [4,9,1,3,2,6,5])
            .set('labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
            .set('hmargin', 5)
            .set('tickmarks', 'endcircle')
            .set('colors', ['black'])
            .draw();
        
        var rect = new RGraph.Drawing.Rect('cvs', 35,line.canvas.height - 35 - 50,50,50)
            .set('strokestyle', 'black')
            .set('fillstyle', 'rgba(255,0,0,0.7)')
            .set('shadow', true)
            .set('tooltips', ['<b>Example</b><br />This is an example tooltip'])
            .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

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

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

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

shadow.blur
The severity of the shadow blur.
Default: 5

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

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

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

tooltips.valign
This is aligned to the top of the Rect or the center.
Default: top

Events

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

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

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

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)

© Copyright 2014 Richard Heyes All rights reserved.