amcharts3-angular2 icon indicating copy to clipboard operation
amcharts3-angular2 copied to clipboard

Amcharts isn't loading when I have no internet connection

Open BdDragos opened this issue 6 years ago • 4 comments

Hello. On my current project I have the requirement to work with Amcharts through a VPN, a VPN that has no outside internet access, which means I can't load any scripts or images that aren't stored locally on my PC. While I fixed some of the problems, right now I can't load any kind of image in the created chart since I have no internet (for example the images used in the drag sliders) (see pic related)

Pic of the errors

I downloaded Amchart 3 and Amcharts3-angular 2 on my project through npm install, and this is how I fixed the chart loading by adding this lines in angular.json, at architect scripts

        "scripts": [
          "node_modules/amcharts3/amcharts/amcharts.js",
          "node_modules/amcharts3/amcharts/serial.js",
          "node_modules/amcharts3/amcharts/themes/light.js"
        ]

Is there a way to do the same with the images also, so I can load them locally and not try to fetch them from the internet through the framework?

BdDragos avatar Feb 26 '19 15:02 BdDragos

Your charts seem to refer to you local computer as in localhost:4200. Are you missing the images in your image /amcharts/images folder?

darlesson avatar Feb 28 '19 06:02 darlesson

I found the images in the node_modules/amcharts3/amcharts/images folder, but it seems like the path the amchart.js tries to load isn't this one (it is only amcharts/images). Should I modify amchart.js to make it point to the correct path or is there another solution?

BdDragos avatar Feb 28 '19 08:02 BdDragos

I sort of found a solution on how to make amcharts3 work offline, but it is sort of a solution because for angular 7 it doesn't fix anything.

I tried to do the following steps in here https://github.com/amcharts/amcharts3-angular2/issues/33

But since I have Angular 7 I cannot load the node_modules path in assets since it isn't a src one, and I found this workaround that is supposed to load the images:

        "assets": ["src/favicon.ico",
          "src/assets",

          {
            "glob": "**/*",
            "input": "node_modules/amcharts3/amcharts/images",
            "output": "src/assets"
          }
        ]

But it doesn't work, and the amcharts/images aren't loaded. Does anyone know how can I point to the node_modules amcharts images path in assets in the angular.json file so it works?

BdDragos avatar Feb 28 '19 09:02 BdDragos

In the end I found a solution to fix this issue The fix was to change the assets in the following code:

        "assets": ["src/favicon.ico",
          "src/assets",

          {
            "glob": "**/*",
            "input": "./node_modules/amcharts3/amcharts/images",
            "output": "./amcharts/images"
          }

Now the images load as they should. From what I've seen the amchart.js is hardcoded to look into the folder amcharts, which should be in the root folder, not in any other folder except src/amcharts (where src is the root).

I think the documentation or the readme should be update to contain how to run amcharts3 offline on angular >=6 versions.

BdDragos avatar Feb 28 '19 09:02 BdDragos