What Is a Chart?

A chart is a graphical representation of data. Charts provide an easier way to analyze large volume of data visually. Typically, they are used for monitoring and reporting purposes. Different types of charts exist. They differ in the way they represent the data. Not all types of charts are suitable for analyzing all types of data. For example, a line chart is suitable for understanding the comparative trend in data, whereas a bar chart is suitable for comparing data in different categories.

JavaFX supports charts, which can be integrated in a Java application by writing few lines of code. It contains a comprehensive, extensible Chart API that provides built-in support for several types of charts.

Understanding the Chart API

The Chart API consists of a number of predefined classes in the javafx.scene.chart package. Figure 20-1 shows a class diagram for classes representing different types of charts.

The abstract Chart is the base class for all charts. It inherits the Node class. Charts can be added to a scene graph. They can also be styled with CSS as any other nodes. I will discuss styling charts in the sections that discuss specific types of charts. The Chart class contains properties and methods common to all types of charts.

The PieChart class falls into the first category. It has no axis, and it is used to draw a pie chart.

The XYChart class falls into the second category. It is the abstract base class for all charts having two axes. Its subclasses, for example, LineChart, BarChart, etc., represent specific types of charts.

The title property specifies the title for a chart. The titleSide property specifies the location of the title. By default, the title is placed above the chart content. Its value is one of the constants of the Side enum: TOP (default), RIGHT, BOTTOM, and LEFT.

Typically, a chart uses different types of symbols to represent data in different categories. A legend lists symbols with their descriptions. The legend property is a Node, and it specifies the legend for the chart. By default, a legend is placed below the chart content. The legendSide property specifies the location of the legend, which is one of the constants of the Side enum: TOP, RIGHT, BOTTOM (default), and LEFT. The legendVisible property specifies whether the legend is visible. By default, it is visible.

The animated property specifies whether the change in the content of the chart is shown with some type of animation. By default, it is true.

Styling Charts with CSS

Data Used in Chart Examples

Understanding the PieChart

A pie chart consists of a circle divided into sectors of different central angles. Typically, a pie is circular. The sectors are also known as pie pieces or pie slices. Each sector in the circle represents a quantity of some kind. The central angle of the area of a sector is proportional to the quantity it represents. Figure 20-2 shows a pie chart that displays the population of five countries in the year 2000.

The data property specifies the content for the chart in an ObservableList<PieChart.Data>.

The startAngle property specifies the angle in degrees to start the first pie slice. By default, it is zero degrees, which corresponds to a three o’clock position. A positive startAngle is measured anticlockwise. For example, a 90-degree startAngle will start at the 12 o’clock position.

The clockwise property specifies whether the slices are placed clockwise starting at the startAngle. By default, it is true.

The labelsVisible property specifies whether the labels for slices are visible. Labels for slices are displayed close to the slice, and they are placed outside the slices. The label for a slice is specified using the name property of the PieChart.Data class. In Figure 20-2, “China,” “India,” “Brazil,” etc., are labels for slices.

Labels and slices are connected through straight lines. The labelLineLength property specifies the length of those lines. Its default value is 20.0 pixels.

Customizing Pie Slices

Each pie slice data is represented by a Node. The reference to the Node can be obtained using the getNode() method of the PieChart.Data class. The Node is created when the slices are added to the pie chart. Therefore, you must call the getNode() method on the PieChart.Data representing the slice after adding it to the chart. Otherwise, it returns null. The program in Listing 20-3 customizes all pie slices of a pie chart to add a tool tip to them. The tool tip shows the slice name, pie value, and percent pie value. The addSliceTooltip() method contains the logic to accessing the slice Nodes and adding the tool tips. You can customize pie slices to animate them, let the user drag them out from the pie using the mouse, etc. See Figure 20-3.

// PieSliceTest.java

// ...find in the book's download area.

Listing 20-3

Adding Tool Tips to Pie Slices

Styling the PieChart with CSS

All properties, except the data property, defined in the PieChart class, can be styled using CSS as shown in the following:

.chart {

        -fx-clockwise: false;

        -fx-pie-label-visible: true;

        -fx-label-line-length: 10;

        -fx-start-angle: 90;

}

Four style classes are added to each pie slice added to a pie chart:

• chart-pie

• data<i>

• default-color<j>

• negative

The <i> in the style-class name data<i> is the slice index. The first slice has the class data0, the second data1, the third data2, etc.

The <j> in the style-class name default-color<j> is the color index of the series. In a pie chart, you can think of each slice as a series. The default CSS (Modena.css) defines eight series colors. If your pie slice has more than eight slices, the slice color will be repeated. The concept of series in a chart will be more evident when I discuss two-axis charts in the next section.

The negative style class is added only when the data for the slice is negative.

Define a style for a chart-pie style-class name if you want that style to apply to all pie slices. The following style will set a white border with 2px of background insets for all pie slices. It will show a wider gap between two slices as you have set 2px insets:

.chart-pie {

        -fx-border-color: white;

        -fx-background-insets: 2;

}

You can define colors for pie slices using the following styles. It defines colors for only five slices. Slices beyond the sixth one will use default colors:

.chart-pie.default-color0 {-fx-pie-color: red;}

.chart-pie.default-color1 {-fx-pie-color: green;}

.chart-pie.default-color2 {-fx-pie-color: blue;}

.chart-pie.default-color3 {-fx-pie-color: yellow;}

.chart-pie.default-color4 {-fx-pie-color: tan;}

Using More Than Eight Series Colors

It is quite possible that you will have more than eight series (slices in a pie chart) in a chart, and you do not want to repeat the colors for the series. The technique is discussed for a pie chart. However, it can be used for a two-axis chart as well.

Suppose you want to use a pie that will display populations of ten countries. If you use the code for this pie chart, the colors for the ninth and tenth slices will be the same as the colors for the first and second slices, respectively. First, you need to define the colors for the ninth and tenth slices as shown in Listing 20-4.

/* additional_series_colors.css */

.chart-pie.default-color8 {

        -fx-pie-color: gold;

}

.chart-pie.default-color9 {

        -fx-pie-color: khaki;

}

Listing 20-4

Additional Series Colors

The pie slices and the legend symbols will be assigned style-class names such as default-color0, default-color2… default-color7. You need to identify the nodes for the slices and legend symbols associated with data items with an index greater than seven and replace their default-color<j> style-class name with the new ones. For example, for the ninth and tenth slices, the style-class names are default-color0 and default-color1 as the color series number is assigned as (dataIndex % 8). You will replace them with default-color9 and default-color10.

The program in Listing 20-5 shows how to change the colors for the slices and legend symbols. It adds ten slices to a pie chart. The setSeriesColorStyles() method replaces the style-class names for the slice nodes for the ninth and tenth slices and for their associated legend symbols. Figure 20-4 shows the pie chart. Notice the colors for “Germany” and “Indonesia” are gold and khaki as set in the CSS. Comment the last statement in the start() method , which is a call to the setSeriesColorStyles(), and you will find that the colors for “Germany” and “Indonesia” will be the same as the colors for “China” and “India.”

// PieChartExtraColor.java

// ...find in the book's download area.

Listing 20-5

A Pie Chart Using Color Series Up to Index 10

Using Background Images for Pie Slices

You can also use a background image in a pie slice. The following style defines the background image for the first pie slice:

.chart-pie.data0 {

        -fx-background-image: url("china_flag.jpg");

}

Listing 20-6 contains the content of a CSS file named pie_slice.css. It defines styles that specify the background images used for pie slices, the preferred size of the legend symbols, and the length of the line joining the pie slices and their labels.

// pie_slice.css

/* Set a background image for pie slices */

.chart-pie.data0 {-fx-background-image: url("china_flag.jpg");}

.chart-pie.data1 {-fx-background-image: url("india_flag.jpg");}

.chart-pie.data2 {-fx-background-image: url("brazil_flag.jpg");}

.chart-pie.data3 {-fx-background-image: url("uk_flag.jpg");}

.chart-pie.data4 {-fx-background-image: url("usa_flag.jpg");}

/* Set the preferred size for legend symbols */

.chart-legend-item-symbol {

        -fx-pref-width: 100;

        -fx-pref-height: 30;

}

.chart {

        -fx-label-line-length: 10;

}

Listing 20-6

 A CSS for Customizing Pie Slices

The program in Listing 20-7 creates a pie chart. It uses the same data as you have been using in our previous examples. The difference is that it sets a CSS defined in a pie_slice.css file:

// Set a CSS for the scene

scene.getStylesheets().addAll("resources/css/pie_slice.css");

The resulting window is shown in Figure 20-5. Notice that slices and legend symbols show the flags of the countries. It is important to keep in mind that you have matched the index of the chart data and the index in the CSS file to match countries and their flags.

Tip

It is also possible to style the shape of the line joining the pie slices and their labels, labels for the pie slices, and the legend symbols in a pie chart.

// PieChartCustomSlice.java

// ...find in the book's download area.

Listing 20-7

Using Pie Slices with a Background Image

Understanding the XYChart

An instance of a concrete subclass of the abstract XYChart<X,Y> class defines a two-axis chart. The generic type parameters X and Y are the data types of values plotted along the x-axis and y-axis, respectively.

Representing Axes in an XYChart

An instance of a concrete subclass of the abstract Axis<T> class defines an axis in the XYChart . Figure 20-6 shows a class diagram for the classes representing axes.

The abstract Axis<T> class is the base class for all classes representing axes. The generic parameter T is the type of the values plotted along the axis, for example, String, Number, etc. An axis displays ticks and tick labels. The Axis<T> class contains properties to customize the ticks and tick labels. An axis can have a label, which is specified in the label property.

The concrete subclasses CategoryAxis and NumberAxis are used for plotting String and Number data values along an axis, respectively. They contain properties specific to the data values. For example, NumberAxis inherits ValueAxis<T>’s lowerBound and upperBound properties, which specify the lower and upper bounds of the data plotted on the axis. By default, the range of the data on an axis is automatically determined based on the data. You can turn off this feature by setting the autoRanging property in the Axis<T> class to false. The following snippet of code creates an instance of the CategoryAxis and NumberAxis and sets their labels:

CategoryAxis xAxis = new CategoryAxis();

xAxis.setLabel("Country");

NumberAxis yAxis = new NumberAxis();

yAxis.setLabel("Population (in millions)");

Tip

Use a CategoryAxis to plot String values along an axis, and use a NumberAxis to plot numeric values along an axis.

Understanding the BarChart

A bar chart renders the data items as horizontal or vertical rectangular bars. The lengths of the bars are proportional to the value of the data items.

An instance of the BarChart class represents a bar chart. In a bar chart, one axis must be a CategoryAxis and the other a ValueAxis/NumberAxis. The bars are drawn vertically or horizontally, depending on whether the CategoryAxis is the x-axis or the y-axis.

The default value is 4 pixels for the barGap and 10 pixels for the categoryGap.

The program in Listing 20-9 shows how to create and populate a vertical bar chart as shown in Figure 20-7.

// VerticalBarChart.java

// ...find in the book's download area.

Listing 20-9

Creating a Vertical Bar Chart

The program in Listing 20-10 shows how to create and populate a horizontal bar chart as shown in Figure 20-8. The program needs to supply data to the chart in an ObservableList of XYChart.Series<Number,String>. The getYearSeries() method in the XYChartDataUtil class returns XYChart.Series<String,Number>. The getChartData() method in the program converts the series data from <String,Number> to <Number,String> format as needed to create a horizontal bar chart.

// HorizontalBarChart.java

// ...find in the book's download area.

Listing 20-10

Creating a Horizontal Bar Chart

Understanding the StackedBarChart

A stacked bar chart is a variation of the bar chart. In a stacked bar chart, the bars in a category are stacked. Except for the placement of the bars, it works the same way as the bar chart.

An instance of the StackedBarChart class represents a stacked bar chart. The bars can be placed horizontally or vertically. If the x-axis is a CategoryAxis, the bars are placed vertically. Otherwise, they are placed horizontally. Like the BarChart, one of the axes must be a CategoryAxis and the other a ValueAxis/NumberAxis.

The StackedBarChart class contains a categoryGap property that defines the gap between bars in adjacent categories. The default gap is 10px. Unlike the BarChart class, the StackedBarChart class does not contain a barGap property, as the bars in one category are always stacked.

The constructors of the StackedBarChart class are similar to the ones for the BarChart class. They let you specify the axes, chart data, and category gap.

The program in Listing 20-11 shows how to create a vertical stacked bar chart. The chart is shown in Figure 20-9. To create a horizontal stacked bar chart, use a CategoryAxis as the y-axis.

// VerticalStackedBarChart.java

// ...find in the book's download area.

Listing 20-11

Creating a Vertical Stacked Bar Chart

Understanding the ScatterChart

A bar chart renders the data items as symbols. All data items in a series use the same symbol. The location of the symbol for a data item is determined by the values on the data item along the x-axis and y-axis.

Recall that the autoRanging for an Axis is set to true by default. If you are using numeric values in a scatter chart, make sure to set the autoRanging to false. It is important to set the range of the numeric values appropriately to get uniformly distributed points in the chart. Otherwise, the points may be located densely in a small area, and it will be hard to read the chart.

// ScatterChartTest.java

package com.jdojo.chart;

import javafx.application.Application;

import javafx.collections.ObservableList;

import javafx.scene.Scene;

import javafx.scene.chart.NumberAxis;

import javafx.scene.chart.ScatterChart;

import javafx.scene.chart.XYChart;

import javafx.scene.layout.StackPane;

import javafx.stage.Stage;

public class ScatterChartTest extends Application {

        public static void main(String[] args) {

               Application.launch(args);

        }

        @Override

        public void start(Stage stage) {

               NumberAxis xAxis = new NumberAxis();

               xAxis.setLabel("Year");

               // Customize the x-axis, so points are scattered uniformly

               xAxis.setAutoRanging(false);

               xAxis.setLowerBound(1900);

               xAxis.setUpperBound(2300);

               xAxis.setTickUnit(50);

               NumberAxis yAxis = new NumberAxis();

               yAxis.setLabel("Population (in millions)");

               ScatterChart<Number,Number> chart =

                        new ScatterChart<>(xAxis, yAxis);

               chart.setTitle("Population by Year and Country");

               // Set the data for the chart

               ObservableList<XYChart.Series<Number,Number>> chartData =

                   XYChartDataUtil.getCountrySeries();

               chart.setData(chartData);

               StackPane root = new StackPane(chart);

               Scene scene = new Scene(root);

               stage.setScene(scene);

               stage.setTitle("A Scatter Chart");

               stage.show();

        }

}

Listing 20-12

Creating a Scatter Chart

Understanding the LineChart

A line chart displays the data items in a series by connecting them by line segments. Optionally, the data points themselves may be represented by symbols. You can think of a line chart as a scatter chart with symbols in a series connected by straight line segments. Typically, a line chart is used to view the trend in data change over time or in a category.

An instance of the LineChart class represents a line chart. The class contains a createSymbols property, which is set to true by default. It controls whether symbols are created for the data points. Set it to false to show only straight lines connecting the data points in a series.

The program in Listing 20-13 shows how to create and populate a line chart as shown in Figure 20-11. The program is the same as for using the scatter chart, except that it uses the LineChart class. The chart displays circles as symbols for data items. You can remove the symbols by using the following statement, after you create the line chart:

// Do not create the symbols for the data items

chart.setCreateSymbols(false);

// LineChartTest.java

// ...find in the book's download area.

Listing 20-13

Creating a Line Chart

Understanding the BubbleChart

A bubble chart is very similar to a scatter chart, except that it has the ability to represent three values for a data point. A bubble is used to represent a data item in a series. You can set the radius of the bubble to represent the third value for the data point.

An instance of the BubbleChart class represents a bubble chart. The class does not define any new properties. A bubble chart uses the extraValue property of the XYChart.Data class to get the radius of the bubble. The bubble is an ellipse whose radii are scaled based on the scale used for the axes. Bubbles look more like a circle (or less stretched on one direction) if the scales for the x-axis and y-axis are almost equal.

The program in Listing 20-14 shows how to create a bubble chart as shown in Figure 20-12. The chart data is passed to the setBubbleRadius() method , which explicitly sets the extraValue for all data points to 20px. If you want to use the radii of bubbles to represent another dimension of data, you can set the extraValue accordingly.

// BubbleChartTest.java

// ...find in the book's download area.

Listing 20-14

Creating a Bubble Chart

Understanding the AreaChart

The area chart is a variation of the line chart. It draws lines connecting all data items in a series and, additionally, fills the area between where the line and the x-axis are painted. Different colors are used to paint areas for different series.

The program in Listing 20-15 shows how to create an area chart as shown in Figure 20-13. There is nothing new in the program, except that you have used the AreaChart class to create the chart. Notice that the area for a series overlays the area for the preceding series.

// AreaChartTest.java

// ...find in the book's download area.

Listing 20-15

Creating an Area Chart

Understanding the StackedAreaChart

The stacked area chart is a variation of the area chart. It plots data items by painting an area for each series. Unlike the area chart, areas for series do not overlap; they are stacked.

The program in Listing 20-16 shows how to create a stacked area chart as shown in Figure 20-14. The program is the same as the one that created an AreaChart, except that you have used the StackedAreaChart class to create the chart.

// StackedAreaChartTest.java

// ...find in the book's download area.

Listing 20-16

Creating a Stacked Area Chart

Customizing XYChart Appearance

The chart area is divided into a grid of columns and rows. Horizontal lines are drawn passing through major ticks on the y-axis making up rows. Vertical lines are drawn passing through major ticks on the x-axis making up columns.

Formatting Numeric Tick Labels

Sometimes, you may want to format the values displayed on a numeric axis. You want to format the labels for the numeric axis for different reasons:

• You want to add prefixes or suffixes to the tick labels. For example, you may want to display a number 100 as $100 or 100M.

• You may be supplying the chart scaled data to get an appropriate scale value for the axis. For example, for the actual value 100, you may be supplying 10 to the chart. In this case, you would like to display the actual value 100 for the label.

The ValueAxis class contains a tickLabelFormatter property, which is a StringConverter, and it is used to format tick labels. By default, tick labels for a numeric axis are formatted using a default formatter. The default formatter is an instance of the static inner class NumberAxis.DefaultFormatter.

In our examples of XYChart, you had set the label for the y-axis to “Population (in millions)” to indicate that the tick values on the axis are in millions. You can use a label formatter to append “M” to the tick values to indicate the same meaning. The following snippet of code will accomplish this:

NumberAxis yAxis = new NumberAxis();

yAxis.setLabel("Population");

// Use a formatter for tick labels on y-axis to append

// M (for millions) to the population value

yAxis.setTickLabelFormatter(new StringConverter<Number>() {

        @Override

        public String toString(Number value) {

               // Append M to the value

               return Math.round(value.doubleValue()) + "M";

        }

        @Override

        public Number fromString(String value) {

               // Strip M from the value

               value = value.replaceAll("M", "");

               return Double.parseDouble(value);

        }

});

The NumberAxis.DefaultFormatter works better for adding a prefix or suffix to tick labels. This formatter is kept in sync with the autoRanging property for the axis. You can pass a prefix and a suffix to the constructor. The following snippet of code accomplishes the same thing as the preceding snippet of code:

NumberAxis yAxis = new NumberAxis();

yAxis.setLabel("Population");

yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis, null, "M"));

You can customize several visual aspects of an Axis. Please refer to the API documentation for the Axis class and its subclasses for more details.

The program in Listing 20-17 shows how to customize a line chart. The chart is shown in Figure 20-15. It formats the tick labels on the y-axis to append “M” to the label value. It hides the grid lines and shows the alternate column fills.

// CustomizingCharts.java

// ...find in the book's download area.

Listing 20-17

Formatting Tick Labels and Customizing Chart Plot

Summary

A chart is a graphical representation of data. Charts provide an easier way to analyze a large volume of data visually. Typically, they are used for reporting purposes. Different types of charts exist. They differ in the way they represent the data. Not all types of charts are suitable for analyzing all types of data. For example, a line chart is suitable for understanding the comparative trend in data, whereas a bar chart is suitable for comparing data in different categories.

JavaFX supports charts, which can be integrated in a Java application by writing a few lines of code. It contains a comprehensive, extensible Chart API that provides built-in support for several types of charts. The Chart API consists of a number of predefined classes in the javafx.scene.chart package. Few of those classes are Chart, XYChart, PieChart, BarChart, and LineChart.

The abstract Chart is the base class for all charts. It inherits the Node class. Charts can be added to a scene graph. They can also be styled with CSS as any other nodes. Every chart in JavaFX has three parts: a title, a legend, and data. Different types of charts define their data differently. The Chart class contains the properties to deal with the title and legend.

A chart can be animated. The animated property in the Chart class specifies whether the change in the content of the chart is shown with some type of animation. By default, it is true.

A pie chart consists of a circle divided into sectors of different central angles. Typically, a pie is circular. The sectors are also known as pie pieces or pie slices. Each sector in the circle represents a quantity of some kind. The central angle of the area of a sector is proportional to the quantity it represents. An instance of the PieChart class represents a pie chart.

A bar chart renders the data items as horizontal or vertical rectangular bars. The lengths of the bars are proportional to the value of the data items. An instance of the BarChart class represents a bar chart.

A stacked bar chart is a variation of the bar chart. In a stacked bar chart, the bars in a category are stacked. Except for the placement of the bars, it works the same way as the bar chart. An instance of the StackedBarChart class represents a stacked bar chart.

A scatter chart renders the data items as symbols. All data items in a series use the same symbol. The location of the symbol for a data item is determined by the values on the data item along the x-axis and y-axis. An instance of the ScatterChart class represents a scatter chart.

A line chart displays the data items in a series by connecting them by line segments. Optionally, the data points themselves may be represented by symbols. You can think of a line chart as a scatter chart with symbols in a series connected by straight line segments. Typically, a line chart is used to view the trend in data change over time or in a category. An instance of the LineChart class represents a line chart.

A bubble chart is very similar to a scatter chart, except that it has the ability to represent three values for a data point. A bubble is used to represent a data item in a series. You can set the radius of the bubble to represent the third value for the data point. An instance of the BubbleChart class represents a bubble chart.

The area chart is a variation of the line chart. It draws lines connecting all data items in a series and, additionally, fills the area between where the line and the x-axis are painted. Different colors are used to paint areas for different series. An instance of the AreaChart represents an area chart.

The stacked area chart is a variation of the area chart. It plots data items by painting an area for each series. Unlike the area chart, areas for series do not overlap; they are stacked. An instance of the StackedAreaChart represents a stacked area chart.

Besides using CSS to customize the appearance of charts, the Chart API provides several properties and methods to customize charts’ appearance such as adding alternate row/column fills, showing zero line axes, showing grid lines, and formatting numeric tick labels.

The next chapter will discuss how to work with images in JavaFX using the Image API.