eidankl/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!doctype html>

<html>

  <head>
    <title>Google Graph and CSV</title>
    <meta name="description" content="test">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript"> // load the visualisation API
  google.load('visualization', '1', { packages: ['corechart', 'controls'] });
</script>

  </head>

  <body>
   <script type="text/javascript">
function drawVisualization() {
   $.get("protest.csv", function(csvString) {
      // transform the CSV string into a 2-dimensional array
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);
      //make charts
      var canvas = new google.visualization.ChartWrapper({
         chartType: 'LineChart',
         containerId: 'canvas',
         dataTable: data,
         options:{
            width: 800,
            height: 400,
            title: 'Compare 2011 and 2016 Rent of each protester',
            titleTextStyle : {color: 'grey', fontSize: 20},
         }
      });
      //draw charts
      canvas.draw();
   });
}
google.setOnLoadCallback(drawVisualization);
</script>

<div id="canvas"></div>

  </body>

</html>

## protest.csv

          
            rent11
            rent16

            
              1000
              2800

            
              1200
              1700

            
              1800
              4900

            
              1810
              4700

            
              2000
              3200

            
              2190
              4800

            
              2430
              3100

            
              2950
              2900

            
              3000
              3850

            
              3400
              4500

            
              3800
              4000

            
              4000
              1800

            
              5000
              8000

            
              8000
              5000
	<!doctype html>

	<html>

	<head>
	<title>Google Graph and CSV</title>
	<meta name="description" content="test">

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>

	<script type="text/javascript"> // load the visualisation API
	google.load('visualization', '1', { packages: ['corechart', 'controls'] });
	</script>

	</head>

	<body>
	<script type="text/javascript">
	function drawVisualization() {
	$.get("protest.csv", function(csvString) {
	// transform the CSV string into a 2-dimensional array
	var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
	// this new DataTable object holds all the data
	var data = new google.visualization.arrayToDataTable(arrayData);
	//make charts
	var canvas = new google.visualization.ChartWrapper({
	chartType: 'LineChart',
	containerId: 'canvas',
	dataTable: data,
	options:{
	width: 800,
	height: 400,
	title: 'Compare 2011 and 2016 Rent of each protester',
	titleTextStyle : {color: 'grey', fontSize: 20},
	}
	});
	//draw charts
	canvas.draw();
	});
	}
	google.setOnLoadCallback(drawVisualization);
	</script>

	<div id="canvas"></div>

	</body>

	</html>
	rent11	rent16
	1000	2800
	1200	1700
	1800	4900
	1810	4700
	2000	3200
	2190	4800
	2430	3100
	2950	2900
	3000	3850
	3400	4500
	3800	4000
	4000	1800
	5000	8000
	8000	5000