JavaFX Charts

In this part of the JavaFX tutorial, we work with charts. In JavaFX, it is possible to build charts by adding just a few lines of code.

In the following examples, we create a line chart, an area chart, a scatter chart, a bar chart, and a pie chart.

LineChart

A line chart is a basic type of chart which displays information as a series of data points connected by straight line segments. A line chart in JavaFX is created with the javafx.scene.chart.LineChart.

LineChartEx.java
package com.zetcode;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

/*
 * ZetCode JavaFX tutorial
 *
 * This program creates a line chart.
 *
 * Author: Jan Bodnar 
 * Website: zetcode.com 
 * Last modified: August 2016
 */

public class LineChartEx extends Application {

    @Override
    public void start(Stage stage) {

        initUI(stage);
    }

    private void initUI(Stage stage) {

        HBox root = new HBox();

        Scene scene = new Scene(root, 450, 330);

        NumberAxis xAxis = new NumberAxis();
        xAxis.setLabel("Age");

        NumberAxis yAxis = new NumberAxis();
        yAxis.setLabel("Salary (€)");

        LineChart lineChart = new LineChart(xAxis, yAxis);
        lineChart.setTitle("Average salary per age");

        XYChart.Series data = new XYChart.Series();
        data.setName("2016");

        data.getData().add(new XYChart.Data(18, 567));
        data.getData().add(new XYChart.Data(20, 612));
        data.getData().add(new XYChart.Data(25, 800));
        data.getData().add(new XYChart.Data(30, 980));
        data.getData().add(new XYChart.Data(40, 1410));
        data.getData().add(new XYChart.Data(50, 2350));

        lineChart.getData().add(data);

        root.getChildren().add(lineChart);

        stage.setTitle("LineChart");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

In the example, we have a line chart showing average salary per age.

NumberAxis xAxis = new NumberAxis();
xAxis.setLabel("Age");

NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Salary (€)");

Two axes are created with the NumberAxis. The setLabel() method sets a description for the axis.

LineChart lineChart = new LineChart(xAxis, yAxis);
lineChart.setTitle("Average salary per age");

LineChart creates a line chart. The setTitle() method sets a title for the chart.

XYChart.Series data = new XYChart.Series();
data.setName("2016");

A XYChart.Series provides data series for the chart. A data series is a list of data points. Each data point contains an x value and a y value. The setName() method gives a series a name. (There may be multiple of series in one chart.)

data.getData().add(new XYChart.Data(18, 567));
data.getData().add(new XYChart.Data(20, 612));
data.getData().add(new XYChart.Data(25, 800));
data.getData().add(new XYChart.Data(30, 980));
data.getData().add(new XYChart.Data(40, 1410));
data.getData().add(new XYChart.Data(50, 2350));

We add data to the data series. XYChart.Data is a single data item with data for 2 axis charts.

lineChart.getData().add(data);

The data is inserted into the chart.

LineChart
Figure: LineChart

AreaChart

An area chart displays graphically quantitative data that change over time.

AreaChart.java
package com.zetcode;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

/*
 * ZetCode JavaFX tutorial
 *
 * This program creates an area chart.
 *
 * Author: Jan Bodnar 
 * Website: zetcode.com 
 * Last modified: August 2016
 */
public class AreaChartEx extends Application {

    @Override
    public void start(Stage stage) {

        initUI(stage);
    }

    private void initUI(Stage stage) {

        HBox root = new HBox();

        Scene scene = new Scene(root, 490, 350);

        CategoryAxis xAxis = new CategoryAxis();
        xAxis.setLabel("Time");

        NumberAxis yAxis = new NumberAxis();
        yAxis.setLabel("Thousand bbl/d");

        AreaChart areaChart = new AreaChart(xAxis, yAxis);
        areaChart.setTitle("Oil consumption");

        XYChart.Series data = new XYChart.Series();

        data.getData().add(new XYChart.Data("2004", 82502));
        data.getData().add(new XYChart.Data("2005", 84026));
        data.getData().add(new XYChart.Data("2006", 85007));
        data.getData().add(new XYChart.Data("2007", 86216));
        data.getData().add(new XYChart.Data("2008", 85559));
        data.getData().add(new XYChart.Data("2009", 84491));
        data.getData().add(new XYChart.Data("2010", 87672));
        data.getData().add(new XYChart.Data("2011", 88575));
        data.getData().add(new XYChart.Data("2012", 89837));
        data.getData().add(new XYChart.Data("2013", 90701));

        areaChart.getData().add(data);
        areaChart.setLegendVisible(false);

        root.getChildren().add(areaChart);

        stage.setTitle("AreaChart");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

The example shows an area chart showing world crude oil consumption by year.

AreaChart areaChart = new AreaChart(xAxis, yAxis);
areaChart.setTitle("Oil consumption");

An area chart is created with the AreaChart.

CategoryAxis xAxis = new CategoryAxis();
xAxis.setLabel("Time");

CategoryAxis works on string categories. We display year strings on this axis.

AreaChart
Figure: AreaChart

ScatterChart

A scatter chart is a set of points plotted on a horizontal and vertical axes.

ScatterChartEx.java
package com.zetcode;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;


/*
 * ZetCode JavaFX tutorial
 *
 * This program creates a scatter chart.
 *
 * Author: Jan Bodnar 
 * Website: zetcode.com 
 * Last modified: August 2016
 */
public class ScatterChartEx extends Application {

    @Override
    public void start(Stage stage) {

        initUI(stage);
    }

    private void initUI(Stage stage) {

        HBox root = new HBox();

        CategoryAxis xAxis = new CategoryAxis();

        NumberAxis yAxis = new NumberAxis("USD/kg", 30, 50, 2);

        ScatterChart scatterChart = new ScatterChart(xAxis, yAxis);

        XYChart.Series data = new XYChart.Series();

        data.getData().add(new XYChart.Data("Mar 14", 43));
        data.getData().add(new XYChart.Data("Nov 14", 38.5));
        data.getData().add(new XYChart.Data("Jan 15", 41.8));
        data.getData().add(new XYChart.Data("Mar 15", 37));
        data.getData().add(new XYChart.Data("Dec 15", 33.7));
        data.getData().add(new XYChart.Data("Feb 16", 39.8));

        scatterChart.getData().add(data);
        scatterChart.setLegendVisible(false);

        Scene scene = new Scene(root, 450, 330);

        root.getChildren().add(scatterChart);

        stage.setTitle("Gold price");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

In the example, we use the ScatterChart to display gold prices.

CategoryAxis xAxis = new CategoryAxis();

The x axis is a CategoryAxis used to display dates.

NumberAxis yAxis = new NumberAxis("USD/kg", 30, 50, 2);

The y axis is a NumberAxis used to display gold prices. The parameters of the constructor are: axis label, lower bound, upper bound, and tick unit.

XYChart.Series data = new XYChart.Series();

data.getData().add(new XYChart.Data("Mar 14", 43));
...

A series of data is created with XYChart.Series and its data items with XYChart.Data.

ScatterChart
Figure: ScatterChart

Bar chart

A bar chart presents grouped data with rectangular bars with lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally.

BarChartEx.java
package com.zetcode;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

/*
 * ZetCode JavaFX tutorial
 *
 * This program creates a bar chart.
 *
 * Author: Jan Bodnar 
 * Website: zetcode.com 
 * Last modified: August 2016
 */
public class BarChartEx extends Application {

    @Override
    public void start(Stage stage) {

        initUI(stage);
    }

    private void initUI(Stage stage) {
        
        HBox root = new HBox();  

        Scene scene = new Scene(root, 480, 330);
        CategoryAxis xAxis = new CategoryAxis();

        NumberAxis yAxis = new NumberAxis();
        yAxis.setLabel("Gold medals");

        BarChart barChart = new BarChart(xAxis, yAxis);
        barChart.setTitle("Olympic gold medals in London");

        XYChart.Series data = new XYChart.Series();

        data.getData().add(new XYChart.Data("USA", 46));
        data.getData().add(new XYChart.Data("China", 38));
        data.getData().add(new XYChart.Data("UK", 29));
        data.getData().add(new XYChart.Data("Russia", 22));
        data.getData().add(new XYChart.Data("South Korea", 13));
        data.getData().add(new XYChart.Data("Germany", 11));

        barChart.getData().add(data);
        barChart.setLegendVisible(false);

        root.getChildren().add(barChart);

        stage.setTitle("BarChart");
        stage.setScene(scene);
        stage.show();

    }

    public static void main(String[] args) {
        launch(args);
    }
}

In the example, we use a bar chart to show the number of Olympic gold medals per country in London 2012.

BarChart barChart = new BarChart(xAxis, yAxis);

A bar chart is created with BarChart.

AreaChart
Figure: AreaChart

Pie chart

A pie chart is a circular chart which is divided into slices to illustrate numerical proportion.

PieChartEx.java
package com.zetcode;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

/*
 * ZetCode JavaFX tutorial
 *
 * This program creates a pie chart.
 *
 * Author: Jan Bodnar 
 * Website: zetcode.com 
 * Last modified: August 2016
 */
public class PieChartEx extends Application {

    @Override
    public void start(Stage stage) {

        initUI(stage);
    }

    private void initUI(Stage stage) {

        HBox root = new HBox();

        Scene scene = new Scene(root, 450, 330);

        ObservableList<PieChart.Data> pieChartData
                = FXCollections.observableArrayList(
                        new PieChart.Data("Apache", 52),
                        new PieChart.Data("Nginx", 31),
                        new PieChart.Data("IIS", 12),
                        new PieChart.Data("LiteSpeed", 2),
                        new PieChart.Data("Google server", 1),
                        new PieChart.Data("Others", 2));

        PieChart pieChart = new PieChart(pieChartData);
        pieChart.setTitle("Web servers market share (2016)");
        
        root.getChildren().add(pieChart);        

        stage.setTitle("PieChart");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

The example uses a pie chart to show the market share of web servers.

ObservableList<PieChart.Data> pieChartData
        = FXCollections.observableArrayList(
                new PieChart.Data("Apache", 52),
                new PieChart.Data("Nginx", 31),
                new PieChart.Data("IIS", 12),
                new PieChart.Data("LiteSpeed", 2),
                new PieChart.Data("Google server", 1),
                new PieChart.Data("Others", 2));

Pie chart data items are created with the PieChart.Data.

PieChart pieChart = new PieChart(pieChartData);

A pie chart is created with the PieChart class.

PieChart
Figure: PieChart

In this chapter, we have created a LineChart, an AreaChart, a ScatterChart, a BarChart, and a PieChart in JavaFX. JFreechart tutorial shows how to create charts in a popular JFreechart library.