Show Click of a Button - charts

Question

i am using Google Visulization Charts (donut Charts )
The Chart has got tool Tips
On CLick of a Button can we show tool tips dynamically ??
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
['A', roundNumber(11 * Math.random(), 2)],
['B', roundNumber(2 * Math.random(), 2)],
['C', roundNumber(2 * Math.random(), 2)],
['D', roundNumber(2 * Math.random(), 2)],
['E', roundNumber(7 * Math.random(), 2)]
]);
var options = {
width: 450,
height: 300,
colors: ['#ECD078','#ccc','#C02942','#542437','#53777A'],
legend: {position:'none'},
pieHole: 0.4,
animation: {duration:800,easing:'in'}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function roundNumber(num, dec) {
var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
return result;
}
$(document).ready(function(){
$("#button").click(function(){
alert('show tool tips')
});
});
http://jsfiddle.net/kcjr90sx/1/

Answer 1

first, need to use the latest version of google charts,
the jsapi loader is outdated, and should no longer be used.
use instead --> <script src='https://www.gstatic.com/charts/loader.js'></script>
this will only change the load statement.
see following snippet and update library loader code for more info.
next, we can use the following option to allow tooltips to be shown when a slice is selected...
tooltip: {
trigger: 'both'
}
and we can use the following option to select multiple slices...
selectionMode: 'multiple',
then, when we click the button, we select the slices, which displays the tooltips.
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
['A', roundNumber(11 * Math.random(), 2)],
['B', roundNumber(2 * Math.random(), 2)],
['C', roundNumber(2 * Math.random(), 2)],
['D', roundNumber(2 * Math.random(), 2)],
['E', roundNumber(7 * Math.random(), 2)]
]);
var options = {
width: 450,
height: 300,
colors: ['#ECD078','#ccc','#C02942','#542437','#53777A'],
legend: {position:'none'},
pieHole: 0.4,
animation: {duration:800,easing:'in'},
selectionMode: 'multiple',
tooltip: {
trigger: 'both'
}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
$("#button").click(function(){
var selection = [];
$.each(new Array(data.getNumberOfRows()), function (rowIndex) {
if (data.getValue(rowIndex, 1) > 0) {
selection.push({row: rowIndex});
}
});
chart.setSelection(selection);
});
});
chart.draw(data, options);
});
function roundNumber(num, dec) {
var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
return result;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<div id="button" data-role="button">Show Tool Tips</div>
<div id='chart_div'></div>
note: you should also wait for the chart's 'ready' event,
before assigning the button click event.
otherwise, an error will be thrown.