fetching data from local assets directory

Question

Currently my sample data and schema json are in an amazon store via https URL.

var jsonify = res => res.json(); var dataFetch =
fetch("https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-multiple-series-on-time-axis-data.json").then(jsonify);
var schemaFetch =
fetch("https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-multiple-series-on-time-axis-schema.json").then(jsonify);

I want to fetch the data from my projects "assets" directory but it does not seem to work

var jsonify = res => res.json(); var dataFetch =
fetch('assets/mydata.json').then(jsonify);
var schemaFetch =
fetch('assets/myschema').then(jsonify);

Any ideas where I zigged where I should have zagged? Thanks plenty

Answer 1

On a local system, use the fs module of node.js, not fetch

And instead of the .json() method, you just need the standard JSON.parse function.

const fs = require('fs');

const mydataStr = fs.readFileSync('assets/mydata.json');
const mydata = JSON.parse(mydataStr)
const myschemaStr = fs.readFileSync('assets/myschema.json');
const myschema = JSON.parse(myschemaStr)

Answer 2

You can see the fiddle hope it would help you out - https://jsfiddle.net/0tqju9Lr/

const URL_DATA = [
      [
        "01-Jan-2015",
        "55",
        "100",
        "UK"
      ],
      [
        "02-Jan-2015",
        "55",
        "106",
        "UK"
      ],
      [
        "03-Jan-2015",
        "57",
        "108",
        "US"
      ],
      [
        "04-Jan-2015",
        "50",
        "102",
        "US"
      ],
      [
        "05-Jan-2015",
        "56",
        "108",
        "US"
      ],
      [
        "06-Jan-2015",
        "48",
        "100",
        "US"
      ],
      [
        "07-Jan-2015",
        "45",
        "97",
        "US"
      ],
      [
        "08-Jan-2015",
        "56",
        "105",
        "US"
      ],
      [
        "09-Jan-2015",
        "44",
        "95",
        "US"
      ],
      [
        "10-Jan-2015",
        "48",
        "96",
        "US"
      ],
      [
        "11-Jan-2015",
        "52",
        "104",
        "US"
      ],
      [
        "12-Jan-2015",
        "59",
        "112",
        "US"
      ],
      [
        "13-Jan-2015",
        "62",
        "118",
        "US"
      ],
      [
        "14-Jan-2015",
        "56",
        "114",
        "US"
      ],
      [
        "15-Jan-2015",
        "59",
        "115",
        "US"
      ],
      [
        "16-Jan-2015",
        "64",
        "125",
        "US"
      ],
      [
        "17-Jan-2015",
        "61",
        "122",
        "US"
      ],
      [
        "18-Jan-2015",
        "65",
        "127",
        "US"
      ],
      [
        "19-Jan-2015",
        "59",
        "126",
        "US"
      ],
      [
        "20-Jan-2015",
        "75",
        "138",
        "US"
      ],
      [
        "21-Jan-2015",
        "58",
        "124",
        "US"
      ],
      [
        "22-Jan-2015",
        "72",
        "134",
        "UK"
      ],
      [
        "23-Jan-2015",
        "64",
        "132",
        "UK"
      ],
      [
        "24-Jan-2015",
        "75",
        "143",
        "UK"
      ],
      [
        "25-Jan-2015",
        "66",
        "133",
        "UK"
      ],
      [
        "26-Jan-2015",
        "70",
        "134",
        "UK"
      ],
      [
        "27-Jan-2015",
        "64",
        "133",
        "US"
      ],
      [
        "28-Jan-2015",
        "63",
        "128",
        "UK"
      ],
      [
        "29-Jan-2015",
        "69",
        "135",
        "UK"
      ],
      [
        "30-Jan-2015",
        "62",
        "129",
        "US"
      ],
      [
        "31-Jan-2015",
        "71",
        "136",
        "US"
      ],
      [
        "01-Jan-2015",
        "76",
        "148",
        "US"
      ],
      [
        "30-Jan-2015",
        "85",
        "156",
        "US"
      ],
      [
        "31-Jan-2015",
        "86",
        "156",
        "UK"
      ],
      
      
    ];
    const URL_SCHEMA = [{
        "name": "Time",
        "type": "date",
        "format": "%e-%b-%Y"
      },
      {
        "name": "Downloads",
        "type": "number"
      },
      {
        "name": "Web Visits",
        "type": "number"
      },
      {
        "name": "Country",
        "type": "string"
      }
      ];
    
    Promise.all([
      URL_DATA,
      URL_SCHEMA
    ]).then(function(res) {
      const data = res[0];
      const schema = res[1];
    
      const dataStore = new FusionCharts.DataStore();
      const dataSource = {
        chart: {
          multiCanvas: true,
          //canvasHeightProportion: '2:1'
        },
        caption: {
          text: "Web visits & downloads"
        },
        
        yaxis: [
          {
            plot: [
              {
                value: "Downloads",
                type: "column"
              },
              {
                value: "Web Visits",
                type: "line"
              }
            ]
          },
        ]
      };
      dataSource.data = dataStore.createDataTable(data, schema);
    
      new FusionCharts({
        type: "timeseries",
        renderAt: "container",
        width: "100%",
        height: "500",
        dataSource: dataSource
      }).render();
    });

Please refer the doc for more details - https://www.fusioncharts.com/dev/fusioncharts-aspnet-visualization/data-engine/data-source-data-engine#local-file