This article was contributed by FusionCharts, which allows for building beautiful web & mobile dashboards.
Data visualization is one of the essential skills for any analyst or professional. Different companies provide different charting options, either static or interactive.
Yet, users tend to prefer interactive charts as they can depict more information.
In this article, we will dive into interactive graphs. Additionally, we will discuss some minor features that will significantly impact the functionality of interactive graphs.
- What is an Interactive Graph?
- How do I Install FusionCharts to work with an Interactive Graph?
- How do I Implement an Interactive Graph?
- What Are the Seven Changes That’ll Make a Big Difference With Your Interactive Graph?
- Formatting Numbers
- Enable Zoom/Scroll/Pan
- Add Branding to your Chart
- Export Charts
- Tooltips
- Drill Down Charts
- Managing Space
- Ready to enjoy an Interactive Graph experience?
What is an Interactive Graph?
Unlike static charts, interactive graphs respond to different user actions. For example, users can pan, resize, and magnify an interactive graph. It also provides alternative data views, enlarges selected areas, and displays the complete dataset at a glance, based on the final application.
Although there are numerous tools for graphing and charting data, most only produce static graphs. In a nutshell, interactive graphs actively engage and deliver an interactive user experience. FusionCharts takes this interactivity further by supporting all types of user interactions with graphs.
How do I Install FusionCharts to work with an Interactive Graph?
FusionCharts can be installed using three methods.
The easiest method is to use a CDN. You have to include the FusionCharts JS scripts and the theme file from the CDN.
The code is as follows,
<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> The second method is to download Fushion chart files and use the local file paths in your code. The code is as follows, <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>
The third method is to install FushionCharts using NPM. You can run the following command if you have already installed Node.js on your machine.
npm install fusioncharts
How do I Implement an Interactive Graph?
First, download FusionCharts and copy JavaScript files under the JS folder in BITNAMI_INSTALL_DIR\apache2\htdocs. Then download jQuery 2.x. Next, create an Html page to render the chart as follows:
<!DOCTYPE html> <html> <head> <title>FusionCharts</title> </head> <body> <div id=”chart-container”>FusionCharts</div> <script src=”js/jquery-2.1.4.js”></script> <script src=”js/fusioncharts.js”></script> <script src=”js/fusioncharts.charts.js”></script> <script src=”js/themes/fusioncharts.theme.zune.js”></script> <script src=”js/app.js”></script> </body> </html>
Now you can fetch data from the server using jQuery. After retrieving data, integrate it with FusionCharts.
What Are the Seven Changes That’ll Make a Big Difference With Your Interactive Graph?
Can I format numbers in graphs?
FusionCharts allows users to format numbers in several ways.
- Number Prefix – Users can add prefix characters to all values to emphasize the values shown on your chart. The “numberprefix” attribute can be used to define the attribute.
- Number Suffix – Users can add suffix characters to all data to help visitors understand your chart. The “numbersuffix” attribute can be used to define the attribute.
- Dual Y-axis – You can use the attributes: prefix and suffix to add prefix or suffix to both Y-axes in a multi-series chart with two Y-axes. The primary Y-axis can be defined as numberPrefix and numberSuffix, while the secondary Y-axis can be defined as sNumberPrefix and sNumberSuffix.
- Number Format – Numeric values are automatically formatted in FusionCharts. In some instances, FusionCharts automatically separates values with commas and also allows configuring decimal places.
- Decimal and Thousand Separators – Different countries use different decimal and thousand separators characters. Therefore FusionCharts enables customizing the chart based on the country.
- Recursive Number Scaling – The need for recursive number scaling arises when there are number scales configured for your chart. You may present the chart data by dividing the specified number scale into tiny pieces.
How can I enable Zoom/Scroll/Pan?
FusionCharts lets you visualize a large amount of data while also providing interactive zooming, scrolling, and panning options. You can simply zoom into any data set, pinpoint a specific data point, and plan to evaluate it with the other data. Following are some features provided by FusionCharts:
- Zooming
- Zoom Scatter
- Panning
- Scrolling
Can I add branding to the charts?
Wouldn’t it be great if you could incorporate your branding on the chart for the end consumers?
You can! Place the corporate logo/text and a link for your firm’s homepage in a prominent location. Some logo images can be saved as pictures and used in newsletters as images.
Can I export charts?
You may export charts, maps, and gauges from FusionCharts in various formats, including pictures, Excel spreadsheets, and PDF files. The export properties can be customized in different ways:
- Customize Titles in Export Menu
- Set Name of the Exported File
- Export at the Client Side
- Exporting via Export API Method
- Exporting All the Plots in a Scroll Chart
- Batch Export
- CSV/SVG data in a Text Area
Can I have tooltips?
Tooltips can be used to show text once hovered over a data point. They can be used to display different contextual data. You can implement tooltips in FusionCharts in the following ways:
- Default Tooltip
- Tooltip using Macros
- Consolidated Tooltip
- Images in Tooltip
- HTML Formatting
- A chart in a Tooltip
- Plot Color in Tooltext
Can I create Drill Down charts?
FusionCharts can be used to create Drill Down charts, with individual data plots acting as hotspots. Spectators can open up a new chart by clicking on a plot containing extra data specific to that plot. All the charts of FusionCharts include Drill Down capabilities except the Zoom Line chart. Drilldown charts can be customized using the following methods:
- Using j-prefix
- Using Data URL Method
- Using Data String Method
- Using Linked Charts
- Using Thumbnails
- Drill Down Event API
Can I manage my space effectively?
FusionCharts comes with many innovative space management tools that help you organize charts on pages in a logical and space-saving manner.
For example, vertically stacked charts are automatically positioned so that their columns, axes, and overall space are all evenly aligned, giving the page an organized appearance. So, for example, if you stack numerous charts vertically inside a column on a page, the clever space management of FusionCharts will align them consistently.
Ready to enjoy an Interactive Graph experience?
FusionCharts comes for help whether you’re creating a dashboard for desktop or mobile, utilizing both simple or complex data. This software is easy to use, performs well, and has a nice appearance.
You may use it practically for all of your tasks, tweak it, and set it up to automatically produce charts with your data.
What does FusionCharts do for you?
FusionCharts is a JavaScript charting toolkit for online and corporate applications, with a user base of over 27,000 enterprises and 750,000+ developers around the world.
It comes with more than 90 charts and 1000 maps which can be used to turn your information into interactive and relevant dashboards.
Don’t waste time! Head over to FusionCharts and sign up to enjoy a seamless interactive graph experience!
Last Updated on May 26, 2022 1:15 pm CEST by Markus Kasanmascheff
