fusioncharts / angular4-fusioncharts

A simple and lightweight Angular 4 component which provides bindings for FusionCharts JavaScript Charting Library
MIT License
17 stars 7 forks source link

Real time charts not working #11

Closed chandanch closed 6 years ago

chandanch commented 6 years ago

When we try to use the realtimeline chart the chart throws message as "Chart not supported".

Please refer to this plunk: https://plnkr.co/edit/84dEEJ6sbBHr4n8Ft2XB?p=preview

In this plunk we have added two data points by default. It works in the plain JS version but does not work in the Angular 4 version.

Refer to this fiddle for plain js version: https://jsfiddle.net/chandan_ch/79f81dug/2/

On the browser console we get the following error: Failed to load resource: the server responded with a status of 404 () run.plnkr.co/NOgIETInay1xPNbY/fusioncharts.widgets.js How do we add widgets in NgModule?

Also there is no documentation & example for real-time charts please add the documentation and an example as well.

rousan commented 6 years ago

Hi @chandanch You need to import widgets module for real-time charts in your app.module.ts file as follows:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
// Here import Widgets module
import * as Widgets from 'fusioncharts/fusioncharts.widgets';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';
import * as OceanTheme from 'fusioncharts/themes/fusioncharts.theme.ocean';
import { FusionChartsModule } from 'angular4-fusioncharts';
import { AppComponent } from './app.component';

// Here pass Widgets module to resolve
FusionChartsModule.fcRoot(FusionCharts, Charts, Widgets, FintTheme, OceanTheme)

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

The modified plunkr link.