angular fusion timeseries chart giving errors Cannot read properties of undefined 'addSymbol'extension must have a valid extension property

Question

I have tried using angular v13 & 14 and for angular fusion package 3.18.0 & 4.0.3

getting errors below errors when I use type as a timeseries and chart is not rendered ::

• Unhandled Promise rejection: TypeError: Cannot read properties of undefined (reading 'addSymbol')
• extension error >> a fusioncharts extension must have a valid extension property.

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import angular-fusioncharts
import { FusionChartsModule } from 'angular-fusioncharts';
// Import FusionCharts library and chart modules
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as TimeSeries from 'fusioncharts/fusioncharts.timeseries'; // Import timeseries
// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, Charts, TimeSeries);
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // Specify FusionChartsModule as import
    FusionChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}``

app.component.html

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

app.component.ts

import { Component } from '@angular/core';
import * as FusionCharts from 'fusioncharts';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  dataSource: any;
  type: string;
  width: string;
  height: string;
  constructor() {
    this.type = 'timeseries';
    this.width = '400';
    this.height = '400';
    this.dataSource = {
      data: null,
      yAxis: {
        plot: [{ value: 'Sales' }]
      },
      caption: {
        text: 'Online Sales of a SuperStore in the US'
      }
    };
    this.fetchData();
  }
  fetchData() {
    let jsonify =(res:any) => res.json();
 

    var dataFetch = fetch(
      "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/stacked-colum-chart-with-time-axis-data.json"
    ).then(jsonify);
    var schemaFetch = fetch(
      "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/stacked-colum-chart-with-time-axis-schema.json"
    ).then(jsonify);

    Promise.all([dataFetch, schemaFetch]).then(res => {
      const [data, schema] = res;
      // First we are creating a DataStore
      const fusionDataStore = new FusionCharts.DataStore();
      // After that we are creating a DataTable by passing our data and schema as arguments
      const fusionTable = fusionDataStore.createDataTable(data, schema);
      // Afet that we simply mutated our timeseries datasource by attaching the above
      // DataTable into its data property.
      this.dataSource.data = fusionTable;
    });


  }

}

Need to know how to solve above error.

Answer 1

You can try with below code -

// Setup needed in app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

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

FusionChartsModule.fcRoot(FusionCharts, TimeSeries, FusionTheme);
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FusionChartsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

// in app.component.ts

import { Component } from "@angular/core";
import * as FusionCharts from "fusioncharts";
const dataUrl =
  "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/specify-initial-time-interval_data.json";
const schemaUrl =
  "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/specify-initial-time-interval_schema.json";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  dataSource: any;
  type: string;
  width: string;
  height: string;
  constructor() {
    this.type = "timeseries";
    this.width = "400";
    this.height = "400";
    this.dataSource = {
      caption: {
        text: "Sales Analysis - Grocery"
      },
      chart: {
        theme: "fusion"
      },
      subcaption: {
        text: "Initial time interval spread is from 01-Jan-12 to 31-Dec-12"
      },
      data: null,
      yaxis: [
        {
          plot: {
            value: "Grocery Sales Value"
          },
          format: {
            prefix: "$"
          },
          title: "Sale Value"
        }
      ],
      xaxis: {
        initialinterval: {
          from: "01-Jan-12",
          to: "31-Dec-12"
        }
      }
    };
    this.fetchData();
  }
  fetchData() {
    let jsonify = res => res.json();
    let dataFetch = fetch(dataUrl).then(jsonify);
    let schemaFetch = fetch(schemaUrl).then(jsonify);
    Promise.all([dataFetch, schemaFetch]).then(res => {
      let data = res[0];
      let schema = res[1];
      let fusionTable = new FusionCharts.DataStore().createDataTable(
        data,
        schema
      ); // Instance of DataTable to be passed as data in dataSource
      this.dataSource.data = fusionTable;
    });
  }
}

//in app.component.html

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

Here is the demo fiddle - https://codesandbox.io/s/ww2y9w1m0l?file=/src/main.ts

To know more about it please refer the docs - https://fusioncharts.github.io/angular-fusioncharts/#/ex26

Hope this would help you.