How to use images as your tickmarks

Share RGraph:   

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

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

As of August 2014 you can now 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({tickmarks: '../images/tick.jpg'});  // Starts with ../
// obj.set({tickmarks: '/images/tick.jpg'});    // Starts with /
// obj.set({tickmarks: 'data: ...'});           // Starts with data:
// obj.set({tickmarks: 'images/tick.png'});     // Starts with images/

For example:

[No canvas support]
<script>
    var line = new RGraph.Line({
        id: 'cvs',
        data: [4,3,8,4,5,6,8,9,4,7,8,8],
        options: {
            tickmarks: 'image:/images/tickmark.png',
            hmargin: 10,
            textAccessible: true,
            textSize: 14
        }
    }).draw()
<script>

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

Using image based tickmarks with the Line chart

[No canvas support]
<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 ()
        {
            // Keep in mind that "this" refers to the image
            obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
        }
    }

    var line = new RGraph.Line({
        id: 'cvs1',
        data: [4,3,8,4,5,6,8,9,4,7,8,8],
        options: {
            tickmarks: myTick,
            textAccessible: true,
            textSize: 14
        }
    }).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.

[No canvas support]
<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 ()
        {
            obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
        }
    }

    var scatter = new RGraph.Scatter({
        id: 'cvs2',
        data: [[0,0],[5,16],[10,14],[15,24],[20,23],[25,32],[30,36],[35,41],[40,45],[45,48]],
        options: {
            tickmarks: myTick2,
            xmax: 50,
            ymax: 100,
            xscale: true,
            textAccessible: 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 th same image (the star) but this is not a requirement - you could use different tickmarks based on the value.

Comments

Add a new comment...