1

estimados tengo actualmente un gauge chart en mi pagina la cual funciona, mi consulta es como puedo hacer para que al pinchar un medidor se levante un alert?.

estoy trabajando con este codigo

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

1 respuesta 1

1

Para el Gauge chart no esta permitido agregarle un evento click; por lo general el evento click para los gráficos de google se harían así:

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

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

Pero el gráfico que usas no lo contempla, es decir google dice

No triggered events

Para más info puedes verlo aquí.

Una solución que puedes utilizar es crear un div vacío relativamente posicionado en la parte superior del medidor y registrar el evento de clic en ese:

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>

2
  • gracias es lo que necesitaba ! Commented el 17 oct. 2018 a las 15:50
  • A su orden, si te sirvió por favor me podrías tildar mi respuesta como valida? gracias Commented el 17 oct. 2018 a las 16:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.