CODEWITHSUNDEEP
javascriptjquerygoogle-visualizationjquery-events
Ernesto Campohermoso
Ernesto Campohermoso

Reputation: 7371

How to add onclick event to Gauge of Google Chart?

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.

Upvotes: 2

Views: 6728

Answers (4)

Suzanne Paley
Suzanne Paley

Reputation: 192

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));
});

Upvotes: 0

CrandellWS
CrandellWS

Reputation: 2804

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, ...

Upvotes: 1

vaab
vaab

Reputation: 10122

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.

Upvotes: 0

chris
chris

Reputation: 6823

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>

Upvotes: 2

Related Questions