The drawing API Marker3 object API reference

• Usage example
• Properties
• Methods
• Events

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 = 25;

    marker3 = new RGraph.Drawing.Marker3({
        id: 'cvs',
        x: x,
        y: y,
        radius: radius,
        options: {
            colorsFill: 'green'
        }
    }).draw();
</script>

Properties

• Color properties
• Other text properties
• Miscellaneous properties

<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.Marker3({
    id: 'cvs',
    x: 50,
    y: 50,
    radius: 25,
}).on('draw', function (obj)
{
    // Put your draw event code here

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

}).draw();

<script>
    new RGraph.Drawing.Marker3({
        id: 'cvs',
        x: 50,
        y: 50,
        radius: 25,
        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>
    marker3.onclick = function (e, shape)
    {
        marker3.on('draw',  function (obj)
        {
            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.Marker3({
    id:     'cvs',
    x:      50,
    y:      50,
    radius: 25,
    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();