How to add onclick event to Gauge of Google Chart?

Question

I need to handle the onclick event over a Gauge. I don't have found an example for register events over Gauges on the Google Chart documentation.

I have tried the following:

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart","gauge"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'LABEL');
                data.addColumn('number', 'TOTAL');
                data.addRows(1);
                data.setValue(0, 0, 'Speed');
                data.setValue(0, 1, 240);
                var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
                var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
                gauge.draw(data, gaugeOptions);
                google.visualization.events.addListener(gauge, 'select', function() {
                    alert("Here");
                });
            }
        </script>
    </head>
    <body>
        <div id="gauge_div"></div>
    </body>
</html>

Also I have tried to add onclick event with JQuery to div "gauge_div" but it only works if I make click on the border of div, not over the gauge.

score 2 · Accepted Answer · answered Dec 12 '11 at 19:53

Gauge has no events that it triggers. The chart is rendered in an iframe, which also does not have a click event in the local dom, but rather in the window.document.body of the iframe. A solution I used was to create an empty div relatively positioned on top of the gauge and register the click event on that.

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart","gauge"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'LABEL');
                data.addColumn('number', 'TOTAL');
                data.addRows(1);
                data.setValue(0, 0, 'Speed');
                data.setValue(0, 1, 240);
                var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
                var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
                gauge.draw(data, gaugeOptions);
                google.visualization.events.addListener(gauge, 'select', function() {
                    alert("Here");
                });
            }
        </script>
    </head>
    <body style="position:relative;">
        <div id="gauge_div"></div>
        <div id="gauge_div_clickable" style="position:absolute;z-index:2;top:- 120px;width:120px;height:120px;" onclick="alert('here');">
    </body>
</html>

Yes this works if you have just one Gauge, but when you have many gauges rendered I want to get the onclick event and identify the originator. — Ernesto Campohermoso, Dec 12 '11 at 19:56
In that case you may want to look into how to capture the click event from an iframe. http://stackoverflow.com/questions/1609741/how-to-add-click-event-to-a-iframe-with-jquery — chris, Dec 13 '11 at 04:52

CrandellWS · Answer 2 · 2014-08-07T20:36:35.230

1

Using jQuery one can use the nth-child selector something like this...

$( "#gauge_div td:nth-child(2)" ).click(function() {
    var tData = data.getValue(1,0);
    alert( "Handler for .click() called."+ tDate);
});

Assuming your gauge data is held in a variable called "data" you would call the second child and the correct data row would be row "1", as it will start with 0.

ie 0=1, 1=2, 2=3, 3=4, ...

edited Aug 07 '14 at 20:36

answered Aug 07 '14 at 20:27

CrandellWS

2,708
5
49
111

vaab · Answer 3 · 2012-08-07T09:43:47.227

To get clickable gauge, add this javascript:

$('#gauge_div').find('iframe')).each(function(elt, idx) {
   $(elt).contents().find('body').click(function (event) {
      // gauge.getSelection() does not exists so we emulate its result:
      var selection = [{'row': idx}];
      common_onclick_callback(selection);
   });
});

Which features:

distinct gauge onclick (works with several gauges, and identifies them)
sample of a quick gauge.getSelection() result emulation, which could be helpfull if you want to re-use an onclick callback that you would have already written for other google charts type.

This works because:

each iframe is looked to hook the event in their body (otherwise onclick event isn't triggered)
each onclick callback gets an appropriate index idx related to their position in the HTML.

This sample uses:

jquery which is mapped to $, and provide selector and find, contents methods
underscore which is mapped to _, and provide the each facility

But both of these are optional but convenient.

score 0 · Answer 4 · answered Jul 14 '16 at 22:53

0

I started with CrandellWS's answer, but ended up with the following, which is even simpler:

$('#gauge_div td').click(function() {
   alert(data.getValue(this.cellIndex,0));
});

answered Jul 14 '16 at 22:53

Suzanne Paley

172
8

How to add onclick event to Gauge of Google Chart?

4 Answers4