Customizing Google Charts. NOTE: This article contains snippets of…
By: Miroslav Šlapka
Tags: Google, JavaScript, Programming, Front End Development, Web Development

Enough theory, let’s write some code!

I prepared a demo on Stackblitz, so you can check out the result there. Please check also the HTML file to see how we load the Google packages and SCSS for styling.

The main function we declare is called drawTreemap() and has no parameters. At the beginning we define heatmapData array with our data we want to display. Then we use Google methods to define and visualize the tree and we configure the opts object. That’s what is required to display the basic treemap, and you can read more about it in the Google docs linked above.

Inside of the main function we declare another function called showInfo(). We use this function to build on top of the treemap. We know that each node is a rectangle, so we can get the dimensions and coordinates of each node, and recreate the treemap. We are going to use getBoundingClientRect() method for that.

getBoundingClientRect() returns the size of an element and its position relative to the viewport.

I think this method is very handy as I’ve used it many times in different kinds of projects. If it’s new for you, add it to your JS arsenal :-) If we inspect the treemap, we can see it consists of SVG rectangles that are gouped by <g> element. We can target them and iterate through each node to run the few functions I am about to describe.

var svg = treechart.find('svg');

var cells = svg.find('g');

cells.find('text').hide(); cells.each(function(i, item) {

var cell = $(item);

var xy = getCellCoordinates(cell);

var tableData = getTableData(i);

var cellColor = setColor(tableData);

var extraCell = makeInfoCell(tableData, xy, cellColor);

$("#page").append(extraCell);

});

The first one is getCellCoordinates(cell)

function getCellCoordinates(cell) {

var top = window.pageYOffset || document.documentElement.scrollTop;

var rect = {

top: cell[0].getBoundingClientRect().top,

left: cell[0].getBoundingClientRect().left,

width: cell[0].getBoundingClientRect().width,

height: cell[0].getBoundingClientRect().height

};

if (top > 0) {

rect.top = rect.top + top;

}

return rect;

}

We retrieved the size and position of each rectangle using getBoundingClientRect() and stored it to xy variable. Next we have:

var tableData = getTableData(i);

This function creates data object and store values to its properties using Google’s DataTable getValue() method. We do this so we can easily pass it to other functions and manipulate with data. For example we pass tableData to setColor() function:

var cellColor = setColor(tableData);

setColor() function as its name suggests, sets the colors we define to rectangles based on values we passed to the function. And lastly we call makeInfoCell() function:

var extraCell = makeInfoCell(tableData, xy, cellColor); $("#page").append(extraCell);

makeInfoCell() function takes 3 parameters that we defined and calculated:

data

coordinates

color

Based on these parameters it creates HTML for new rectangles and custom tooltip that we then append to the page. Notice that on hover, when we want to display the tooltip, we again use getBoundingClientRect() method to correctly position it within the rectangle.

$(".cellInfo").on("mouseenter touchstart", function(e) {

var cell = $(this);

var hoverBox = cell.find(".hoverBox");

var cellWidth = cell[0].getBoundingClientRect().width;

var cellHeight = cell[0].getBoundingClientRect().height;

var hoverBoxWidth = hoverBox[0].getBoundingClientRect().width;

var hoverBoxY = hoverBox[0].getBoundingClientRect().right;

var treemapDivY = treechart[0].getBoundingClientRect().right;

...

And that’s it! I encourage you to check the code and look at the functions described above to get more clarity. Ohh and I said we want to highlight selected rectangles as in the GIF. It’s time to practice some JS :-)