Google Charts API

Formatting Tooltips

Introduction

This page was written beause of a query by stu in the API user-supported group

stu simply wanted to know how to add the £ sign to the values in the tooltips of his chart.

One way is to completely rewrite the tooltips as per the Tooltips documentation but creating a new column for every existing column, and there are already eight of them in this example, seems a bit of overkill.

There is a simpler method and it works because like most data tables and spreadsheet type data containers, Google Charts support two properties per cell, the actual value and a formatted value.

The Charts

The first chart shown below shows an approximation of stu's data. For the purposes of this example the data comes from a Google Sheet

In the second chart, a new formatted value of the cell has been added. This was done by getting the already formatted value of the cell (using getFormattedValue(rowIndex, columnIndex)) and writing the new formatted value (setFormattedValue(rowIndex, columnIndex, formattedValue)) see DataTable Class Methods

Original Data

The tooltips show no formatting

Table Formatting Changed

The formatted value of each cell in the table has been added to, the tooltips now show formatting

This was done by getting the formatted value of the cell (using getFormattedValue(rowIndex, columnIndex)) and writing the new formatted value (setFormattedValue(rowIndex, columnIndex, formattedValue)) back to the cell. See DataTable Class Methods

The Code

The code goes through the data cells, the formatted values are read and the new formatted value written, so .getFormattedValue and .setFormattedValue are used.

The code for the above tables is:


<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
   var queryString = encodeURIComponent('SELECT A,B,C,D,E,F,G,H ORDER BY A');
   var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=299043339&headers=1&tq=' + queryString);
   query.send(handleQueryResponse);
}
	 
function handleQueryResponse(response) {
   if (response.isError()) {
   alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
   return;
}
  
var table1 = response.getDataTable();

// stu's original formatting
var formatter = new google.visualization.NumberFormat({
   prefix: '£',
   negativeParens: true
});
 var options = {
   title : 'Totals by Paddock',
   titleFontSize:30,
   fontName: 'tahoma',
   fontSize: '16',
   format: "currency",
   prefix:"£",
   width:780,
   height:520,
   vAxis: {title: '', format: '£#,##0.00;(£#,##0.00)', prefix:"£", fontSize: '24'},
   hAxis: {format: 'currency', prefix:"£", fontSize: '24'},
   seriesType: 'bars',
};

var chart1 = new google.visualization.ComboChart(document.getElementById('chart1-div'));
chart1.draw(table1, options);

// Clone the dataTable table1 as table2
table2 = table1.clone();
	
// Add new formatting to table2
var totalRows = table2.getNumberOfRows();
var totalCols = table2.getNumberOfColumns();
	
for (i = 0; i < totalRows; i++) { 
   // No need to do Column 0 as that's the row label not data
   for (j = 1; j < totalCols; j++) {
      var thisValue = table2.getFormattedValue(i, j);
	  thisValue = "£" + thisValue;
	  table2.setFormattedValue(i, j, thisValue);
   }
}
var chart2 = new google.visualization.ComboChart(document.getElementById('chart2-div'));
chart2.draw(table2, options);
}
</script>

And that's it, the tooltips are now formatted, and show the £ sign.