With the increase of data inside companies, businesses have grown their interest in data visualization to get a broad insight into the available data. FusionCharts is a graph maker that lets you create insightful, engaging, and impactful data presentations. In this article, we have put together six simple steps that will help you to master FushionCharts for graph making.
Table of Contents
How to create an HTML file?
First of all, let’s start off by creating a simple HTML file. The styles and the heading can be written in the head section of the HTML file as given below. Components are rendered side by side in the style section.<title>Fusion Charts</title> <style> .chart-container { width: 50%; float: left; padding: 30px; border: 2px solid lightgreen; } </style> <center><h1>Bar Chart</h1></center>
How to import libraries?
In order to work further with FusionCharts, the libraries need to be imported. Therefore, the FusionCharts core library and the Fusion theme are required after you have your HTML file. It can be imported in the header of the HTML file.https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js
How to put your data together?
In FusionCharts, data can be handled both in XML and JSON format. However, the two types can be picked based on the requirement as well as by considering the easy path for the developer. We’ll use a simple dataset showing the percentage of leaves taken by each employee for this example. This data must be in the form of a JSON or XML object for FusionCharts to work as mentioned above. In this scenario, we’ll apply JSON. Using the <script> tag, add the data script as ‘text/javascript’ to the HTML header.const noOfLeaves = [
{
id: "12",
label: "Mike",
value: "1",
showLabel: "1"
},
{
id: "21",
label: "Sam",
value: "12",
showLabel: "1"
},
{
id: "23",
label: "Alethia",
value: "3",
showLabel: "1"
},
{
id: "32",
label: "Eurnica",
value: "6",
showLabel: "1"
},
{
id: "34",
label: "Antila",
value: "2",
showLabel: "1"
},
{
id: "43",
label: "Ausgen",
value: "5",
showLabel: "1"
}
];
How to specify chart config?
We are using a JSON object to define the chart configuration. We’ll keep the ‘type,’ and ‘renderAt’ values empty initially. Here ‘type’ provides the chart type, while ‘renderAt’ gives the HTML container in which the chart will be shown. It’s critical to specify a value for the ‘data’ parameter in the chart settings, which describes the actual data you’ll plot. The JSON for the chart configuration is as follows:var chartConfiguration = { type: "", renderAt: "", dataFormat: "json", dataSource: { chart: { caption: "Percentage of Employee leaves", xAxisName: "Emplyees", yAxisName: "% Leaves per year", numberSuffix: "%", theme: "fusion" }, data: employeeData }Apart from the above, let’s take a simple bar chart as an example in order to explain further. In the chartConfig JSON object, we must define the type as ‘column2d’ to generate a bar chart since we haven’t defined it initially. We’ll also have to plug in a container for the chart to be shown in. Within the content of the HTML file, add a div tag for the chart with id as ‘barchart-container.’Javascript code for generating the bar chart is as follows:
function renderBarChart(){ chartConfig.type = 'column2d'; chartConfig.renderAt = 'barchart-container'; var fusionchartsbar = new FusionCharts(chartConfig); fusionchartsbar.render(); } FusionCharts.ready(renderBarChart);The HTML file will be defined as follows
<div class="chart-container" id="barchart-container">Bar Chart Rendering!</div>
How to work with APIs?
Several functions are available in the FusionCharts JavaScript class API to help with implementation. They can be used in order to ease the process by reusing the predefined functions for our day-to-day functionalities inside the graph. The following is a list of some basic functions available. You can learn more about them in the documentation.| API Method signature | Purpose |
| render(chartParameters: Object) | FusionCharts uses this function as a compact constructor. |
| configure(name:string , value:string)orconfigure(configurations: Object) | Prior rendering the chart, this method adds the chart configuration. |
| render(renderAt: String)orrender(renderAt: HTMLNode) | This function creates a chart within a container element that has been supplied as a parameter. |
| setJSONData(JSON:Object)orsetJSONData(JSON:String) | The data of the chart is changed to the JSON string or Object given. |
| addEventListener(event:string, listener: function)oraddEventListener(events:Array, listener: function) | This function serves as an enhanced registration model for events. |
| removeEventListener(event:string, listener: function)orremoveEventListener(events:Array, listener: function) | For a specific event, function removes a designated event-listener function. |
| setXMLUrl(Url: String) | Sets or modifies the chart’s XML data to a given Url. |
| setJSONUrl(Url: String) | Sets or modifies the chart’s JSON and data to a given Url. |
| resizeTo(width:String, height:String) | This method can be used to resize an existing chart. |
How to work with events?
FusionCharts comes with a comprehensive set of events that allow you to interact with various graphs. There are two main things that should be looked upon when configuring events to a chart:- Choose the event you’d like to configure as well as the response you’d like it to have when it happens.
- Construct an event listener which ‘listens’ for the triggering event and responds appropriately.
var eventListener = function(eventObject, eventArguments) { console.log( eventObj.eventType + " was raised by the chart whose ID is " + eventObj.sender.id ); };Given below is how the ‘renderComplete’ event is used.
chart.addEventListener(“renderComplete”, myEventListener);
For further information on events and their implementation, please feel free to go through the FusionCharts documentation.
