How to add images to your charts

Summary: A guide for adding images to your charts. Images can be added in a number of ways - eg background images, tooltips etc.

There are a few methods of adding images to your charts, and they are:

The drawing API

[No canvas support]

You can add images to your charts using the new (September 2012) drawing API. This allows you to add objects to your canvas which 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
        }
    }).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:

[No canvas support]

<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.

[No canvas support]

<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.

[No canvas support]

<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 on to 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.

[No canvas support]

<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
        }
    }).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>