Help, i can't use or try a chart in PrimeNG

UI Components for Angular
Post Reply
jgil1967
Posts: 1
Joined: 02 Apr 2016, 05:54

01 Aug 2016, 17:18

Hi

I'm new to PrimeNG and i have an assignment where i have to use the charts. I can't seem to get it working, i already imported:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... "></script>

This is my component code:

Code: Select all

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

import {InputText,DataTable,Button,Dialog,Column,Header,Footer,UIChart} from 'primeng/primeng';



@Component({

 directives: [InputText,DataTable,Button,Dialog,Column,Header,Footer,ChartComponent,UIChart],
template: `
<p>Chart begin</p>

<p></p>
<p-chart type="bar" [data]="data"></p-chart>

<p>Chart end</p>

 `,

	selector: 'chart-component'
})


export class ChartComponent {


	    clicks: number = 0;

	    count() {
	        this.clicks++;
	    }

      data: any;

        constructor() {
            this.data = {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                    {
                        label: 'My First dataset',
                        backgroundColor: '#42A5F5',
                        borderColor: '#1E88E5',
                        data: [65, 59, 80, 81, 56, 55, 40]
                    },
                    {
                        label: 'My Second dataset',
                        backgroundColor: '#9CCC65',
                        borderColor: '#7CB342',
                        data: [28, 48, 40, 19, 86, 27, 90]
                    }
                ]
            }
        }

}


I'm not sure of what i'm doing wrong, the console throws me this error

browser_adapter.ts:74 EXCEPTION: Error in ./ChartComponent class ChartComponent - inline template:6:0BrowserDomAdapter.logError @ browser_adapter.ts:74BrowserDomAdapter.logGroup @ browser_adapter.ts:85ExceptionHandler.call @ exception_handler.ts:50(anonymous function) @ application_ref.ts:396ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:64ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.ts:96NgZone.run @ ng_zone.ts:211ApplicationRef_.run @ application_ref.ts:384ApplicationRef_.bootstrap @ application_ref.ts:408(anonymous function) @ application_ref.ts:150ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:64ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:53ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.ts:74 ORIGINAL EXCEPTION: TypeError: Cannot read property 'offsetWidth' of undefinedBrowserDomAdapter.logError @ browser_adapter.ts:74ExceptionHandler.call @ exception_handler.ts:62(anonymous function) @ application_ref.ts:396ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:64ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.ts:96NgZone.run @ ng_zone.ts:211ApplicationRef_.run @ application_ref.ts:384ApplicationRef_.bootstrap @ application_ref.ts:408(anonymous function) @ application_ref.ts:150ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:64ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:53ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.ts:74 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:74ExceptionHandler.call @ exception_handler.ts:66(anonymous function) @ application_ref.ts:396ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:64ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.ts:96NgZone.run @ ng_zone.ts:211ApplicationRef_.run @ application_ref.ts:384ApplicationRef_.bootstrap @ application_ref.ts:408(anonymous function) @ application_ref.ts:150ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:64ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:53ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.ts:74 TypeError: Cannot read property 'offsetWidth' of undefined
at i (Chart.min.js:10)
at new e (Chart.min.js:10)
at UIChart.initChart (chart.ts:64)
at UIChart.ngAfterViewInit (chart.ts:38)
at DebugAppView._View_ChartComponent0.detectChangesInternal (ChartComponent.template.js:90)
at DebugAppView.AppView.detectChanges (view.ts:255)
at DebugAppView.detectChanges (view.ts:372)
at DebugAppView.AppView.detectViewChildrenChanges (view.ts:283)
at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js:857)
at DebugAppView.AppView.detectChanges (view.ts:255)

Thanks in advance!

kershingf
Posts: 1
Joined: 02 Aug 2016, 01:18

02 Aug 2016, 01:22

hi!, try to remove your ChartComponent from the directives and sorry if my english not is correctly :D I'm learning yet...

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests