CODEWITHSUNDEEP
javascriptangularimportfusioncharts
ShaMoh
ShaMoh

Reputation: 1570

Angular 2 Fusion Chart integration

I am just starting with Angular2.I am trying to integrate Fusion charts with Angular2. I have installed all the necessary modules (@types/fusioncharts and fusioncharts). Below is fusionchart component code.

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import * as FusionCharts from "FusionCharts";
import '../../node_modules/fusioncharts/fusioncharts.charts.js';

@Component({
    moduleId: module.id.toString(),
    templateUrl: 'fusioncharts2.component.html'
})

export class FusionChartsComponent2 {
    revenueChart: any;

    constructor() {

    }

    ngAfterViewInit() {
        this.chartConfig()
    }

    public chartConfig() {
        this.revenueChart = new FusionCharts({
            type: 'column3d',
            renderAt: 'chart-container',
            width: '500',
            height: '300',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Monthly revenue for last year",
                    "subCaption": "Harry's SuperMart",
                    "xAxisName": "Month",
                    "yAxisName": "Revenues (In USD)",
                    "paletteColors": "#0075c2",
                    "valueFontColor": "#ffffff",
                    "baseFont": "Helvetica Neue,Arial",
                    "captionFontSize": "14",
                    "subcaptionFontSize": "14",
                    "subcaptionFontBold": "0",
                    "placeValuesInside": "1",
                    "rotateValues": "1",
                    "showShadow": "0",
                    "divlineColor": "#999999",
                    "divLineIsDashed": "1",
                    "divlineThickness": "1",
                    "divLineDashLen": "1",
                    "divLineGapLen": "1",
                    "canvasBgColor": "#ffffff"
                },

                "data": [
                    {
                        "label": "Jan",
                        "value": "420000"
                    },
                    {
                        "label": "Feb",
                        "value": "810000"
                    },
                    {
                        "label": "Mar",
                        "value": "720000"
                    },
                    {
                        "label": "Apr",
                        "value": "550000"
                    },
                    {
                        "label": "May",
                        "value": "910000"
                    },
                    {
                        "label": "Jun",
                        "value": "510000"
                    },
                    {
                        "label": "Jul",
                        "value": "680000"
                    },
                    {
                        "label": "Aug",
                        "value": "620000"
                    },
                    {
                        "label": "Sep",
                        "value": "610000"
                    },
                    {
                        "label": "Oct",
                        "value": "490000"
                    },
                    {
                        "label": "Nov",
                        "value": "900000"
                    },
                    {
                        "label": "Dec",
                        "value": "730000"
                    }
                ]
            }
        });
        this.revenueChart.render();
    }

}

app.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { InputTextModule, DataTableModule, ButtonModule, DialogModule } from 'primeng/primeng';

    // Import angular2-fusioncharts
    import { FusionChartsModule } from 'angular2-fusioncharts';

    // Import FusionCharts library
    import * as FusionCharts from 'fusioncharts';
    // Import FusionCharts Charts module
    import Charts = require('fusioncharts/fusioncharts.charts');


    // used to create fake backend
    import { fakeBackendProvider } from './_helpers/index';
    import { MockBackend, MockConnection } from '@angular/http/testing';
    import { BaseRequestOptions } from '@angular/http';

    // Imports for loading & configuring the in-memory web api
    import { InMemoryWebApiModule } from 'angular-in-memory-web-api';

    import { AppComponent } from './app.component';
    import { routing } from './app.routing';

    import { AlertComponent } from './_directives/index';
    import { AuthGuard } from './_guards/index';
    import { AlertService, AuthenticationService, UserService, 
HeroSearchService, HeroService, InMemoryDataService } from 
'./_services/index';
    import { CarService } from './cars/carservice';
    import { HomeComponent } from './home/index';
    import { DashboardComponent, HeroDetailComponent, HeroSearchComponent, 
    HeroesComponent } from './dashboard/index';
    import { AppChildComponent, ParentComponent } from 
    './parentchild/index';
    import { ContentComponent } from './content/index';
    import { DataTableComponent } from './datatable/index';
    import { FusionChartsComponent } from './fusioncharts/index';
    import { FusionChartsComponent2 } from './fusioncharts2/index';
    import { JqDataTableComponent } from './jqdatatable/index';
    import { JsTreeComponent } from './jstree/index';
    import { LoginComponent } from './login/index';
    import { RegisterComponent } from './register/index';

    import { HashLocationStrategy, LocationStrategy } from 
    '@angular/common';

    @NgModule({
        imports: [
            BrowserModule,
            BrowserAnimationsModule,
            FormsModule,
            HttpModule,
            InMemoryWebApiModule.forRoot(InMemoryDataService, { 
passThruUnknownUrl: true }),
            routing,
            InputTextModule,
            DataTableModule,
            ButtonModule,
            DialogModule,
            FusionChartsModule.forRoot(FusionCharts, Charts)
        ],
        declarations: [
            AppComponent,
            AlertComponent,
            HomeComponent,
            DashboardComponent,
            FusionChartsComponent,
            FusionChartsComponent2,
            HeroDetailComponent, HeroSearchComponent, HeroesComponent,
            AppChildComponent, ParentComponent,
            ContentComponent,
            DataTableComponent,
            JqDataTableComponent,
            JsTreeComponent,
            LoginComponent,
            RegisterComponent
        ],
        providers: [
            AuthGuard,
            AlertService,
            AuthenticationService,
            UserService,
            HeroSearchService,
            HeroService,
            CarService,
            // providers used to create fake backend
            fakeBackendProvider,
            MockBackend,
            BaseRequestOptions,
            { provide: LocationStrategy, useClass: HashLocationStrategy }
        ],
        bootstrap: [AppComponent]
    })

    export class AppModule { }

I am getting below error when execute my code.

    vendor.js:28488 [HMR] Waiting for update signal from WDS...
    vendor.js:4073 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
    app.js:27495 GET http://localhost:9966/fusioncharts.charts.js (404)
    vendor.js:28300 [WDS] Hot Module Replacement enabled.

If I include fusionchart cdn in index.html via script or if fusionchart.js present in app folder, that error is fixed. Though fusionchart.js code is in app bundle, it always look for fusionchart.js in the root app folder. Even I tried importing by pointing to node_modules some thing like this "import '../../node_modules/fusioncharts/fusioncharts.charts.js';" still no effect. Is it proper way to include js via script tag in html? Any other way to fix this error?

Upvotes: 2

Views: 1342

Answers (2)

Aman Saraswat
Aman Saraswat

Reputation: 172

You can try by implementing the below code -

// Setup needed in app.module.ts

import { NgModule, enableProdMode } from '@angular/core'
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { FusionChartsModule } from 'angular-fusioncharts';

// Load FusionCharts
import * as FusionCharts from 'fusioncharts';
// Load Charts module
import * as Charts from 'fusioncharts/fusioncharts.charts';
// Load fusion theme
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Add dependencies to FusionChartsModule
FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FusionChartsModule
  ],
  providers: [
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

// In app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})
export class AppComponent { 
    dataSource: Object;
    chartConfig: Object;

    constructor() {
         this.chartConfig = {
            width: '700',
            height: '400',
            type: 'column2d',
            dataFormat: 'json',
        };

        this.dataSource = {
            "chart": {
              "caption": "Countries With Most Oil Reserves [2017-18]",
              "subCaption": "In MMbbl = One Million barrels",
              "xAxisName": "Country",
              "yAxisName": "Reserves (MMbbl)",
              "numberSuffix": "K",
              "theme": "candy",
            },
            "data": [{
              "label": "Venezuela",
              "value": "290"
            }, {
              "label": "Saudi",
              "value": "260"
            }, {
              "label": "Canada",
              "value": "180"
            }, {
              "label": "Iran",
              "value": "140"
            }, {
              "label": "Russia",
              "value": "115"
            }, {
              "label": "UAE",
              "value": "100"
            }, {
              "label": "US",
              "value": "30"
            }, {
              "label": "China",
              "value": "30"
            }]
          };

    }
}

//in app.component.html

<fusioncharts
    [chartConfig]=chartConfig
    [dataSource]=dataSource >
</fusioncharts>

Document reference - https://www.fusioncharts.com/angular2-js-charts?framework=angular2

Upvotes: 0

juancarlo
juancarlo

Reputation: 11

I have encountered the same issue. You can fix this by updating app.module.ts

update this part from

// Import FusionCharts Charts module
import Charts = require('fusioncharts/fusioncharts.charts');

TO

// Import FusionCharts Charts module
import * as Charts from 'fusioncharts/fusioncharts.charts';
FusionChartsModule.fcRoot(FusionCharts, Charts);

And yes, this won't work "import '../../node_modules/fusioncharts/fusioncharts.charts.js';" since this isn't the correct way of importing FusionCharts

You can also refer to the updated documentation on the correct usage https://www.fusioncharts.com/dev/getting-started/angular/angular/configure-your-chart-using-angular

Upvotes: 1

Related Questions