Angular LineChart

Topic: Angular LineChart

FuzzeWuzze free asked 6 years ago

So I have an Angular 5 project that i already started, so i ran the installation instructions for MDBootstrap to use npm install and add the required lines to a few files such as modules.ts and angular-cli.json, all of that seemed to work without issue and i am importing the package without errors. I then made a new component called Chart and pasted the example LineChart component code over top of mine, renamed the component and its selector to just ChartComponent, copied the HTML into the chart component exactly so that both files look exactly like your examples. To repeat my HTML and component look exactly like the example so i wont paste those here. https://mdbootstrap.com/angular/advanced/charts/ I then route to my chartcomponent and i get the following error ChartComponent.html:2 ERROR ReferenceError: Chart is not defined at BaseChartDirective.getChartBuilder (chart.directive.ts:125) at BaseChartDirective.refresh (chart.directive.ts:179) at BaseChartDirective.ngOnInit (chart.directive.ts:64) at checkAndUpdateDirectiveInline (core.js:12352) at checkAndUpdateNodeInline (core.js:13876) at checkAndUpdateNode (core.js:13819) at debugCheckAndUpdateNode (core.js:14712) at debugCheckDirectivesFn (core.js:14653) at Object.eval [as updateDirectives] (ChartComponent.html:2) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14638)

Add comment

zerolds free answered 4 years ago

0 0 Best answer

you can also do this:

npm install chart.js --save

and then in the angular.json file after architect node in build, there is a place where you can add scripts and add :

"scripts": [ "node_modules/chart.js/dist/Chart.bundle.min.js" ]

Add comment

CaRniFeXeR free answered 4 years ago

0 0 Best answer

any update on this specific issue?

Damian Gemza staff commented 4 years ago

Dear @CaRniFeXeR

Could you please provide me with reproduction steps of this problem? Also, if you could describe your problem, it would be great.

Best Regards,

Damian

Add comment

nate pro answered 6 years ago

1 1 Best answer

The issue is that the directive that uses chart js doesn't follow conventions and is trying to get the global chartjs object.

My fix was to add the chartjs cdn to my index.html, you could also import chartjs properly by editing mdb's source but id rather not do that.

Updated index.html:
<div>
<div>
<pre></pre>
<div>
<div><!doctype html></div>
<div><html lang="en" class="full-height"></div>
<div></div>
<div><head></div>
<div><metacharset="utf-8"></div>
<div><metahttp-equiv="X-UA-Compatible"content="IE=11" /></div>
<div><title>AngularBasic</title></div>
<div><basehref="/"></div>
<div><metaname="viewport"content="width=device-width, initial-scale=1"></div>
<div><linkrel="icon"type="image/x-icon"href="favicon.ico"></div>
<div></div>
<div></head></div>
<div><body></div>
<div></div>
<div><mdb-root></div>
<div><divclass="spinning-preloader-container"><divclass="preloader-wrapper big active"><divclass="spinner-layer spinner-blue"><divclass="circle-clipper left"><divclass="circle"></div></div><divclass="gap-patch"><divclass="circle"></div></div></div><divclass="spinner-layer spinner-red"><divclass="circle-clipper left"><divclass="circle"></div></div><divclass="gap-patch"><divclass="circle"></div></div></div><divclass="spinner-layer spinner-yellow"><divclass="circle-clipper left"><divclass="circle"></div></div><divclass="gap-patch"><divclass="circle"></div></div></div><divclass="spinner-layer spinner-green"><divclass="circle-clipper left"><divclass="circle"></div></div><divclass="gap-patch"><divclass="circle"></div></div></div></div></div></div>
<div></mdb-root></div>
<div><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script></div>
<div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script></div>
<div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script></div>
<div><script></div>
<div>    new WOW().init();</div>
<div></script></div>
<div></body></div>
<div></html></div>
</div>
<pre></pre>
</div>
</div>

Please insert min. 20 characters.

The issue is that the directive that uses chart js doesn't follow conventions and is trying to get the global chartjs object. My fix was to add the chartjs cdn to my index.html, you could also import chartjs properly by editing mdb's source but id rather not do that. Updated index.html:

<!doctype html>

<head>

<metacharset="utf-8">

<metahttp-equiv="X-UA-Compatible"content="IE=11" />

<title>AngularBasic</title>

<basehref="/">

<metaname="viewport"content="width=device-width, initial-scale=1">

<linkrel="icon"type="image/x-icon"href="favicon.ico">

</head>

<body>

<mdb-root>

<divclass="spinning-preloader-container"><divclass="preloader-wrapper big active"><divclass="spinner-layer spinner-blue"><divclass="circle-clipper left"><divclass="circle"></div></div><divclass="gap-patch"><divclass="circle"></div></div></div><divclass="spinner-layer spinner-red"><divclass="circle-clipper left"><divclass="circle"></div></div><divclass="gap-patch"><divclass="circle"></div></div></div><divclass="spinner-layer spinner-yellow"><divclass="circle-clipper left"><divclass="circle"></div></div><divclass="gap-patch"><divclass="circle"></div></div></div><divclass="spinner-layer spinner-green"><divclass="circle-clipper left"><divclass="circle"></div></div><divclass="gap-patch"><divclass="circle"></div></div></div></div></div>

</mdb-root>

<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>

new WOW().init();

</script>

</body>

</html>

Damian Gemza staff commented 6 years ago

Dear machiinate, thanks for your informations. We will take a look at this. Best Regards, Damian

Add comment

Damian Gemza staff answered 6 years ago

1 1 Best answer

Hello FuzzeWuzze,

Are you sure, that you did everything in right way? I've just created new component called shared:
<ul>
 	<li>To shared.component.html i've pasted html code of line chart,</li>
 	<li>To shared.component.ts i've pasted ts code of line chart,</li>
 	<li>In app.module.ts i've imported SharedComponent, RouterModule and Routes.,</li>
 	<li>Then in app.module.ts i've created const approuter: Routes = [{path: 'shared', component: SharedComponent}],</li>
 	<li>Again in app.module.ts in imports array i've imported RouterModule.forRoot(approuter),</li>
 	<li>In app.component.html i've created a button with code: <a routerLink="/shared"><button class="btn btn-primary waves-light" mdbRippleRadius>Chart</button></a>, and below this button <router-outlet></router-outlet></li>
</ul>
My shared.component.html code:
<div>
<pre><div class="row">

<divclass="col-md-6 mx-auto my-5">

<divstyle="display: block">

<canvasmdbChart

[chartType]="chartType"

[datasets]="chartDatasets"

[labels]="chartLabels"

[colors]="chartColors"

[options]="chartOptions"

[legend]="true"

(chartHover)="chartHovered($event)"

(chartClick)="chartClicked($event)">

</canvas>

</div>

</div></pre>
</div>
My shared.component.ts code:
<div>
<pre>import { Component } from '@angular/core';

@Component({

selector:'app-shared',

templateUrl:'./shared.component.html',

styleUrls: ['./shared.component.scss']

})

export class SharedComponent {

publicchartType:string='line';

publicchartDatasets:Array<any> = [

{ data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' },

{ data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset' }

];

publicchartLabels:Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];

publicchartColors:Array<any> = [

{

backgroundColor:'rgba(220,220,220,0.2)',

borderColor:'rgba(220,220,220,1)',

borderWidth:2,

pointBackgroundColor:'rgba(220,220,220,1)',

pointBorderColor:'#fff',

pointHoverBackgroundColor:'#fff',

pointHoverBorderColor:'rgba(220,220,220,1)'

{

backgroundColor:'rgba(151,187,205,0.2)',

borderColor:'rgba(151,187,205,1)',

borderWidth:2,

pointBackgroundColor:'rgba(151,187,205,1)',

pointBorderColor:'#fff',

pointHoverBackgroundColor:'#fff',

pointHoverBorderColor:'rgba(151,187,205,1)'

}

];

publicchartOptions:any= {

responsive:true

};

publicchartClicked(e:any):void {

}

publicchartHovered(e:any):void {

}

}</pre>
</div>
my app.module.ts code:
<div>
<pre>import { BrowserModule } from '@angular/platform-browser';

import { MDBBootstrapModules } from 'ng-mdb-pro';

import { ToastModule } from './../../node_modules/ng-mdb-pro/pro/alerts/toast/toast.module';

import { MDBSpinningPreloader } from 'ng-mdb-pro';

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';

import { SharedComponent } from './shared/shared.component';

import { RouterModule, Routes } from '@angular/router';

const approute: Routes = [{

path:'shared', component:SharedComponent

}];

@NgModule({

declarations: [

AppComponent, SharedComponent

imports: [

BrowserModule, BrowserAnimationsModule, MDBBootstrapModules.forRoot(), ToastModule.forRoot(), FormsModule,

RouterModule.forRoot(approute)

providers: [MDBSpinningPreloader],

bootstrap: [AppComponent],

schemas: [ NO_ERRORS_SCHEMA ]

})

export class AppModule { }</pre>
</div>
my app.component.html code:
<div>
<pre><a routerLink="/shared"><button class="btn btn-primary waves-light" mdbRippleRadius>Wykres</button></a>

<router-outlet></router-outlet></pre>
</div>
And everything is working fine. I had no errors, router is working fine, line chart is proper rendered.

Please follow my instruction, and everything should works fine.

Best Regards,

Damian

Please insert min. 20 characters.

Hello FuzzeWuzze, Are you sure, that you did everything in right way? I've just created new component called shared:

To shared.component.html i've pasted html code of line chart,
To shared.component.ts i've pasted ts code of line chart,
In app.module.ts i've imported SharedComponent, RouterModule and Routes.,
Then in app.module.ts i've created const approuter: Routes = [{path: 'shared', component: SharedComponent}],
Again in app.module.ts in imports array i've imported RouterModule.forRoot(approuter),
In app.component.html i've created a button with code: <a routerLink="/shared"><button class="btn btn-primary waves-light" mdbRippleRadius>Chart</button></a>, and below this button <router-outlet></router-outlet>

My shared.component.html code:

<div class="row">

<divclass="col-md-6 mx-auto my-5">

<divstyle="display: block">

<canvasmdbChart

[chartType]="chartType"

[datasets]="chartDatasets"

[labels]="chartLabels"

[colors]="chartColors"

[options]="chartOptions"

[legend]="true"

(chartHover)="chartHovered($event)"

(chartClick)="chartClicked($event)">

</canvas>

</div>

</div>

</div>

My shared.component.ts code:

import { Component } from '@angular/core';

@Component({

selector:'app-shared',

templateUrl:'./shared.component.html',

styleUrls: ['./shared.component.scss']

})

export class SharedComponent {

publicchartType:string='line';

publicchartDatasets:Array<any> = [

{ data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' },

{ data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset' }

];

publicchartLabels:Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];

publicchartColors:Array<any> = [

{

backgroundColor:'rgba(220,220,220,0.2)',

borderColor:'rgba(220,220,220,1)',

borderWidth:2,

pointBackgroundColor:'rgba(220,220,220,1)',

pointBorderColor:'#fff',

pointHoverBackgroundColor:'#fff',

pointHoverBorderColor:'rgba(220,220,220,1)'

},

{

backgroundColor:'rgba(151,187,205,0.2)',

borderColor:'rgba(151,187,205,1)',

borderWidth:2,

pointBackgroundColor:'rgba(151,187,205,1)',

pointBorderColor:'#fff',

pointHoverBackgroundColor:'#fff',

pointHoverBorderColor:'rgba(151,187,205,1)'

}

];

publicchartOptions:any= {

responsive:true

};

publicchartClicked(e:any):void {

}

publicchartHovered(e:any):void {

}

}

my app.module.ts code:

import { BrowserModule } from '@angular/platform-browser';

import { MDBBootstrapModules } from 'ng-mdb-pro';

import { ToastModule } from './../../node_modules/ng-mdb-pro/pro/alerts/toast/toast.module';

import { MDBSpinningPreloader } from 'ng-mdb-pro';

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';

import { SharedComponent } from './shared/shared.component';

import { RouterModule, Routes } from '@angular/router';

const approute: Routes = [{

path:'shared', component:SharedComponent

}];

@NgModule({

declarations: [

AppComponent, SharedComponent

],

imports: [

BrowserModule, BrowserAnimationsModule, MDBBootstrapModules.forRoot(), ToastModule.forRoot(), FormsModule,

RouterModule.forRoot(approute)

],

providers: [MDBSpinningPreloader],

bootstrap: [AppComponent],

schemas: [ NO_ERRORS_SCHEMA ]

})

export class AppModule { }

my app.component.html code:

<a routerLink="/shared"><button class="btn btn-primary waves-light" mdbRippleRadius>Wykres</button></a>

<router-outlet></router-outlet>

And everything is working fine. I had no errors, router is working fine, line chart is proper rendered. Please follow my instruction, and everything should works fine. Best Regards, Damian

nate pro commented 6 years ago

could you guys please add a fix to this in the next release?

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

FuzzeWuzze

-3Support score
1Questions 0Answers 0Snippets