Loading local JSON file into JS script element

Question

I am using AnyChart for a Choropleth Map that will show number of users per country.

The template from AnyChart uses the following code to indicate where the data should be pulled from (URL):


anychart.onDocumentReady(function () {

// load the data
      anychart.data.loadJsonFile("https://static.anychart.com/git-storage/word-press/data/choropleth-map-tutorial/data.json", function (data) {

        // Variables
        // go into the records section of the data
        var geoData = data.records

        // sum of all cases per country
        var sumCases = 0;

        // convert cases and deaths to numbers
        var numC;

        // create a new array with the resulting data
        var data = [];

        // Go through the initial data
        for (var i = 0; i < geoData.length; i++) {
          // convert strings to numbers and save them to new variables
          numC = parseInt(geoData[i].cases);

          // check if we are in the same country by comparing the geoId. 
          // if the country is the same add the cases and deaths to the appropriate variables
          if ((geoData[i + 1]) != null && (geoData[i].geoId == geoData[i + 1].geoId)) {
            sumCases = sumCases + numC;
          }
          else {
            // add last day cases and deaths of the same country
            sumCases = sumCases + numC;

            // insert the resulting data in the array using the AnyChart keywords 
            data.push({ id: geoData[i].geoId, value: sumCases, title: geoData[i].countriesAndTerritories })

            // reset the variables to start over
            sumCases = 0;

          }
        };

I want to change this URL to instead pull data from a local JSON file (users.json). I replaced the URL with users.json (as below) but the map will not render:

anychart.data.loadJsonFile("users.json", function (data)

I think I need to change loadJsonFile to something else but I can't figure out what. Thank you in advance for your help.

score 0 · Accepted Answer · answered Nov 20 '22 at 02:04

If you press F12 and see the dev console, you should see an error message like this,

Access to XMLHttpRequest at 'file:///C:/path/to/line-chart.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https.

The ways to work around this,

Host your file in a local web server.
Upload your file to a public web server.
If you really want to get this working locally, try this post to disable the security policy.

Loading local JSON file into JS script element

1 Answers1