Here, we will learn about creating dynamic AM-Charts in Angular 8. Charts are very useful for showing data and people understand the data very easily. So we will use am-charts for creating dynamic charts in Angular-8.
We will use the dummy API for it.
https://api.myjson.com/bins/zg8of
So, create a new project in Angular 8 using your favorite code editor.
After creating it, open the project and open app.component.html file and add the code in it.
<div id="chartdiv" style="width: 100%; height: 500px"> </div> <div id="l-0"></div>
Open the app.component.ts file and add the code in it.
import { Component, NgZone } from "@angular/core";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import { HttpClient } from '@angular/common/http';
am4core.useTheme(am4themes_animated);
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
private chart: am4charts.XYChart;
tempData: any;
dates = [];
newData = [];
gr = [];
data = [];
constructor(private _zone: NgZone, private _http: HttpClient) { this.getApiData(); }
getApiData() {
this._http.get("https://api.myjson.com/bins/zg8of").subscribe(res => {
this.tempData = res;
this.tempData.forEach(values => {
this.data.push(values);
});
console.log(this.data);
this._zone.runOutsideAngular(() => {
var result = this.groupBy(this.data, function (item) {
return ([item.Name]);
});
result.forEach(b => {
var d1 = b.map(function (i) {
return i.Month;
});
Object.assign(this.dates, d1);
});
this.dates.forEach(b => {
var item = { sales_figure: b };
var i = 0;
result.forEach(c => {
var el = c.filter(function (e) {
return e.Month == b;
});
if (el && el.length > 0) {
item[c[i].Name.toUpperCase()] = el[0].Sales_Figure;
if (this.gr.filter(function (g) {
return g == c[i].Name.toUpperCase();
}).length <= 0) {
this.gr.push(c[i].Name.toUpperCase());
}
}
i++;
});
if (Object.keys(item).length > 1)
this.newData.push(item);
});
let chart = am4core.create("chartdiv", am4charts.XYChart);
am4core.options.minPolylineStep = Math.ceil(this.newData.length / 50);
am4core.options.commercialLicense = true;
chart.paddingRight = 20;
chart.data = this.newData;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "sales_figure";
categoryAxis.renderer.minGridDistance = 70;
categoryAxis.fontSize = 12;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.fontSize = 12;
valueAxis.title.text = "Sales Figure";
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
chart.legend.fontSize = 12;
var markerTemplate = chart.legend.markers.template;
markerTemplate.width = 10;
markerTemplate.height = 10;
var legendContainer = am4core.create("l-0", am4core.Container);
legendContainer.width = am4core.percent(100);
chart.legend.parent = legendContainer;
var legendDiv = document.getElementById("l-0");
function resizeLegendDiv() {
legendDiv.style.height = chart.legend.measuredHeight + "px";
legendDiv.style.overflow = "hidden";
}
chart.legend.events.on('inited', resizeLegendDiv);
chart.colors.list = [am4core.color("#0D8ECF"), am4core.color("#FF6600"), am4core.color("#FCD202"), am4core.color("#B0DE09"), am4core.color("#2A0CD0"), am4core.color("#CD0D74"), am4core.color("#CC0000"), am4core.color("#00CC00"), am4core.color('#ffd8b1'), am4core.color("#990000"), am4core.color('#4363d8'), am4core.color('#e6194b'), am4core.color('#3cb44b'), am4core.color('#ffe119'), am4core.color('#f58231'), am4core.color('#911eb4'), am4core.color('#46f0f0'), am4core.color('#f032e6'), am4core.color('#bcf60c'), am4core.color('#fabebe'), am4core.color('#008080'), am4core.color('#e6beff'), am4core.color('#9a6324'), am4core.color('#fffac8'), am4core.color('#800000'), am4core.color('#aaffc3'), am4core.color('#808000'), am4core.color('#ffd8b1'), am4core.color('#000075')];
this.gr.forEach(d => {
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = d;
series.name = d;
series.dataFields.categoryX = "sales_figure";
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.strokeWidth = 2;
series.minBulletDistance = 30;
series.tensionX = 0.7;
series.legendSettings.labelText = "[bold]" + "{name}";
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.strokeWidth = 2;
bullet.circle.radius = 3;
bullet.circle.fill = am4core.color("#fff");
var bullethover = bullet.states.create("hover");
bullethover.properties.scale = 1.2;
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panXY";
chart.cursor.snapToSeries = series;
});
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.parent = chart.bottomAxesContainer;
this.chart = chart;
});
});
}
groupBy(array, f) {
var groups = {};
array.forEach(function (o) {
var group = JSON.stringify(f(o));
groups[group] = groups[group] || [];
groups[group].push(o);
});
return Object.keys(groups).map(function (group) {
return groups[group];
})
}
ngOnDestroy() {
this._zone.runOutsideAngular(() => {
if (this.chart) {
this.chart.dispose();
}
});
}
}
Finally, add the reference for HttpClientModule in the app.module.ts file and that’s it.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Output:
Assalam o Alaikum. I’m trying to implement these concept about amCharts in my angular9 project but getting these errors. How can I resolve them. Kindly Help me out.
Humbly Thanks……..! 🙂
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
client:52 [WDS] Live Reloading enabled.
zone-evergreen.js:2845 GET https://api.myjson.com/bins/zg8of net::ERR_CONNECTION_TIMED_OUT
scheduleTask @ zone-evergreen.js:2845
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2878
proto. @ zone-evergreen.js:1449
(anonymous) @ http.js:2637
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
getApiData @ app.component.ts:24
AppComponent @ app.component.ts:22
AppComponent_Factory @ app.component.ts:132
getNodeInjectable @ core.js:5993
instantiateRootComponent @ core.js:12832
createRootComponent @ core.js:26488
create @ core.js:34110
bootstrap @ core.js:43108
(anonymous) @ core.js:42696
_moduleDoBootstrap @ core.js:42692
(anonymous) @ core.js:42647
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41667
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:41645
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:42677
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:83
0 @ main.ts:12
__webpack_require__ @ bootstrap:83
checkDeferredModules @ bootstrap:44
webpackJsonpCallback @ bootstrap:31
(anonymous) @ main.js:1
Show 17 more frames
core.js:6241 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: “Unknown Error”, url: “https://api.myjson.com/bins/zg8of”, ok: false, …}error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: “error”, …}bubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: “https://api.myjson.com/bins/zg8of”, __zone_symbol__loadfalse: Array(1), __zone_symbol__errorfalse: null, __zone_symbol__xhrScheduled: true, …}defaultPrevented: falseeventPhase: 0isTrusted: truelengthComputable: falseloaded: 0path: []returnValue: truesrcElement: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: “https://api.myjson.com/bins/zg8of”, __zone_symbol__loadfalse: Array(1), __zone_symbol__errorfalse: null, __zone_symbol__xhrScheduled: true, …}target: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: “https://api.myjson.com/bins/zg8of”, __zone_symbol__loadfalse: Array(1), __zone_symbol__errorfalse: null, __zone_symbol__xhrScheduled: true, …}timeStamp: 28933.13500000113total: 0type: “error”__proto__: ProgressEventheaders: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}headers: Map(0) {}lazyUpdate: nullnormalizedNames: Map(0) {}__proto__: Objectmessage: “Http failure response for https://api.myjson.com/bins/zg8of: 0 Unknown Error”name: “HttpErrorResponse”ok: falsestatus: 0statusText: “Unknown Error”url: “https://api.myjson.com/bins/zg8of”__proto__: HttpResponseBase
defaultErrorLogger @ core.js:6241
handleError @ core.js:6294
next @ core.js:42627
schedulerFn @ core.js:37132
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:37092
(anonymous) @ core.js:41707
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41501
onHandleError @ core.js:41704
handleError @ zone-evergreen.js:368
runTask @ zone-evergreen.js:170
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto. @ zone-evergreen.js:1449
hostReportError @ hostReportError.js:2
error @ Subscriber.js:156
_error @ Subscriber.js:75
error @ Subscriber.js:55
_error @ Subscriber.js:75
error @ Subscriber.js:55
_error @ Subscriber.js:75
error @ Subscriber.js:55
notifyError @ OuterSubscriber.js:7
_error @ InnerSubscriber.js:14
error @ Subscriber.js:55
onError @ http.js:2560
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:41645
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
error (async)
customScheduleGlobal @ zone-evergreen.js:1773
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleEventTask @ zone-evergreen.js:236
(anonymous) @ zone-evergreen.js:1928
(anonymous) @ http.js:2626
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
getApiData @ app.component.ts:24
AppComponent @ app.component.ts:22
AppComponent_Factory @ app.component.ts:132
getNodeInjectable @ core.js:5993
instantiateRootComponent @ core.js:12832
createRootComponent @ core.js:26488
create @ core.js:34110
bootstrap @ core.js:43108
(anonymous) @ core.js:42696
_moduleDoBootstrap @ core.js:42692
(anonymous) @ core.js:42647
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41667
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:41645
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:42677
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:83
0 @ main.ts:12
__webpack_require__ @ bootstrap:83
checkDeferredModules @ bootstrap:44
webpackJsonpCallback @ bootstrap:31
(anonymous) @ main.js:1
Show 45 more frames
zone-evergreen.js:2550 [Violation] ‘setTimeout’ handler took 97ms
Hello Faisal,
I tried to implement this code in a local instance of angular but it does not work for me. Any ideas why? no errors being reported in the console. Thank you
Without error log or code how I can say whats the issue 🙂