JavaFX Tutorial - JavaFX LineChart








The line chart, a type of two-axis charts, shows the dynamics of data over a particular interval of time.

For two-axis charts, we can define series of data using the XYChart.Series class.

We can assign a name to each series to display in the chart legend. 

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.stage.Stage;
/*from  w  w  w  .  j ava2  s.c o  m*/
public class Main extends Application {

  @Override
  public void start(Stage stage) {
    final NumberAxis xAxis = new NumberAxis();
    final NumberAxis yAxis = new NumberAxis();
    xAxis.setLabel("Number of Month");
    final LineChart<Number, Number> lineChart = new LineChart<Number, Number>(
        xAxis, yAxis);

    lineChart.setTitle("Line Chart");
    XYChart.Series<Number, Number> series = new XYChart.Series<Number, Number>();
    series.setName("My Data");
    // populating the series with data
    series.getData().add(new XYChart.Data<Number, Number>(1, 23));
    series.getData().add(new XYChart.Data<Number, Number>(2, 114));
    series.getData().add(new XYChart.Data<Number, Number>(3, 15));
    series.getData().add(new XYChart.Data<Number, Number>(4, 124));

    Scene scene = new Scene(lineChart, 800, 600);
    lineChart.getData().add(series);

    stage.setScene(scene);
    stage.show();
  }

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

The code above generates the following result.

null




LineChart Creating

For each chart, we can set the title and its position relative to the graph. The title can be located on the top, right, left, or bottom of the graph.

We can specify the position of the chart legend in the same manner. 

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
/*from   ww  w. ja v  a  2 s  .  c  o m*/
public class Main extends Application {
  public static void main(String[] args) {
    launch(args);
  }

  @Override
  public void start(Stage primaryStage) {
    CategoryAxis xAxis = new CategoryAxis();
    NumberAxis yAxis = new NumberAxis();
    LineChart lineChart = new LineChart(xAxis, yAxis);
    lineChart.setData(getChartData());
    lineChart.setTitle("Chart");

    StackPane root = new StackPane();
    root.getChildren().add(lineChart);
    primaryStage.setScene(new Scene(root, 400, 250));
    primaryStage.show();
  }

  private ObservableList<XYChart.Series<String, Double>> getChartData() {
    double aValue = 10;
    double cValue = 20;
    ObservableList<XYChart.Series<String, Double>> answer = FXCollections
        .observableArrayList();
    Series<String, Double> aSeries = new Series<String, Double>();
    Series<String, Double> cSeries = new Series<String, Double>();
    aSeries.setName("a");
    cSeries.setName("C");

    for (int i = 2001; i < 2021; i++) {
      aSeries.getData().add(new XYChart.Data(Integer.toString(i), aValue));
      aValue = aValue + Math.random()*100 -50;
      cSeries.getData().add(new XYChart.Data(Integer.toString(i), cValue));
      cValue = cValue + Math.random()*100 -50 ;
    }
    answer.addAll(aSeries, cSeries);
    return answer;
  }
}

The code above generates the following result.

null




Categories for a Line Chart

The following code shows how to use the CategoryAxis class instead of the NumberAxis class to render non-numerical data in a line chart. 

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;
//  w  w  w  .j  av a  2  s.c om
public class Main extends Application {

  @Override
  public void start(Stage stage) {
    final CategoryAxis xAxis = new CategoryAxis();
    final NumberAxis yAxis = new NumberAxis();
    xAxis.setLabel("Month");

    final LineChart<String, Number> lineChart = new LineChart<String, Number>(
        xAxis, yAxis);

    lineChart.setTitle("My Chart");

    XYChart.Series<String, Number> series = new XYChart.Series<String, Number>();
    series.setName("My data");

    series.getData().add(new XYChart.Data<String, Number>("Jan", 23));
    series.getData().add(new XYChart.Data<String, Number>("Feb", 114));
    series.getData().add(new XYChart.Data<String, Number>("Mar", 15));
    series.getData().add(new XYChart.Data<String, Number>("Apr", 24));
    series.getData().add(new XYChart.Data<String, Number>("May", 134));

    Scene scene = new Scene(lineChart, 800, 600);
    lineChart.getData().add(series);

    stage.setScene(scene);
    stage.show();
  }

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

The code above generates the following result.

null

Adding Series to the Line Chart

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;
//from   ww w  .  jav  a2 s .c o m
public class Main extends Application {

  @Override
  public void start(Stage stage) {
    final CategoryAxis xAxis = new CategoryAxis();
    final NumberAxis yAxis = new NumberAxis();
    xAxis.setLabel("Month");
    final LineChart<String, Number> lineChart = new LineChart<String, Number>(
        xAxis, yAxis);

    lineChart.setTitle("My Chart");

    XYChart.Series<String, Number> series1 = new XYChart.Series<String, Number>();
    series1.setName("Portfolio 1");

    series1.getData().add(new XYChart.Data<String, Number>("Jan", 23));
    series1.getData().add(new XYChart.Data<String, Number>("Feb", 14));
    series1.getData().add(new XYChart.Data<String, Number>("Mar", 15));

    XYChart.Series<String, Number> series2 = new XYChart.Series<String, Number>();
    series2.setName("Portfolio 2");
    series2.getData().add(new XYChart.Data<String, Number>("Jan", 33));
    series2.getData().add(new XYChart.Data<String, Number>("Feb", 34));
    series2.getData().add(new XYChart.Data<String, Number>("Mar", 25));
    series2.getData().add(new XYChart.Data<String, Number>("Apr", 44));

    XYChart.Series<String, Number> series3 = new XYChart.Series<String, Number>();
    series3.setName("Portfolio 3");
    series3.getData().add(new XYChart.Data<String, Number>("Jan", 44));
    series3.getData().add(new XYChart.Data<String, Number>("Feb", 35));
    series3.getData().add(new XYChart.Data<String, Number>("Mar", 36));
    series3.getData().add(new XYChart.Data<String, Number>("Apr", 33));
    series3.getData().add(new XYChart.Data<String, Number>("May", 31));

    Scene scene = new Scene(lineChart, 800, 600);
    lineChart.getData().addAll(series1, series2, series3);

    stage.setScene(scene);
    stage.show();
  }

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

The code above generates the following result.

null