Render Charts using FusionCharts and JavaFX

JavaFX is a software platform used to create and deliver desktop applications. With large set of built-in GUI components like text fields, webviews, buttons, tables and many more, it is very easy to create a desktop application using JavaFX. As this platform has support for almost all the operating systems (Microsoft Windows,Linux, macOS) it can run across a wide variety of devices.

This tutorial will guide you on how you can render charts using FusionCharts and JavaFX. Let’s get started with the requirements and the steps mentioned below.


Before we start with the requirements and steps to implement charts using FusionCharts and JavaFX, let’s first discuss about the essentials of user capabilities to implement it.

  • Must be familiar with the basic concepts of Java.
  • Must have a basic idea of how to create JavaFX application.
  • Must know the basics of HTML.

System Requirements

Creating Chart Object

To create a chart object, firstly, create a JavaFX application.
Once the application has been created, create a Java class which will contain buttons and a webview. Use an event handler on the button, to show the chart as an output in the webview.

Following are the step by step code snippets of .java code to create a chart object:

Step 1:

First, import all the packages required to create the application.

Step 2:

Create a button object, which on click will fire an event. The event will fetch the path of the external location of the file which in return will render the chart. Once done the chart will be displayed in the webview.

  • Include FusionCharts library files which are required to render the chart.
  • To render the chart in the webview run the HTML file.
  • Create a button object, which on click will run the HTML file.

Following is the code of the chart to be rendered using the HTML file:

Step 3:

To render the chart using the static string, pass the entire code as string to the engine.loadContent method. Refer to the following code for engine.loadContent method:

The full java code for the sample looks as under:

Rendering the Chart

Now, the .java file is all set to run in your application. Any of the two buttons can be selected to render your chart using following two ways:

  • Using an External File
  • Using a Static String

For both the methods, there are 2 separate buttons by which the chart can be rendered. Following is the output for the same:

Rendering Chart using an External File

Rendering chart from a Static String

If you find any difficulty rendering the chart or with the configuration files, you can download this demo project from here and import it on your system.

Was There a Problem Rendering the Charts?

In case something went wrong and you are unable to see the chart, check for the following:

  • The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.
  • If the chart does not show up at all, check if the fusioncharts.js and FusionCharts wrapper was loaded. Also, check if the path to the fusioncharts.js and the files is correct, and whether the files exist in that location.

Leave a Comment