Tony Stark Tony Stark - 1 month ago 14
Javascript Question

Google charts getting custom tooltips to work with an animation

Well this is my code, it's broken. I want to have absolute figures appear on mouse over, instead of percentages. Google's guides do not have an example of this with an animation, their examples use data table methods rather than arrays. I think I need to somehow tell Google that I have a third column which is a tooltip, at present it draws it as a bar.

google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(init);

function init() {
var rowData1 = [
['key', 'Percentage', 'tooltip'],
['PLUS', 20.9, 3855],
['EDU', 18.4, 3400],
['GEO', 15.6, 2872],
['NO FLAG', 45.2, 8342]
];
var rowData2 = [
['key', 'Percentage', 'tooltip'],
['PLUS', 54.2, 974],
['EDU', 6.7, 120],
['GEO', 39.2, 704],
['NO FLAG', 0.0, 0]
];

// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);

var options = {
// removes the key
legend: {
position: 'none'
},
// puts popup boxes on bar

width: 600,
height: 300,
vAxis: {
title: "vertical axis"
},
hAxis: {
title: "horizontal axis"
},
seriesType: "bars",
series: {
5: {
type: "line"
}
},
animation: {
duration: 1000,
easing: 'out'
},
};
var current = 0;
// Create and draw the visualization.

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');

function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
});
options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
// custom popup box request

chart.draw(data[current], options);
}
drawChart();

button.onclick = function() {
current = 1 - current;
drawChart();
}
}


I've tried converting the array data to DataTables and using

if (current == 0) { chart.draw(dataTable1, options); }
else{ chart.draw(dataTable2, options); }


To select which chart to draw, but this isn't working. And it's less intelligible and inelegant, the dataTables need lots of properties set, so repetition.

Answer

need to define tooltip column with object notation...

var rowData1 = [
  ['key', 'Percentage', {role: 'tooltip'}],
  ['PLUS', 20.9, 3855],
  ['EDU', 18.4, 3400],
  ['GEO', 15.6, 2872],
  ['NO FLAG', 45.2, 8342]
];
var rowData2 = [
  ['key', 'Percentage', {role: 'tooltip'}],
  ['PLUS', 54.2, 974],
  ['EDU', 6.7, 120],
  ['GEO', 39.2, 704],
  ['NO FLAG', 0.0, 0]
];
Comments