An example of how to use images as 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 on to 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 straight-forward.

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.

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

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