Topics in Part VI
- Creating a Statistics Chart to display birthday distribution.
Other Tutorial Parts
- Part I - Scene Builder
- Part II - Model and TableView
- Part III - Interacting with the User
- Part IV - CSS Styling
- Part V - Storing Data as XML
- Part VI - Statistics Chart
- Part VII - Deployment with e(fx)clipse
All our people in the AddressApp have a birthday. Wouldn’t it be nice to have some statistics about when our people celebrate their birthday.
We’ll use a Bar Chart containing a bar for each month. Each bar shows how many people have their birthday in that particular month.
The Statistics FXML View
- We start by creating a
BirthdayStatistics.fxmlfile inside our
ch.makery.address.viewpackage (Right-click on package | New | other… | New FXML Document).
- Open the
BirthdayStatistics.fxmlfile in Scene Builder.
- Select the root
AnchorPaneand set the Pref Width to 620 and the Pref Height to 450.
- Add a
- Right-click on the
BarChartand select Fit to Parent.
- Save the fxml file, go to Eclipse and refresh the project.
Before we’ll come back to Scene Builder, we’ll first create the controller and wire everything up in our MainApp.
The Statistics Controller
In the controller package
ch.makery.address create a Java class called
Let’s first take a look at the entire controller class before I start explaining:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
How the Controller Works
The controller will need access to two elements from our FXML file:
barChar: It has the type
Stringis used for the month on the x-axis and the
Integeris used for the number of people in a specific month. We’ll use the reference to the
BarChartto set our data.
xAxis: We’ll use this to add the month Strings.
initialize()method fills the x-axis with a list of all the months.
setPersonData(...)method will be accessed by the
MainAppclass to set the person data. It loops through all persons and counts the birthdays per month.
createMonthDataSeries(...)method takes the array with a number for each month and creates the chart data. For each month a new
XYChart.Dataobject is created with the month name and the number of people having their birthday in this month. Each
XYChart.Dataobject will represent one bar in the chart.
Connecting View and Controller
BirthdayStatistics.fxmlin Scene Builder.
- Select the root
AncherPaneand add the
BirthdayStatisticsControlleras controller (in Code View).
- Select the
barChartas fx:id Property.
- Select the
xAxisas fx:id Property.
- You may add a title to the chart, remove the legend, etc. for further styling the chart.
Connecting the View/Controller with MainApp
We’ll use the same mechanism for our birthday statistics that we used for the edit person dialog: A simple popup dialog containing.
Add the following method to your
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Everything is set up, but we don’t have anyone who actually calls the new
showBirthdayStatistics() method. Luckily we already have a menu in
RootLayout.fxml that can be used for this purpose.
Show Birthday Statistics Menu
RootLayoutController add the following method which will handle user clicks on the show birthday statistics menu item:
1 2 3 4 5 6 7
Now open the
RootLayout.fxml file with Scene Builder.
Select the Show Statistics
MenuItem and choose
On Action (in Code view)
Remember: You might need to remove the controller from the root, hit enter and set it again if the
handle... method does not appear. Because of a bug in Scene Builder (fixed in Scene Builder 1.1 beta 17 and above!).
Go to Eclipse, refresh the project and test it.
More Information on JavaFX Charts
A good place for more information is the official Oracle tutorial on Using JavaFX Charts.
In the last tutorial Part VII we will finally deploy our application (i.e. package and deliver the app to our users).
Source of Tutorial Part VI as Eclipse Project.