Is it possible to hide a data column on Google Charts?

1,899 views

Skip to first unread message

Melanie Soules

unread,

Aug 18, 2011, 9:40:23 PM8/18/11

to Google Visualization API

Hi there,

Can anybody help figure out a solution to hide a data column from the
tooltip on a map visualization (html posted below)? I'm trying to do
the same thing someone posted here:
http://groups.google.com/group/google-visualization-api/browse_thread/thread/4eb729ed9dbca775/c392e92e0328a047?lnk=gst&q=geo+hide#c392e92e0328a047
but haven't been able to figure out how to tweak things to hide the
2nd column so the number value does not display on the tooltip.

I'd be extremely grateful for any suggestions!

Thanks,
Melanie

--- code ---

<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></
script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
var data = new google.visualization.DataTable();
data.addRows(7);
data.addColumn('string', 'State');
data.addColumn('number', 'Number');
data.addColumn('number', 'Legislation');
data.setValue(0, 0, 'Virginia');
data.setValue(0, 1, 2);
data.setFormattedValue(0, 2, 'Yes');
data.setValue(1, 0, 'Maryland');
data.setValue(1, 1, 2);
data.setFormattedValue(1, 2, 'Yes');
data.setValue(2, 0, 'Vermont');
data.setValue(2, 1, 2);
data.setFormattedValue(2, 2, 'Yes');
data.setValue(3, 0, 'Hawaii');
data.setValue(3, 1, 1);
data.setFormattedValue(3, 2, 'Pending');
data.setValue(4, 0, 'Colorado');
data.setValue(4, 1, 1);
data.setFormattedValue(4, 2, 'Pending');
data.setValue(5, 0, 'California');
data.setValue(5, 1, 1);
data.setFormattedValue(5, 2, 'Pending');
data.setValue(6, 0, 'Washington');
data.setValue(6, 1, 0);
data.setFormattedValue(6, 2, 'No');

var options = {};
options['region'] = 'US';
options['resolution'] = 'provinces';
options['width'] = 475;
options['height'] = 315;
options['colors'] = ['ffffff','blue'];
options['legend'] = 'none';

var container = document.getElementById('map_canvas');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, options);
};
</script>
</head>

<body>
<div id='map_canvas'></div>
</body>

</html>

Riccardo Govoni

unread,

Aug 19, 2011, 4:21:42 AM8/19/11

to google-visua...@googlegroups.com

Hi Melanie, would this work for you? (live example: http://jsfiddle.net/JU2zN/ )

function drawRegionsMap() {
var data = new google.visualization.DataTable();
data.addRows(7);
data.addColumn('string', 'State');

data.addColumn('number', 'Legislation');

data.setValue(0, 0, 'Virginia');
data.setValue(0, 1, 2);

data.setFormattedValue(0, 1, 'Yes');

data.setValue(1, 0, 'Maryland');
data.setValue(1, 1, 2);

data.setFormattedValue(1, 1, 'Yes');

data.setValue(2, 0, 'Vermont');
data.setValue(2, 1, 2);

data.setFormattedValue(2, 1, 'Yes');

data.setValue(3, 0, 'Hawaii');
data.setValue(3, 1, 1);

data.setFormattedValue(3, 1, 'Pending');

data.setValue(4, 0, 'Colorado');
data.setValue(4, 1, 1);

data.setFormattedValue(4, 1, 'Pending');

data.setValue(5, 0, 'California');
data.setValue(5, 1, 1);

data.setFormattedValue(5, 1, 'Pending');

data.setValue(6, 0, 'Washington');
data.setValue(6, 1, 0);

data.setFormattedValue(6, 1, 'No');

var options = {};
options['region'] = 'US';
options['resolution'] = 'provinces';
options['width'] = 475;
options['height'] = 315;
options['colors'] = ['ffffff','blue'];
options['legend'] = 'none';

var container = document.getElementById('chart');

var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, options);
}

What I changed is the following:

- I use only 2 columns : State and Legislation.

- Legislation is of numeric type with the meaning (0 = No, 1 = Pending, 2 = Yes)

- to force the geo chart to show the labels (No, Pending, Yes) instead of the numbers (0, 1, 2) I use setFormattedValue() on the same cell. For example:

data.setValue(0, 0, 'Virginia');
data.setValue(0, 1, 2);

data.setFormattedValue(0, 1, 'Yes');

Here I set the 'formatted value' for cell (0,1) to be 'Yes', instead of the default value of '2' (in your example you were setting the formatted value of a separate, third column.