Interagir com o gráfico

O que vimos até aqui é suficiente para muitas páginas da Web: você desenhou seu gráfico na página. No entanto, se você quiser capturar cliques de usuários ou manipular propriedades ou dados em um gráfico já desenhado, será preciso detectar os eventos gerados pelo gráfico.

Todos os gráficos geram alguns tipos de eventos. Veja os mais comuns:

  • ready: gerado quando o gráfico é desenhado na página e pronto para responder a métodos. Ouça este evento se precisar solicitar informações do gráfico.
  • selecionar: gerado quando o usuário seleciona algo no gráfico: geralmente clicando em uma barra ou fatia de pizza.
  • error: gerado quando o gráfico não pode renderizar os dados transmitidos, normalmente porque o formato DataTable está errado.
  • onmouseover e onmouseout: são acionados quando o usuário passa o mouse sobre ou fora de um elemento específico do gráfico, respectivamente.

Detectar eventos é simples. Basta chamar google.visualization.events.addListener() transmitindo um identificador para o gráfico, o nome do evento a ser capturado e o nome de um manipulador a ser chamado quando o evento for gerado. Você pode chamar esse método com qualquer identificador de gráfico, mesmo que ainda não tenha chamado draw(). Você pode chamar google.visualization.events.addOneTimeListener() se quiser que o listener seja chamado exatamente uma vez antes de se remover.

Veja um snippet de código parcial que mostra como se registrar para capturar o evento select de um gráfico:

load libraries...

function drawChart() {

  prepare data...

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

  // The select handler. Call the chart's getSelection() method
  function selectHandler() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var value = data.getValue(selectedItem.row, selectedItem.column);
      alert('The user selected ' + value);
    }
  }

  // Listen for the 'select' event, and call my function selectHandler() when
  // the user selects something on the chart.
  google.visualization.events.addListener(chart, 'select', selectHandler);

  draw the chart...

}

Veja a seguir o exemplo de código "Hello Graph" com um novo listener de eventos select. Faça um teste.

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1], 
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
 
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

        function selectHandler() {
          var selectedItem = chart.getSelection()[0];
          if (selectedItem) {
            var topping = data.getValue(selectedItem.row, 0);
            alert('The user selected ' + topping);
          }
        }

        google.visualization.events.addListener(chart, 'select', selectHandler);    
        chart.draw(data, options);
      }

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

 

Mais informações