Google Charts Controls and Dashboards

How to use Google Charts Controls and Dashboards with data from Keen IO

by Sascha

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://d26b395fwzu5fz.cloudfront.net/keen-analysis-1.2.2.min.js"></script>
<script src="https://d26b395fwzu5fz.cloudfront.net/keen-dataviz-1.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em">
  <p style="padding-left: 1em"><strong>NZ Crime Stats</strong></p>
  <table class="columns">
    <tr>
      <td>
        <div id="control_div" style="padding-left: 15px"></div>
      </td>
    </tr><tr>
      <td>
        <div id="chart_div" style="padding-top: 15px"></div>
      </td><td>
        <div id="table_div" style="padding-top: 30px"></div>
      </td>
    </tr>
  </table>
</div>

JavaScript

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

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

function drawTable() {

  $.ajax("https://gist.githubusercontent.com/Moonbird-IT/da4c7d76a69eb250478bb55b5d2360f5/raw/9dbf9d92981a3c9b71906dd3a680a2cdeca7c4aa/googlecharts.json", {
    dataType: "json",
    success: function(jsonData) {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'table_div',
      });

      var chart = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'chart_div',
        'view': {
          'columns': [0, 1]
        },
      });

      var control = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control_div',
        'options': {
          'filterColumnIndex': 0,
        }
      });

      var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard_div'));
      dashboard.bind([control], [table, chart]);
      dashboard.draw(data);

    }
  });

}