HOWTO: Use images as tickmarks

• 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,
            textSize: 14,
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
        }
    }).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,
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
        }
    }).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.