When I was doing my 3rd year project in university I needed a good looking chart to use in my user interface and now I have grown older (nearly 2 whole years!) I wish I would have turned to the charts in JavaFX rather than the ugly looking JChart2D API that I used. Now don’t get me wrong I’m not hating on JChart2D as it was easy to use and at the time I was really happy with it. But the charts / graphs that you can use in JavaFX look really good, they even come with some fancy animations by default. Okay, I’m finished hyping up these graphs, so I’m going to show you a little example application I wrote and hopefully you will feel the same about them as me…

areachart
AreaChart

Before you go any further I recommend that you read up on the basics of using JavaFX, my other post Getting started with JavaFX covers this.

In this post I will cover the basic use of a LineChart and AreaChart. The code is pretty simple and only requires a little bit of set up in the Controller and fxml. All you need to do is add the chart to the fxml code, give it a fx:id, set up it’s properties to your liking and your done.

This is this the set up for the LineChart. It defines the axis’s upper and lower bounds which will change the chart to look more like a graph. By setting the lower bound of the x or y axis will cause the chart to auto draw lines to represent the axis that will pass through the coordinates (0,0). The tickUnit represents how separated the grid lines on the chart are and autoRanging has also been disabled to prevent the chart from resizing itself to best fit the content that is on the chart. Finally a cursor has been defined, there are a few other cursors that can be used but I think the crosshair cursor looks the best.

Now you know how to create the chart your going to need to know how to plot some points onto it, unless you are happy with it being empty…

Here we are creating a new series object which will contain the plotted points.

final XYChart.Series<Double, Double> series = new XYChart.Series<Double, Double>() 

Then adding the plots to the series.

series.getData().add(new XYChart.Data<Double, Double>(x, Math.pow(x, 2)))

The plotted coordinates are stored in the form of (x,y) so in the example above the x coordinate has the value x and the y coordinate takes the value of x^2.

The final step is to add the series to the chart.

graph.getData().add(series)

After this has been done the points will be plotted onto the chart and will be connected together between each plot. The order that the plots (XYChart.Data) are added to the series does not matter as it will connect the closest plots to each other, although this isn’t relevant if your adding plots from loops.

Now that the basics of using these charts is covered lets get onto a larger example. Below is all the code your need to get setup.

MainAppLauncher is used to load run the JavaFX code.

MainAppController is the center piece of this code which controls the chart by handling the ActionEvents fired by button presses, which in this example leads to the lines being drawn onto the chart. I have also used some lambda expressions in this example to make the code shorter and a little bit fancier.

MyGraph is a wrapper object that takes in a XYChart which both LineChart and AreaChart are and has some methods to plot and clear lines. This code could be in MainAppController as there isn’t much code in it but it looks much tidier like this. It uses the plotLine code shown above although it is split out into a two methods instead.

MainApp.fxml contains all the code to set up the visuals of the application.

css.css is the stylesheet that is used for this application and is referenced inside of MainApp.fxml.

If you try to run this by yourself there are a few changes you will need to remember to make otherwise you are going to run into some errors. Make sure that you have your files structured well or understand how the paths to the files work. Below is a picture of how I structured my files.

tutorial-package-structure-2
Project Structure

Once you have sorted out your project structure remember to rename the paths in your code to match the structure and names you have chosen. This includes the path in MainAppLauncher and the paths to the controller and css in MainApp.fxml.

Once everything has been put together correctly you should be able to run it and it will look like this.

GraphExampleApplication1.PNG
Area Chart Example

And by pressing the Line Graph button it will look like this.

graphexampleapplication2
Line Chart Example

So now that you have seen a little bit of what the charts in JavaFX have to offer you might consider using it when your writing some of your own applications. They are pretty easy to setup and come with some decent styles and animations by default. I will write a few more posts on how to use some of the other charts in the future.