search

emn178 / angular2-chartjs

Chart.js component for Angular2
MIT License
95 stars 21 forks source link

Angular2-chartjs i am unable to use selector as my html tag in my project #44

Open jyotsnaa opened 6 years ago

jyotsnaa commented 6 years ago

I am new to angular i have to make a chart so i am using Angular2-chartjs in my project and try made one example but in intially i got so many errors. And the major issue is that i am unable to use the component's selector as html tag, it give me the error.

emn178 commented 6 years ago

Please provide more information, and you can refer to this sample

cpilson commented 6 years ago

Are you using angular-seed or another SystemJS-based installation, @jyotsnaa ?

If so, and if you're using angular-seed, you'll need to head over to mgetchev's (I think that's the name) Wiki and see how to add external dependencies. This worked out for me.

(And of course, make sure you've run npm install in the interim! ;) )

jyotsnaa commented 6 years ago

Hi, Thanks .. It was the configuration mistak. I forget to add the import on module. Now i have to ask can i have more than one chart on a page, if yes than how will i render it. As the type and data is the only var and how html chart will make them distinct on two other charts. And if i have want to use backend data code to render the chart, Rather than write it on ts file How will i do that.

jyotsnaa commented 6 years ago

Hey, I am using
component.html

{{title}}

<div *ngFor="let report of _adminreports.reports">

untitled <chart [type]='report.reporttypename' [data]='report.datasets' [options]='report.options'>

chart.js

var data = [ { reportId: 1, reporttypeId: 2, reporttypename: 'Bar', labels: '["Africa", "Asia", "Europe", "Latin America", "North America"]', datasets: '[{"label":"Population (millions)","backgroundColor":["#3e95cd","#8e5ea2","#3cba9f","#e8c3b9","#c45850"],"data":[2478,5267,734,784,433]}]', options: '{"legend":{"display":false},"title":{"display":true,"text":"Predicted world population (millions) in 2050"}}', series: '' }, { reportId: 1, reporttypeId: 1, reporttypename: 'Line', labels: '[1500,1600,1700,1750,1800,1850,1900,1950,1999,2050]', datasets: '[{"data":[86,114,106,106,107,111,133,221,783,2478],"label":"Africa","borderColor":"#3e95cd","fill":false},{"data":[282,350,411,502,635,809,947,1402,3700,5267],"label":"Asia","borderColor":"#8e5ea2","fill":false},{"data":[168,170,178,190,203,276,408,547,675,734],"label":"Europe","borderColor":"#3cba9f","fill":false},{"data":[40,20,10,16,24,38,74,167,508,784],"label":"Latin America","borderColor":"#e8c3b9","fill":false},{"data":[6,3,2,2,7,26,82,172,312,433],"label":"North America","borderColor":"#c45850","fill":false}]', options: '{"title":{"display":true,"text":"World population per region (in millions)"}}', series: '' } ];

But it is giving me the error AdminreportsComponent.html:5 ERROR TypeError: Cannot create property 'datasets' on string '[{"data":[86,114,106,106,107,111,133,221,783,2478],"label":"Africa","borderColor":"#3e95cd","fill":false},{"data":[282,350,411,502,635,809,947,1402,3700,5267],"label":"Asia","borderColor":"#8e5ea2","fill":false},{"data":[168,170,178,190,203,276,408,547,675,734],"label":"Europe","borderColor":"#3cba9f","fill":false},{"data":[40,20,10,16,24,38,74,167,508,784],"label":"Latin America","borderColor":"#e8c3b9","fill":false},{"data":[6,3,2,2,7,26,82,172,312,433],"label":"North America","borderColor":"#c45850","fill":false}]' at initConfig (core.controller.js:31) at Chart.construct (core.controller.js:77) at new Chart (core.js:42) at chart.component.js:38 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:3648) at ChartComponent.push../node_modules/angular2-chartjs/dist/chart.component.js.ChartComponent.create (chart.component.js:32) at ChartComponent.push../node_modules/angular2-chartjs/dist/chart.component.js.ChartComponent.ngOnInit (chart.component.js:13) at checkAndUpdateDirectiveInline (core.js:8981)