HOWTO: Add images to your charts (various methods)
- The drawing API
- Tooltips
- Background images
- CSS positioning
- Using the ModalDialog
- Using the canvas API
There are a few methods of adding images to your charts, and they are:
The drawing API
You can add images to your charts using the new (September 2012) drawing API. This allows you to add objects to your canvas that have a similar API to regular RGraph objects. Remember that the order that you create the objects determines the order in which they're redrawn - the object you create first is "at the back" - as illustrated here.
<script>
new RGraph.Drawing.Image({
id: 'cvs',
x: 25,
y: 25,
src: '/images/logo.png'
}).draw();
bar = new RGraph.Bar({
id: 'cvs',
data: [4,6,8,9,4,5,7],
options: {
tooltips: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
textSize: 14,
textAccessible: false
}
}).draw()
</script>
Tooltips
Tooltips are regular HTML DIV tags so can contain a wide variety of HTML -
links, movies, pictures etc. They can be formatted
with CSS (and there's also a specific CSS class that you can use to make
them all appear the same - RGraph_tooltip
).
For example:
<script> bar.set({ tooltips: [ '<img src="/images/logo.png" />', '<img src="/images/alex.png" />', '<img src="/images/chrome_logo.png" />', '<img src="/images/unicef.png" />', '<img src="/images/merry-christmas-snowman.png" />' ] }); </script>
Background images
If what you want to achieve is to add a "tag" to your charts (eg in a corner of the chart), or you simply want a background image then the Bar, Line and Scatter charts all support background images. The chart below shows an example of these. You don't have to use a large image - by using the background image properties you can specify whether the image is stretched across the whole canvas, the X/Y coordinates of the image and the alignment.
<script> myChart.set({ backgroundImage: '/images/logo.png', backgroundImageStretch: false }) </script>
Note: Being a background image, be aware that the image is the first thing that's drawn on the canvas. As such, any grid that you have will be drawn over the top of the image. You can of course turn the grid off if you don't want this.
CSS positioning
By using CSS relative
/absolute
positioning you can place a regular image over the top of the canvas. As with background images,
the image will not be affected by the canvas redrawing. If you want to link the image or add event listeners to it, you can do
so as you would normally.

The HTML mark-up needed to achieve this is:
<div style="position: relative"> <canvas id="cvs_css" width="600" height="250">[No canvas support]</canvas> <img src="/images/logo.png" style="position: absolute; top: 35px; left: 30px; border: 1px dashed gray; padding: 3px" /> </div>
Using the ModalDialog
You can make use of the ModalDialog to show images, changing the image in the ModalDialog <div>
each time it is shown. You can use
the events to make it easier to do.
<script>
//
// The code that produces the chart for the ModalDialog method
//
function ShowDialog (e, shape)
{
var index = shape.dataset;
var images = [
'<img src="/images/logo.png" />',
'<img src="/images/alex.png" />',
'<img src="/images/chrome_logo.png" />',
'<img src="/images/unicef.png" />',
'<img src="/images/merry-christmas-snowman.png" />'
];
ModalDialog.show('string:<img src="/images/close.png" style="
position: absolute;
top: 5px;
right: 5px;
cursor: pointer" onclick="ModalDialog.Hide()" />
<center>' + images[index] + '</center>', 200);
}
myChart.on('click', ShowDialog);
</script>
Using the canvas API
By using the canvas API you can draw directly onto the canvas by using the drawImage()
function. You can combine
this with the RGraph custom events (eg beforedraw
, draw
) and if you use dynamic features you'll need to.
<script> bar_ondraw = new RGraph.Bar({ id: 'cvs_ondraw', data: [4,5,6,3,5,2,5,9,8], options: { xaxisLabels: ['Will','Oscar','Gerry','Olga','Martha','Joel','Kevin','Luis','Pete'], textSize: 14, textAccessible: false } }).on('draw', function (obj) { var img = new Image(); img.src = '/images/logo.png' img.onload = function (e) { obj.context.drawImage(this, obj.get('marginLeft') + 5,obj.get('marginTop') + 5); } }).draw(); </script>