title: Drill down in google chart dashboard
body: <blockquote>
    <p>Can anyone suggest me wth the code to  achieve drill down feature in google chat dashboard.</p>
  </blockquote>
  
  <p>Say If i click on year its should drill down to next level say month and then to weeks and then days.</p>
  
  <p>its called drill down feature.
  This is code is for chart...I want to know how to use in dashboard-with say category filter.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;!--Load the AJAX API--&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});
  
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);
  
        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
  function drawChart () {
      var data = google.visualization.arrayToDataTable([
          ['Category', 'Name', 'Value'],
          ['Foo', 'Fiz', 5],
          ['Foo', 'Buz', 2],
          ['Bar', 'Qud', 7],
          ['Bar', 'Piz', 4],
          ['Cad', 'Baz', 6],
          ['Cad', 'Nar', 8]
      ]);
  
      var aggregateData = google.visualization.data.group(data, [0], [{
          type: 'number',
          label: 'Value',
          column: 2,
          aggregation: google.visualization.data.sum
      }]);
  
      var topLevel = true;
  
  
  
      var chart = new google.visualization.ColumnChart(document.querySelector('#chart'));
      var options = {
          height: 400,
          width: 600
      };
  
      function draw (category) {
          if (topLevel) {
              // rename the title
              options.title = 'Top Level data';
              // draw the chart using the aggregate data
              chart.draw(aggregateData, options);
          }
          else {
              var view = new google.visualization.DataView(data);
              // use columns "Name" and "Value"
              view.setColumns([1, 2]);
              // filter the data based on the category
              view.setRows(data.getFilteredRows([{column: 0, value: category}]));
              // rename the title
              options.title = 'Category: ' + category;
              // draw the chart using the view
              chart.draw(view, options);
          }
      }
  
      google.visualization.events.addListener(chart, 'select', function () {
          if (topLevel) {
              var selection = chart.getSelection();
              // drill down if the selection isn't empty
              if (selection.length) {
                  var category = aggregateData.getValue(selection[0].row, 0);
                  topLevel = false;
                  draw(category);
              }
          }
          else {
              // go back to the top
              topLevel = true;
              draw();
          }
      });
  
      draw();
  }
  //google.load('visualization', '1', {packages: ['corechart'], callback: drawchart});
  //google.load('visualization', '1', {packages: ['corechart'], callback: drawchart});
  
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;!--Div that will hold the pie chart--&gt;
      &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Regards,
  Prajna </p>