1

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.

Evan Plaice
  • 13,944
  • 6
  • 76
  • 94
Scott
  • 51
  • 5

1 Answers1

1

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.

Adrien
  • 1,929
  • 1
  • 13
  • 23
  • Adrien, thank you for your reply. Yes, my CSV is on multiple lines, as you suggested, but still no luck. I assume that the CSV and the HTML document should be in the same directory. Is the issue related to the path of the CSV file, perhaps? – Scott Feb 14 '15 at 18:43
  • Well, you can check what's returned by the server when you do the GET request. Use Developer Tools to help you. If it returns the CSV, you are good, otherwise it should return 404. You can also set breakpoints in the JS code if you use the Developer Tools of the browser or Firebug – Adrien Feb 14 '15 at 23:07
  • It seems that the problem is that I was opening my html document directly from my browser, rather than serving the document on a webserver. Once I uploaded the files to a server, the GET request worked. Thank you again for your help in resolving this. – Scott Feb 15 '15 at 15:43