How to use images as tickmarks

A guide for using image-based tickmarks. They can be used for decorative purposes or to illustrate something.

Note that starting with version 7 and with the introduction of scaling, the size of the canvas coordinate space has doubled (ie your 700x300 canvas is actually now 1400x600 - even though you still only see it shrunk down to 700x300). What this means in practice is that you'll probably need to take this into account when you're drawing your custom tickmark. You can see from the example code below that the widths and heights of the images are doubled by multiplying them with the scaleFactor (which by default, is two).

Note: You may also be interested in this, more recent, HOWTO guide that shows you how to use the Image drawing object.

Using image-based tickmarks with the Line chart
Using image-based tickmarks with the Scatter chart

You can use image tickmarks by just specifying the location of the image using one of the supported formats (one that RGraph can recognise as an image URL). This makes using images as tickmarks much easier. It looks like this:

obj.set({tickmarks: 'image:/images/tick.png'}); // Starts with image: prefix
// obj.set({tickmarksStyle: '../images/tick.jpg'});  // Starts with ../
// obj.set({tickmarksStyle: '/images/tick.jpg'});    // Starts with /
// obj.set({tickmarksStyle: 'data: ...'});           // Starts with data:
// obj.set({tickmarksStyle: 'images/tick.png'});     // Starts with images/

Some example code:

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [4,3,8,4,5,6,8,9,4,7,8,8],
        options: {
            tickmarksStyle: 'image:/images/tickmark.png',
            marginInner: 10,
            textSize: 14
        }
    }).draw()
<script>

The previous way of using images as tickmarks is described below.

Using image-based tickmarks with the Line chart

<script>
    //
    // The function that is called once per tickmark, to draw it once
    // the tickmark image has loaded.
    // 
    // @param object obj   The chart object
    // @param array  data  The entire line data
    // @param number value The individual points value
    // @param number index The current index, in the data array
    // @param number x     The X coordinate
    // @param number y     The Y coordinate
    // @param string color The color of the line
    // @param number prevX The previous X coordinate
    // @param number prevY The previous Y coordinate
    //
    function myTick (obj, data, value, index, x, y, color, prevX, prevY)
    {
        // Create the image
        var img = new Image();
        img.src = '../images/tickmark.png';
        
        // Draw the image on to the canvas when it has loaded
        img.onload = function ()
        {
            var scaleFactor = RGraph.getScaleFactor(obj);

            // Keep in mind that "this" refers to the image
            obj.context.drawImage(
                this,
                x - this.width,
                y - this.height,
                this.width * scaleFactor,
                this.height * scaleFactor
            );
        }
    }

    line = new RGraph.Line({
        id: 'cvs',
        data: [4,3,8,4,5,6,8,9,4,7,8,8],
        options: {
            tickmarksStyle: myTick
        }
    }).draw()
</script>

Using image-based tickmarks with the Scatter chart

The Scatter chart is slightly different simply because there are X and Y coordinates to take into account.

<script>
    //
    // The function that is called once per tickmark, to draw it
    // 
    // @param object obj   The chart object
    // @param object data  The chart data
    // @param number x     The X coordinate
    // @param number y     The Y coordinate
    // @param number xVal  The X value
    // @param number yVal  The Y value
    // @param number xMax  The maximum X scale value
    // @param number xMax  The maximum Y scale value
    // @param string color The color of the tickmark
    //
    function myTick2 (obj, data, x, y, xVal, yVal, xMax, yMax, color)
    {
        var img = new Image();
        img.src = '../images/tickmark.png';
        
        img.onload = function ()
        {
            var scaleFactor = RGraph.getScaleFactor(obj);

            obj.context.drawImage(
                this,
                x - this.width,
                y - this.height,
                this.width * scaleFactor,
                this.height * scaleFactor
            );
        }
    }

    scatter = new RGraph.Scatter({
        id: 'cvs',
        data: [[0,0],[5,16],[10,14],[15,24],[20,23],[25,32],[30,36],[35,41],[40,45],[45,48]],
        options: {
            tickmarksStyle: myTick2,
            xaxisScaleMax: 50,
            yaxisScaleMax: 100,
            xaxisScale: true,
            textSize: 14
        }
    }).draw()
</script>

Note

Remember that you could, if you wanted to, use different tickmark images for different points. Here the custom functions all use the same image (a star) but this is not a requirement - you could use different tickmarks based on the value.