Comments (2)
If you want to use the same chart across the different routes you can create it once and then use this.AmCharts.updateChart
to update it:
ngOnInit(): void {
this.route.paramMap
.switchMap((params: ParamMap) =>
this.service.getCoder(params.get('id')))
.subscribe((coder: Coder) => this.coder = coder);
this.chart1 = this.AmCharts.makeChart("PRIND_chartdiv1", {
"type": "serial",
"theme": "light",
// rest of chart options here
"dataProvider": [...]
});
this.route.params.subscribe((params: Params) => {
console.log(params);
this.AmCharts.updateChart(this.chart1, () => {
this.chart1.dataProvider = ...;
});
});
}
Alternatively, if you want to display the chart only on some routes, you can create a ChartComponent
which contains the chart configuration:
import { Input, Component } from "@angular/core";
import { AmChartsService, AmChart } from "@amcharts/amcharts3-angular";
@Component({
selector: "chart",
template: `<div id="{{id}}" [style.width]="width" [style.height]="height"></div>`
})
export class ChartComponent {
@Input() id: string;
@Input() width: string;
@Input() height: string;
private chart: AmChart;
constructor(private AmCharts: AmChartsService) {}
ngAfterViewInit() {
this.chart = this.AmCharts.makeChart(this.id, {
"type": "serial",
"theme": "light",
// rest of chart options here
"dataProvider": [...]
});
}
ngOnDestroy() {
if (this.chart) {
this.AmCharts.destroyChart(this.chart);
}
}
}
You have to use ngAfterViewInit
, not ngOnInit
Then you have to register it in your module:
import { ChartComponent } from "./chart.component";
@NgModule({
declarations: [
ChartComponent
],
...
})
export class AppModule { }
Then you can use it in your route's HTML:
<chart id="PRIND_chartdiv1" width="100%" height="500px"></chart>
You can create more @Input()
if you want to pass in additional information to the chart, such as a dataProvider
from amcharts3-angular2.
Pauan, thanks for the comment. I created the chart component with the configuration set like above, used ngAfterViewInit
, and registered it in app.module.ts
. I added the chart
tag in my route's html, and I'm getting the error:
'chart' is not a known element: If 'chart' is an Angular component, then verify that it is part of this module.
I double checked the name and that ChartComponent is imported in app.module.ts as well as being declared. Any other reason it's not able to recognize the element?
In my app.routes.ts, I have (truncated below):
import { CoderListComponent } from './coders/coder-list.component';
import { CoderDetailComponent } from './coders/coder-detail.component';
export const ROUTES: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'coders', component: CoderListComponent },
{ path: 'coder/*', component: CoderDetailComponent },
{ path: 'callback', component: CallbackComponent },
{ path: '**', redirectTo: '' }
];
The chart should show up on /coder/2347
, for example, which is referencing CoderDetailComponent
. If I have the path coder/*
use ChartComponent
I get the same error, however.
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
- License should be in package
- 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.