Show alert with a Gauge chart

Question

Show alert with a Gauge chart

Navigation

#1 by (1 votes)

1

Dear, I currently have a gauge chart on my page which works, my question is how can I do so that when I click on a meter an alert is raised?

I'm working with this code

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

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

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

javascript html google-api google-chart-api

asked by Juan Manosalva 17.10.2018 в 15:24

source

1 answer

Update Jtable after Inserting a Data into the Database Get the number of rows of an SQL query

score 1 · Accepted Answer

For the Gauge chart you are not allowed to add a click event; Usually the click event for google graphics would be like this:

google.visualization.events.addListener(chart, 'select', selectHandler);

function selectHandler(e) {
  alert('Click');
}

But the graphic you use does not see it, that is, Google says

No triggered events

For more info you can see it here .

One solution you can use is to create an empty div relatively positioned at the top of the meter and record the event by clicking on it:

google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

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

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }

body {
  position:relative;
}

#chart_div {
  height: 120px;
  width: 400px; 
}

#chart_div_clickable {
  border:1px solid red;
  height:120px;
  position:absolute;
  top: 0px;
  width:120px;
  z-index:2;
}

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>
    <div id="chart_div"></div>
    <div id="chart_div_clickable" onclick="alert('Hola');"></div>
  </body>
</html>