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 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: 35,
        y: 35,
        src: '/images/logo.png',
        options: {
        }
    }).draw();

    new RGraph.Bar({
        id: 'cvs',
        data: [4,6,8,9,4,5,7],
        options: {
            tooltips: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            tooltipsCss: {
                backgroundColor: 'black',
                fontSize:'16pt',
                colors: 'white'
            },
            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:

<!-- This is here to facilitate image preloading -->
<div style="position: absolute; top -500px; left: -500px; visibility: hidden">
    <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" />
</div>

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,6,3,5,4],
        options: {
            tooltips: [
                '<img src="/images/logo.png" style="min-width: 128px" />',
                '<img src="/images/alex.png" style="min-width: 128px" />',
                '<img src="/images/chrome_logo.png" style="min-width: 128px" />',
                '<img src="/images/unicef.png" style="min-width: 276px" />',
                '<img src="/images/merry-christmas-snowman.png" style="min-width: 128px" />'
            ],
            tooltipsCss: {
                backgroundColor: 'white',
                color: 'black'
            },
            xaxisLabels: ['Pamela','Louise','Kevin','John','Richard'],
            colors: ['Gradient(white:blue)'],
            highlightStroke: 'rgba(0,0,0,0)',
            textSize: 14
        }
    }).draw();
</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 chart Line chart and Scatter chart 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>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,6,3,5,4],
        options: {
            xaxisLabels: ['Pamela','Louise','Kevin','John','Richard'],
            backgroundImage: '/images/logo.png',
            backgroundImageStretch: false,
            textSize: 14
        }
    }).draw();
</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" 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>
    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);
    }

    new RGraph.Bar({
        id: 'cvs',
        data: [4,6,3,5,4],
        options: {
            xaxisLabels: ['Pamela','Louise','Kevin','John','Richard'],
            textSize: 14
        }
    }).draw()
        .on('click', showDialog)
        .on('mousemove', function (e, shape)
        {
            return true;
        });
</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>
    new RGraph.Bar({
        id: 'cvs',
        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>