FusionCharts

https://www.fusioncharts.com/dev/
Admin
FusionCharts is a comprehensive JavaScript charting library that enables developers to create...
Tokens:1,903,636
Snippets:30,085
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Start the Rails Server

Source: https://www.fusioncharts.com/dev/getting-started/ruby-on-rails/your-first-chart-using-ruby-on-rails

Launch the local development server to verify the project setup.

```bash
rails server
```

--------------------------------

### Start development server

Source: https://www.fusioncharts.com/dev/getting-started/vue/your-first-chart-using-vuejs

Launch the Vite development server to run the application locally.

```bash
npm run dev
```

--------------------------------

### Render a California Map in React

Source: https://www.fusioncharts.com/dev/getting-started/react/rendering-different-charts-using-react

This example demonstrates the full setup including imports, dependency registration, data configuration, and the React component implementation.

```javascript
// Step 1 - Including react
import React from 'react';
import ReactDOM from 'react-dom';

// Step 2 - Including the react-fusioncharts component
import ReactFC from 'react-fusioncharts';

// Step 3 - Including the fusioncharts library
import FusionCharts from 'fusioncharts';

// Step 4 - Including the map renderer
import FusionMaps from 'fusioncharts/fusioncharts.maps';

// Step 5 - Including the map definition file
import California from 'fusionmaps/maps/fusioncharts.california';

// Step 6 - Including the theme as fusion
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Step 7 - Adding the map and theme as dependency to the core fusioncharts
ReactFC.fcRoot(FusionCharts, FusionMaps, California, FusionTheme);

//Step 8 - Defining map data
const mapData = [{"id":"001","value":2834},{"id":"003","value":3182},{"id":"005","value":3280},{"id":"007","value":911},{"id":"009","value":292},{"id":"011","value":530},{"id":"013","value":2515},{"id":"015","value":728},{"id":"017","value":1974},{"id":"019","value":848},{"id":"021","value":3278},{"id":"023","value":4463},{"id":"025","value":1198},{"id":"027","value":378},{"id":"029","value":2610},{"id":"031","value":1200},{"id":"033","value":3820},{"id":"035","value":940},{"id":"037","value":3416},{"id":"039","value":4004},{"id":"041","value":1604},{"id":"043","value":4011},{"id":"045","value":3203},{"id":"047","value":3775},{"id":"049","value":2721},{"id":"051","value":3417},{"id":"053","value":1530},{"id":"055","value":412},{"id":"057","value":3434},{"id":"059","value":1670},{"id":"061","value":1274},{"id":"063","value":4339},{"id":"065","value":2073},{"id":"067","value":1018},{"id":"069","value":3967},{"id":"071","value":3401},{"id":"073","value":3307},{"id":"075","value":1938},{"id":"077","value":489},{"id":"079","value":3207},{"id":"081","value":2295},{"id":"083","value":2747},{"id":"085","value":1114},{"id":"087","value":3400},{"id":"089","value":784},{"id":"091","value":1673},{"id":"093","value":4274},{"id":"095","value":4509},{"id":"097","value":3862},{"id":"099","value":1356},{"id":"101","value":4126},{"id":"103","value":1314},{"id":"105","value":1807},{"id":"107","value":4026},{"id":"109","value":3456},{"id":"111","value":1393},{"id":"113","value":1500},{"id":"115","value":2218}]

const colorrange = {
  "minvalue": "0",
  "startlabel": "Low",
  "endlabel": "High",
  "code": "e44a00",
  "gradient": "1",
  "color": [{"maxvalue": "2500", "code": "f8bd19"}, {"maxvalue": "5000", "code": "6baa01"}]
};

// Step 9 - Creating the JSON object to store the map configurations
const chartConfigs = {
    type: 'maps/california',
    width: '800',
    height: '550',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "animation": "0",
            "showbevel": "0",
            "usehovercolor": "1",
            "showlegend": "1",
            "legendposition": "BOTTOM",
            "legendborderalpha": "0",
            "legendbordercolor": "ffffff",
            "legendallowdrag": "0",
            "legendshadow": "0",
            "caption": "Website Visits for the month of March 2018",
            "connectorcolor": "000000",
            "fillalpha": "80",
            "hovercolor": "CCCCCC",
            "theme": "fusion"
        },
        "colorrange": colorrange,
        "data": mapData
    }
};
// Step 10 - Creating the DOM element to pass the react-fusioncharts component
class App extends React.Component {
  render() {
     return (
      <ReactFC {...chartConfigs} />
     );
  }
}

export default App
```

--------------------------------

### Render an Angular Gauge in React

Source: https://www.fusioncharts.com/dev/getting-started/react/rendering-different-charts-using-react

This example shows the full setup including dependency imports, data configuration, and the React component implementation.

```javascript
// STEP 1 - Include Dependencies

// Include react
import React from 'react';
import ReactDOM from 'react-dom';

// Include the react-fusioncharts component
import ReactFC from 'react-fusioncharts';

// Include the fusioncharts library
import FusionCharts from 'fusioncharts';

//Import the Widgets
import Widgets from 'fusioncharts/fusioncharts.widgets';

// Include the theme as fusion
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Adding the chart and theme as dependency to the core fusioncharts
ReactFC.fcRoot(FusionCharts, Widgets, FusionTheme);

//STEP 2 - Defining the dataset for the angular gauge along with the color configuration
const colorRange = {
  "color": [{
    "minValue": "0",
    "maxValue": "50",
    "code": "#e44a00"
  }, {
    "minValue": "50",
    "maxValue": "75",
    "code": "#f8bd19"
  }, {
    "minValue": "75",
    "maxValue": "100",
    "code": "#6baa01"
  }]
};

const dials = {
  "dial": [{
    "value": "67"
  }]
};

// STEP 3 - Creating the JSON object to store the chart configurations
const chartConfigs = {
    type: 'angulargauge',// The chart type
    width: '700', // Width of the chart
    height: '400', // Height of the chart
    dataFormat: 'json', // Data type
    dataSource: {
        "chart": {
          "caption": "Customer Satisfaction Score",
          "subcaption": "Last week",
          "lowerLimit": "0",
          "upperLimit": "100",
          "theme": "fusion"
        },
        "colorRange": colorRange,
        "dials": dials
    }
}


// STEP 3 - Creating the DOM element to pass the react-fusioncharts component
class App extends React.Component {
  render() {
     return (
     <ReactFC
        {...chartConfigs}/>
     );
  }
}

export default App;
```

--------------------------------

### Install project dependencies

Source: https://www.fusioncharts.com/dev/getting-started/vue/your-first-chart-using-vuejs

Install the necessary packages defined in the project's package.json file.

```bash
npm install
```

--------------------------------

### Install FusionCharts Packages

Source: https://www.fusioncharts.com/dev/getting-started/vue/your-first-chart-using-vuejs

Install the core charting library and the Vue wrapper via npm.

```bash
npm install fusioncharts vue-fusioncharts
```

--------------------------------

### Install Vue CLI globally

Source: https://www.fusioncharts.com/dev/getting-started/vue/your-first-chart-using-vuejs

Install the Vue CLI tool globally on your system.

```bash
npm install -g @vue/cli
```

--------------------------------

### Render a Real-Time Chart in React

Source: https://www.fusioncharts.com/dev/getting-started/react/rendering-different-charts-using-react

This example shows the full implementation, including importing dependencies, defining the chart configuration object, and rendering the component.

```javascript
// STEP 1 - Include Dependencies

// Include react
import React from 'react';
import ReactDOM from 'react-dom';

// Include the react-fusioncharts component
import ReactFC from 'react-fusioncharts';

// Include the fusioncharts library
import FusionCharts from 'fusioncharts';

// Include the chart type
import Widgets from "fusioncharts/fusioncharts.widgets";
// Include the theme as fusion
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Adding the chart and theme as dependency to the core fusioncharts
ReactFC.fcRoot(FusionCharts, Widgets, FusionTheme);

// STEP 2 - Creating the JSON object to store the chart configurations
const chartConfigs = {
    id: "stockRealTimeChart",
    type: 'realtimearea',// The chart type
    width: '700', // Width of the chart
    height: '400', // Height of the chart
    dataFormat: 'json', // Data type
    dataSource: {
        "chart": {
          "theme": "fusion",
          "caption": "Real-time stock price monitor",
          "subCaption": "Harry's SuperMart",
          "xAxisName": "Time",
          "yAxisName": "Stock Price",
          "numberPrefix": "$",
          "refreshinterval": "5",
          "yaxisminvalue": "35",
          "yaxismaxvalue": "36",
          "numdisplaysets": "10",
          "labeldisplay": "rotate",
          "showRealTimeValue": "0"

        },
        "categories": [{
          "category": [{
            "label": "Day Start"
          }]
        }],
        "dataset": [{
          "data": [{
            "value": "35.27"
          }]
        }]
      },
      "events": {
        "initialized": function(e) {
          function addLeadingZero(num) {
            return (num <= 9) ? ("0" + num) : num;
          }

          function updateData() {
            // Get reference to the chart using its ID
            var chartRef = FusionCharts("stockRealTimeChart"),
              // We need to create a querystring format incremental update, containing
              // label in hh:mm:ss format
              // and a value (random).
              currDate = new Date(),
              label = addLeadingZero(currDate.getHours()) + ":" +
              addLeadingZero(currDate.getMinutes()) + ":" +
              addLeadingZero(currDate.getSeconds()),
              // Get random number between 35.25 & 35.75 - rounded to 2 decimal places
              randomValue = Math.floor(Math.random() *
                50) / 100 + 35.25,
              // Build Data String in format &label=...&value=...
              strData = "&label=" + label +
              "&value=" +
              randomValue;
            // Feed it to chart.
            chartRef.feedData(strData);
          }

          var myVar = setInterval(function() {
            updateData();
          }, 5000);
        }
      }
    }



// STEP 3 - Creating the DOM element to pass the react-fusioncharts component
class App extends React.Component {
  render() {
     return (
     <ReactFC
        {...chartConfigs}/>
     );
  }
}

export default App;
```

--------------------------------

### Define Gantt Chart Data Structure

Source: https://www.fusioncharts.com/dev/getting-started/react/rendering-different-charts-using-react

A comprehensive example showing the definition of categories and processes for a store opening project.

```javascript
//Define the categories(month-labels) of the Gantt chart
const categories = [{
    "bgcolor": "#999999",
    "category": [{
    "start": "1/4/2014",
    "end": "30/6/2014",
    "label": "Months",
    "align": "middle",
    "fontcolor": "#ffffff",
    "fontsize": "12"
    }]
}, {
    "bgcolor": "#999999",
    "align": "middle",
    "fontcolor": "#ffffff",
    "fontsize": "12",
    "category": [{
    "start": "1/4/2014",
    "end": "30/4/2014",
    "label": "April"
    }, {
    "start": "1/5/2014",
    "end": "31/5/2014",
    "label": "May"
    }, {
    "start": "1/6/2014",
    "end": "30/6/2014",
    "label": "June"
    }]
}, {
    "bgcolor": "#ffffff",
    "fontcolor": "#333333",
    "fontsize": "11",
    "align": "center",
    "category": [{
    "start": "1/4/2014",
    "end": "5/4/2014",
    "label": "Week 1"
    }, {
    "start": "6/4/2014",
    "end": "12/4/2014",
    "label": "Week 2"
    }, {
    "start": "13/4/2014",
    "end": "19/4/2014",
    "label": "Week 3"
    }, {
    "start": "20/4/2014",
    "end": "26/4/2014",
    "label": "Week 4"
    }, {
    "start": "27/4/2014",
    "end": "3/5/2014",
    "label": "Week 5"
    }, {
    "start": "4/5/2014",
    "end": "10/5/2014",
    "label": "Week 6"
    }, {
    "start": "11/5/2014",
    "end": "17/5/2014",
    "label": "Week 7"
    }, {
    "start": "18/5/2014",
    "end": "24/5/2014",
    "label": "Week 8"
    }, {
    "start": "25/5/2014",
    "end": "31/5/2014",
    "label": "Week 9"
    }, {
    "start": "1/6/2014",
    "end": "7/6/2014",
    "label": "Week 10"
    }, {
    "start": "8/6/2014",
    "end": "14/6/2014",
    "label": "Week 11"
    }, {
    "start": "15/6/2014",
    "end": "21/6/2014",
    "label": "Week 12"
    }, {
    "start": "22/6/2014",
    "end": "28/6/2014",
    "label": "Week 13"
    }]
}];
// Define the processes which are a part of the planning
const processes = {
    "headertext": "Task",
```

--------------------------------

### Render a Combination Chart in React

Source: https://www.fusioncharts.com/dev/getting-started/react/rendering-different-charts-using-react

This example demonstrates the full implementation of a combination chart, including importing dependencies, defining categories and datasets, and configuring the React component.

```javascript
// STEP 1 - Include Dependencies

// Include react
import React from 'react';
import ReactDOM from 'react-dom';

// Include the react-fusioncharts component
import ReactFC from 'react-fusioncharts';

// Include the fusioncharts library
import FusionCharts from 'fusioncharts';

// Include the chart type
import Column2D from 'fusioncharts/fusioncharts.charts';

// Include the theme as fusion
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Adding the chart and theme as dependency to the core fusioncharts
ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);

// STEP 2- Define the categories representing the labels on the X-axis
const categories = [{
    "category": [{
        "label": "Jan"
      },
      {
        "label": "Feb"
      },
      {
        "label": "Mar"
      },
      {
        "label": "Apr"
      },
      {
        "label": "May"
      },
      {
        "label": "Jun"
      },
      {
        "label": "Jul"
      },
      {
        "label": "Aug"
      },
      {
        "label": "Sep"
      },
      {
        "label": "Oct"
      },
      {
        "label": "Nov"
      },
      {
        "label": "Dec"
      }
    ]
  }
]
// STEP 3- Construct the dataset comprising combination series
 const dataset = [{
    "seriesName": "Actual Revenue",
    "showValues": "1",
    "data": [{
        "value": "16000"
      },
      {
        "value": "20000"
      },
      {
        "value": "18000"
      },
      {
        "value": "19000"
      },
      {
        "value": "15000"
      },
      {
        "value": "21000"
      },
      {
        "value": "16000"
      },
      {
        "value": "20000"
      },
      {
        "value": "17000"
      },
      {
        "value": "25000"
      },
      {
        "value": "19000"
      },
      {
        "value": "23000"
      }
    ]
  },
  {
    "seriesName": "Projected Revenue",
    "renderAs": "line",
    "data": [{
        "value": "15000"
      },
      {
        "value": "16000"
      },
      {
        "value": "17000"
      },
      {
        "value": "18000"
      },
      {
        "value": "19000"
      },
      {
        "value": "19000"
      },
      {
        "value": "19000"
      },
      {
        "value": "19000"
      },
      {
        "value": "20000"
      },
      {
        "value": "21000"
      },
      {
        "value": "22000"
      },
      {
        "value": "23000"
      }
    ]
  },
  {
    "seriesName": "Profit",
    "renderAs": "area",
    "data": [{
        "value": "4000"
      },
      {
        "value": "5000"
      },
      {
        "value": "3000"
      },
      {
        "value": "4000"
      },
      {
        "value": "1000"
      },
      {
        "value": "7000"
      },
      {
        "value": "1000"
      },
      {
        "value": "4000"
      },
      {
        "value": "1000"
      },
      {
        "value": "8000"
      },
      {
        "value": "2000"
      },
      {
        "value": "7000"
      }
    ]
  }
]

// STEP 4 - Creating the JSON object to store the chart configurations
const chartConfigs = {
    type: 'mscombi2d',// The chart type
    width: '700', // Width of the chart
    height: '400', // Height of the chart
    dataFormat: 'json', // Data type
    dataSource: {
        "chart": {
          "caption": "Harry's SuperMart",
          "subCaption": "Sales analysis of last year",
          "xAxisname": "Month",
          "yAxisName": "Amount (In USD)",
          "numberPrefix": "$",
          "divlineColor": "#999999",
          "divLineIsDashed": "1",
          "divLineDashLen": "1",
          "divLineGapLen": "1",
          "toolTipColor": "#ffffff",
          "toolTipBorderThickness": "0",
          "toolTipBgColor": "#000000",
          "toolTipBgAlpha": "80",
          "toolTipBorderRadius": "2",
          "toolTipPadding": "5",
          "theme": "fusion"
        },
        "categories": categories,
        "dataset": dataset
      }
    }

// STEP 5 - Creating the DOM element to pass the react-fusioncharts component
class App extends React.Component {
  render() {
     return (
     <ReactFC
        {...chartConfigs}/>
     );
  }
}

export default App;
```

--------------------------------

### Render a World Map with React FusionCharts

Source: https://www.fusioncharts.com/dev/getting-started/react/rendering-different-charts-using-react

Full implementation example including dependency imports, dataset definition, and component rendering for a world map.

```javascript
// STEP 1 - Include Dependencies

// Include react
import React from 'react';
import ReactDOM from 'react-dom';

// Include the react-fusioncharts component
import ReactFC from 'react-fusioncharts';

// Include the fusioncharts library
import FusionCharts from 'fusioncharts';

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

// Include the theme as fusion
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Adding the chart and theme as dependency to the core fusioncharts
ReactFC.fcRoot(FusionCharts, FusionMaps, World, FusionTheme);

//STEP 2 - Define the dataset and the colorRange of the map
const dataset = [{
    "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"
}];

const 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"
    }]
};

// STEP 3 - Creating the JSON object to store the chart configurations
const chartConfigs = {
    type: 'world', // The chart type
    width: '700', // Width of the chart
    height: '400', // 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": colorrange,
        // Source data as JSON --> id represents countries of the world.
        "data": dataset
    }
}


// STEP 3 - Creating the DOM element to pass the react-fusioncharts component
class App extends React.Component {
    render() {
        return ( <
            ReactFC {
                ...chartConfigs
            }
            />
        );
    }
}

export default App;COPY
```

--------------------------------

### Render a Multi-series Column Chart in React

Source: https://www.fusioncharts.com/dev/getting-started/react/rendering-different-charts-using-react

This example demonstrates the full implementation of a multi-series chart, including importing dependencies, defining categories and datasets, and configuring the React component.

```javascript
// STEP 1 - Include Dependencies

// Include react
import React from 'react';
import ReactDOM from 'react-dom';

// Include the react-fusioncharts component
import ReactFC from 'react-fusioncharts';

// Include the fusioncharts library
import FusionCharts from 'fusioncharts';

// Include the chart type
import Column2D from 'fusioncharts/fusioncharts.charts';

// Include the theme as fusion
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Adding the chart and theme as dependency to the core fusioncharts
ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);

// STEP 2- Define the categories representing the labels on the X-axis
const categories =  [
    {
      "category": [
        { "label": "Q1" },
        { "label": "Q2" },
        { "label": "Q3" },
        { "label": "Q4" }
      ]
    }
  ]
  // STEP 3- Construct the dataset comprising multiple series
  const dataset = [
    {
      "seriesname": "Previous Year",
      "data": [
        { "value": "12000" },
        { "value": "10500" },
        { "value": "23500" },
        { "value": "16000" }
      ]
    },
    {
      "seriesname": "Current Year",
      "data": [
        { "value": "24400" },
        { "value": "29800" },
        { "value": "20800" },
        { "value": "26800" }
      ]
    }
  ]

// STEP 4 - Creating the JSON object to store the chart configurations
const chartConfigs = {
    type: 'mscolumn2d',// The chart type
    width: '700', // Width of the chart
    height: '400', // Height of the chart
    dataFormat: 'json', // Data type
     dataSource: {
    //Chart Configurations
      "chart": {
        "theme": "fusion",
        "caption": "Comparison of Quarterly Revenue",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "plotFillAlpha": "80",
        "divLineIsDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1"
      },
      "categories": categories,
      "dataset": dataset,
    }
  }
// STEP 5 - Creating the DOM element to pass the react-fusioncharts component
class App extends React.Component {
  render() {
     return (
     <ReactFC
        {...chartConfigs}/>

     );
  }
}

export default App;
```

--------------------------------

### Create and navigate to project directory

Source: https://www.fusioncharts.com/dev/fusiontime/integrations/react-native/your-first-chart-using-react-native-in-fusiontime

Commands to initialize a new project folder and enter it.

```bash
$ mkdir projectName
```

```bash
$ cd projectName
```

--------------------------------

### Advanced Grouping Configuration

Source: https://www.fusioncharts.com/dev/fusiontime/fusiontime-data-engine/groupby

Example of grouping by week with custom bin size, start value, and week start day.

```javascript
[{
    column: 'Import date',
    timeUnit: FusionCharts.Utils.DatetimeUnits.Week,
    weekStartsFrom: FusionCharts.Utils.Weekdays.Monday,
    binSize: 2,
    startValue: +new Date(2018/1/15),
    outputAs: 'Fortinightly sum of imports'
}]
```

--------------------------------

### Start the development server

Source: https://www.fusioncharts.com/dev/getting-started/angular/angular/your-first-chart-using-angular

Launch the local development server to view the application.

```bash
npm start
```

--------------------------------

### Advanced Grouping Configuration

Source: https://www.fusioncharts.com/dev/fusiontime/fusiontime-data-engine/pivot

Example of a complex grouping configuration including binning, week start settings, and output renaming.

```javascript
[{
    column: 'Import date',
    timeUnit: FusionCharts.Utils.DatetimeUnits.Week,
    weekStartsFrom: FusionCharts.Utils.Weekdays.Monday,
    binSize: 2,
    startValue: +new Date(2018/1/15),
    outputAs: 'Fortinightly sum of imports'
}],
```
Tokens:
Raw