SODA API + Google Charts

Using Google Charts and JQuery to build a simple chart.

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 id="target"></div>

JavaScript

var dataset = 'https://london.demo.socrata.com/resource/xrfy-864z.json';

$.getJSON(dataset, function(data) {
	drawChart(data);
});

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});
      
      function drawChart(arrData) {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'from');
        data.addColumn('number', 'weight');
        
        $.each(arrData, function(i,entry) {
           data.addRow([arrData[i].from,parseInt(arrData[i].weight)]);
        });
        
        // Set chart options
        var options = {'title':'London data by weight'};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.ColumnChart(document.getElementById('target'));
        chart.draw(data, options);
      }