JSFiddle - React, Tailwind, and code Playground

by gricha2380

HTML

<script src="https://www.google.com/jsapi"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="btn-holder">
<button id="action">Click me</button>
</div>
<div id="target"></div>

CSS

body {
  padding: 40px 10px;
}
.btn-holder {
  text-align: center;
}
#action  {
width: 200px;
margin: auto;
}

JavaScript

// load URL
var dataset = 'https://gregor.demo.socrata.com/resource/ez5n-9i7m.json';

// Add SoQL parameters
var soql = '?$select=permit_type,master_use_permit&$group=permit_type,master_use_permit&$limit=10'
var dataURL = dataset+soql;
//console.log(dataURL);

// button exists to force a delay. Otherwise 'google.visualization is undefined'
$("#action").click(function(event){
	event.preventDefault();
  $.getJSON(dataURL, function(data) {
    drawChart(data);
  });
});

// Load the visualization libary and corechart package
// Will experiment later with other chart types
google.charts.load('current', {'packages':['corechart']});

// Function that does all the work. Creates and populates the data table, makes chart instance, passes in the data and draws it
function drawChart(arrData) {

  // Create the data table. Places values inside as an array of objects
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'permit_type');
  data.addColumn('number', 'master_use_permit');

	// for-in loop to grab relevant key value pair from each item in the array
  for (var i in arrData) {
    data.addRow([arrData[i].permit_type,parseInt(arrData[i].master_use_permit)]);
    //console.log("loop one "+arrData[i].permit_type);
  } 
  // test of basic addRow command
  /*
  data.addRows([
	['Basic One', 42],
	['Basic Two', 33],
	]);
	*/

	// Configure chart options
	var options = {'title':'Seattle constructions grouped by type',legend: 'none',width: 500, height: 600, colors: ["green"]};

	// New chart instance, draws chart, passes options set above
  var chart = new google.visualization.ColumnChart(document.getElementById('target'));
	chart.draw(data, options);
}