Comments (12)
You are setting the chart id dynamically. Maybe the makeChart
is calling before the template is done (Angular lifecycle).
Also, update your code following the new instructions, use the chart as a private attribute of your component and inject AmCharts on the constructor.
Option 1: Run makeChart
inside of ngOnInit()
import { AfterViewInit } from '@angular/core';
//...
export class SomeComponent implements OnInit {
//...
private chart: any;
private id: string = "chartdiv";
constructor(private AmCharts: AmChartsService) {
}
//...
ngOnInit(): void {
// ...
this.chart = this.AmCharts.makeChart(this.id, {
// ...
}
// ...
}
//...
}
Option 2: Run the makeChart
inside of ngAfterViewInit
https://angular.io/docs/ts/latest/api/core/index/AfterViewInit-class.html
import { AfterViewInit } from '@angular/core';
//...
export class SomeComponent implements AfterViewInit {
//...
private chart: any;
private id: string = "chartdiv";
constructor(private AmCharts: AmChartsService) {
}
//...
ngAfterViewInit(): void {
// ...
this.chart = this.AmCharts.makeChart(this.id, {
// ...
}
// ...
}
//...
}
from amcharts3-angular2.
Since I struggled with this for awhile I am posting this for anyone interested in making these charts dynamic in Angular 2+. I am using Angular 6 but I think this works in 5 too. The challenge was binding these charts in multiple angular material tabs. The solution was subscribing to event emitters and not using any inputs or lifecycle event in the chart component and instead hooking into the viewchild:
navigation.component.ts:
import { Component, ViewEncapsulation, Output, EventEmitter, ViewChild } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material';
@Component({
selector: 'navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.css'],
encapsulation: ViewEncapsulation.None
})
export class NavigationComponent {
constructor() {}
@Output() navigating: EventEmitter<any> = new EventEmitter();
ChangedTab(event: MatTabChangeEvent){
if (event.tab.textLabel==='Tab 1'){
console.log(event.tab);
this.navigating.emit(event.tab);
}
if (event.tab.textLabel==='Tab 2'){
console.log(event.tab);
this.navigating.emit(event.tab);
}
}
}
navigation.component.html:
<mat-tab-group (selectedTabChange)="ChangedTab($event)">
<mat-tab label="Tab 1">
<componentone [emitchange]="navigating"></componentone>
</mat-tab>
<mat-tab label="Tab 2">
<componenttwo [emitchange]="navigating"></componenttwo>
</mat-tab>
</mat-tab-group>
comonentone.component.ts:
import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs';
import { ChartComponent } from './chart.component';
@Component({
selector: 'componentone',
templateUrl: './componentone.component.html',
styleUrls: ['./componentone.component.css']
})
export class componentone implements OnInit {
constructor() {
}
@Input() emitchange: Observable<any>;
public chartData: any[] = [];
public customColors: any = [
{
"title": "title 1",
"color": "#9a9b9d"
}, {
"title": "title 2",
"color": "#e9700e"
}, {
"title": "title 3",
"color": "#4472b2"
}];
public chartColumns: any =
[
{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>$[[value]]</b></span>",
"fillAlphas": 1,
"title": "title 1",
"type": "column",
"fillColors": "#9a9b9d",
"valueField": "title1",
"showAllValueLabels": false
},
{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>$[[value]]</b></span>",
"fillAlphas": 1,
"title": "title 2",
"type": "column",
"fillColors": "#e9700e",
"valueField": "title2",
"showAllValueLabels": false
},
{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>$[[value]]</b></span>",
"fillAlphas": 1,
"title": "title 3",
"type": "column",
"fillColors": "#4472b2",
"valueField": "title3",
"showAllValueLabels": false
}
];
@ViewChild(ChartComponent) private _chart;
ngOnInit(){
this.emitchange.subscribe((val) => {
console.log("emitting new results in chart " + val.textLabel);
if (val.textLabel==="Tab 1"){
this.populateData();
this._chart.refreshChart(this.chartData, this.chartColumns, this.customColors);
}
});
}
private populateData() {
this.chartData = [{whateveryouwant}];
}
}
componentone.component.html
<chart></chart>
chart.component.ts:
import { Component, OnDestroy } from '@angular/core';
import { AmChartsService, AmChart } from '@amcharts/amcharts3-angular';
@Component({
selector: 'chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css'],
providers: [AmChartsService]
})
export class ChartComponent implements OnDestroy {
private chart: AmChart;
constructor(private AmCharts: AmChartsService) { }
private graphsData: Array<any> = new Array<any>();
private customColors?: Array<any> = new Array<any>();
makeOptions(dataProvider: any) {
return {
'type': 'serial',
'theme': 'light',
"legend": {
"position": "top",
"markerSize": 10,
"data": this.customColors ? this.customColors : []
},
'dataProvider': dataProvider,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"unit": "$",
"unitPosition": "left"
}],
"graphs": this.graphsData ? this.graphsData : [],
"gridAboveGraphs": true,
'chartCursor': {
'categoryBalloonEnabled': false,
'cursorAlpha': 0,
'valueLineEnabled': true,
'valueLineBalloonEnabled': true,
'valueLineAlpha': 0.5,
'fullWidth': true
},
"categoryField": 'title',
"categoryAxis": {
"axisAlpha": 0,
"gridAlpha": 0
},
"export": {
"enabled": true,
"fileName": "customfilename"
}
};
}
refreshChart(data: any, columns: any, colors: any) {
console.log("inside refresh chart");
this.graphsData = columns;
this.customColors = colors;
if (this.chart){
this.AmCharts.updateChart(this.chart,()=>{
if (this.chart.dataProvider){
this.chart.dataProvider = data;
this.chart.graphsData = columns;
this.chart.legend.data = colors;
}
else
{
this.chart = this.AmCharts.makeChart('chartdiv', this.makeOptions(data),10);
}
});
}
else{
console.log("recreating chart");
this.chart = this.AmCharts.makeChart('chartdiv', this.makeOptions(data),10);
}
}
ngOnDestroy() {
if (this.chart)
this.AmCharts.destroyChart(this.chart);
}
}
chart.component.html
<div id="chartdiv"
[style.width.%]="100"
[style.height.px]="500"></div>
And now you have a scalable solution :) Hope this helps somebody
from amcharts3-angular2.
I have same issue after following instructions.
from amcharts3-angular2.
i have same issue
from amcharts3-angular2.
you must change <amCharts [id]="id" [options]="chart" [style.width.%]="100" [style.height.%]="100">
to <amCharts [id]="{{id}}" [options]="chart" [style.width.%]="100" [style.height.%]="100">
from amcharts3-angular2.
just try this
import { AmChart } from '@amcharts/amcharts3-angular';
import { AmChartsModule } from '@amcharts/amcharts3-angular/amcharts.directive';
ngAfterViewInit() {
setTimeout(()=>{
AmCharts.makeChart('chartdiv', {
}
},1000);
}
from amcharts3-angular2.
Hi, i'm have the same issue, but what i wanna do is create a lot of graphs, i'm trying this by this:
<div class="container" *ngFor="let item of dataDB; let i=index"><h1 id="canvas{{i}}">{{item}}</h1>
<div [id]="chartNumber" [style.width.%]="100" [style.height.px]="500"></div>
but all i get its empty divs
from amcharts3-angular2.
Hello,
I'm facing the same problem. The solution of @aslampeerbits, work well :
import { AmChart } from '@amcharts/amcharts3-angular';
import { AmChartsModule } from '@amcharts/amcharts3-angular/amcharts.directive';
ngAfterViewInit() {
setTimeout(()=>{
AmCharts.makeChart('chartdiv', {
}
},1000);
}
In fact, it's not a proper way to solve it.
I also tried to create the chart in a @ViewChild settter like this :
private _plannedOFChartEL: ElementRef;
@ViewChild('YEAH')
set plannedOFChartEL(el: ElementRef){
this._plannedOFChartEL = el;
if (el) {
// GRAPH CREATION THERE !
}
}
get plannedOFChartEL(): ElementRef{
return this._plannedOFChartEL;
}
But it doesn't work.
Do you have another way to solve it ?
from amcharts3-angular2.
Having the same problem. None of the solutions here work for me.
from amcharts3-angular2.
@calloncampbell Hi,
Inside the new material tabs for angular the chart does not draw after the view init.
from amcharts3-angular2.
@calloncampbell to be more specific adding:
this.chart = this.AmCharts.makeChart('chartdiv', this.getAmchartOptions(dataMap), 1);
where the last argument is the delay, fixes that. (took me one whole day to fix this after trying eveything).
Something is wrong I think with detecing the div perhaps
from amcharts3-angular2.
Thanks @zuice32 !
I have a canvasJs chart on a lessonsPage component that was inside a mat-tab
. The chart would not load unless I clicked on that lessonsPage tab before the data arrived from the api. After hours of tinkering I realized the div
with the id='chartContainer' was null at runtime since by default the material tab group opened to a different tab (not the lessonsPage with said chart), hence the chart could not render.
I still could not figure this out until I came across your post.
I added a ViewChild for the lessonsPage to the outer component, through which I was able to access my setupChart() func. Now I used your idea to call my setupChart() when the user clicks on the lessonsPage tab. I used a setTimeout with 50ms just to be sure the view is in the DOM before rendering.
Thanks for the great post!
from amcharts3-angular2.
Related Issues (20)
- Gantt Chart displays wrong date in small screens
- Exporting of PNG,jpg,pdf,xlsx etc not working in angular 7 HOT 5
- Large data with specified colors for column chart displays different color
- Update dependencies to Angular 8 HOT 1
- Issue using angular universal
- Not able to Change Gantt Chart display view from Monthly to Daily HOT 3
- I don't want ChartScrollbar, I want browser scrollbar to be displayed in amcharts Gantt
- How to add dynamically New Value axis and graph in Angular 6 by using Amchart 3
- Update dependencies to Angular 9 and support Ivy HOT 20
- ERROR TypeError: this.chart.panels[0].addLabel is not a function
- License key integration in live project HOT 1
- this.checkTouchDuration is not a function (pie chart)
- amcharts 2.2.5 not compatible with angular 9.1.13 and HOT 1
- Support for angular version 13 HOT 1
- Support for Angular v14 HOT 1
- Support for Angular v15 HOT 1
- Support for Angular 16 HOT 1
- Feature Request - Angular 17 upgrade HOT 1
- Amcharts isn't loading when I have no internet connection HOT 4
- Not rendering on Angular Material Tabs HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from amcharts3-angular2.