How to make a chart with chartjs and Angular? - javascript

I'm trying to make a graph with ChartJS, but I can't get it...
I have followed a lot of tutorials but I get the same problem always.
This is my app.module:
import { ChartsModule } from 'ng2-charts/ng2-charts';
#NgModule({
declarations: [
...
...
...
],
imports: [
...
ChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
This is my angular.json:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/#popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/apexcharts/dist/apexcharts.min.js"
]
My component.ts:
import { Component, OnInit } from '#angular/core';
import { ChartDataset } from 'chart.js';
import { Color, Label } from 'ng2-charts';
#Component({
selector: 'app-stadistics',
templateUrl: './stadistics.component.html',
styleUrls: ['./stadistics.component.css']
})
export class LineChartComponent {
lineChartData: ChartDataset[] = [
{ data: [85, 72, 78, 75, 77, 75], label: 'Crude oil prices' },
];
lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];
lineChartOptions = {
responsive: true,
};
lineChartColors: Color[] = [
{
borderColor: 'black',
backgroundColor: 'rgba(255,255,0,0.28)',
},
];
lineChartLegend = true;
lineChartPlugins = [];
lineChartType = 'line';
}
export class StadisticsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
And finally, my html component, where I get the following error:
I don't know what it happens, but I can't find the solution...
How can I solve this?
Thanks!
EDIT
I share my package.json:
{
"name": "foro-front",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~11.0.9",
"#angular/common": "~11.0.9",
"#angular/compiler": "~11.0.9",
"#angular/core": "~11.0.9",
"#angular/forms": "~11.0.9",
"#angular/platform-browser": "~11.0.9",
"#angular/platform-browser-dynamic": "~11.0.9",
"#angular/router": "~11.0.9",
"#popperjs/core": "^2.9.1",
"apexcharts": "^3.26.0",
"bootstrap": "^4.5.3",
"chart.js": "^3.1.0",
"jquery": "^3.6.0",
"mdb-ui-kit": "^3.3.0",
"moment": "^2.29.1",
"ng-apexcharts": "^1.5.9",
"ng2-charts": "^2.4.2",
"ngx-pagination": "^5.0.0",
"rxjs": "~6.6.0",
"save": "^2.4.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1100.7",
"#angular/cli": "~11.0.7",
"#angular/compiler-cli": "~11.0.9",
"#types/jasmine": "~3.6.0",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}

I think ng2-charts might not play well with chart.js version 3.0.0+, try to install an older version:
npm install chart.js#2.9.4 --save.
Also, I'm not sure if your html has the baseChart directive added (because the picture is cut with the error), it should look something like:
<canvas
baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
Finally, here is a minimal example of adding chart.js to your application - stackblitz

You cant just bind your data to a canvas and think it will work, you will either have to use the bare lib correctly because im pretty sure chart.js doesnt expose an export called ChartDatasetsee integration (https://www.chartjs.org/docs/latest/getting-started/integration.html) and usage (https://www.chartjs.org/docs/latest/getting-started/usage.html) guides to get started.
Alternatively you can use the angular wrapper which is just a component where you can just supply your data to (https://valor-software.com/ng2-charts/).

npm install ng2-charts
when we want to install this above command just write --force
npm install ng2-charts --force in angular 13 command prompt
go to package.json my version number is = "ng2-charts": "^2.4.3",

Related

why after installing #auth0/angular-jwt, its module does not work?

I am using angular 15.0 and installed #auth0/angular-jwt. when using it by import its module in the project, I encountered many errors, and I searched a lot and unfortunately, I did not find a suitable solution.
First, its module is not available in the node_modules folder, even in package.jason file:
"dependencies": {
"#angular/animations": "^15.0.0",
"#angular/cdk": "^15.0.0",
"#angular/common": "^15.0.0",
"#angular/compiler": "^15.0.0",
"#angular/core": "^15.0.0",
"#angular/forms": "^15.0.0",
"#angular/material": "^15.0.0",
"#angular/platform-browser": "^15.0.0",
"#angular/platform-browser-dynamic": "^15.0.0",
"#angular/router": "^15.0.0",
"#fortawesome/angular-fontawesome": "^0.12.0",
"#fortawesome/fontawesome-svg-core": "^6.2.1",
"#fortawesome/free-brands-svg-icons": "^6.2.1",
"#fortawesome/free-regular-svg-icons": "^6.2.1",
"#fortawesome/free-solid-svg-icons": "^6.2.1",
"font-awesome": "^4.7.0",
"jalali-moment": "^3.3.11",
"jalali-ts": "^2.0.5",
"material-icons": "^1.13.1",
"ng-persian-datepicker": "^6.1.2",
"ngx-mat-select-search": "^7.0.0",
"ngx-print": "^1.3.1",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},
Secondly, importing the JwtModule in the AppModule will result in the following error or warning:
the AppModule:
import { JwtModule } from "#auth0/angular-jwt";
import {AuthGuard} from "../services";
export function tokenGetter() {
return localStorage.getItem("jwt");
}
#NgModule({
declarations: [
...
],
imports: [
...
JwtModule.forRoot({
config:{
tokenGetter: tokenGetter,
whitelistedDomains: ["localhost:5001"],
blacklistedRoutes: []
}
})
],
providers: [
...
],
exports: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}
Where did I go wrong? please guide me.

Argument of type 'Map<any, any>' is not assignable to parameter of type 'ArrayLike<{}>'

I'm trying to create an Rx.Observable from a Map object inside an Angular component and I'm getting the following error:
Argument of type 'Map<any, any>' is not assignable to parameter of type 'ArrayLike<{}>'
The code works fine outside Angular (see: http://jsbin.com/tezohobudu/1/edit?js,console) so I don't understand why is not working in an Angular component. The component code is:
import { Component } from '#angular/core';
import { from } from 'rxjs/observable/from';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
testOne(){
//works on js collections
const map = new Map();
map.set(1, 'Hi');
map.set(2, 'Bye');
const mapSource = from(map);
//output: [1, 'Hi'], [2, 'Bye']
const subscribe = mapSource.subscribe(val => console.log(val));
}
}
package.json is:
{
"name": "angular-tests",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "1.6.5",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"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": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
and tsconfig.json is:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
}
}

How to import angular2-cookie in angular4 project

I'm trying to import angular2-cookie in my angular4 project.
My project is built with angular-cli#1.2.7, here is my package.json:
{
"name": "ng-admin",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --port 4201",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.0.0",
"#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",
"angular2-cookie": "^1.2.6",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.2.7",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#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.1.1",
"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"
}
}
the angular2-cookie dochttps://github.com/salemdar/angular2-cookie#cli ask me to add something in angular-cli-build.js, but I have neither angular-cli-build.js nor systemjs.config.js
I import angular2-cookie in app.module.ts with:
import { CookieService } from 'angular2-cookie/services/cookies.service';
...
...
providers: [
CookieService
]
My project works well with ng server and it also works well in my chrome.
it is built successfully with ng build --prod, but when I run it in chrome or run it with ng server --aot , chrome console show this error:
ERROR Error: No provider for CookieOptions!
How can I solve this problem? Thanks all!
Add CookieOptions in your import statement like import { CookieService, CookieOptions } from 'angular2-cookie'; and then add both CookieService and CookieOptions in your Root Module's provider array.

ERROR in AppModule is not an NgModule, typescript 2.3.2, Angular 4

I recently upgraded to node 6, angular 4, typescript 2.3.2 and #angular/cli 1.02. I followed the Guide on how to upgrade #angular/cli.
I'll add my whole package.json down below if there's anything relevant there.
And I get this error:
ERROR in AppModule is not an NgModule
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (C:\development\projects-git\mydoc\static- web\node_modules\typescript\lib\typescript.js:9580:20)
at Object.createCompilerHost (C:\development\projects-git\mydoc\static-web\node_modules\typescript\lib\typescript.js:66674:26)
at Object.ngcLoader (C:\development\projects-git\mydoc\static-web\node_modules\#ngtools\webpack\src\loader.js:202:31)
# multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
in the guide I had to update my main.ts to this:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { enableProdMode } from '#angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
My full package.json is this:
{
"name": "angular2-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.1.1",
"#angular/common": "^4.1.1",
"#angular/compiler": "^4.1.2",
"#angular/core": "^4.1.2",
"#angular/forms": "^4.1.1",
"#angular/http": "^4.1.2",
"#angular/platform-browser": "^4.1.1",
"#angular/platform-browser-dynamic": "^4.1.1",
"#angular/platform-server": "^4.1.1",
"#angular/router": "^4.1.1",
"#ngtools/json-schema": "1.0.0",
"#ngtools/webpack": "1.2.3",
"#types/file-saver": "0.0.0",
"angular2-datatable": "^0.5.3",
"bootstrap-sass": "^3.3.7",
"core-js": "^2.4.1",
"file-saver": "^1.3.3",
"font-awesome": "^4.7.0",
"moment": "^2.18.1",
"mydatepicker": "^1.9.1",
"ng2-bootstrap": "^1.6.1",
"ng2-page-scroll": "^4.0.0-beta.5",
"#ngx-translate/core": "^6.0.0",
"rxjs": "^5.4.0",
"string-to-json": "^0.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.0.2",
"#angular/compiler": "^4.1.2",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"codelyzer": "~2.0.0",
"extract-text-webpack-plugin": "^2.0.0-rc.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",
"karma-junit-reporter": "^1.2.0",
"karma-phantomjs-launcher-nonet": "0.1.3",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "2.3.2"
}
}
This makes it immpossible to build.
This seems to be a known issue.
Make sure your node modules have been reinstalled properly :
rm -rf node_modules && npm cache clean && npm uninstall --save angular-cli && npm uninstall -g angular-cli && npm i --save #angular/cli && npm i -g #angular/cli && npm i

Angular2 - sass unable to build on angular-cli

I'm trying to use SASS with angular-cli. I've read the docs and found other SO q/a's that talk about setting it up...but it keeps failing the build.
Here's my setup:
angular-cli-build.js
sassCompiler: {
includePaths: ['src/app/styles']
}
src/app/styles/master.scss
#import 'folder/variables';
#import 'folder/headers';
src/app/styles/folder/_variables.scss
$headers-bg: #ababab;
src/app/styles/folder/_headers.scss
h1 {
background-color: $headers-bg;
}
package.json (per request)
{
"name": "my-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng server",
"postinstall": "typings install",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"zone.js": "^0.6.12"
},
"devDependencies": {
"angular-cli": "^1.0.0-beta.5",
"codelyzer": "0.0.19",
"ember-cli-inject-live-reload": "^1.4.0",
"jasmine-core": "^2.4.1",
"jasmine-spec-reporter": "^2.4.0",
"karma": "^0.13.15",
"karma-chrome-launcher": "^0.2.3",
"karma-jasmine": "^0.3.8",
"node-sass": "^3.7.0",
"protractor": "^3.3.0",
"ts-node": "^0.5.5",
"tslint": "^3.6.0",
"typescript": "^1.8.10",
"typings": "^0.8.1"
}
}
Unfortunately, the build fails because it doesn't know what $bg is.
Build failed.
File: /my-app/tmp/sassplugin-input_base_path-jFTXlfed.tmp/0/
src/app/styles/folder/_more.scss (2)
The Broccoli Plugin: [SASSPlugin] failed with:
Error: Undefined variable: "$headers-bg".
What am I missing? Its as if the compiler isn't respecting the normal behavior of ignoring the "_"'d file names.
After reading through the source code, I found this 17 day old commit.
I was right in my initial hunch that it wasn't ignoring partials. Basically, you have to tell the sassCompiler that you want it to ignore them.
Here's how:
sassCompiler: {
cacheExclude: [/\/_[^\/]+$/]
}
https://github.com/angular/angular-cli/commit/6b45099b6a277ecd7a57f2d2e632bf40af774879
You have things a little backwards as you're importing in a style and not importing your variable... see this example as a guide...
define your variables:
_variables.scss
$bg: #ababab;
use them:
site.scss
#import '_variables';
body {
background: $bg;
}

Categories

Resources