JavaFX Composer Simple Chart Tutorial

Design area overview
Elements of scene


This tutorial show basics of constructing graphs. Today, we are displaying graphs only in symbolic way so this tutorial will avoid setting advanced visual properties for graphs. Please, take into account that charts are sort of experimental feature in JavaFX 1.2 and as so, there is a lot of pit-falls.


Create a new JavaFX project using "JavaFX | JavaFX Desktop Business Application" project template. A project should be created and an empty design file should be opened in an Editor area. Drop the BarChart component from palete to scene. Resize it to fit scene sizes. The default size for chart is 500*400px so we need to size it down to our scene. You can use new D&D snapping to position it at best location.

Adding Data

The most important part of chart are displayed data. According to JavaFX Chart API we need to create BarChartSeries object which holds data. Let's D&D it from palette. This creates new resource called barChartSeries under Resources in navigator. Go to properties window and select open data property dialog. Enter data as seen on image bellow:


Now we need to associated our barChartSeries with barChart component created at the begging. Select barChart compoment within design area or navigator and go to properties window. Open data property dialog. And click on "Add Existing" button and from drop down menu select barChartSeries resource.


Now, we have associated data with chart. Unfortunately we fall into biggest pit-fall of the Graphs. Our data will not be rendered correctly, if all.

Configuring axises

The graphs can not render correctly without property set axises. Because of this limitation is JavaFX composer automaticaly adding two axises to graph object. In this case called categoryAxis (the X axis) and numberAxis (the Y axis). To set up the numberAxis just select this axis in navigator and set upperBound to 150.0. The tricky part is how to set-up categoryAxis. Select categoryAxis in navigator and go to properties. Open categories property dialog. Here enter data as seen on image bellow. Remember: There is always required to provide same categories as in barChartSeries data property.


Final Touches

As final touche we create new Color resource and associate it with barChartSeries fill property to override default color. For this totorial i used R:0.0 G:0.6 B:0.0 A:1.0. There is a lot of more properties available on graph, axis and series object to alter appearence.

Now is the time to start application. The result should be as seen below:


Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo