I am trying to implement bellcurve highchart in my angular 4 application. I am getting error TypeError: p is not a function in when calling series.map function. Its quite strange as series is initialized with array data. The highchart works If I change the chart type to histogram but fails when I change the type to bellcurve. I have used a working example from fiddle and tried it out in my application. If you notice in the bellcurve component code below, i have initialized this.series in the redraw method to override the series object that I am passing as input variable to this component. Not sure what the problem is as it works when i change the type to histogram in the series object.
The fiddle code
http://jsfiddle.net/zrny2kwj/1/
Bell Curve component code
from TypeError: p is not a function while calling map function in angular 4 for fetching series for bellcurve highchart
The fiddle code
http://jsfiddle.net/zrny2kwj/1/
Bell Curve component code
import { Component, Input, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ShortNumberFormatPipe } from '@wtw/toolkit';
@Component({
selector: 'bellcurvechart',
template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
styles: [`
chart{
display: block;
width: 100% !important;
padding:0;
}
`]
})
export class BellCurveChartComponent implements OnInit {
static chart(shortNumberFormatPipe: ShortNumberFormatPipe, translate:
TranslateService, localizedLabel: string, graphLegendTitle: string) {
return {
credits: {
enabled: false
},
title: {
text: ''
},
chart: {
type: 'bellcurve'
},
legend: {
layout: 'horizontal',
margin: 25,
itemMarginTop: 0,
symbolRadius: 0,
symbolHeight: 20,
symbolWidth: 20,
useHTML: true,
title: {
text: graphLegendTitle + ' ',
margin: 50,
style: {
fontStyle: 'italic',
fontWeight: 'normal',
margin: 20
}
},
align: 'right',
verticalAlign: 'bottom',
},
exporting: {
chartOptions: {
scale: 1,
legend: {
allowHTML: true,
enabled: true,
margin: 25,
itemMarginTop: 0,
symbolRadius: 0,
symbolHeight: 20,
symbolWidth: 20,
useHTML: true,
align: 'right',
verticalAlign: 'bottom',
title: {
text: '',
}
},
chart: {
width: 1500,
height: 600,
events: null }
}
},
plotOptions: {
series: {
events: {
legendItemClick: function() {
for (let i = 0; i < this.chart.series.length; i++) {
if (this.chart.series[i].index !== this.index) {
this.chart.series[i].setVisible(false, false);
} else {
this.chart.series[i].setVisible(true, false);
}
}
this.chart.redraw();
return false;
}
}
}
},
tooltip: {
shared: true,
backgroundColor: '#FFF',
useHTML: true,
xAxis: [{
title: { text: '' },
alignTicks: false
}, {
title: { text: translate.instant(localizedLabel + '.GRAPH_XAXIS') },
alignTicks: false,
}],
yAxis: [{
title: { text: '' }
}, {
title: { text: translate.instant(localizedLabel + '.GRAPH_YAXIS') },
}],
series: [{
showInLegend: false
}]
};
}
public options: any;
chart: any;
@Input() localizedLabel: string;
@Input() public series: any;
@Input() usedInPdf: boolean = false;
private shortNumberFormatPipe = new ShortNumberFormatPipe();
constructor(private _translate: TranslateService) {
}
ngOnInit() {
let graphLegendTitle: string = this._translate.instant('CAPTIVES.RESULTS.COMMON.GRAPH_LEGEND_TITLE');
if (this.usedInPdf) {
graphLegendTitle = '';
}
this.options =BellCurveChartComponent.chart(this.shortNumberFormatPipe, this._translate, this.localizedLabel, graphLegendTitle);
}
getInstance(chartInstance): void {
this.chart = chartInstance;
this.redraw();
}
ngOnChanges(data: any) {
if (!data.series.currentValue || !this.chart) return;
this._redrawLogic(data.series.currentValue);
this.chart.reflow();
}
public redraw() {
if (!this.chart) return;
var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4,
4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2,
3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3,
3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3,
2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3,
2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3,
2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6,
3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2,
2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7,
3.2, 3.3, 3, 2.5, 3, 3.4, 3
];
this.series = [{
name: 'Histogram',
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
baseSeries: 's1',
zIndex: -1
}, {
name: 'Data',
type: 'scatter',
data: data,
visible: false,
id: 's1',
marker: {
radius: 1.5
}
}];
this._redrawLogic(this.series);
this.chart.redraw();
}
private _redrawLogic(series1: any) {
let seriesLength = this.chart.series.length;
for (let i = seriesLength - 1; i > -1; i--) {
this.chart.series[i].remove();
}
series1.map(s => {
if (s !== null) {
this.chart.addSeries(s, false);
}
});
for (let i = 0; i < this.chart.series.length; i++) {
if (i > 0) {
this.chart.series[i].setVisible(false, false);
} else {
this.chart.series[i].setVisible(true, true);
}
}
}
}
app.moduleimport { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
export function highchartsFactory() {
const hc = require('highcharts');
const hb = require('highcharts-histogram-bellcurve');
const dd = require('highcharts/modules/drilldown');
const hcMore = require('highcharts/highcharts-more');
const exp = require('highcharts/modules/exporting');
hcMore(hc);
hb(hc);
dd(hc);
exp(hc);
return hc;
}
@NgModule({
declarations: [...ROOT_COMPONENTS ],
imports: [
PlatformRootModule.forRoot([
{ provide: ExtensionPoint.RUN_PAGES, useValue: { routes: Routing.RUN_PAGES } },
{ provide: ExtensionPoint.RUN_MANAGEMENT_PAGES, useValue: { routes: Routing.RUN_MGMT_PAGES } },
{ provide: ExtensionPoint.RUN_LIST_NAVIGATION, useValue: { runLinks: Config.RUN_LIST_NAVIGATION } }
]
),
ChartModule
],
providers: [...WEBAPI_PROVIDERS, ...SERVICES, {
provide: HighchartsStatic,
useFactory: highchartsFactory
}, { provide: RunIntegrationService, useClass: RunIntegrationCaptivesService }],
bootstrap: [PlatformRootComponent],
entryComponents: [...ROOT_COMPONENTS]
})
export class AppModule { }
from TypeError: p is not a function while calling map function in angular 4 for fetching series for bellcurve highchart
No comments:
Post a Comment