How to use custom tickmarks in your charts with the drawing API

  Read comments...

Summary
A guide for using custom tickmarks in your charts with the drawing API

[No canvas support]

Previously you could add tickmarks to your Line charts in RGraph by using the configuration options available to you (and you still can of course). Now though it has gotten much easier with the addition of the image drawing object. This is not specific to the Line chart but is a regular drawing API object which can be used to show images as tickmarks. The advantage over standard tickmarks is that these objects can be then assigned either tooltips or events.click/events.mousemove functions to provide extra interactivity.

1. The basic chart

Here is the chart before the image object has been added. It's just an average - quite simple - Line chart that doesn't do anything special. Next we can utilise the Line charts coords array in order to then use those coordinates to position the image object.

<script>
    window.onload = (function ()
    {
        var line = new RGraph.Line({
            id: 'cvs',
            data: [4,8,6,3,5,4,9,5,6,4,8,7],
            options: {
                hmargin: 15,
                shadow: true,
                linewidth: 2,
                labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
                textAccessible: true,
                textSize: 14
            }
        }).draw();
    });
</script>

2. The chart with the image drawing API object added

Here is the chart with the image drawing object added. It's positioned using the coordinates from the Line chart and because by default it's aligned to the top left half the width and height are removed in order to make it appear central. Two event listeners are then added - one to the click event so that when you click the image an alert appears and one to the mousemove event so that the cursor changes to the hand when you move the mouse over it.

<script>
    window.onload = (function ()
    {
        var line = new RGraph.Line({
            id: 'cvs',
            data: [4,8,6,3,5,4,9,5,6,4,8,7],
            options: {
                hmargin: 15,
                shadow: true,
                linewidth: 2,
                labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
                textAccessible: true,
                textSize: 14
            }
        }).draw();
        
        // This is the function that handles the click
        function myClick (e, shape)
        {
            alert('This alert was triggered by the events.click option')
        }

        var x = line.coords[5][0] - 16
        var y = line.coords[5][1] - 16
        
        // Now add the image
        var img = new RGraph.Drawing.Image({
            id: 'cvs',
            x: x,
            y: y,
            src: '/images/star.png',
            options: {
                eventsClick: myClick,
                eventsMousemove: function (e, shape) {e.target.style.cursor = 'pointer';}
            }
        }).draw()
    })
</script>

The Scatter chart using this technique

In the same way the scatter chart can be made to use this technique as in the example below. Here the images are drawn at the Scatter chart coordinates - thereby overwriting the normal tickmarks.

[No canvas support]
<script>
    window.onload = (function ()
    {
        // First create the chart
        var scatter = new RGraph.Scatter({
            id: 'cvs2',
            data: [[150,12],[168,34],[112,52],[23,26]],
            options: {
                xmax: 365,
                labels: ['Q1','Q2','Q3','Q4'],
                textAccessible: true,
                textSize: 14
            }
        }).draw();



        for (var i=0; i<scatter.coords[0].length; ++i) {
            
            var x = scatter.coords[0][i][0] - 16
            var y = scatter.coords[0][i][1] - 16
            //                     |  |  |    |
            //                     |  |  |    Remove half the width/height so the image appears centered
            //                     |  |  The X (0) and Y (1) coordinates
            //                     |  The point in the set of data
            //                     The set of data - the Scatter chart can accept more than one

            // Now add the image
            var img = new RGraph.Drawing.Image({
                id: 'cvs2',
                x: x,
                y: y,
                src: i >= 2 ? '/images/star.png' : '/images/yellow_exclamation2.png',
            }).draw();
        }
    }
</script>
Share RGraph
X

Comments