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
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
Instead of just using the canvas API function
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
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):