fusioncharts / angular-fusioncharts

Angular Component for FusionCharts JavaScript Charting Library
https://fusioncharts.github.io/angular-fusioncharts/#/ex1
Other
55 stars 37 forks source link

TypeError: FusionChartsModules is not a function #85

Open TheGlobalist opened 4 years ago

TheGlobalist commented 4 years ago

Hi, I'm trying to setup FusionCharts in my Angular8 project. So far I've added the following statements in the app.module.ts

[...]

import * as FusionCharts from "fusioncharts";
import * as charts from "fusioncharts/fusioncharts.charts";
import * as FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import { FusionChartsModule } from "angular-fusioncharts";

FusionChartsModule.fcRoot(FusionCharts, charts, FusionTheme);

@NgModule({declarations: [...], import: ...,    FusionChartsModule, [...]})

[..]

Then, in the HTML component, I define this

<fusioncharts
  [width]="width"
  [height]="height"
  [type]="type"
  [dataFormat]="dataFormat"
  [dataSource]="dataSource"
>
</fusioncharts>

And, in its associated TypeScript, this is the following code

import { Component, OnInit, Input } from '@angular/core';
import { VisService } from 'src/app/services/vis.service';

@Component({
  selector: 'app-pie',
  templateUrl: './pie.component.html',
  styleUrls: ['./pie.component.css']
})
export class PieComponent implements OnInit {

  receivingData: JSON;
  private width = 400;
  private height = 400;
  private type: string = "pie2d";
  private dataFormat: string = "json";
  private dataSource;

  constructor(private visService: VisService) { }

  ngOnInit() {
    this.visService.gatheredData.subscribe(res => {
      this.receivingData = res['data']['vis_data'];
      this.createNewPie();

    });

}

  private createNewPie(): void {
    this.dataSource = {
      chart: {
        showlegend: "1",
        showpercentvalues: "1",
        legendposition: "bottom",
        usedataplotcolorforlabels: "1",
        theme: "fusion"
      },
      data: this.receivingData['graduates']['content']
    }
  }

}

As soon as the component is loaded, though, I receive this error

core.js:6014 ERROR TypeError: FusionChartsModules is not a function
    at fusioncharts.service.js:50
    at Array.forEach (<anonymous>)
    at FusionChartsService.push../node_modules/angular-fusioncharts/src/fusioncharts.service.js.FusionChartsService.resolveFusionCharts (fusioncharts.service.js:44)
    at new FusionChartsService (fusioncharts.service.js:25)
    at createClass (core.js:31987)
    at _createProviderInstance$1 (core.js:31963)
    at createProviderInstance (core.js:31776)
    at createViewNodes (core.js:44195)
    at callViewAction (core.js:44660)
    at execComponentViewsAction (core.js:44565)

Any idea on how to solve this?

AyanBhadury commented 2 years ago

ngCC compilation issue has been fixed, please upgrade to 3.2.0 : http://www.npmjs.com/package/angular-fusioncharts

@TheGlobalist