Vue.js error when importing amChart data from web API

1
votes

I'm learning Vue.js with amCharts and trying to build a covid-19 dashboard into a test project using data from amChart's own web API.

Hopefully, I don't need to put all my code on here because I'm just using amChart's demo code and I have the chart working from a module import within my own project, e.g.:

import covid_us_timeline from "@/assets/data/us_timeline";

That's module code I have copied from amChart's web API @ covid.amcharts.com/data/js/us_timeline.js

So, that works great, but I want to use the chart directly from the web API, so I'm using this in my Vue.js script section:

import covid_us_timeline from "https://covid.amCharts.com/data/js/us_timeline.js";

And getting this error:

These dependencies were not found:

  • https://covid.amCharts.com/data/js/us_timeline.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js??ref--18-0!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Covid19Chart.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save https://covid.amCharts.com/data/js/us_timeline.js Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'

It doesn't look like a cors issue and given this is all public domain data, I'd rather use in the front-end than build it in the back-end, so any ideas what I'm doing wrong?

1
vue.jsamcharts4

1 Answers

0
votes

Just as an update, I decided to go a different way anyway as accessing this volume of data from the front-end was a drain to say the least. So, switched to using axios in Node to access the data and load into Mongo and then manipulate it from there. It was only updated once a day anyway, so no need to access it every time the page was loaded.