0

I am trying to use Google Charts to display some data from a csv file.

I've looked on stack overflow and found this, and I tried following this tutorial (here) but I can't seem to get past the first step, accessing the csv file.

I download the jquery.cvs-0.71.js and placed it together with my cvs and html-file in the same folder. I use the cvs file from the tutorial.

This is my code for the HTML file:

<!DOCTYPE html>
<html>
<head>
<title>Google Chart Example</title>
<script src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.csv-0.71.js"></script>
<script>
  // wait till the DOM is loaded
  $(function() {
     // grab the CSV
     $.get("kzn1993.csv", function(csvString) {
        // display the contents of the CSV
        $("#chart").html(csvString);
     });
  });
</script>
</head>
<body>
      <div id="chart"></div>
</body>
</html>

I really have no idea why it's not working. I try to open the .html file, but the page remains blank. The title is set though.

Any help? Thanks!

Error log in javascript console:

Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

XMLHttpRequest cannot load file:///../../kzn1993.csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Community
  • 1
  • 1
Tcanarchy
  • 760
  • 1
  • 8
  • 20
  • Do you have any message in console log? – Anto Jurković Apr 01 '14 at 17:08
  • Yes! I edited them in the original post – Tcanarchy Apr 02 '14 at 06:15
  • Okay, I see what went wrong here. I used local resources from my filesystem. So now I put them on my webserver, and the errors are gone, but I don't see any results. – Tcanarchy Apr 02 '14 at 06:31
  • I you break on line `$("#chart").html(csvString);` what is the value `csvString`? – cazzer Apr 02 '14 at 06:35
  • I don't know how to do that, I'm afraid. Can you explain a little more detailed how that's done? I'm using eclipse, and when I open my html page with the build in eclipse browser, it does show the content of my csv file. – Tcanarchy Apr 02 '14 at 06:40
  • Open your page in a browser (the one hosted on your webserver), find the script in the browser's development tools (F12 in most browsers, then Scripts/Sources tab), then click on the line number containing that line. When you refresh the page it will break on and you will be able to inspect the value of the variable. – cazzer Apr 02 '14 at 06:50
  • I followed your steps and I think this is the value (although it seems rather odd): csvString: " ↵ ↵ ↵ ↵ ↵ ↵ – Tcanarchy Apr 02 '14 at 07:05
  • That's not my csv file, but my css file. However, I have no idea how i t got data from there... – Tcanarchy Apr 02 '14 at 07:06

1 Answers1

0

I have had the same problem with the same example. Finally I got it run. The reason is due to run the server with eclipse launcher. If you place the csv file in the wtpwebapps/yourapp directory and refresh several times the html page it will run. In my case I found the directory on: C:\Users\MYUSER\workspace.metadata.plugins\org.eclipse.wst.server.core\tmp2\wtpwebapps\MYRAPP

Alf
  • 168
  • 7