Ngx-charts: Cannot read property 'map' of undefined

Created on 15 Feb 2017 · 12Comments · Source: swimlane/ngx-charts

Hi ,
I tried to draw a vertical bar, i created a new project and installed the swinlane, imported the ngx-chart module , added the NgxChartsModule to my @NgModule,
Created a service and successfully received the expected JSON format for Vertical Bar, but am getting a error

EXCEPTION: Error in ./DashboardOverviewComponent class DashboardOverviewComponent - inline template:17:2 caused by: Cannot read property 'map' of undefined
ErrorHandler.handleError @ error_handler.js:54
(anonymous) @ application_ref.js:261
webpackJsonp.1360.ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:273
webpackJsonp.1360.ZoneDelegate.invoke @ zone.js:241
webpackJsonp.1360.Zone.run @ zone.js:113
(anonymous) @ zone.js:535
webpackJsonp.1360.ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:264
webpackJsonp.1360.ZoneDelegate.invokeTask @ zone.js:274
webpackJsonp.1360.Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:56 ORIGINAL EXCEPTION: Cannot read property 'map' of undefined
ErrorHandler.handleError @ error_handler.js:56
(anonymous) @ application_ref.js:261
webpackJsonp.1360.ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:273
webpackJsonp.1360.ZoneDelegate.invoke @ zone.js:241
webpackJsonp.1360.Zone.run @ zone.js:113
(anonymous) @ zone.js:535
webpackJsonp.1360.ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:264
webpackJsonp.1360.ZoneDelegate.invokeTask @ zone.js:274
webpackJsonp.1360.Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:59 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:59
(anonymous) @ application_ref.js:261
webpackJsonp.1360.ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:273
webpackJsonp.1360.ZoneDelegate.invoke @ zone.js:241
webpackJsonp.1360.Zone.run @ zone.js:113
(anonymous) @ zone.js:535
webpackJsonp.1360.ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:264
webpackJsonp.1360.ZoneDelegate.invokeTask @ zone.js:274
webpackJsonp.1360.Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:60 TypeError: Cannot read property 'map' of undefined
at BarVerticalComponent../src/bar-chart/bar-vertical.component.ts.BarVerticalComponent.getXDomain (index.js:3908)
at BarVerticalComponent../src/bar-chart/bar-vertical.component.ts.BarVerticalComponent.getXScale (index.js:3892)
at index.js:3883
at ZoneDelegate.webpackJsonp.1360.ZoneDelegate.invoke (zone.js:242)
at Object.onInvoke (ng_zone.js:273)
at ZoneDelegate.webpackJsonp.1360.ZoneDelegate.invoke (zone.js:241)
at Zone.webpackJsonp.1360.Zone.run (zone.js:113)
at NgZone.run (ng_zone.js:142)
at BarVerticalComponent../src/bar-chart/bar-vertical.component.ts.BarVerticalComponent.update (index.js:3869)
at BarVerticalComponent../src/common/base-chart.component.ts.BaseChartComponent.ngOnChanges (index.js:6542)
at Wrapper_BarVerticalComponent.ngDoCheck (/BarChartModule/BarVerticalComponent/wrapper.ngfactory.js:213)
at View_DashboardOverviewComponent2.detectChangesInternal (/AppModule/DashboardOverviewComponent/component.ngfactory.js:108)
at View_DashboardOverviewComponent2.AppView.detectChanges (view.js:425)
at View_DashboardOverviewComponent2.DebugAppView.detectChanges (view.js:620)
at ViewContainer.detectChangesInNestedViews (view_container.js:67)
ErrorHandler.handleError @ error_handler.js:60
(anonymous) @ application_ref.js:261
webpackJsonp.1360.ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:273
webpackJsonp.1360.ZoneDelegate.invoke @ zone.js:241
webpackJsonp.1360.Zone.run @ zone.js:113
(anonymous) @ zone.js:535
webpackJsonp.1360.ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:264
webpackJsonp.1360.ZoneDelegate.invokeTask @ zone.js:274
webpackJsonp.1360.Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:63 ERROR CONTEXT:
ErrorHandler.handleError @ error_handler.js:63
(anonymous) @ application_ref.js:261
webpackJsonp.1360.ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:273
webpackJsonp.1360.ZoneDelegate.invoke @ zone.js:241
webpackJsonp.1360.Zone.run @ zone.js:113
(anonymous) @ zone.js:535
webpackJsonp.1360.ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:264
webpackJsonp.1360.ZoneDelegate.invokeTask @ zone.js:274
webpackJsonp.1360.Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:64 DebugContext {_view: View_DashboardOverviewComponent2, _nodeIndex: 0, _tplRow: 17, _tplCol: 2}"

Unhandled Promise rejection: Error in ./DashboardOverviewComponent class DashboardOverviewComponent - inline template:17:2 caused by: Cannot read property 'map' of undefined ; Zone: ; Task: Promise.then ; Value: ViewWrappedError {__zone_symbol__error: Error: Error in ./DashboardOverviewComponent class DashboardOverviewComponent - inline template:17:2…, _nativeError: ZoneAwareError, originalError: TypeError: Cannot read property 'map' of undefined
at BarVerticalComponent../src/bar-chart/bar-v…, context: DebugContext, __zone_symbol__stack: "Error: Error in ./DashboardOverviewComponent class…(http://localhost:4200/vendor.bundle.js:82725:18)"…} Error: Error in ./DashboardOverviewComponent class DashboardOverviewComponent - inline template:17:2 caused by: Cannot read property 'map' of undefined
at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:1211:33)
at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:27374:16)
at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:27439:16)
at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:59175:16)
at View_DashboardOverviewComponent2.DebugAppView._rethrowWithContext (http://localhost:4200/vendor.bundle.js:82965:23)
at View_DashboardOverviewComponent2.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:82938:18)
at ViewContainer.detectChangesInNestedViews (http://localhost:4200/vendor.bundle.js:83072:37)
at CompiledTemplate.proxyViewClass.View_DashboardOverviewComponent0.detectChangesInternal (/AppModule/DashboardOverviewComponent/component.ngfactory.js:221:15)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:82740:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:82935:44)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:82725:18)
at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:55:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:82740:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:82935:44)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:82725:18)
consoleError @ zone.js:420
_loop_1 @ zone.js:449
drainMicroTaskQueue @ zone.js:453
zone.js:422 ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error: Error in ./DashboardOverviewComponent class DashboardOverviewCo…, rejection: ViewWrappedError, promise: ZoneAwarePromise, zone: Zone, task: ZoneTask}

In app.module.ts:
import {NgxChartsModule} from "@swimlane/ngx-charts";

@NgModule({
declarations: [
AppComponent,
DashboardOverviewComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
NgxChartsModule
],
providers: [RestApiService],
bootstrap: [AppComponent]
})
export class AppModule { }

In Dashboard.Component.html:

dashboard-overview works!

{{d.name}}

*ngIf="visible"
[view]="view"
class="chart-container"
[scheme]="colorScheme"
schemeType="ordinal"
[results]="barChartData"
legend="true"
gradient="false"
xAxis="true"
yAxis="true"
showXAxisLabel="true"
showYAxisLabel="true"
xAxisLabel="Country"
yAxisLabel="Population"
autoScale="true"
(select)="select($event)">

In Dashboard.component.ts

import { colorSets as ngxChartsColorsets } from '@swimlane/ngx-charts/release/utils/color-sets';
import * as d3 from 'd3';

export class DashboardOverviewComponent implements OnInit {

private barChartData: Array;

this.RestApiService.getIllegalCountData()
    .subscribe(
        data => this.barChartData = data.illegalCounts,
        error => console.log("error"),
        () => console.log(this.barChartData)
    );

Am getting the Response in my console:
[
{name: "Germany", value: 8940000},
{name: "USA", value: 5000000}
]

Thanks in Advance

Needs Demo

Source

aruljagang

Most helpful comment

I got around this by just initializing the data as an empty array

export class SalesComponent {

  data: SalesData[] = []; // <- init as empty array

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  yAxisLabel = 'Sales';
  xAxisLabel = 'Country';

  constructor(private salesService: SalesService) {
    this.salesService.getSales().subscribe(data => this.data = data);
  }

  onSelect(event) {
    console.log(event);
  }

}

leon on 15 Feb 2017

👍2 ❤1

All 12 comments

It looks like the chart doesn't get the data. Can you create a demo where I can reproduce this?

marjan-georgiev on 15 Feb 2017

It may not be the same thing but I often get a similar message when dealing with data from a service (because the data "isn't quite there yet")

try adding an ngif to the markup so that it will only try to generate the chart we there is actually any data:

<ngx-charts-bar-vertical *ngIf="ChartData && ChartData.length > 0"

72gm on 15 Feb 2017

👍2

I got around this by just initializing the data as an empty array

export class SalesComponent {

  data: SalesData[] = []; // <- init as empty array

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  yAxisLabel = 'Sales';
  xAxisLabel = 'Country';

  constructor(private salesService: SalesService) {
    this.salesService.getSales().subscribe(data => this.data = data);
  }

  onSelect(event) {
    console.log(event);
  }

}

leon on 15 Feb 2017

👍2 ❤1

We plan to handle bad that as part of this issue: https://github.com/swimlane/ngx-charts/issues/158

For now you can work around this by using the examples from above.

marjan-georgiev on 28 Feb 2017

I'm getting the same error as the original post, and neither of the above work-arounds seemed to have any effect. My code is pulling in the necessary chart data as an @Input decorator. I can console.log(data) and console.log(single), and the data structures according to my browser appear to be identical. The major difference between my "way of doing things" and the work-arounds above is that I am mapping my data to a model then parsing it into an array of hashes with the proper 'name' and 'value' keys. From there I pass it to:

Like I've said I feel like I can prove my data exists in the expected format as the example 'var single', and the data is present in the BarchartComponent (ie: selector: 'bar-chart',). Please advise on what other information I need to give and how I can deliver it. I'm a noob dev so any coaching will be welcome.

-Thanks and I see incredible potential for your product.

sylv01 on 1 Mar 2017

The input is called results, not data. Make sure that is the case in your code.

<bar-chart *ngIf="data" [results]="data">

marjan-georgiev on 1 Mar 2017

@marjan-georgiev You are awesome for replying so quickly.

I'll be more verbose as I am quite sure my problem is indeed my error.

I changed upon your comment:

** keywordData is indeed the variable I am using. Sorry for any confusion.

In BarchartComponent:

@Input() results: any[];
...
ngOnInit() {
var data = this.results
console.log(data)
console.log(single);
Object.assign(this, {data})
}

Both 'data' and 'single' vars give same console.log output.

Same error reproduced: Cannot read property 'map' of undefined

sylv01 on 1 Mar 2017

Wait, did you build your own bar-chart component? I'm not sure I understand what you're trying to do.

If you want to use the ngx-charts bar chart component take a look at how it is used in the documentation demo: https://swimlane.gitbooks.io/ngx-charts/content/charts/bar-vertical.html

marjan-georgiev on 1 Mar 2017

I did not build my own. I merely reproduced exactly what your doc demo gives and tried to push in my own data instead of the var 'single' from the data.ts file. I am subscribing to my API and modeling the data into the exact structure that the docs provide. I simply renamed the selector to 'bar-chart' instead of 'app' to be more concise when calling from my HomeComponent. In a nut shell I'd like to call the bar chart from home_component.html in the above provided tags. The problem lies as the data I pass through the html reference reproduces the above error. I would rather pass data this way than make a subscription in the chart component (for each component) as this would become overly verbose because I want to give several options for the user in regards to which chart they want to view. In summation I can easily reproduce the demo from the docs; however, I want to dynamically provide data to the chart component using the html [] assignment and @Input decorator.

@marjan-georgiev you are still awesome. If you desire me to take a step back and produce a working demo then I must. btw the ngx-chart goodness will be pitched to high level super-computer managers as the defacto method to represent real time data. Help me help you and I am in need of help myself. Thanks so far.

sylv01 on 1 Mar 2017

Yes, a demo would help me understand what's going on better. Please either create a public github repo or a plunkr where I can reproduce this.

marjan-georgiev on 1 Mar 2017

I was able to solve my problem. It was a simple typo in

[view]="view"
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
(select)="onSelect($event)">

Where [results]="single" just needed to be changed to [results]="data"

Thanks for the help nonetheless.

sylv01 on 2 Mar 2017

❤1 👍1

Thanks @leon & @sylv01 : That solved my problems.