The drawing API Marker2 object API reference

• Usage example
• Properties
• Methods
• Events

The marker2 object allows you to add extra information to your charts in the form of markers. These markers can then give even more information in the form of tooltips or by using the event properties.

Usage example

<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[3][0];
    y = line.coords[3][1];
    
    new RGraph.Drawing.Marker2({
        id: 'cvs',
        x: x,
        y: y,
        text: 'Note',
        options: {
            textSize: 18,
            tooltips: ['<b>Note</b><br />Extra information can be displayed'],
            tooltipsCss: {
                lineHeight: '15px',
                textAlign: 'left'
            },
            highlightFill: 'rgba(255,0,0,0.5)',
            shadow: false
        }
    }).draw();
</script>

Properties

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

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

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',
}

Methods

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

var obj = new RGraph.Drawing.Marker2({
    id: 'cvs',
    x: x,
    y: y,
    text: 'Note',
}).on('draw', function (obj)
{
    // Put your draw event code here

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

}).draw();

<script>
    new RGraph.Drawing.Marker2({
        id: 'cvs',
        x: x,
        y: y,
        text: 'Note',
        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>
    marker2.canvas.onclick = function (e)
    {
        RGraph.redraw();
    
        var canvas = e.target,
            obj    = canvas.__object__,
            shape  = obj.getShape(e);

        if (shape) {            
            // Highlight the main body of the Marker2 object.
            obj.path(
                'lw 10 b r % % % % s black f rgba(255,0,0,0.25)',
                shape.x, shape.y, shape.width, shape.height
            );
        }
    }
</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.Marker2({
    id:   'cvs',
    x:    200,
    y:    150,
    text: 'Note',
    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();