fusioncharts / angular4-fusioncharts Goto Github PK
View Code? Open in Web Editor NEWA simple and lightweight Angular 4 component which provides bindings for FusionCharts JavaScript Charting Library
License: MIT License
A simple and lightweight Angular 4 component which provides bindings for FusionCharts JavaScript Charting Library
License: MIT License
Any PowerXT chart is not supported.
I Have imported the powerChartXT library also. still, there is a problem with the chart
Any plan for this????????????????????
It is throwing Uncaught ReferenceError:
IsIE is not defined. In fusioncharts.js line 516:124
The demos at https://fusioncharts.github.io/angular4-fusioncharts/ are not working:
Error: (SystemJS) Error: XHR error (404) loading https://unpkg.com/Subject at XMLHttpRequest.wrapFn (https://unpkg.com/[email protected]/dist/zone.js:1188:39) at ZoneDelegate.invokeTask (https://unpkg.com/[email protected]/dist/zone.js:421:31) at Zone.runTask (https://unpkg.com/[email protected]/dist/zone.js:188:47) at ZoneTask.invokeTask [as invoke] (https://unpkg.com/[email protected]/dist/zone.js:496:34) at invokeTask (https://unpkg.com/[email protected]/dist/zone.js:1540:14) at XMLHttpRequest.globalZoneAwareCallback (https://unpkg.com/[email protected]/dist/zone.js:1566:17) Error loading https://unpkg.com/Subject as "./Subject" from https://unpkg.com/[email protected]
When we try to use the realtimeline chart the chart throws message as "Chart not supported".
Please refer to this plunk: https://plnkr.co/edit/84dEEJ6sbBHr4n8Ft2XB?p=preview
In this plunk we have added two data points by default. It works in the plain JS version but does not work in the Angular 4 version.
Refer to this fiddle for plain js version:
https://jsfiddle.net/chandan_ch/79f81dug/2/
On the browser console we get the following error:
Failed to load resource: the server responded with a status of 404 () run.plnkr.co/NOgIETInay1xPNbY/fusioncharts.widgets.js
How do we add widgets in NgModule?
Also there is no documentation & example for real-time charts please add the documentation and an example as well.
follow the official Demo link when run the demos, i get the error:
Error: (SystemJS) Error: XHR error (404) loading https://fusioncharts.github.io/angular4-fusioncharts/samples/change-chart-type-runtime/angular4-fc/build/rxjs-compat/Observable at XMLHttpRequest.wrapFn (https://unpkg.com/[email protected]/dist/zone.js:1188:39) at ZoneDelegate.invokeTask (https://unpkg.com/[email protected]/dist/zone.js:421:31) at Zone.runTask (https://unpkg.com/[email protected]/dist/zone.js:188:47) at ZoneTask.invokeTask [as invoke] (https://unpkg.com/[email protected]/dist/zone.js:496:34) at invokeTask (https://unpkg.com/[email protected]/dist/zone.js:1540:14) at XMLHttpRequest.globalZoneAwareCallback (https://unpkg.com/[email protected]/dist/zone.js:1566:17) Error loading https://fusioncharts.github.io/angular4-fusioncharts/samples/change-chart-type-runtime/angular4-fc/build/rxjs-compat/Observable as "rxjs-compat/Observable" from https://unpkg.com/rxjs/Observable.js
Could you please fix it?
Thank you ๐
Getting pre-renderer errors everytime I refresh the page with F5. Loading it through angular4 and menu items goes fine, but hotloading it is not possible somehow.
[ASP.NET, VS2017, Angular4, Angular4-fusioncharts]
NodeInvocationException: Uncaught (in promise): TypeError: Cannot read property 'document' of undefined
TypeError: Cannot read property 'document' of undefined
at object.module.exports.module.exports (C:\Users\dzwart\Documents\VSProjects\BTCBoard\BTCBoard\ClientApp\dist\main-server.js:23029:111)
at Function.FusionChartsService.resolveFusionChartsCore (C:\Users\dzwart\Documents\VSProjects\BTCBoard\BTCBoard\ClientApp\dist\main-server.js:21794:28)
Could you help with error:
DashboardComponent.html:71 ERROR TypeError: core is not a function
at Function.FusionChartsService.resolveFusionChartsCore (fusioncharts.service.js:23)
Env:
"@angular/core": "^5.2.0",
Hi,
Is there a plan to release it compatible with Angular 5 ( or even 6 at the horizon )
Whenever I try to use chart I got errosr:
[email protected] requires a peer of @angular/core@^4.2.4 but none is installed. You must install peer dependencies yourself.
while my core is already at
"@angular/core": "^5.2.0",
And when I try to use fussion component I got error :
TypeError: core is not a function
at Function.FusionChartsService.resolveFusionChartsCore (webpack-internal:///./node_modules/angular4-fusioncharts/dist/src/fusioncharts/fusioncharts.service.js:26)
at new FusionChartsService (webpack-internal:///./node_modules/angular4-fusioncharts/dist/src/fusioncharts/fusioncharts.service.js:10)
at _createClass (webpack-internal:///./node_modules/@angular/core/esm5/core.js:11107)```
I'm trying to add fusionchart to my application but I keep on hitting this issue and I'm not sure what is wrong with my code.
For reference I used the Angular template for dotnet core (dotnet new angular)
This created an almost empty application with just 3 pages.
It also contains 3 "modules" files being app.browser.module.ts app.server.module.ts and app.shared.module.ts.
I assumed I had to drop the import config in the browser one (though I tried adding it in shared one and it still failed...)
Here is the content of this file now:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppModuleShared } from './app.shared.module';
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';
import { AppComponent } from './components/app/app.component';
import { FusionChartsModule } from 'angular4-fusioncharts';
FusionChartsModule.fcRoot(FusionCharts, Charts, FintTheme);
@NgModule({
bootstrap: [ AppComponent ],
imports: [
BrowserModule,
AppModuleShared,
FusionChartsModule
],
providers: [
{ provide: 'BASE_URL', useFactory: getBaseUrl }
]
})
export class AppModule {
}
export function getBaseUrl() {
return document.getElementsByTagName('base')[0].href;
}
The only modification I made was to add thte fusionchart related things.
I also modified the home page to include a chart, both the html and the ts
Here is the full error message I have (I did not even add the end of it as it is so big...):
An unhandled exception occurred while processing the request.
NodeInvocationException: Template parse errors:
Can't bind to 'width' since it isn't a known property of 'fusioncharts'. ("
<fusioncharts
[id]="id"
[ERROR ->][width]="width"
[height]="height"
[type]="type"
"): ng:///AppModuleShared/HomeComponent.html@19:8
Can't bind to 'height' since it isn't a known property of 'fusioncharts'. ("
[id]="id"
[width]="width"
[ERROR ->][height]="height"
[type]="type"
[dataFormat]="dataFormat"
"): ng:///AppModuleShared/HomeComponent.html@20:8
Can't bind to 'type' since it isn't a known property of 'fusioncharts'. ("
[width]="width"
[height]="height"
[ERROR ->][type]="type"
[dataFormat]="dataFormat"
[dataSource]="dataSource"
"): ng:///AppModuleShared/HomeComponent.html@21:8
Can't bind to 'dataFormat' since it isn't a known property of 'fusioncharts'. ("
[height]="height"
[type]="type"
[ERROR ->][dataFormat]="dataFormat"
[dataSource]="dataSource"
></fusioncharts>
"): ng:///AppModuleShared/HomeComponent.html@22:8
Can't bind to 'dataSource' since it isn't a known property of 'fusioncharts'. ("
[type]="type"
[dataFormat]="dataFormat"
[ERROR ->][dataSource]="dataSource"
></fusioncharts>
</div>
"): ng:///AppModuleShared/HomeComponent.html@23:8
'fusioncharts' is not a known element:
1. If 'fusioncharts' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</ul>
<div>
[ERROR ->]<fusioncharts
[id]="id"
[width]="width"
"): ng:///AppModuleShared/HomeComponent.html@17:4
Error: Template parse errors:
Can't bind to 'width' since it isn't a known property of 'fusioncharts'. ("
<fusioncharts
[id]="id"
[ERROR ->][width]="width"
[height]="height"
[type]="type"
"): ng:///AppModuleShared/HomeComponent.html@19:8
Can't bind to 'height' since it isn't a known property of 'fusioncharts'. ("
[id]="id"
[width]="width"
[ERROR ->][height]="height"
[type]="type"
[dataFormat]="dataFormat"
"): ng:///AppModuleShared/HomeComponent.html@20:8
Can't bind to 'type' since it isn't a known property of 'fusioncharts'. ("
[width]="width"
[height]="height"
[ERROR ->][type]="type"
[dataFormat]="dataFormat"
[dataSource]="dataSource"
"): ng:///AppModuleShared/HomeComponent.html@21:8
Can't bind to 'dataFormat' since it isn't a known property of 'fusioncharts'. ("
[height]="height"
[type]="type"
[ERROR ->][dataFormat]="dataFormat"
[dataSource]="dataSource"
></fusioncharts>
"): ng:///AppModuleShared/HomeComponent.html@22:8
Can't bind to 'dataSource' since it isn't a known property of 'fusioncharts'. ("
[type]="type"
[dataFormat]="dataFormat"
[ERROR ->][dataSource]="dataSource"
></fusioncharts>
</div>
"): ng:///AppModuleShared/HomeComponent.html@23:8
'fusioncharts' is not a known element:
1. If 'fusioncharts' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</ul>
<div>
[ERROR ->]<fusioncharts
[id]="id"
[width]="width"
"): ng:///AppModuleShared/HomeComponent.html@17:4
Any clue?
Everything working fine when using fusion charts in *ngFor but sometimes getting error. Sometimes second row graphs not showing and sometimes last row.
Below is console error
Uncaught TypeError: Cannot read property 'el' of undefined
at r.Wa.pause (fusioncharts.js:474)
at a._chartAnimation (fusioncharts.js:1039)
at a._updateVisuals (fusioncharts.js:1036)
at a.draw (fusioncharts.js:1041)
at Object.k [as job] (fusioncharts.js:1001)
at q (fusioncharts.js:39)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:191)
at ZoneTask.invoke (zone.js:486)
at timer (zone.js:1540)
I am attempting to use this with Angular 5. When I try:
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';
I am not able to find the modules. Is there an update for supporting Angular 5?
It appears they removed OpaqueToken in Angular 5
Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0__angular_core.OpaqueToken is not a constructor.
I am using server side rendering but graphs not working with below
angular/platform-server
Hello, I use Angular 4 charts and I have this error stack trace :
Uncaught TypeError: Cannot read property 'addDep' of undefined
at Object.11 (fusioncharts.theme.fint.js:1)
at webpack_require (fusioncharts.theme.fint.js:1)
at 11 (fusioncharts.theme.fint.js:1)
at fusioncharts.theme.fint.js:1
at fusioncharts.service.js:26
at Array.forEach ()
at Function.webpackJsonp../node_modules/angular4-fusioncharts/dist/src/fusioncharts/fusioncharts.service.js.FusionChartsService.resolveFusionChartsCore (fusioncharts.service.js:25)
at Function.webpackJsonp../node_modules/angular4-fusioncharts/dist/src/fusioncharts/fusioncharts.module.js.FusionChartsModule.fcRoot (fusioncharts.module.js:33)
at Object../src/main/webapp/app/app.module.ts (app.module.ts:49)
at webpack_require (bootstrap bcf608a4c98fe7b6d0b5:693)
I have issue after building my app.
angular4-fusioncharts working perfect in dev. Able to build with out any error. But, when i run output scripts of build on http-server it is giving error. Please check below image for error i am getting and my poc application.
Command using to build: ng build --prod
Below is my package.json
{
"name": "fusion-guage-chart",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --port 2526",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"core-js": "^2.4.1",
"fusioncharts": "^3.12.2",
"angular4-fusioncharts": "^1.0.0",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.4.10",
"@angular/compiler-cli": "^4.2.4",
"@angular/language-service": "^4.2.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.3.3"
}
}
I have a version commercial, how do I do to using my files?
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.