CODEWITHSUNDEEP
javascripthtmlgoogle-visualizationtooltip
Zach Shefska
Zach Shefska

Reputation: 113

Google Charts HTML tooltip with javascript onclick event inside of it?

I have been trying to have a click event in the Google charts tooltip with chart option isHtml: true. So far, I have tried two ways to get this done but without success.

1) Writing an onclick function by adding a button in the tooltip. But, whenever I click on the button, I get the following error "Uncaught Reference - function not defined". I tried placing the function almost everywhere in the directive but the code doesn't seem to pick that up.

HTML code in the tooltip:

'<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>

exportCSV function:

var exportCSV = function(){
    console.log("Function Triggered");
}

2) Adding chart.setAction() in the google charts. But the problem here is, I have isHtml: True in chart options. When I try using the following code it doesn't seem to do anything.

chart.setAction({ id: 'export', text: 'Export CSV', action: function() { selection = chart.getSelection(); console.log(selection); } });

But, when I tried replacing function action with enabled in chart.setAction, the code returns the object when I click on the column or the Bar chart but not on the export data button in the tooltip.

All I need is to capture the click event in the tooltip. It would be great if someone could help me out on this issue.

Thanks!

Upvotes: 1

Views: 2171

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

I think you just need to define exportCSV in global scope,
see following example...

Also, without tooltip {trigger: 'selection'} in the chart options,
I can't seem to click the tooltip before it disappears.
must click pie slice to see tooltip... 

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Genre', 'Percentage of my books', {role: 'tooltip', type: 'string', p: {html:true}}],
      ['Science Fiction', 217, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['General Science', 203, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['Computer Science', 175, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['History', 155, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['Economics/Political Science', 98, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['General Fiction', 72, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['Fantasy', 51, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['Law', 29, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>']
    ]);

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    var options = {
      height: 400,
      tooltip: {
        isHtml: true,
        trigger: 'selection'
      },
      width: 600
    };

    chart.draw(data, options);
  },
  packages: ['corechart']
});

var exportCSV = function(){
  alert("Function Triggered");
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions