amcharts / amcharts3-angular2 Goto Github PK
View Code? Open in Web Editor NEWOfficial Angular 2 plugin for amCharts V3
Official Angular 2 plugin for amCharts V3
Hi am Using angular4 and amcharts and I am displaying world map with some markers.I am displaying the description popup after clicking on every marker.In that popup I am providing link that can be clicked to do further operations.And after clicking that link control will come to app.component.ts
my code is:
app.component.ts
----------------
images:[{
"title": "London",
"latitude": 51.5002,
"longitude": -0.1262,
"description" : '<p>This is the popup</p>
<p>click the link for more info
<button (click)="takeAnAction()">Link</button>
</p>'
}]
takeAnAction(){
console.log("taking an action");
}
So after clicking on Link In the description window of the marker takeAnAction() method has to be executed but In the current scenario there no click event is getting triggered. It is not working.No action nothing.
Please help me.
Really its very important to me.
I'm trying to get the amcharts to draw upon navigating to a dynamic URL. For example, when navigating from http://localhost:4200/coders to http://localhost:4200/coder/2451, the charts will not redraw unless I refresh the page. From what I understand, ngOnInit won't run again if the URL is a result of a parameter change. But when I subscribe to param changes, I still can't get them to draw. Here is the relevent code:
ngOnInit(): void {
this.route.paramMap
.switchMap((params: ParamMap) =>
this.service.getCoder(params.get('id')))
.subscribe((coder: Coder) => this.coder = coder);
this.route.params.subscribe((params: Params) => {
console.log(params);
this.chart1 = this.AmCharts.makeChart("PRIND_chartdiv1", {
"type": "serial",
"theme": "light",
// rest of chart options here
"dataProvider": [...]
});
});
The params show up in the console just fine, btw.
`Failed to compile.
.//.1.1.0@amcharts3-angular2/index.ts/.2.4.9@@angular/core/src/linker/system_js_ng_module_factory_loader.js
Module build failed: TypeError: Cannot read property 'text' of undefined
at Object.getTokenPosOfNode (E:\work\CodeBe\node_modules.2.2.1@typescript\lib\typescript.js:6768:71)
at IdentifierObject.TokenOrIdentifierObject.getStart (E:\work\CodeBe\node_modules.2.2.1@typescript\lib\typescript.js:80500:23)
at IdentifierObject.TokenOrIdentifierObject.getText (E:\work\CodeBe\node_modules.2.2.1@typescript\lib\typescript.js:80521:77)
at refactor.findAstNodes.filter (E:\work\CodeBe\node_modules.1.2.12@@ngtools\webpack\src\loader.js:139:44)
at Array.filter (native)
at refactor.findAstNodes.forEach.node (E:\work\CodeBe\node_modules.1.2.12@@ngtools\webpack\src\loader.js:138:14)
at Array.forEach (native)
at _removeDecorators (E:\work\CodeBe\node_modules.1.2.12@@ngtools\webpack\src\loader.js:129:10)
at Promise.resolve.then (E:\work\CodeBe\node_modules.1.2.12@@ngtools\webpack\src\loader.js:292:33)
@ ./src/$$_gendir/app/home/home.module.ngfactory.ts 25:0-52
@ ./src/$$_gendir async
@ ./
@ ./src/$$_gendir/app/app.module.ngfactory.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts`
Hi,
Do you guys have any plans to push official AmCharts 3 into NPM registry?
For now the package.json
name is specified as amcharts3-angular2
, but npm info amcharts3-angular2
says:
$ npm info amcharts3-angular2
...
npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/amcharts3-angular2
npm ERR! 404
npm ERR! 404 'amcharts3-angular2' is not in the npm registry.
My Code https://github.com/adityashukla74/amcharts-with-angular2 is right now working in the dev mode but in Prod mode using System JS, it throws the following error -
Uncaught TypeError: Cannot read property 'Directive' of undefined
In Console while creating Dev Dist it throws -
Implement lifecycle hook interface OnInit for method ngOnInit in class AboutComponent
My Component :
`import { Component } from '@angular/core';
import { AmChartsService } from '@amcharts/amcharts3-angular';
@component({
moduleId: module.id,
selector: 'sd-about',
templateUrl: 'about.component.html',
styleUrls: ['about.component.css']
})
export class AboutComponent {
private timer: any;
private chart: any;
constructor(private AmCharts: AmChartsService) { }
makeRandomDataProvider() {
var dataProvider = [];
for (var year = 1950; year <= 2005; ++year) {
dataProvider.push({
year: '' + year,
value: Math.floor(Math.random() * 100) - 50
});
}
return dataProvider;
}
ngOnInit() {
this.chart = this.AmCharts.makeChart(
'chartdiv', {
'type': 'pie',
'theme': 'light',
'dataProvider': [
{
'title': 'New', 'value': 4852
},
{
'title': 'Returning',
'value': 9899
}
],
'titleField': 'title',
'valueField': 'value',
'labelRadius': 5,
'radius': '42%',
'innerRadius': '60%',
'labelText': '[[title]]',
}
);
}
}
And here is my Module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AboutComponent } from './about.component';
import { AboutRoutingModule } from './about-routing.module';
import { AmChartsModule } from '@amcharts/amcharts3-angular';
@NgModule({
imports: [CommonModule, AboutRoutingModule, AmChartsModule],
declarations: [AboutComponent],
exports: [AboutComponent]
})
export class AboutModule { }
with html as follows:
<div id="chartdiv" [style.width.%]="100" [style.height.px]="500">`
Kindly tell me how
Please include an example of flowing data - i.e., points being added and removed - perhaps by using setInterval
.
DataSets are only available with StockChart ?
If yes AmStockChart is available for angular 2 ?
Regards
Hi,
I have an NPM module compiled with ngc
which uses amcharts2-angular2
in the standard way, i.e.
import { AmChartsModule } from 'amcharts3-angular2';
Yet, when I compile it, I receive errors like that:
Error File 'd2-core/node_modules/amcharts3-angular2/index.ts' is not under 'rootDir' 'd2-core/modules/d2-charts'.
'rootDir' is expected to contain all source files.
OK, that seems to be caused by having an index.ts
next to compiled index.js
. By default the compiler resolve .ts file and thus tries to compile it. And then the error is totally, that file is outside of my module's rootDir
.
When I remove the .ts file, I get another error:
Error at /Users/ryzy/Projects/d2-core/modules/d2-charts/src/charts.module.ts:3:32: Could not find a declaration file for module 'amcharts3-angular2'. '/Users/ryzy/Projects/d2-core/node_modules/amcharts3-angular2/index.js' implicitly has an 'any' type.
Again, it's totally valid. There's no .d.ts and no metadata for compiler.
We should include them in compiled version of the module.
Hello,
I have attempted to use Amcharts in one of my Angular 2 projects. But I am unable to succeed. It does not show any error, but the charts are not displayed. Can somebody find where the mistake is?
Thanks in advance!
`import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
@component({
selector: 'app-amchartdemo',
templateUrl: './amchartdemo.component.html',
styleUrls: ['./amchartdemo.component.css']
})
export class AmchartdemoComponent implements OnInit {
private id: string = "chartdiv";
private data: any = [{
country: "USA",
visits: 3025,
color: "#FF0F00"
}, {
country: "China",
visits: 1882,
color: "#FF6600"
}, {
country: "Japan",
visits: 1809,
color: "#FF9E01"
}, {
country: "Germany",
visits: 1322,
color: "#FCD202"
}, {
country: "UK",
visits: 1122,
color: "#F8FF01"
}, {
country: "France",
visits: 1114,
color: "#B0DE09"
}, {
country: "India",
visits: 984,
color: "#04D215"
}, {
country: "Spain",
visits: 711,
color: "#0D8ECF"
}, {
country: "Netherlands",
visits: 665,
color: "#0D52D1"
}, {
country: "Russia",
visits: 580,
color: "#2A0CD0"
}, {
country: "South Korea",
visits: 443,
color: "#8A0CCF"
}, {
country: "Canada",
visits: 441,
color: "#CD0D74"
}];
private chart: any = makeChart({
dataProvider: this.data,
fillColors: "red"
});
change() {
this.chart = makeChart({
dataProvider: this.data.map((x: Data) => {
return {
country: x.country,
visits: Math.floor(Math.random() * 100),
color: x.color
};
}),
fillColors: "green"
});
}
ngOnInit() {
}
}
interface Data {
country: string;
visits: number;
color: string;
}
interface Configuration {
dataProvider: Array;
fillColors: string;
}
`
amchartdemo
<button (click)="change()">
Change data + colors
<amCharts [id]="id" [options]="chart" [style.width.%]="100" [style.height.%]="100">
`
`import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AmChartsDirective } from "amcharts3-angular2/amcharts.directive";
import { AmchartdemoComponent } from './amchartdemo/amchartdemo.component';
@NgModule({
declarations: [
AppComponent,
AmchartdemoComponent,
AmChartsDirective,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
`<!doctype html>
<title>Factschart</title> <script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/serial.js"></script> Loading... `Hi @Pauan
I see you switched from ngOnInit
to ngAfterViewInit
(as per commit 93b781e ). Can you elaborate why such change?
I'm having some issues with AmCharts listeners
and I see switching to ngAfterViewInit
seems to resolve the issue. But it's perhaps not ideal, because AmChart is not really rendered as a view child and theoretically should work correctly with ngOnInit
.
I wonder what were your reasons?
Many thanks!
M.
Currently the packages is missing .d.ts and .metadata.json for AoT support.
That would also resolve issue #29
I can't import the directive from node_modules
in my angular 2 project based on the angular-seed. This happens because the npm package of this directive doesn't provide its compiled version. It includes only TypeScript file with directive's source code. Can you please update the npm package to provide compiled js version, so I can import it with SystemJS?
Hey I have use amcharts3-angular2 directive for displaying a simple bar charts.
When I am define property export:true, I get the following errors:
https://ibb.co/g8wmwQ
What can I do to handle this errors properly, why it doesn't find the right files?
This is the code in angular 2 :
`import { Component, OnInit, OnDestroy } from '@angular/core';
import { AmChartsService } from "amcharts3-angular2";
@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
title = 'app works!';
private chart: any;
constructor(private AmCharts: AmChartsService) { }
ngOnInit() {
this.chart = this.AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: [[value]]",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
this.chart.path = "/node_modules/amcharts3/amcharts/";
}
ngOnDestroy() {
this.AmCharts.destroyChart(this.chart);
}
}
`
Can you please add a complete app - even if extremely simple and just a skeleton - for the "example" in this repo? Or add a working example in plunk or codepen?
Hi,
After doing npm install & npm start an error displays:
Cannot read property 'config' of null
Do I forgot anything?
Thanks in advance...
Uncaught TypeError: d.AmPieChart is not a constructor
at Object.d.makeChart (amcharts.js:10)
at Constructor.componentDidMount (amcharts3-react.js:186)
at CallbackQueue.notifyAll (CallbackQueue.js:66)
at ReactReconcileTransaction.close (ReactReconcileTransaction.js:79)
at ReactReconcileTransaction.closeAll (Transaction.js:202)
at ReactReconcileTransaction.perform (Transaction.js:149)
at batchedMountComponentIntoNode (ReactMount.js:124)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:136)
at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:63)
at Object.batchedUpdates (ReactUpdates.js:97)
getting this issue. may I need to add extra dependency?
I followed the steps, but while bundling, I got that Error : Cannot find module "amcharts3-angular2/amcharts.directive"
`import { AmChartsDirective } from "amcharts3-angular2/amcharts.directive";
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
AmChartsDirective
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: []
})
export class AppModule {}
`
Any ideas please
Hi there:
I have an issue:
Here is my implementation
import {
AfterViewInit,
ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit,
ViewChild
} from '@angular/core';
import {DataInterface} from '../../../entities/data/data.interface';
import {DataLatitudeDegrees} from '../../../entities/data/data.latitude-degrees';
import {DataLongitudeDegrees} from '../../../entities/data/data.longitude-degrees';
import seedColor from 'seed-color';
import {EventInterface} from '../../../entities/events/event.interface';
import {AmChartsService} from '@amcharts/amcharts3-angular';
@Component({
selector: 'app-event-charts-am',
templateUrl: './event.charts.amcharts.component.html',
})
export class EventAmChartsComponent implements OnChanges, OnInit, OnDestroy {
@Input() event: EventInterface;
private chart: any;
private lineChartData: any[] = [];
private valueAxes = [];
private graphs = [];
private data = [];
private dataMap: Map<string, any> = new Map<string, any>();
constructor(private changeDetector: ChangeDetectorRef, private AmCharts: AmChartsService) {
this.chart = this.AmCharts.makeChart('chartdiv', {
'type': 'serial',
'theme': 'light',
'graphs': this.graphs,
'valueAxes': this.valueAxes,
'dataProvider': this.data,
'categoryField': 'date',
'categoryAxis': {
'parseDates': true,
'minPeriod': 'fff',
'axisColor': '#DADADA',
'minorGridEnabled': true
},
'chartScrollbar': {
// 'graph': this.graphs[0],
'gridAlpha': 0,
'color': '#888888',
'scrollbarHeight': 55,
'backgroundAlpha': 0,
'selectedBackgroundAlpha': 0.1,
'selectedBackgroundColor': '#888888',
'graphFillAlpha': 0,
'autoGridCount': true,
'selectedGraphFillAlpha': 0,
'graphLineAlpha': 0.2,
'graphLineColor': '#c2c2c2',
'selectedGraphLineColor': '#888888',
'selectedGraphLineAlpha': 1
},
'chartCursor': {
'categoryBalloonDateFormat': 'YYYY',
'cursorAlpha': 0,
'valueLineEnabled': true,
'valueLineBalloonEnabled': true,
'valueLineAlpha': 0.5,
'fullWidth': true
},
});
}
ngOnInit() {
}
ngOnChanges(): void {
// This must be called when making any changes to the chart
this.AmCharts.updateChart(this.chart, () => {
this.formatData();
this.formatValueAxes();
this.formatGraphs();
this.chart.chartScrollbar.graph = this.graphs[0];
// Change whatever properties you want, add event listeners, etc.
this.chart.dataProvider = this.data;
this.chart.valueAxes = this.valueAxes;
this.chart.graphs = this.graphs;
this.chart.addListener('rendered', () => {
// debugger;
this.chart.zoomOut();
});
// debugger;
});
}
private formatData() {
}
ngOnDestroy() {
debugger;
this.AmCharts.destroyChart(this.chart);
}
private formatValueAxes() {
}
private formatGraphs() {
}
}
However if the component is destroyed and reinit (changing routes of removing parent) the chart wont update.
What am I missing?
Hello,
Only serial type is available ?
TypeError: d.AmXYChart is not a constructor
at Object.d.makeChart (amcharts.js:1)
at AmChartsDirective.ngOnInit (amcharts.directive.ts:213)
at Wrapper_AmChartsDirective.ngDoCheck (wrapper.ngfactory.js:45)
at View_XYControlgraphComponent2.detectChangesInternal (component.ngfactory.js:227)
at View_XYControlgraphComponent2.AppView.detectChanges (view.js:425)
at View_XYControlgraphComponent2.DebugAppView.detectChanges (view.js:620)
at ViewContainer.detectChangesInNestedViews (view_container.js:67)
at CompiledTemplate.proxyViewClass.View_XYControlgraphComponent0.detectChangesInternal (component.ngfactory.js:103)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at CompiledTemplate.proxyViewClass.View_ForwardRateComponent0.detectChangesInternal (component.ngfactory.js:93)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at Object.d.makeChart (amcharts.js:1)
at AmChartsDirective.ngOnInit (amcharts.directive.ts:213)
at Wrapper_AmChartsDirective.ngDoCheck (wrapper.ngfactory.js:45)
at View_XYControlgraphComponent2.detectChangesInternal (component.ngfactory.js:227)
at View_XYControlgraphComponent2.AppView.detectChanges (view.js:425)
at View_XYControlgraphComponent2.DebugAppView.detectChanges (view.js:620)
at ViewContainer.detectChangesInNestedViews (view_container.js:67)
at CompiledTemplate.proxyViewClass.View_XYControlgraphComponent0.detectChangesInternal (component.ngfactory.js:103)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at CompiledTemplate.proxyViewClass.View_ForwardRateComponent0.detectChangesInternal (component.ngfactory.js:93)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at resolvePromise (zone.js:486) [angular]
at resolvePromise (zone.js:471) [angular]
at :4200/vendor.bundle.js:146718:17 [angular]
at Object.onInvokeTask (ng_zone.js:260) [angular]
at ZoneDelegate.invokeTask (zone.js:274) [angular]
at Zone.runTask (zone.js:151) [<root> => angular]
at drainMicroTaskQueue (zone.js:418) [<root>]
Test config (get here)
{
"type": "xy",
"theme": "light",
"dataProvider": [ {
"ax": 1,
"ay": 0.5,
"bx": 1,
"by": 2.2
}, {
"ax": 2,
"ay": 1.3,
"bx": 2,
"by": 4.9
}, {
"ax": 3,
"ay": 2.3,
"bx": 3,
"by": 5.1
}, {
"ax": 4,
"ay": 2.8,
"bx": 4,
"by": 5.3
}, {
"ax": 5,
"ay": 3.5,
"bx": 5,
"by": 6.1
}, {
"ax": 6,
"ay": 5.1,
"bx": 6,
"by": 8.3
}, {
"ax": 7,
"ay": 6.7,
"bx": 7,
"by": 10.5
}, {
"ax": 8,
"ay": 8,
"bx": 8,
"by": 12.3
}, {
"ax": 9,
"ay": 8.9,
"bx": 9,
"by": 14.5
}, {
"ax": 10,
"ay": 9.7,
"bx": 10,
"by": 15
}, {
"ax": 11,
"ay": 10.4,
"bx": 11,
"by": 18.8
}, {
"ax": 12,
"ay": 11.7,
"bx": 12,
"by": 21
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"dashLength": 1,
"id": "x",
"title": "X Axis"
}, {
"axisAlpha": 0,
"dashLength": 1,
"position": "left",
"id": "y",
"title": "Y Axis"
} ],
"startDuration": 1,
"graphs": [ {
"balloonText": "x:[[x]] y:[[y]]",
"fillAlphas": 0.3,
"fillToAxis": "x",
"lineAlpha": 1,
"xField": "ax",
"yField": "ay",
"lineColor": "#FF6600"
}, {
"balloonText": "x:[[x]] y:[[y]]",
"lineAlpha": 1,
"fillToAxis": "y",
"fillAlphas": 0.3,
"xField": "bx",
"yField": "by",
"lineColor": "#FCD202"
} ],
"marginLeft": 64,
"marginBottom": 60,
"chartScrollbar": {},
"chartCursor": {},
"export": {
"enabled": true,
"position": "bottom-right"
}
}
Regards
Hi,
I have a few question regarding amcharts3-angular2 in general. How seriously are you committed to providing a nice wrapper for AmCharts for Angular >= 2? I like the initiative and I like that the author behind it is an official AmChart company. On the other side, this package needs more attention to be considered as a production-grade.
Couple of things I have in mind:
amcharts3-angular
, since we expect new major version of Angular every quarter or so?Since we rely on AmCharts in our organisation quite heavily and we develop with Angular, if you say you're OK with the above, we might come back with couple PRs :)
Best, Marcin
Now when I try to compile my project with amcharts3-angular2
directive, I run into batch of TypeScript compilation issues such as
dist\tmp\app\landing\amcharts.directive.ts(15,18): error TS7006: Parameter 'x' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(21,21): error TS7006: Parameter 'x' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(26,5): error TS7017: Index signature of object type implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(32,20): error TS7006: Parameter 'x' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(46,15): error TS7006: Parameter 'x' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(64,23): error TS7006: Parameter 'x' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(64,26): error TS7006: Parameter 'y' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(82,24): error TS7006: Parameter 'x' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(82,27): error TS7006: Parameter 'y' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(105,16): error TS7006: Parameter 'x' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(109,18): error TS7006: Parameter 'x' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(109,21): error TS7006: Parameter 'y' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(137,31): error TS7006: Parameter 'chart' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(137,38): error TS7006: Parameter 'listeners' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(150,28): error TS7006: Parameter 'chart' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(150,35): error TS7006: Parameter 'oldObj' implicitly has an 'any' type.
dist\tmp\app\landing\amcharts.directive.ts(150,43): error TS7006: Parameter 'newObj' implicitly has an 'any' type.
I assume thet those issues should be fixed.
Hi there,
I would like to set processDelay
on the AmCharts object but the module is empty.
Hello,
I use your library to display many chart.
Update data in serial chart work like you have described by updating chart config and inject new config in graph.
Unfortunately, this same process not working when i want change dataProvider in dataSets
generateChartData():Array<any> {
var chartData = [];
var firstDate = new Date();
firstDate.setDate( firstDate.getDate() - 500 );
firstDate.setHours( 0, 0, 0, 0 );
for ( var i = 0; i < 500; i++ ) {
var newDate = new Date( firstDate );
newDate.setDate( newDate.getDate() + i );
var a1 = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
var b1 = Math.round( Math.random() * ( 1000 + i ) ) + 500 + i * 2;
chartData.push( {
"date": newDate,
"value": a1,
"volume": b1
} );
}
return chartData;
}
@ViewChild('realtimeGraph') realtimeGraph;
// update called each second
update() {
let spotAmChart = new StockAmchart(this.realtimeGraph.amchart.config);
spotAmChart.config.dataSets[0].dataProvider = this.generateChartData();
this._ngZone.run(() => {
this.realtimeGraph.amchart = spotAmChart;
});
}
hi all ,
i am using below code to create chart options dynamically and by using that i am rendering one chart
this.chartConfig = this.createChartConfig();
// this will return proper chart options.
setTimeout(() => {
this.chart = this.AmCharts.makeChart("configurationchart", this.chartConfig);
}, 1)
once the chart rendered in the UI chart options are getting overriding automatically with amchart options and turn out to be a complete different object with similar keys. since it have circular json structure i am not able to save the chart options though it changed.
any help highly appreciated..
thanks in advance.
Hi there the readme is not so well done.
Instead of putting the script tags to point at node_modules (which will not avaialble online) you can edit your CLI for angular:
scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/amcharts3/amcharts/amcharts.js",
"../node_modules/amcharts3/amcharts/serial.js",
"../node_modules/amcharts3/amcharts/themes/light.js",
],
Also I was missing some images so you need to:
"assets": [
"assets",
"favicon.ico",
{
"glob": "**/*",
"input": "../node_modules/amcharts3/amcharts/images/",
"output": "./amcharts/images"
}
],
The "How to use" steps in the README do not show how to use this library with the Angular CLI. I think that would be helpful. Also, it would be better to install amcharts3 via npm rather than pointing to www.amcharts.com.
Here are the revised steps I had to take:
npm install amcharts3 --save
npm install amcharts3-angular2 --save
"scripts": [
"../node_modules/amcharts3/amcharts/amcharts.js",
"../node_modules/amcharts3/amcharts/xy.js",
"../node_modules/amcharts3/amcharts/themes/light.js",
"../node_modules/amcharts3/amcharts/plugins/export/export.min.js"
],
"assets": [
"assets",
"favicon.ico",
"../node_modules/amcharts3/amcharts/images"
],
"styles": [
"styles.scss",
"../node_modules/amcharts3/amcharts/plugins/export/export.css"
],
AmChartsModule
module and add it to the imports
:import { AmChartsModule } from "amcharts3-angular2";
@NgModule({
imports: [
AmChartsModule
]
})
export class AppModule {}
AmChartsService
into your app component, create a <div>
element with an id
, then use the makeChart
method to create the chart (note that you must specify the path in node_modules to amcharts3 or some dependent scripts and images will not be loaded):import { Component, OnInit, OnDestroy } from '@angular/core';
import { AmChartsService } from "amcharts3-angular2";
@Component({
template: `<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>`
})
export class AppComponent implements OnInit, OnDestroy {
private chart: any;
constructor(private AmCharts: AmChartsService) {}
ngOnInit() {
this.chart = this.AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": []
...
});
this.chart.path = "/node_modules/amcharts3/amcharts/";
}
ngOnDestroy() {
this.AmCharts.destroyChart(this.chart);
}
}
The first argument to makeChart
must be the same as the <div>
'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.
updateChart
method:// This must be called when making any changes to the chart
this.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
});
});
None of methods on serial chart works. Can't validate or zoom out, any sugestions?
EDIT: Ok this.chart is just config for actual chart. How do I access actual chart so I can use its methods?
Thank you,
Zeljko
AmChart loads chart svg perfect on first data is passed to options. I added a Refresh button to provide "pull latest data on request" functionality. On click of refresh, latest data is pulled and new config object is constructed and set, then I got below error
TypeError: Cannot read property 'length' of null
at Zone._updateTaskCount (zone.js:224)
at Zone.cancelTask (zone.js:214)
at zone.js:1575
at clearTimeout (eval at createNamedFn (zone.js:1483), :3:39)
at Object.init (eval at webpackJsonp.214.module.exports (addScript.js:9), :2:21845)
at b.afterWrite (eval at webpackJsonp.214.module.exports (addScript.js:9), :111:145)
at b.write (eval at webpackJsonp.214.module.exports (addScript.js:9), :109:382)
at b.validateNow (eval at webpackJsonp.214.module.exports (addScript.js:9), :135:499)
at index.ts:268
at ZoneDelegate.invoke (zone.js:330)
at Zone.run (zone.js:126)
at NgZone.runOutsideAngular (ng_zone.js:164)
at AmChartsDirective.webpackJsonp.1815.AmChartsDirective.ngOnChanges (index.ts:263)
at Wrapper_AmChartsDirective.ngDoCheck (/AmChartsModule/AmChartsDirective/wrapper.ngfactory.js:41)
at CompiledTemplate.proxyViewClass.View_PieChartComponent0.detectChangesInternal (/DashboardModule/PieChartComponent/component.ngfactory.js:68)
App details:
Angular : 2.4.8
"zone.js": "0.7.7,
"typescript": "2.0.3",
"amcharts3": "github:amcharts/amcharts3",
"amcharts3-angular2": "github:amcharts/amcharts3-angular2",
Could you tell why this is happening?
Hi there,
how can I change the chartScrollbar graph ?
Doing someting like:
this.AmCharts.updateChart(this.chart, () => {
this.chart.graphs = this.getGraphs();
this.chart.valueAxes = this.getValueAxes();
this.chart.dataProvider = this.getData();
debugger;
const test = this.getGraphs()[0].id;
this.chart.chartScrollbar.graph = test;
debugger;
// Change whatever properties you want, add event listeners, etc.
this.chart.addListener('rendered', () => {
this.chart.zoomOut();
this.chart.invalidateSize();
});
this.chart.addListener('init', () => {
// debugger;
});
this.chart.addListener('dataUpdated', () => {
});
// debugger;
});
Errors:
TypeError: Cannot read property 'id' of undefined
This happens not the 1st time but after changing data
how can i access the predefined methods of amcharts for various functionalities
for example in the below code
private chart: any = makeChart({
dataProvider: this.data,
fillColors: "red"
});
how to use .validateNow() method on the variable chart
hoping for a quick response. any help is much appreciated
Can not get any events from the serial chart using the AmChartsDirective (imported in the module) out to the surrounding component. Regardless of what method I try, the Chrome Console always shows this exception:
Uncaught TypeError: Cannot read property 'call' of undefined amcharts.js:3
a.inherits.b.fire @ amcharts.js:3
handleClick @ amcharts.js:205
(anonymous function) @ amcharts.js:203
This is my component code. This is based on the directive sample. I moved the makeChart code into the component because I thought it would make it easier to get the handler info into the component, but, event with it outside the scope of the Component (as in the sample), the results were the same.
Hello guys,
i am trying to install Amchart project but not able to install ... if you guys having basic steps which i need to follow or what all the software i need to install excluding Node please help
I am new to angular and my requirement is to develop a AmChart application
Thanks Regards
Himanshu
chart value doesn't get updated if option object change
it's possible to fix this behaviour?
There is a index.ts in the proj_root/node_modules/@amcharts/amcharts3-angular
folder when you add the dependency using npm install @amcharts/amcharts3-angular --save
.
It does not follow the official Angular Package Format because you do not need the index.ts file, since it is already compiled to JavaScript
The bigger problem is when you try to compile a NgModule
that imports the AmChartsModule
(import { AmChartsModule } from '@amcharts/amcharts3-angular';
) into a reusable module. The ngc or tsc compilers prefer the index.ts
over the index.d.ts
when both are present at the time of module resolution. Removing the index.ts
from the published package will prevent it.
Here's my output:
[14:06:29] Error: Error at /Users/DelianPetrov/Sites/seastatus/.tmp/app/amcharts.directive.ngfactory.ts:45:34
[14:06:29] Argument of type '{ [key: string]: any; }' is not assignable to parameter of type '{ options
[14:06:29] SimpleChange; }'.
[14:06:29] Property 'options' is missing in type '{ [key
[14:06:29] string]: any; }'.
[14:06:29] ngc failed
[14:06:29] ionic-app-script task: "build"
[14:06:29] Error: Error
It seems that this is the root of the issue:
detectChangesInternal(view:import3.AppView<any>,el:any,throwOnChange:boolean):boolean {
var changed:any = this.changed;
this.changed = false;
if (!throwOnChange) {
if (changed) {
this.context.ngOnChanges(this.changes);
this.changes = {};
}
if ((view.numberOfChecks === 0)) { this.context.ngOnInit(); }
}
return changed;
}
I use angular-cli
my package.json
{
"name": "options-angular",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"angular/common": "^4.0.0",
"angular/compiler": "^4.0.0",
"angular/core": "^4.0.0",
"angular/forms": "^4.0.0",
"angular/http": "^4.0.0",
"angular/platform-browser": "^4.0.0",
"angular/platform-browser-dynamic": "^4.0.0",
"angular/router": "^4.0.0",
"swimlane/ngx-datatable": "^8.2.1",
"toverux/ngsweetalert2": "^1.2.2",
"amcharts3-angular2": "github:amcharts/amcharts3-angular2",
"angular-confirmation-popover": "^3.1.0",
"angular-sortablejs": "^2.0.4",
"angular2-counto": "^1.2.2",
"angular2-fontawesome": "^0.9.0",
"angular2-ladda": "^1.2.1",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"ng2-validation": "^4.2.0",
"ngx-bootstrap": "^1.6.6",
"ngx-ui-switch": "^1.2.4",
"rxjs": "^5.1.0",
"sortablejs": "^1.5.1",
"zone.js": "0.8.5"
},
"devDependencies": {
"@angular/cli": "1.0.0",
"@angular/compiler-cli": "^4.0.0",
"@types/jasmine": "2.5.38",
"@types/jquery": "^2.0.41",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}
ERROR
npm install
[email protected] /home/thiago/Documentos/workspace/rnb-admin
├── @amcharts/[email protected] extraneous (git://github.com/amcharts/amcharts3-angular2.git#a898132287b84b772fc0b224d60402ce328c6e92)
├── UNMET PEER DEPENDENCY @angular/[email protected]
└── UNMET PEER DEPENDENCY @angular/[email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] requires a peer of @angular/common@^2.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/core@^2.0.0 but none was installed.
While importing amCharts to my Angular 2.4.9 project with webpack 2.2.1 I get the following error:
ERROR in ./~/amcharts3-angular2/index.ts
Module parse failed: /Users/ypozdnyakov/Documents/icontrol/node_modules/amcharts3-angular2/index.ts Unexpected character '@' (243:0)
You may need an appropriate loader to handle this file type.
|
| @Directive({
| selector: "amCharts"
| })
@ ./app/app.module.ts 30:27-56
@ ./app/main.ts
@ multi (webpack)-dev-server/client?http://localhost:3003 webpack/hot/dev-server ./app/main.ts
typescript version is 2.2.1
I think that something wrong in webpack config
here is how I load ts
{
test: /\.ts$/,
loaders: ['ts-loader', 'angular2-template-loader'],
exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
},
There is a official "QuickStart seed" repository for angular2, mentioned on official website in few places:
https://angular.io/docs/ts/latest/guide/setup.html
QuickStart seed is used by many users as a basic template to start project with angular 2. Possibility of easy integration amcharts3-angular2 with Angular 2 QuickStart seed in my opinion, should have very high priority.
Unfortunately integration done according to rules from https://github.com/amcharts/amcharts3-angular2 gives result unsuccessful:
https://github.com/noisy/quickstart/pull/1/files
https://gist.github.com/noisy/2f9863c30d3bcfc9873754b8e9128f82#file-gistfile1-txt-L70
Hello friends!
I found a error after try create pie chart:
this.amChart.makeChart("chartdiv", { "type": "pie", "theme": "light", "dataProvider": [{ "title": "New", "value": 4852 }, { "title": "Returning", "value": 9899 }], "titleField": "title", "valueField": "value", "labelRadius": 5, "radius": "42%", "innerRadius": "60%", "labelText": "[[title]]", "export": { "enabled": true } });
the creation work with serial chart, but pie chart not :(
Hello,
Angular 2 has an official release since 16/09/2016.
Could you update your code to use Module instead of Directive ?
Thank you
Hi there,
How can I animate the charts when new data is bound?
this.AmCharts.updateChart(this.chart, () => {
}
?
I can't seem to call parseCSV and the code doesn't seem to have it. How do I call this function ?
Hi, I'm trying to use the ammap and this is my setup (on OnInit method):
`
this.chart = this.AmCharts.makeChart("chartdiv", {
"type": "map",
"theme": "light",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true
},
"areasSettings": {
"autoZoom": false,
"selectedColor": "#CC0000"
}
});
this.chart.addListener("click", event => {
// find out the coordinates of under mouse cursor
var info = event.chart.getDevInfo();
// print in console as well
console.log({
"latitude": info.latitude,
"longitude": info.longitude
});
});
`
It's working, I can see the map and the click event is registered, but:
it fires when I pan the map, is this the expected behavior?
it's fired twice every time I click the map.
Hi I am using custom-html-elements-map-markers map example from your site and converted into angular App by following the steps mentioned in this git.But it is not showing the markers.
How to achieve it.Please help me.
I have applied the related css also and below is my AppComponent class:
import { Component } from '@angular/core';
import { AmChartsService } from "@amcharts/amcharts3-angular";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = "Vishal";
private chart: any;
constructor(private AmCharts: AmChartsService) {}
ngOnInit() {
this.chart = this.AmCharts.makeChart("chartdiv", {
"type": "map",
"theme": "light",
"projection": "miller",
"imagesSettings": {
"rollOverColor": "#089282",
"rollOverScale": 3,
"selectedScale": 3,
"selectedColor": "#089282",
"color": "#13564e"
},
"areasSettings": {
"unlistedAreasColor": "#15A892"
},
"dataProvider": {
//"getAreasFromMap" : true,
"map": "worldLow",
"images": [ {
"zoomLevel": 5,
"scale": 0.5,
"title": "Brussels",
"latitude": 50.8371,
"longitude": 4.3676
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Ottawa",
"latitude": 45.4235,
"longitude": -75.6979
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Washington",
"latitude": 38.8921,
"longitude": -77.0241
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Pretoria",
"latitude": -25.7463,
"longitude": 28.1876
} ]
}
});
}
ngOnDestroy() {
this.AmCharts.destroyChart(this.chart);
}
}
html:
<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>
When updating the chart sometimes I get
TypeError: Cannot read property 'graphs' of undefined
This happens in:
this.AmCharts.updateChart(this.chart, () => {
Somehow some internal call resets the graph.
To overcome this I have to create a new chart on every change (OnChanges)
What is going on?
Solution:
you have to import (for a serial chart with light theme) these files into index.html ! Not into example.component.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/themes/light.js"></script>
Hi,
When I use the command "ng build --target=production" then I have an error:
ERROR in $$_gendir/node_modules/amcharts3-angular2/index.ngfactory.ts (78,34): Argument of type '{ [key: string]: any; }' is not assignable to parameter of type '{ options: SimpleChange; }'.
Property 'options' is missing in type '{ [key: string]: any; }'.
Hi,
I'm trying to incorporate the lib into the following angular seed and its complaining. Is it possible to include a "dist" with the corresponding *.min.js to include everything?
https://github.com/vyakymenko/angular-seed-express
Right now when I incorporate the library to the seed I'm getting the following error.
SyntaxError: Unexpected token <
at eval ()
Thanks in advance,
-S
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.