How to use with Angular CLI about amcharts3-angular2 HOT 15 OPEN

In order to get assets working, I've been need to write assets section like described in angular-cli documentation.
Furthermore, I've been used export plugin, so its assets also has been imported (lines 5 to 7).

"assets": [
  "assets",
  "favicon.ico",
  { "glob": "**/*", "input": "../node_modules/amcharts3/amcharts/images", "output": "./amcharts/images/" },
  { "glob": "**/*", "input": "../node_modules/amcharts3/amcharts/plugins/export/lang", "output": "./amcharts/plugins/export/lang/" },
  { "glob": "**/*", "input": "../node_modules/amcharts3/amcharts/plugins/export/libs", "output": "./amcharts/plugins/export/libs/" },
  { "glob": "**/*", "input": "../node_modules/amcharts3/amcharts/plugins/export/shapes", "output": "./amcharts/plugins/export/shapes/" }
],

My package.json:
"angular/core": "^4.2.4",
"angular/cli": "1.3.2",
"amcharts3": "github:amcharts/amcharts3",
"amcharts3-angular2": "^1.2.1",

from amcharts3-angular2.

How to use armchart with angular cli for Angular5?

from amcharts3-angular2.

@vl4d there is no need to add fabric, filesaver, jszip and pdfmake to .angular-cli.json.
Export plugin will lazy load the necessary script files. But, we need set to chart path property to point "../node_modules/ammap3/ammap"

from amcharts3-angular2.

Same goes for if you'd like to use this library with ammap, I had to add the following to my .angular-cli.json file for my map needs, with the ammaps package being:

npm install amcharts/ammap3 --save

For Scripts (include the theme/map and if export plugin is needed)

"scripts": [
        "../node_modules/ammap3/ammap/ammap.js",
        "../node_modules/ammap3/ammap/maps/js/worldHigh.js",
        "../node_modules/ammap3/ammap/themes/light.js",
        "../node_modules/ammap3/ammap/plugins/export/libs/fabric.js/fabric.min.js",
        "../node_modules/ammap3/ammap/plugins/export/libs/FileSaver.js/FileSaver.min.js",
        "../node_modules/ammap3/ammap/plugins/export/libs/jszip/jszip.min.js",
        "../node_modules/ammap3/ammap/plugins/export/libs/pdfmake/pdfmake.min.js",
        "../node_modules/ammap3/ammap/plugins/export/export.min.js"
 ]

For Styles

"styles": [
        "../node_modules/ammap3/ammap/plugins/export/export.css"
      ]

from amcharts3-angular2.

@tarnasky Thanks! I'll consider adding your steps to the README.

from amcharts3-angular2.

Excellent

from amcharts3-angular2.

Installing AmCharts using npm install amcharts3 --save failed saying no registry found with name amcharts3.

I followed below steps to install amcharts3.

from amcharts3-angular2.

The correct packages are:

npm install amcharts/amcharts3 --save
npm install @amcharts/amcharts3-angular --save

The ones mentioned by @tarnasky are not AoT compatible and do not follow Angular Package Format.

from amcharts3-angular2.

please provide a working example for amcharts3-angular2 as don't know how to pass data into dataprovider

from amcharts3-angular2.

@gokulraj809040 We have a working example here.

You can set the dataProvider when making the chart:

this.chart = this.AmCharts.makeChart("chartdiv", {
  "dataProvider": []
});

Or you can change the dataProvider after the chart has been created:

this.AmCharts.updateChart(this.chart, () => {
  this.chart.dataProvider = [];
});

from amcharts3-angular2.

thanks.

from amcharts3-angular2.

Thank you for the guide, i suggest to add on the readme.
Anyway, i had to add some file on angular-cli.json, because i had some 404 on browser console.

 "scripts": [
        "../node_modules/amcharts3/amcharts/amcharts.js",
        "../node_modules/amcharts3/amcharts/xy.js",
        "../node_modules/amcharts3/amcharts/serial.js",
        "../node_modules/amcharts3/amcharts/themes/light.js",
        "../node_modules/amcharts3/amcharts/plugins/export/export.min.js",
        "../node_modules/amcharts3/amcharts/plugins/export/libs/fabric.js/fabric.js",
        "../node_modules/amcharts3/amcharts/plugins/export/libs/FileSaver.js/FileSaver.js",
        "../node_modules/amcharts3/amcharts/plugins/export/libs/jszip/jszip.js",
        "../node_modules/amcharts3/amcharts/plugins/export/libs/pdfmake/pdfmake.js"
 ],

from amcharts3-angular2.

Hi,

Anyone can add "AmStock" and you can use in Angular4 Project?

from amcharts3-angular2.

@jeslomo Yes, you can use AmStock:

1. Add the following <script> tags to your index.html file:

   <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
   <script src="https://www.amcharts.com/lib/3/serial.js"></script>
   <script src="https://www.amcharts.com/lib/3/amstock.js"></script>
   <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
   

2. Use the stock type for the configuration:

   ngAfterViewInit() {
     this.chart = this.AmCharts.makeChart("chartdiv", {
       "type": "stock",
   
       "dataSets": [{
         "fieldMappings": [{
           "fromField": "value",
           "toField": "value"
         }],
         "dataProvider": this.chartData,
         "categoryField": "date"
       }],
   
       "panels": [{
         "stockGraphs": [{
           "valueField": "value"
         }]
       }],
   
       ...
     });
   }
   

The configuration is exactly the same as with AmCharts v3, so you can learn more from our demos and documentation.

from amcharts3-angular2.

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

Thank you @tarnasky it solved my problem.

from amcharts3-angular2.