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)

zerolds free answered 5 years ago


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" ]


CaRniFeXeR free answered 5 years ago


any update on this specific issue?


Damian Gemza staff commented 5 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


nate pro answered 6 years ago


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>
<html lang="en" class="full-height">
<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">
<!-- <link href="css/mdb.css" rel="stylesheet"> -->
</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>
<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

Damian Gemza staff answered 6 years ago


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?


Please insert min. 20 characters.

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
Tags