An example showing you how to use images as the labels

Since the advent of the RGraph.text function, which saves the coordinates of the text that is added to the canvas, you have been able to use those coordinates to draw an image onto the canvas. You could even use the coordinates of the bar itself if you wished (if you wanted to add an image above the bar for example)

You might find that using images (eg faces) may make your charts more instantly recognisable.

The code below first creates an array of the image URLs, then creates the chart and then adds the images. The configuration is quite straightforward.

The next bit of code is where the coordinates of the text are looped through and the images are added in place of the text. With canvas charts, the coordinates of the text that's added to the canvas are saved in the obj.coordsText variable so you can use them to add the images in place of the text. Remember that the text labels are actually just empty strings - this is so that the coordinates of where the text should be are stored in the obj.coordsText variable.

Instead of just using the canvas api function drawImage - drawing API Image objects are used to place the images. This means that if you need to you can add tooltips to the images or add event listeners (eg click, mousemove, mouseover and mouseout.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.drawing.image.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="400" height="250" style="float: right">[No canvas support]</canvas>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

<script>
    // This is a simple array that holds the paths to the images
    images = [
        '../images/face1.png',
        '../images/face2.png'
    ];

    // Create the Bar chart. The configuration adds empty labels which
    // have their coordinates stored which can then be used to add the
    // images that are added after
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [8,4],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            yaxis: false,
            
            // The empty labels that we use the coordinates of
            xaxisLabels: ['',''],

            marginBottom: 70,
            marginInner: 45,
            labelsAbove: true,
            labelsAboveSpecific: ['Fred','Lenny'],
            labelsAboveSize: 18,
            textFont: 'Comic sans MS',
            colors: ['#ccf'],
            textSize: 16
        }
    }).grow();

    // Loop through the coordinates and add the images that are used
    // as the labels
    for (var i=0,idx=0;i<bar.coordsText.length; i+=1) {
        if (bar.coordsText[i].tag == 'xaxis.labels') {

            // Use the drawing API Image object to add the image instead of the
            // canvas' 2D context directly. This means that the images will be redrawn
            // automatically should tooltips be added to the chart later. Plus, of
            // course, the drawing API image objects supports having a tooltip itself.
            new RGraph.Drawing.Image({
                id: 'cvs',
                
                // Use the coordinates of the blank labels that were added in the
                // chart configuration to position the image.
                x: bar.coordsText[i].x,
                y: bar.coordsText[i].y + 5,

                src: images[idx++],
                options: {
                    halign: 'center'
                }
            }).draw();

            // Possible DOM1-style events for the drawing API Image object. These
            // are examples of adding events to the image that you can use if you
            // want
            // 
            // image.onclick = function (e, obj)
            // {
            // }
            // image.onmousemove = function (e, obj)
            // {
            // }
            // image.onmouseover = function (e, obj)
            // {
            // }
            // image.onmouseout = function (obj)
            // {
            // }
        }
    }
</script>