One of the really cool things in the JavaFx 1.2 release are the addition of Charts. The charts look great but the documentation is far from sufficient. So I wrote down this post to help out a little.
Pie chart
Lets start with a pie chart. The most important part of a pie chart definition is the sequence of data. For the example chart, there are three PieChart.Data instances in the data sequence. Netbeans' code completion doesn't really work anymore when working on inner classes (such as PieChart.Data) so don't expect to get any help from the IDE. Each data point must specify a value (the percentage of the section), the fill (color of the section) and a label.
PieChart {
title: "Language Popularity (Tiobe Index)"
data: [
PieChart.Data {
value: 20.452
label: "Java"
}
PieChart.Data {
value: 4.530
label: "C#"
}
PieChart.Data {
value: 10.419
label: "C++"
}
PieChart.Data {
value: 17.319
label: "C"
}
PieChart.Data {
value: 9.269
label: "PHP"
}
PieChart.Data {
value: 7.789
label: "Visual Basic"
}
PieChart.Data {
value: 100 - 20.452 - 4.530 - 10.419 - 17.319 - 9.269 - 7.789
label: "Other"
}
]
}
The 3D version of the chart works exactly the same, just use the PieChart3D class instead.
Scaling
For scaling a chart you can simply use the scaleX and scaleY properties. Rendering will be smooth even when you scale to large values because the charts are drawn directly, no pictures are used.
Bar chart
Next where going to look at the bar chart. A bar chart's data (BarChart.Data) is grouped in series (BarChart.Series). Take the following chart as an example, it shows the top 6 of the Tiobe index.
In this chart there are two series: 2008 and 2009. Each series contains data for each language. The names of the series will be rendered in the legend. The languages are specified in the categories property of the CategoryAxis. The bounds of the value axis is specified in the valueAxis.
BarChart {
categoryAxis: CategoryAxis {
categories: ["Java", "C", "C++", "PHP", "Visual Basic", "C#"]
}
valueAxis: NumberAxis {
lowerBound: 0
upperBound: 25
tickUnit: 20
label:"Rating (%)"
}
data: [
BarChart.Series {
name: "2008"
data: [
BarChart.Data {
value: 20.452 + 0.89
}
BarChart.Data {
value: 17.319 - 1.37
}
BarChart.Data {
value: 10.419 + 0.27
}
BarChart.Data {
value: 9.269 + 0.26
}
BarChart.Data {
value: 7.789 + 2.66
}
BarChart.Data {
value: 4.540 - 0.54
}
]
}
BarChart.Series {
name: "2009"
data: [
BarChart.Data {
value: 20.452
}
BarChart.Data {
value: 17.319
}
BarChart.Data {
value: 10.419
}
BarChart.Data {
value: 9.269
}
BarChart.Data {
value: 7.789
}
BarChart.Data {
value: 4.540
}
]
}
]
}
The 3D version of the bar chart works exactly the same again.
Line chart
Next is the line chart. Just like the bar chart, a line chart's data is divided into series. Each serie defines values for a line on the graph. In the example graph there are two; one for the temperatures in 2008, and one for 2009. It's important to first specify the upper and lower bounds of the xAxis and yAxis. If you don't, your graph won't display anything. Also set the ticketcount for the xAis correctly. In the example code you'll also see that I specified a formatTicketLabel funtion. This function is used to create String values of each value.
All there is left is specify the data points for the graph. You only need to set the value property.
LineChart {
title: "Daily mean temparatures in July (data from KNMI)"
xAxis: NumberAxis {
tickUnit:1
lowerBound:8
upperBound: 12
label: "Day (in July)"
formatTickLabel: function(val) {numberFormatter.format(val)}
}
yAxis: NumberAxis {
lowerBound: 0
upperBound: 30
label: "Temperature"
}
data: [
LineChart.Series {
name: "2009"
data: [
LineChart.Data {
xValue: 8
yValue: 15.6
}
LineChart.Data {
xValue: 9
yValue: 15.1
}
LineChart.Data {
xValue: 10
yValue: 14.4
}
LineChart.Data {
xValue: 11
yValue: 16.6
}
LineChart.Data {
xValue: 12
yValue: 17.5
}
]
}
LineChart.Series {
name: "2008"
data: [
LineChart.Data {
xValue: 8
yValue: 14.7
}
LineChart.Data {
xValue: 9
yValue: 15.6
}
LineChart.Data {
xValue: 10
yValue: 16.9
}
LineChart.Data {
xValue: 11
yValue: 16.6
}
LineChart.Data {
xValue: 12
yValue: 15.0
}
]
}
]
}
Bubble chart
The last chart is the bubble chart. The bubble chart is similar to the line chart, but introduces a third series of values. For the example graph I used the sunshine duration. This third series of data is displayed as a bubble. The bigger the value, the bigger the bubble. This value is specified in the BubbleChart.Data radius property.
BubbleChart {
scaleBubbleRadiusUsingAxis: false
title : "Daily mean temparatures in July (data from KNMI)"
xAxis : NumberAxis{
lowerBound: 7
upperBound : 13
label: "Day"
visible: true
axisStrokeWidth: 1
tickUnit : 1
tickLabelsVisible: true
}
yAxis : NumberAxis{
lowerBound: 0
upperBound : 30
tickUnit: 1
label: "Temperature"
visible: true
tickLabelsVisible: true
}
data: [
BubbleChart.Series {
name: "Sunshine duraction in 0.1 hour"
data: [
BubbleChart.Data {
xValue: 8
yValue: 15.6
radius: 47
}
BubbleChart.Data {
xValue: 9
yValue: 15.1
radius: 69
}
BubbleChart.Data {
xValue: 10
yValue: 14.4
radius: 16
}
BubbleChart.Data {
xValue: 11
yValue: 16.6
radius: 57
}
BubbleChart.Data {
xValue: 12
yValue: 17.5
radius: 45
}
]
}
]
}
You can run the demo as a Webstart application.
Posted
10-07-2009 16:03
by
Paulb