Angular LineChart

Topic: Angular LineChart

FuzzeWuzze asked 7 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

Damian Gemza staff answered 7 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:

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

machiinate pro commented 7 years ago

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

Add comment

machiinate pro answered 7 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:

<!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 7 years ago

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

Add comment

CaRniFeXeR answered 6 years ago