fusioncharts

FusionCharts

In its 3.13 release, the FusionCharts framework can be consumed as ES6 modules. This package contains files needed to render charts using the FusionCharts library.

FusionCharts folder structure

fusioncharts/
  ├── core/ - Contains the FusionCharts core.
  ├── viz/ - Contains all the individual vizualizations (Column2D, SplineArea, AngularGauge etc.)
  ├── charts/ - Contains all the visualizations of the Charts package (similar to fusioncharts.charts.js).
  ├── powercharts/ - Contains all the visualizations of the PowerCharts package.
  ├── widgets/ - Contains all the visualizations of the FusionWidgets package.
  ├── maps/ - Contains the map renderer
  │   └── es/ - Contains the map definition files of World and USA
  └── themes/es - Contains all the theme files. 

Use ES6 to render a chart

Include the core fusioncharts file -

import FusionCharts from 'fusioncharts/core';

Include the desired chart from the viz folder -

import ChartType from fusioncharts/viz/[ChartType];

Example:

import Column2D from 'fusioncharts/viz/column2d';

Add the chart as dependency -

FusionCharts.addDep(ChartType);

Example:

FusionCharts.addDep(Column2D);

Instantiate the chart.

var chartInstance = new FusionCharts({
        type: 'Column2D',
        width: '700', // Width of the chart
        height: '400', // Height of the chart
        dataFormat: 'json', // Data type
        renderAt:'chart-container', //container where the chart will render
        dataSource: {
                // Chart Configuration
                "chart": {
                    "caption": "Countries With Most Oil Reserves [2017-18]",
                    "subCaption": "In MMbbl = One Million barrels",
                    "xAxisName": "Country",
                    "yAxisName": "Reserves (MMbbl)",
                    "numberSuffix": "K",
                    "theme": "fusion"
                },
                // Chart Data
                "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"
                }]
            }
        }
    });

Render the chart

chartInstance.render()

Render a map

Include the core fusioncharts file from core -

import FusionCharts from 'fusioncharts/core';

Include map renderer -

import Maps from 'fusioncharts/maps';

Include the definition file for the map you want to render -

import World from 'fusioncharts/maps/es/fusioncharts.world';

• Note: If you want to render a map which is not in the fusioncharts package (i.e. any map other than world or usa), then you need to install 'fusionmaps' which contains all the ES6 map definitions

npm install fusionmaps

The map definitions are available as ES6 modules in node_modules/fusionmaps/maps/es/fusioncharts.[MAP-ALIAS].js

Add the map renderer and definition(s) as dependencies to the core -

FusionCharts.addDep(Maps); // Maps -  reference from above
FusionCharts.addDep(World); // World - reference from above

Define an instance of the chart -

var salesByContinent =   new  FusionCharts({
        type: 'world', // Map type
        renderAt: 'chart-container', // Container
        width: '800', // Width of the chart
        height: '550', // Height of the chart
        dataFormat: 'json', // Data Type
        dataSource: {
        // Map Configuration
            "chart": {
                "caption": "Average Annual Population Growth",
                "subcaption": " 1955-2015",
                "numbersuffix": "%",
                "includevalueinlabels": "1",
                "labelsepchar": ": ",
                "entityFillHoverColor": "#FFF9C4",
                "theme": "fusion"
            },
            // Aesthetics; ranges synced with the slider
            "colorrange": {
                "minvalue": "0",
                "code": "#FFE0B2",
                "gradient": "1",
                "color": [{
                    "minvalue": "0.5",
                    "maxvalue": "1.0",
                    "color": "#FFD74D"
                }, {
                    "minvalue": "1.0",
                    "maxvalue": "2.0",
                    "color": "#FB8C00"
                }, {
                    "minvalue": "2.0",
                    "maxvalue": "3.0",
                    "color": "#E65100"
                }]
            },
            // Source data as JSON --> id represents countries of world.
            "data": [{
                "id": "NA",
                "value": ".82",
                "showLabel": "1"
            }, {
                "id": "SA",
                "value": "2.04",
                "showLabel": "1"
            }, {
                "id": "AS",
                "value": "1.78",
                "showLabel": "1"
            }, {
                "id": "EU",
                "value": ".40",
                "showLabel": "1"
            }, {
                "id": "AF",
                "value": "2.58",
                "showLabel": "1"
            }, {
                "id": "AU",
                "value": "1.30",
                "showLabel": "1"
            }]
        }
    }
});

Render the map -

chartInstance.render();

Render using a theme

Import FusionCharts' core -

import FusionCharts from 'fusioncharts/core'

Import the theme file to use the theme -

import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'

Add the theme to FusionCharts -

FusionCharts.addDep(FusionTheme);

Simply importing the fusioncharts.theme.fusion module will not apply the theme to the chart. To apply the theme, set the value of theme attribute to the respective name of the theme. For more details click here.