Visualizations

FILE: data.json [{"CNAME":"Coliform (TCR) ","cnt":"127"},{"CNAME":"Consumer Confidence Rule ","cnt":"42"},{"CNAME":"IESWTR ","cnt":"9"},{"CNAME":"Lead & Copper Rule ","cnt":"2"},{"CNAME":"Nitrate ","cnt":"20"},{"CNAME":"Nitrate-Nitrite ","cnt":"4"}]

     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript">            
       // Load the Visualization API and the piechart package.
       google.load('visualization', '1.0', {'packages':['corechart']});
       
       // Set a callback to run when the Google Visualization API is loaded.
       google.setOnLoadCallback(drawChart);
 
 
       // Callback that creates and populates a data table, 
       // instantiates the pie chart, passes in the data and
       // draws it.
       function drawChart() {
       
           var contResult = {};
          $.ajax({
          	url: "test/data.json",
          	async: false,
          	dataType: 'json',
          	success: function(data) {
          		contResult = data;
          	}
          });

             
            // Create the data table.
            var data = new google.visualization.DataTable();
            console.log(contResult);
            data.addColumn('string', 'Contaminant Type');
            data.addColumn('number', 'Amount in Area');
             for (var i in contResult) {
                  data.addRows([
                        [contResult[i].CNAME, parseInt(contResult[i].cnt)]
                 ]);
            }
      
            // Set chart options
            var options = {'title':'Contaminants in the Zip Code', 'width':400, 'height':300};
      
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
     }
     </script>