How to use images as labels

Share RGraph:   

Summary
A guide for using images (which in this case are RGraph image objects) in place of labels

Since the advent of the RGraph.Text2 function which saves the coordinates of the text you have been able to use those coordinates to place an image. You could even use the coordinates of the bar itself if you wished.

You might find that using images (eg faces) may make your charts more instantly recognisable.

window.onload = (function ()
{
    var images = ['/images/face1.png', '/images/face2.png'];

    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [8,4],
        options: {
            labels: ['',''],
            gutterBottom: 70,
            labelsAboveSpecific: ['Fred','Lenny'],
            labelsAboveSize: 16,
            textFont: 'Comic sans MS',
            colors: ['Gradient(white:blue:blue)'],
            shadowOffsetx: 1,
            shadowOffsety: -1,
            shadowBlur: 5
        }
    }).draw()

    
    for (var i=0,len=bar.coordsText.length,idx=0;i<len; i+=1) {
        if (bar.coordsText[i].tag == 'labels') {
        
            var coords = bar.coordsText[i];

            var image = new RGraph.Drawing.Image({
                id: 'cvs',
                x: coords.x,
                y: coords.y + 5,
                src: images[idx],
                options: {
                    halign: 'center'
                }
            }).draw()


            idx += 1;
        }
    }
})

Comments

Add a new comment...