CODEWITHSUNDEEP
javascriptjquerycsvgoogle-visualizationjquery-csv
Scott
Scott

Reputation: 51

Using jQuery to read a CSV to pass to the Google Visualization API

I am trying to create a map from data in a CSV using the geochart package of the Google Visualization API (https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart). The workflow is as follows:

  1. Convert CSV to array using jQuery
  2. Convert array to datatable
  3. Generate chart from datatable

I am able to generate the map when I encode the data as an array directly; however I am not able to generate this array from the CSV file.

My code: 

<!DOCTYPE html>
<html>
<head>

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

<script type="text/javascript">

google.load('visualization', '1', {packages: ['geochart']});
google.setOnLoadCallback(drawVisualizations);

function drawVisualizations() {
$.get("map_2003.csv", function(csv_in) {
var map_2003_in = $.csv.toArrays(csv_in, {onParseValue: $.csv.hooks.castToScalar});
var map_2003_data = new google.visualization.arrayToDataTable(map_2003_in);
var map_2003_chart = new google.visualization.GeoChart(document.getElementById('map_2003_chart'));
map_2003_chart.draw(map_2003_data, {'width': '640px','height': '480px'});
});

}
</script>
</head>

<body>
<div id="map_2003_chart" style="width: 640px; height: 480px;"></div>

</body>
</html>

My CSV file looks like this: Country,Production,US,7362,Canada,3003,Mexico,3795,Argentina,900,Brazil,1548

Any help would be much appreciated.

Upvotes: 1

Views: 2224

Answers (1)

Adrien
Adrien

Reputation: 1947

Assuming that your CSV rather looks like this:

Country,Production
US,7362
Canada,3003
Mexico,3795
Argentina,900
Brazil,1548

I tried jQuery-csv and it works fine. So make sure that the data in your CSV is on multiple lines and not only one.

Upvotes: 1

Related Questions