MENU
.net Powerful JavaScript charts
About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.19, 28th September 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

Download »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

HOWTO: Use images as tickmarks

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

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

[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));
        }
    }

    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.

[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));
        }
    }

    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.