Fusion chart

Pure Javascript version

Install

• Download free trial
  https://www.fusioncharts.com/download/
• Free trial version displays a small watermark in the chart only

Embedding

• [js]
  
  
  
  [/js]

Angular 2 version

Install

• Run npm
  [js]
  $ npm install angular2-fusioncharts –save
  [/js]

Embedding

• In Angular AppModule
  Note: You have to import susion chart library into the right AppModule in which YOUR COMPONENT is declared
  [js]
  import { BrowserModule } from ‘@angular/platform-browser’;
  import { NgModule } from ‘@angular/core’;

  import { AppComponent } from ‘./app.component’;

  // Import angular2-fusioncharts
  import { FusionChartsModule } from ‘angular2-fusioncharts’;

  // Import FusionCharts library and chart modules
  import * as FusionCharts from ‘fusioncharts’;
  import * as Charts from ‘fusioncharts/fusioncharts.charts’;
  import * as FintTheme from ‘fusioncharts/themes/fusioncharts.theme.fint’;

  // Pass the fusioncharts library and chart modules
  FusionChartsModule.fcRoot(FusionCharts, Charts, FintTheme);

  @NgModule({
  declarations: [ // HERE ARE YOUR APP’S COMPONENTS USING FUSION CHARTS
  AppComponent,
  FusionChartsComponent
  ],
  imports: [
  BrowserModule,
  // Specify FusionChartsModule as import
  FusionChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
  })
  export class AppModule { }
  [/js]

Practical practices

• Force to resize the chart dynamically in responsive UI
  [js]
  // Use “%” instead of “px”
  
  [/js]

General practices

Pie chart: How to set separate color for each field

• Add “color” field into json data instead of using “paletteColors”
  [js]
  dataSource: {
  “chart”: {
  “caption”: “AAAAAA”,
  //”paletteColors”: “#FF0000,#FF8000,#FFFF00,#31B404”
  },
  “data”: [
  {
  “label”: “LABEL1”,
  “value”: “1250400”,
  “color”: “#FF0000”
  },
  {
  “label”: “B”,
  “value”: “1463300”,
  “color”: “#FF8000”
  },
  {
  “label”: “C”,
  “value”: “1050700”,
  “color”: “#FFFF00”
  },
  {
  “label”: “X”,
  “value”: “491000”,
  “color”: “#31B404”
  }
  ]
  }
  }).render();
  });
  [/js]

Pie chart: Force to resize pie chart inside fusion chart area

Use “pieRadius” property
• [js]
  FusionCharts.ready(function () {
  var ageGroupChart = new FusionCharts({
  type: ‘pie3d’,
  renderAt: ‘id_piechart’,
  width: ‘320px’,
  height: ‘120px’,
  dataFormat: ‘json’,
  dataSource: {
  “chart”: {
  “caption”: “AAAAAA”,
  “captionFontSize”: “14”,
  “paletteColors”: “#FF0000,#FF8000,#FFFF00,#31B404”,
  “bgColor”: “#ffffff”,
  “showPercentValues”: “1”,
  “showHoverEffect”: “1”,
  “showLegend”: “0”,
  “legendBgColor”: “#ffffff”,
  “legendItemFontSize”: ‘6’,
  “legendItemFontColor”: ‘#666666’,
  “pieRadius”: “65”,
  },
  “data”: [
  {
  “label”: “A”,
  “value”: “1250400”
  },
  {
  “label”: “B”,
  “value”: “1463300”
  },
  {
  “label”: “C”,
  “value”: “1050700”
  },
  {
  “label”: “X”,
  “value”: “491000”
  }
  ]
  }
  }).render();
  });
  [/js]