Creating Charts in JavaFX

Note: This entry is an excerpt from the upcoming "Pro JavaFX Platform" book written by Jim Weaver, Stephen Chin, Weiqi Gao, and myself. You can find out more by clicking on the book image to the right of this page. -- Dean The chart components included in JavaFX give developers an easy way to let the users of their applications visualize a wide variety of data. There are six kinds of charts supported in JavaFX 1.2:

• An Area Chart displays quantitative data like a line chart but with the area between the line and the horizontal axis shaded. Good for comparing the magnitude of two or more series of data.
• The Bar Chart is a good way to show data in a way that makes it easy to see how the data changes over time or under a set of different conditions. The data is represented as rectangular area or, in the case of a 3D chart, a cubic volume whose height corresponds to the value of the data point being displayed.
• Bubble Charts plot data points on a 2-dimensional grid and have the extra ability to display the relative magnitudes of the data by controlling the diameter of the point (or bubble) displayed at each XY coordinate.
• A Line Chart is a simple way to display 2-dimensional data points where each point is connected to the next point in the data series by a line.
• Pie Charts are typically used to display the relative percentages of a series of values on a circle. The value of each piece of data, as a percentage of the total, dictates how much of the circle’s area it takes up. In other words, the chart shows how big a slice of the pie each value represents.
• The Scatter Chart is used to plot the points of one or more series of data. These charts are typically used to show the correlation (or not) of the data by comparing how the data points are clustered (or not).

One of these things is not like the others. Other than the pie chart, all of these charts are meant to handle 2-dimensional data points as pairs of XY coordinates. The class hierarchy, shown below, of the chart components in the javafx.scene.chart package reflects this fact. The ChartDemo program, which is included with the Chapter 5 examples and is shown below, displays an example of each of these types of charts. In the next sections we’ll take a look at how to use each of these different charts and the many different ways that they can be customized.

Click the image to launch the demo

Common Chart Properties The Chart abstract base class contains several public variables that are common to all charts. One such property that all charts share is a title. The following public variables in the Chart class control the style, position, and content of the title displayed on a chart.

• title is a String whose contents will be displayed as the title of the chart. Setting this variable to null or an empty string (its default value) causes the chart to be rendered without a title.
• titleFill controls the fill color of the title text. Since it is of type Paint, it can be a solid color as well as a linear or radial gradient.
• titleFont allows you to set the Font to be used to render the title text.
• titleGap is a Number that specifies the number of pixels to leave as a gap between the title and the content of the chart.
• titleSide is an enumeration that specifies which side of the chart the title will appear on. Its type is javafx.scene.chart.part.Side and its possible values are TOP, BOTTOM, LEFT, and RIGHT.

All charts are also capable of displaying a legend. The legend is very useful when your charts are displaying more than one data series. It allows the user to easily see which of the plotted data points belongs to each of the data series. The public variables below affect how the legend is presented on a chart.

• legendGap is a Number that specifies the number of pixels to leave as a gap between the legend and the content of the chart.
• legendSide specifies which side of the chart the legend will appear on. Like titleSide, the possible values are TOP, BOTTOM, LEFT, and RIGHT.
• legendVisible is a Boolean value that controls whether the legend will be shown on the chart or hidden.

The Chart class also has a public-read variable named legend that provides a reference to the actual Legend object used by the chart. This object can be used to customize many aspects of the legend and will be discussed later in the section on customization. Pie Chart Getting a basic pie chart on the screen is very straightforward. All you really need is a sequence of PieChart.Data objects and a title string. For each value that you want to display in your pie chart you just create a PieChart.Data object and supply the value and a text string to use as the label for the value. The sequence of data objects is then used in the pie chart’s declaration. Since every chart is-a Node, you can just insert the chart into your scene graph in order to display it. The listing below demonstrates how to create and display a PieChart. Notice that we have used the titleFont variable to make the chart’s title stand out a little more. The source code is from PieChartIntro.fx, which can be found in the ChartIntro example project.

Stage {
  title: "Pie Chart"
  scene: Scene {
    content: [
      PieChart {
        title: "What Is Your Favorite Pie?"
        titleFont: Font { size: 24 }
        data: [
          PieChart.Data {
            value: 21
            label: "Pumpkin"
          }
          PieChart.Data {
            value: 33
            label: "Apple"
          }
          PieChart.Data {
            value: 17
            label: "Cherry"
          }
          PieChart.Data {
            value: 29
            label: "3.14159"
          }
        ]
      }
    ]
  }
}

This chart is rendered as shown in the image below. Note that right out of the box, the charts have a modern look with lighting and shading effects baked right in. You can also see that by default the title appears at the top of the chart. If you prefer a more 3-dimensional look to your pie charts, you can use the PieChart3D class instead of a PieChart. Everything in the listing above (aside from the class name) can remain the same and the result will have the appearance of a 3-dimensional disk instead of a circle. That concludes this entry. In the next entry, I'll continue this excerpt by taking a closer look at XYCharts.