Build Interactive Financial Charts and Graphs Using Fusion Charts

javascript tutorial
Share on facebook
Share on twitter
Share on linkedin
Share on facebook

Data visualization is one of the biggest investments when it comes to building an application. It not only helps to draw an audience’s attention but also aids in conversions. This is why it is crucial to pick up JavaScript charts carefully. It carries the power to make or break your business.

You might be wondering what to look for when selecting JavaScript charts and how to use them effectively in your favor.

Well, this tutorial is all about that. It will not only help you select the best JavaScript charts package but will also help you build interactive financial charts and graphs.

Let’s begin the journey by exploring the key factors you must consider during the chart selection process.

How to Select the Best JavaScript Charts Package

Here are some factors to consider that will help you select the best JavaScript charts package for your business.

Cross-Browser Compatibility

Cross-browser compatibility matters a lot, especially when targeting a specific audience. For example, if you are looking forward to building a chart-based website or portal for government or enterprise clients, the chances are high they are still using an older version of Internet Explorer.

In this case, a chart-based website or portal that can only work with modern browsers will not serve the purpose.

So it is better to go with FusionCharts that work on all browsers rather than with D3.JS, Chart.js, or Chartist.js, which only work on modern browsers.

Cross-Device Compatibility

It matters whether your application will be used primarily on desktop or mobile or both. You have to be assured that you are providing a consistent user experience on larger as well as on smaller screens.

On the other hand, if you make an application only for mobile, you have to take into account the size of the library as lower processing power and browsing-speed issues can cause you trouble. So in this case, it is better to go with a package with a smaller footprint.

👉 FusionCharts outperforms when it comes to cross-device compatibility.

Range of Available Javascript Charts

Most charting libraries have collective packages in which similar charts are grouped (maps, widgets, stock charts, and so on). In this case, most people go with a particular package that meets only their current demands. They do not consider their future needs.

It is good to go with a slightly larger package if it is available at a slightly higher price. This will be beneficial when you have more requirements in the future as the larger package will offer you more freedom when it comes to building interactive financial charts and graphs.

Customization

The charting library must be flexible enough to make necessary changes whenever needed. Whether it’s about adding custom shapes, configuring legends, attaching event handlers, managing chart life cycle, or applying themes, there must be no issue with making changes when required.

It is better to go with an easily customizable library, especially when you have to create a beautiful design. You can go with FusionCharts and Highlights as they strike the perfect balance between complexity and customization.

👉FusionCharts offers you a lot of freedom when it comes to making desired changes and with minimum effort.

Performance

Size of the library, memory usage, garbage collecting, number of browser repaint cycles, rendering time, and re-rendering time are some factors that can make or break the performance.

If you have to plot fewer data points, you need not worry, as most libraries are capable of performing on that scale. But if you are looking to render millions of data points, performance becomes the main concern as every fraction of a second counts.

These seconds are going to have a huge impact when aggregated.

After going through these factors, you know enough to select the best JavaScript charts package for you. Then why not create JavaScript charts using FusionCharts to see a live demo.

How to Create JavaScript Charts Using FusionCharts

To create JavaScript charts, you need to install the FusionCharts library and all other dependencies on your system. Once installed, you need to render a chart using plain JavaScript.

When it comes to creating JavaScript charts using FusionCharts, it can be done in three different ways.

  1. Using CDN
  2. Via NPM
  3. Using local files

Choose the one that best fits your situation based on the technology you are using.

Let’s begin.

1. Using CDN (Content Delivery Network)

Step 1: Include FusionCharts core library

To integrate FusionCharts into your website, include FusionCharts JavaScript from CDN in your static HTML file. Use the code below to do so.

<head>
<!– Step 1 – Include the fusioncharts core library –>
<script type=”text/javascript”src=”https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js”></script>

Step 2: Include the FusionCharts theme

 After including the FusionCharts core library, you have to add the FusionCharts theme file. This will apply the style to your charts. Use the code below to do so.

<head>
<!– Step 1 – Include the fusioncharts core library –>
<script type=”text/javascript” src=”https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js”></script>
<!– Step 2 – Include the fusion theme –>
<script type=”text/javascript” src=”https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js”></script>
</head>

Step 3: Prepare the data

After installing the FusionCharts suite, prepare the chart data. Here we have taken the data of the coal reserves present in various countries and displayed it in tabular form below:

Country No. of Coal Reserves
Venezuela 290K
Saudi Arabia 260K
Canada 180K
Iran 140K
Russia 115K
UAE 100K
US 30K
China 30K

Fusion Charts takes the data in JSON format so the data in the tabular form will take on a new shape, as shown below:

// Preparing the chart data
const chartData = [
{
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”
}
];

 Step 4: Configure your chart

Once the data is ready, you can work on positioning and styling. You are also required to give context to your chart.

Type: It defines the type of chart you are going to plot.

Height and width: Height’ and ‘width’ are attributes that are used to define the size of the chart.

Chart: The ‘chart’ object under ‘DataSource’ carries options for chart configuration. It contains a caption, theme, and display formats for numbers.

// Create a JSON object to store the chart configurations
const chartConfigs = {
//Specify the chart type
type: “column2d”,
//Set the container object
renderAt: “chart-container”,
//Specify the width of the chart
width: “100%”,
//Specify the height of the chart
height: “400”,
//Set the type of data
dataFormat: “json”,
dataSource: {
chart: {
//Set the chart caption
caption: “Countries With Most Coal Reserves [2017-18]”,
//Set the chart subcaption
subCaption: “In MMbbl = One Million barrels”,
//Set the x-axis name
xAxisName: “Country”,
//Set the y-axis name
yAxisName: “Reserves (MMbbl)”,
numberSuffix: “K”,
//Set the theme for your chart
theme: “fusion”
},
// Chart Data from Step 2
data: chartData
}
};

Step 5: Render the chart

Combine everything that has been done so far and render the chart. The consolidated code is given below:

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<!– Include fusioncharts core library –>
<script type=”text/javascript” src=”https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js”></script>
<!– Include fusion theme –>
<script type=”text/javascript” src=”https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js”></script>
<script type=”text/javascript”>
//STEP 2 – Chart Data
const chartData = [{
“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”
}];//STEP 3 – Chart Configurations
const chartConfig = {
type: ‘column2d’,
renderAt: ‘chart-container’,
width: ‘100%’,
height: ‘400’,
dataFormat: ‘json’,
dataSource: {
// Chart Configuration
“chart”: {
“caption”: “Countries With Most Coal Reserves [2017-18]”,
“subCaption”: “In MMbbl = One Million barrels”,
“xAxisName”: “Country”,
“yAxisName”: “Reserves (MMbbl)”,
“numberSuffix”: “K”,
“theme”: “fusion”,
},
// Chart Data
“data”: chartData
}
};
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
});</script>
</head>
<body>
<div id=”chart-container”>FusionCharts XT will load here!</div>
</body>
</html>

Once the Process of Rendering the Chart Is Completed Successfully, the Chart Will Be Created as Shown Below:

2. Via NPM

Step 1: Create a project folder

To integrate FusionCharts into your site via NPM, you are required to create a project folder. The command for doing so is given below:

$ mkdir projectName
$ cd projectName

 Step 2: Install web pack

After creating a project folder, you need to install the latest web pack release. The command for doing so is given below:

 

$ npm install webpack webpack-cli —savedev

 Step 3: Install the FusionCharts package

Install the FusionCharts package using the command given below:

$ npm install fusioncharts

Once the FusionCharts package is installed successfully, create the following directory structure and files, along with their contents:

  • Create a new src folder inside the project directory. Once created, create an index.js file within it.
  • Create a new dist folder inside the project directory, then create an index.html file within it.

Once created, the structure of the directory will look like this:

Step 4: Import the required dependencies

Once the FusionCharts components are installed successfully, import all the required dependencies.

// Include the core fusioncharts file from core
import FusionCharts from ‘fusioncharts/core’;
// Include the chart from viz folder
import Column2D from ‘fusioncharts/viz/column2d’;
// Include the fusion theme
import FusionTheme from ‘fusioncharts/themes/es/fusioncharts.theme.fusion’;
// Add the chart and theme as dependency
// E.g. FusionCharts.addDep(ChartType)
FusionCharts.addDep(Column2D);
FusionCharts.addDep(FusionTheme);

Step 5: Preparing the data

After installing the FusionCharts suite, prepare the chart data. Here we have taken the data of the coal reserves present in various countries and displayed it in tabular form below:

Country No. of Coal Reserves
Venezuela 290K
Saudi Arabia 260K
Canada 180K
Iran 140K
Russia 115K
UAE 100K
US 30K
China 30K

FusionCharts takes the data in JSON format, so the data in the tabular form will take on a new shape as shown below:

 

// Preparing the chart data
const chartData = [
{
    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”
}
];

Step 6: Configure your chart

Once the data becomes ready, you can work on positioning and styling. You are also required to give context to your chart.

  • Type: It defines the type of chart you are going to plot.
  • Height and width: Height’ and ‘width’ are attributes that are used to define the size of the chart.
  • Chart: The ‘chart’ object under ‘DataSource’ carries options for chart configuration. It contains a caption, theme, and display formats for numbers.

 

// Create a JSON object to store the chart configurations
const chartConfigs = {
//Specify the chart type
  type: “column2d”,
//Set the container object
  renderAt: “chart-container”,
//Specify the width of the chart
  width: “100%”,
//Specify the height of the chart
  height: “400”,
//Set the type of data
  dataFormat: “json”,
  dataSource: {
    chart: {
//Set the chart caption
      caption: “Countries With Most Coal Reserves [2017-18]”,
//Set the chart subcaption
      subCaption: “In MMbbl = One Million barrels”,
//Set the x-axis name
      xAxisName: “Country”,
//Set the y-axis name
      yAxisName: “Reserves (MMbbl)”,
      numberSuffix: “K”,
//Set the theme for your chart
      theme: “fusion”
},
// Chart Data from Step 2
    data: chartData
}
};

 Step 7: Render the chart

Once the chart is configured, you will render it.

You can use the FusionCharts package for npm in two ways:

  • FusionCharts ES Module
  • FusionCharts CJS Module

Include essential files in index.js and import the FusionCharts dependency. The consolidated code for ES6 and CJS are shown below:

ES6

// Include the core fusioncharts file from core  –
import FusionCharts from ‘fusioncharts/core’;// Include the chart from viz folder
// E.g. – import ChartType from fusioncharts/viz/[ChartType]
import Column2D from ‘fusioncharts/viz/column2d’;

// Include the fusion theme
import FusionTheme from ‘fusioncharts/themes/es/fusioncharts.theme.fusion’;

// Add the chart and theme as dependency
// E.g. FusionCharts.addDep(ChartType)
FusionCharts.addDep(Column2D);
FusionCharts.addDep(FusionTheme);

//STEP 2 – Chart Data
const chartData = [{
“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”
}];

//STEP 3 – Chart Configurations
const chartConfig = {
type: ‘column2d’,
renderAt:
‘chart-container’,
width:
‘100%’,
height:
‘400’,
dataFormat:
‘json’,
dataSource: {
// Chart Configuration
“chart”: {
“caption”: “Countries With Most Coal Reserves [2017-18]”,
“subCaption”: “In MMbbl = One Million barrels”,
“xAxisName”: “Country”,
“yAxisName”: “Reserves (MMbbl)”,
“numberSuffix”: “K”,
“theme”: “fusion”,
},
// Chart Data
“data”: chartData
}
};

// STEP 4 – Create an Instance with chart options and render the chart
var chartInstance = new FusionCharts(chartConfig);
chartInstance.render();

CJS

var FusionCharts = require(‘fusioncharts’);

// Require charts from fusioncharts
var Charts = require(‘fusioncharts/fusioncharts.charts’);

// Require theme from fusioncharts
var FusionTheme = require(‘fusioncharts/themes/fusioncharts.theme.fusion’);

// Add charts and themes as dependency
Charts(FusionCharts);
FusionTheme(FusionCharts);

//STEP 2 – Chart Data
const chartData = [{
“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”
}];

//STEP 3 – Chart Configurations
const chartConfig = {
type: ‘column2d’,
renderAt: ‘chart-container’,
width: ‘100%’,
height: ‘400’,
dataFormat: ‘json’,
dataSource: {
// Chart Configuration
“chart”: {
“caption”: “Countries With Most Coal Reserves [2017-18]”,
“subCaption”: “In MMbbl = One Million barrels”,
“xAxisName”: “Country”,
“yAxisName”: “Reserves (MMbbl)”,
“numberSuffix”: “K”,
“theme”: “fusion”,
},
// Chart Data
“data”: chartData
}
};

// STEP 4 – Create an Instance with chart options and render
var chartInstance = new FusionCharts(chartConfig);
chartInstance.render();

After including the essential files in the index.js and importing the FusionCharts dependency, you are required to specify the chart container within the index.html file.

<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<div id=”chart-container”>Fusioncharts will render here</div>
<script src=”index.js”></script>
</body>
</html>ṣ

Finally, Run the Npx Webpack Command in the Terminal. Once You Are Done With This, Open the Index.HTML File to See the Chart.

3. Using local files

 Step 1: Include the FusionCharts core library

You can also integrate FusionCharts into your website using local files by including the FusionCharts JavaScript files in your static HTML file. Use the code below to do so.

<head>
<!– Step 1 – Include the fusioncharts core library –>
<script type=”text/javascript” src=”path/to/local/fusioncharts.js”></script>

 Step 2: Include the FusionCharts theme

Once the FusionCharts core library is included, you need to include the FusionCharts theme file. This will give style to your chart. Use the code below to do so.

 

<head>
<!– Step 1 – Include the fusioncharts core library –>
<script type=“text/javascript” src=“path/to/local/fusioncharts.js”></script>
<!– Step 2 – Include the fusion theme –>
<script type=“text/javascript” src=“path/to/local/themes/fusioncharts.theme.fusion.js”></script>
</head>

 Step 3: Prepare the data

After installing the FusionCharts suite, prepare the chart data. Here we have taken the data of the coal reserves present in various countries. The data is shown in tabular form below:

Country No. of Coal Reserves
Venezuela 290K
Saudi Arabia 260K
Canada 180K
Iran 140K
Russia 115K
UAE 100K
US 30K
China 30K

FusionCharts only takes the data in JSON format, so the data in tabular form will take on a new shape as shown below:

 

// Preparing the chart data
const chartData = [
{
    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”
}
];

Step 4: Configure your chart

Once the data becomes ready, you have to work on positioning and styling. You are also required to give context to your chart.

  • Type: It defines the type of chart you are going to plot.
  • Height and width: Height’ and ‘width’ are attributes that are used to define the size of the chart.
  • Chart: The ‘chart’ object under ‘DataSource’ carries options for chart configuration. It contains a caption, theme, and display formats for numbers.
// Create a JSON object to store the chart configurations
const chartConfigs = {
//Specify the chart type
type: “column2d”,
//Set the container object
renderAt: “chart-container”,
//Specify the width of the chart
width: “100%”,
//Specify the height of the chart
height: “400”,
//Set the type of data
dataFormat: “json”,
dataSource: {
chart: {
//Set the chart caption
caption: “Countries With Most Coal Reserves [2017-18]”,
//Set the chart subcaption
subCaption: “In MMbbl = One Million barrels”,
//Set the x-axis name
xAxisName: “Country”,
//Set the y-axis name
yAxisName: “Reserves (MMbbl)”,
numberSuffix: “K”,
//Set the theme for your chart
theme: “fusion”
},
// Chart Data from Step 2
data: chartData
}
};

 Step 5: Render the chart

Once the chart is configured successfully, you can render it. The consolidated code is given below:

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<!– Include fusioncharts core library –>
<script type=”text/javascript” src=”path/to/local/fusioncharts.js”></script>
<!– Include fusion theme –>
<script type=”text/javascript” src=”path/to/local/themes/fusioncharts.theme.fusion.js”></script>
<script type=”text/javascript”>
//STEP 2 – Chart Data
const chartData = [{
“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”
}];// STEP 3 – Chart Configurations
const chartConfig = {
type: ‘column2d’,
renderAt: ‘chart-container’,
width: ‘100%’,
height: ‘400’,
dataFormat: ‘json’,
dataSource: {
// Chart Configuration
“chart”: {
“caption”: “Countries With Most Coal Reserves [2017-18]”,
“subCaption”: “In MMbbl = One Million barrels”,
“xAxisName”: “Country”,
“yAxisName”: “Reserves (MMbbl)”,
“numberSuffix”: “K”,
“theme”: “fusion”,
},
// Chart Data
“data”: chartData
}
};
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
});</script>
</head>
<body>
<div id=”chart-container”>FusionCharts XT will load here!</div>
</body>
</html>

Once the Process of Rendering the Chart Is Completed Successfully, the Chart Will Be Created as Shown Below:

Well done!

You have successfully built a JavaScript chart using FusionCharts. Now you will be able to easily create more JavaScript charts like this.

Final Takeaway

Whether you want to build a dashboard for desktop or for mobile, at some point you are going to deal with the data complexity.

It is better to save both time and money by going with FusionCharts. It doesn’t matter if the data is simple or complex, FusionCharts lets you create beautiful charts and maps for your dashboard without a need to put in a lot of effort.

It offers more than 100 interactive charts and 2,000+ data-driven maps with complete documentation on its usage.

Apart from this, there are 800,000 developers from 28,000+ companies who prefer FusionCharts. Moreover, now you can easily build JavaScript charts using FusionCharts, so don’t miss an opportunity to build interactive financial charts and graphs that can generate leads.

____________________________________________

Some other articles you might find of interest:

Have you ever wondered what the internet of the future looks like?

What is the Metaverse, and Are You Ready For Its Arrival?

Boost your Android Performance with these tips:

Essential Tips to Increase Android’s Performance

Explore more earning opportunities through your writing skills:

Top 10 Affiliate Marketing Programs for Blogs in 2021