1

I'm trying to setup ZingChart so it will plot data from a local CSV file.

I have a working example using the csv and data-string attributes that renders the graph without issues:

<!DOCTYPE html>
<html>

<head>
  <script src="zingchart/zingchart.min.js"></script>
  <script>
    zingchart.MODULESDIR = "zingchart/modules/";
  </script>
  <style></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    var myConfig = {
      "type": "line",
      "csv":{
              "data-string":"Model|Highway|City_Ford 150|19|16_Mazda S3|30|21_Prius|42|35",
              "row-separator":"_",
              "separator":"|"
          }
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: "100%"
    });
  </script>
</body>

</html>

However changing the csv so it links to a file instead raises an error:

  "csv": {
    "url": "zingchart/data01.csv"
  }

ZingChart error loading CSV file

ZingChart error loading CSV file

In the ZingChart tutorials there are links to JSFiddle so you can freely edit the javascript and see the results. On them I am also getting the same error screen if they are using the csv/url configuration option.

Am I missing something?

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
LaintalAy
  • 1,162
  • 2
  • 15
  • 26
  • You are making a cross-origin request to the ZingChart documentation website which does not allow you to use their resources on your site/local server. If you open up the console, you will see: `No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.` – Mr. Polywhirl Feb 23 '16 at 14:08
  • @Mr.Polywhirl - It's true, I get something along those lines: `XMLHttpRequest cannot load file:///home/eballes/Work/backup/zingchart_test/zingchart/data01.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.ZC.A3.ajax @ VM514:1 VM514:1 Uncaught TypeError: Cannot read property 'appendChild' of null`. But I am not accessing their resources... as far as I know everything I have is (or should be) local. – LaintalAy Feb 23 '16 at 14:50
  • @Mr.Polywhirl OK, understood. I got it working now. Basically I can't load a 'file://' as expressed in [here](http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local). So I need to execute with Chrome --allow-file-access-from-files or just start a local http server on the machine. Thanks a lot – LaintalAy Feb 23 '16 at 15:02
  • 1
    If you have ever used [GitHub | Gists](https://gist.github.com/), this website, http://bl.ocks.org, will allow you to view your Gists as long as you have an `index.html` file. The cool thing is they can load files over AJAX with relative paths. It may take a couple minutes for the page to change between updates to your code because the site caches the Gists periodically. In the following Gist, all I have is my index page and my data. [bl.ocks.org/03e006b2](https://bl.ocks.org/03e006b27f6a23aea434) – Mr. Polywhirl Feb 23 '16 at 15:55

1 Answers1

3

You are making a cross-origin request to the ZingChart documentation website which does not allow you to use their resources on your site/local server.

If you open up the console, you will see: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Wherever your index.html page is located, you need a directory called "zingchart" with a file named "data01.csv". Also, since this is an XHR request, you will need to either upload this on a website/server or start your own local Apache web server instance e.g. WAMP, LAMP, AMPPS, XAMPP.

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
  • The error was quite similar and everything had local scope: `XMLHttpRequest cannot load file:///home/eballes/Work/backup/zingchart_test/zingchart/data01.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.ZC.A3.ajax @ VM514:1 VM514:1 Uncaught TypeError: Cannot read property 'appendChild' of null` The root cause and possible solutions are explained [here](http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local). Thanks a lot! – LaintalAy Feb 23 '16 at 15:12