The drawing API rect object

Summary: The drawing API rect object which be added to your chart and provides a way for you to give your charts extra interactivity

• Properties
• Methods
• Custom RGraph events that are available

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>
    line = new RGraph.Line({
        id: 'cvs',
        data: [4,9,1,3,2,6,5],
        options: {
            xaxis: false,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            marginInner: 5,
            tickmarksStyle: 'none',
            shadow: false,
            spline: true,
            colors: ['black']
        }
    }).draw()
    
    rect = new RGraph.Drawing.Rect({
        id: 'cvs',
        x: 35,
        y: line.canvas.height - 35 - 50,
        width: 50,
        height: 50,
        options: {
            colorsStroke: 'transparent',
            colorsFill: 'rgba(255,255,0,0.7)',
            shadow: true,
            shadowColor: '#aaa',
            shadowBlur: 2,
            shadowOffsetx: 2,
            shadowOffsety: 2,
            tooltips: ['<b>Example</b><br />This is an example tooltip'],
            highlightStroke: 'transparent'
        }
    }).draw()
</script>

Properties

• Color properties
• Shadow properties
• Interactive features properties
• Miscellaneous properties

Color properties

Shadow properties

Interactive features properties

tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt',
    backgroundColor: 'black',
    color: 'white'
}

tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt',
    backgroundColor: 'black',
    color: 'white'
}

Miscellaneous properties

Methods

<script>
    rect.canvas.onclick = function (e)
    {
        RGraph.redraw();
    
        var canvas = e.target,
            obj    = canvas.__object__,
            shape  = obj.getShape(e);

        if (shape) {            
            // Highlight the rectangle.
            obj.path(
                'lw 10 b r % % % % s black f rgba(255,0,0,0.25)',
                shape.x, shape.y, shape.width, shape.height
            );
        }
    }
</script>

This method can be used to set an event listener on an object. It operates in a similar way to the jQuery on() function. The first argument is the event that you wish to attach to and the second is the handler function. For example:

obj.on('draw', function (obj)
{
    // Put your event code here
});

The function is useful if you use method chaining when creating your charts:

obj = new RGraph.Drawing.Rect({

        id: 'cvs',
         x: 50,
         y: 50,
     width: 100,
    height: 100,

}).on('draw', function (obj)
{
    // Put your draw event code here

}).on('click', function (e, shape)
{
    // Handle the click event

}).draw();

The exec function is documented here.

Custom RGraph events that are available

Custom RGraph events are events that RGraph fires when certain actions occur. There is a more comprehensive list of these events here . Here's some example code that show you how to add these events to your chart.

• click
• mousemove
• mouseover
• mouseout

There's more documentation about events available here: Summary of events documentation

<script>
    rect = new RGraph.Drawing.Rect({
        id: 'cvs',
        x: 5,
        y: 5,
        width: 100,
        height: 100,
        options: {
        }
    }).draw().on('click', function (e, shape)
    {
        // Add your click event listener code here

    }).on('mousemove', function (e, shape)
    {
        // Add your mousemove event listener code here

    }).on('mouseover', function (e, shape)
    {
        // Add your mouseover event listener code here

    }).on('mouseout', function (obj)
    {
        // Add your mouseout event listener code here
    });
</script>