JavaFXComposerSimpleChartTutorial
(→JavaFX Composer Simple Chart Tutorial) |
(→JavaFX Composer Simple Chart Tutorial) |
||
| Line 1: | Line 1: | ||
== JavaFX Composer Simple Chart Tutorial == | == JavaFX Composer Simple Chart Tutorial == | ||
| - | [[File:javafxcomposer-tutorial-graph-overview.png| | + | [[File:javafxcomposer-tutorial-graph-overview.png|180px|thumb|Design area overview]] |
| - | [[File:javafxcomposer-tutorial-graph-sceneElements.png| | + | [[File:javafxcomposer-tutorial-graph-sceneElements.png|180px|thumb|Elements of scene]] |
=== Goal === | === Goal === | ||
Revision as of 15:34, 12 February 2010
Contents |
JavaFX Composer Simple Chart Tutorial
Goal
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.
Preparation
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 propertie. 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:
