### 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 (
);
}
}
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 (
);
}
}
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 (
);
}
}
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 (
);
}
}
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 (
);
}
}
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'
}],
```