drawing rectangles similar to bubble chart

[Shaiful Chowdhury]

Hi,

I am looking to make a page which will contains some rectangles divided in rows and columns. So If I have a grid of 9 cells (3*3), I will have 9 rectangles in each cell (like a table).

The colors of the rectangles will be according to the temperature assigned for a specific cell. Bubble chart looks very similar, but I need to modify it. 

Can anyone help? I would be extremely grateful.

Thanks,

Shaiful 

[asgallant]

If you don't mind losing your event handlers (for things like tooltips), you can parse the chart code and recreate the bubbles in a BubbleChart as rectangles.  Here's a code sample that uses jQuery to convert SVG circles to rectangles (it can be written without jQuery if you don't use it):

google.visualization.events.addListener(chart, 'ready', function () {

    $('#chart_div svg circle').each(function () {

        var r = $(this).attr('r');

        var x = $(this).attr('cx') - r;

        var y = $(this).attr('cy') - r;

        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

        $(rect).attr('x', x);

        $(rect).attr('y', y);

        $(rect).attr('width', r * 2);

        $(rect).attr('height', r * 2);

        $(rect).attr('stroke', $(this).attr('stroke'));

        $(rect).attr('stroke-width', $(this).attr('stroke-width'));

        $(rect).attr('fill-opacity', $(this).attr('fill-opacity'));

        $(rect).attr('fill', $(this).attr('fill'));

        $(this).parent().append(rect);

        $(this).remove();

    });

});

This code won't work with IE8 and older, as those browsers use VML instead of SVG, but you should be able to extend this code to work with them if necessary.

If you need support for tooltips, I'm afraid that modifying an existing Visualization isn't going to work.  You would have to build your own from scratch, and at that point you might be better off using a library like d3 instead.