Sunday, 1 July 2018

TypeError: p is not a function while calling map function in angular 4 for fetching series for bellcurve highchart

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
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 + ' &nbsp;',
                    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.module
import { 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