How to add a watermark to your charts

Share RGraph:   

Summary
A guide for adding a watermark image to your chart. Adding a watermark can help your users recognise where the chart has originated.

[No canvas support]

By using the image drawing object you can easily add a watermark to your charts. With the image drawing object it means that you can even add mouseover or click events to it, or even a tooltip.


<script>
    window.onload = (function ()
    {
        var watermark = new RGraph.Drawing.Image({
            id: 'cvs',
            x: 25,
            y: 25,
            src: '/images/logo.png',
            options: {
                width: 32,
                height: 32,
                tooltips: ['This chart was made with:<br /><b>"RGraph: 2D/3D JavaScript charts - Free and Open Source Software"</b>'],
                alpha: 0.3
            }
        }).on('beforedraw', function (obj)
        {
            RGraph.clear(obj.canvas, 'white');
        }).draw()


        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [13,12,16,15,12,11,21],
            options: {
                labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
                textAccessible: true,
                textSize: 14                
            }
        }).draw()
    })
</script>

Comments

Add a new comment...