Angular 2 And Amcharts

Does anybody have any idea on how to implement Amcharts into Angular2 (BETA)? I was trying to follow the path/pattern of this question however, I was pretty successful with charts

Solution 1:

1. Installation

npm install amcharts/amcharts3-angular2 --save

2. In your HTML file, load the amCharts library using tags:

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

3. In your app module, import the AmChartsModule module and add it to the imports:

import { AmChartsModule } from"amcharts3-angular2";

@NgModule({
  imports: [
    AmChartsModule
  ]
})
export classAppModule {}

4. Inject the AmChartsService into your app component, create a element with an id, then use the makeChart method to create the chart:

import { AmChartsService } from"amcharts3-angular2";

@Component({
  template: `<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>`
})
exportclassAppComponent {
  privatechart: any;

  constructor(private AmCharts: AmChartsService) {}

  ngOnInit() {
    this.chart = this.AmCharts.makeChart("chartdiv", {
      "type": "serial",
      "theme": "light",
      "dataProvider": []
      ...
    });
  }

  ngOnDestroy() {
    this.AmCharts.destroyChart(this.chart);
  }
}

The first argument to makeChart must be the same as the 's id. The id can be whatever you want, but if you display multiple charts each chart must have a different id

When you are finished with the chart, you must call the destroyChart method. It's good to put this inside the ngOnDestroy method.

5. If you want to change the chart after the chart has been created, you must make the changes using the updateChart method:

// This must be called when making any changes to the chartthis.AmCharts.updateChart(this.chart, () => {
  // Change whatever properties you want, add event listeners, etc.this.chart.dataProvider = [];

  this.chart.addListener("init", () => {
    // Do stuff after the chart is initialized
  });
});

Sample Project:https://github.com/amcharts/amcharts3-angular2

Solution 2:

Thanks to the help of customer support at AmCharts.

A working plunker can be found here.

The key issue was this line of code: Instead of doing this:

AmCharts.ready(function () {
    createStockChart();
});

Instead do this:

if (AmCharts.isReady) {
    createStockChart();

} else {
    AmCharts.ready(function () {
        createStockChart();
    });
}

UPDATE:

Here is the extended answer using Angular Service to get the data for the chart. Angular2 HTTP Providers, get a string from JSON for Amcharts

Solution 3:

I'd say your selector is wrong, you use the element tag <chart></chart>, but in the directive declaration you use [chart], which selects an attribute. This will leave you with 2 possible options:

Option 1

@Directive({
   selector: 'chart', //remove the straight brackets to select a tag
   ...
})

Option 2

<divchart>...</div><!-- now you can use the attribute selector -->

Solution 4:

Two things I did. (problem not solved yet.)

1. This was the final code that I used in template.html

   <div id="chartdiv" chart2 style="width:100%; height:600px;"></div>

2. The selector stayed the same. selector: '[chart2]'

3. I also ran npm start to compile the TypeScript. Which I think might have helped.

Hopefully this will help someone.