# A basic example of the drawing API circle object

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.common.tooltips.js"></script>
    <script src="RGraph.drawing.circle.js"></script>
    <script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="600" height="250">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

    <script>
        var line = new RGraph.Line({
            id: 'cvs',
            data: [5,8,6,4,3,5,2],
            options: {
                hmargin: 5,
                labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                textAccessible: true
            }
        }).draw();

        var coords = line.coords[2];

        var circle = new RGraph.Drawing.Circle({
            id: 'cvs',
            x: coords[0],
            y: coords[1],
            radius: 30,
            options: {
                strokestyle: 'rgba(0,0,0,1)',
                fillstyle: 'rgba(0,0,0,0.2)'
            }
        }).on('click', function (e, shape)
        {
            alert('[RGRAPH] The circle has been clicked!');

        }).on('mousemove', function (e, shape)
        {
            return true;
        }).draw();
    </script>

« Back