CODEWITHSUNDEEP
javascriptcsvchartszingchart
LaintalAy
LaintalAy

Reputation: 1192

Loading a CSV file with zingchart

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?

Upvotes: 1

Views: 442

Answers (1)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48733

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.

Upvotes: 3

Related Questions