The drawing API Circle object API reference

• Usage example
• Properties
• Methods
• Events

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

See all of the 1200+ demos in the download archive.

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [4,9,1,3,2,6,5],
        options: {
            spline: true,
            backgroundGridVlines:false,
            backgroundGridBorder:false,
            xaxis: false,
            yaxis: false,
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            marginInner: 5,
            tickmarksStyle: 'endcircle',
            tickmarksSize: 10,
            colors: ['black'],
            textSize: 16
        }
    }).draw();

    x      = line.coords[2][0];
    y      = line.coords[2][1];
    radius = 15;

    new RGraph.Drawing.Circle({
        id: 'cvs',
        x: x,
        y: y,
        radius: radius,
        options: {
            colorsStroke: 'black',
            colorsFill: 'rgba(255,0,0,0.7)',
            tooltips: ['<b>Example</b><br />This is an example tooltip'],
            shadow: true,
            shadowOffsetx: 0,
            shadowOffsety: 0,
            shadowBlur: 5,
            textSize: 14
        }
    }).draw();
</script>

Properties

• Color properties
• Shadow properties
• Interactive features properties
• Labels and text properties
• Miscellaneous properties

tooltipsFormattedListItems: [
    ['Bill','Jerry','Berty'],// First tooltip
    ['Gill','Carrie','Lucy'],// Second tooltip
    ['Pob','Nobby','Hilda']  // Third tooltip
]

.RGraph_tooltip ul#rgraph_formatted_tooltips_list li {
    text-align: left;
    color: yellow;
}

tooltips: {
    borderLeft: 'gray 2px solid',
    borderBottom: 'gray 2px solid'
}

tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt'
}

<div style="margin-left: 50px; display: inline-block">
    <canvas id="cvs" width="650" height="250"></canvas>
</div>

Methods

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

var obj = new RGraph.Drawing.Circle({
    id: 'cvs',
    x: 25,
    y: 25,
    radius: 50,
}).on('draw', function (obj)
{
    // Put your draw event code here

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

}).draw();

<script>
    new RGraph.Drawing.Circle({
        id: 'cvs',
        x: 25,
        y: 25,
        radius: 50,
        options: {
             events: {
                beforedraw: function () {alert('The beforedraw event fired');},
                draw: [
                    function (obj) {alert('The first draw event listener function.');},
                    function (obj) {alert('The second draw event listener function.');}
                ]
            }
        }
    }).draw();
</script>

obj.exec(function (obj)
{
    // Put your code here
});

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

        if (shape) {            
            // Highlight the Circle object.
            obj.path(
                'lw 10 b a % % % 0 6.29 false s black f red',
                shape.x, shape.y, shape.radius
            );
        }
    }
</script>

Events

RGraph supports custom events that allow you to easily add interactivity to your charts if required. The following events are available:

new RGraph.Drawing.Circle({
    id: 'cvs',
    x: 50,
    y: 50,
    radius: 20,
    options: {
        events: {
            draw: function (obj){console.log('The draw event has fired');},
            
            // Alternatively you can give an array of functions
            //to run.
            firstdraw: [
                function (obj) {console.log('First function');},
                function (obj) {console.log('Second function');}
            ]
        }
    }
}).draw();