Google Charts

Sample google charts.

by Gautham PJ

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">

  <div class="row">
    <div class="col">
      <div id="chart_div" style="width:400; height:300"></div>
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>

</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

google.charts.load('current', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawStacked);

var chart, data;

function drawStacked() {
  data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Time of Day');
  data.addColumn('number', 'Motivation Level');
  data.addColumn('number', 'Energy Level');

  data.addRows([
    [{
      v: [8, 0, 0],
      f: '8 am'
    }, 1, .25],
    [{
      v: [9, 0, 0],
      f: '9 am'
    }, 2, .5],
    [{
      v: [10, 0, 0],
      f: '10 am'
    }, 3, 1],
    [{
      v: [11, 0, 0],
      f: '11 am'
    }, 4, 2.25],
    [{
      v: [12, 0, 0],
      f: '12 pm'
    }, 5, 2.25],
    [{
      v: [13, 0, 0],
      f: '1 pm'
    }, 6, 3],
    [{
      v: [14, 0, 0],
      f: '2 pm'
    }, 7, 4],
    [{
      v: [15, 0, 0],
      f: '3 pm'
    }, 8, 5.25],
    [{
      v: [16, 0, 0],
      f: '4 pm'
    }, 9, 7.5],
    [{
      v: [17, 0, 0],
      f: '5 pm'
    }, 10, 10],
  ]);

  var options = {
    title: 'Motivation and Energy Level Throughout the Day',
    isStacked: true,
    hAxis: {
      title: 'Time of Day',
      format: 'h:mm a',
      viewWindow: {
        min: [7, 30, 0],
        max: [17, 30, 0]
      }
    },
    vAxis: {
      title: 'Rating (scale of 1-10)'
    }
  };

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

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


function selectHandler() {
  var selectedItem = chart.getSelection()[0];
  console.log(JSON.stringify(selectedItem));
  if (selectedItem) {
    var value = data.getValue(selectedItem.row, selectedItem.column);
    alert('The user selected ' + value);
  }
}