Deltopia Statistics

by phihado

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>

<input type="button" id="age" value="Age" />
<input type="button" id="gender" value="Gender" />
<input type="button" id="offense" value="Offense" />

<div id="chart_div"></div>

JavaScript

google.charts.load('current', {
  'callback': function() {
    var dataAge = google.visualization.arrayToDataTable([
      ['Age', 'Number'],
      [18, 2],
      [19, 8],
      [20, 11],
      [21, 8],
      [22, 6],
      [23, 4],
      [24, 3],
      [25, 1],
      [26, 1]
    ]);

    var dataGender = google.visualization.arrayToDataTable([
      ['Gender', 'Number'],
      ['Male', 36],
      ['Female', 8]
    ]);

    var dataOffense = google.visualization.arrayToDataTable([
      ['Offense', 'Number'],
      ['Battery', 4],
      ['Disorderly Conduct', 29],
      ['DUI', 3],
      ['False ID', 5],
      ['Poss. Controlled Substance', 3],
      ['Resisting Arrest', 1],
      ['Vandalism', 2],
      ['Other', 6]
    ]);

    var options = {
      legend: 'none',
      title: 'Results',
      colors: ['yellow'],
      pieHole: 0.3,
      slices: {
        0: {
          color: 'yellow'
        },
        1: {
          color: 'transparent'
        }
      }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(dataAge, options);

    document.getElementById('age').addEventListener('click', function() {
      options.slices[0].color = 'yellow';
      chart.draw(dataAge, options);
    }, false);

    document.getElementById('gender').addEventListener('click', function() {
      options.slices[0].color = 'cyan';
      chart.draw(dataGender, options);
    }, false);

    document.getElementById('offense').addEventListener('click', function() {
      options.slices[0].color = 'red';
      chart.draw(dataOffense, options);
    }, false);
  },
  'packages': ['corechart']
});