Question

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.

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.

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 .

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 .

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.

Figure: PieChart

In this chapter, we have created a LineChart , an AreaChart , a ScatterChart , a BarChart , and a PieChart in JavaFX.