Charts and graphs

IA tooling, not an exam topic. These use the built-in JavaFX charts to adapt for your IA. Nothing here is examinable, and your IA must be your own work.

JavaFX includes charts in javafx.scene.chart, so you do not need any extra library to draw a graph from your own numbers. This page covers line, bar, and pie charts, and updating a chart when the data changes.

New here? Read Start here: how every recipe fits together first; it explains the two places you edit and the fx:id link every recipe relies on.

Draw a line graph from your data

What this does: plots points on number axes and joins them into a line, fed from your own values.

When you would use it in your IA: showing a trend over time, such as scores per attempt, sales per day, or a measured value across readings.

In SceneBuilder (the layout): add a LineChart and give it an fx:id of lineChart. A line chart needs two number axes; add a NumberAxis for the x axis and one for the y axis, and label them.

<LineChart fx:id="lineChart">
    <xAxis>
        <NumberAxis label="Day" />
    </xAxis>
    <yAxis>
        <NumberAxis label="Sales" />
    </yAxis>
</LineChart>

In the controller (the .java file):

Imports:

import javafx.fxml.FXML;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.XYChart;

Controller (the values would normally come from your own data, for example an ArrayList):

@FXML private LineChart<Number, Number> lineChart;

@FXML
public void initialize() {
    XYChart.Series<Number, Number> series = new XYChart.Series<>();
    series.setName("Daily sales");

    // your IA logic here: feed the series from your own data
    int[] values = {3, 5, 4, 7, 6};
    for (int day = 0; day < values.length; day++) {
        series.getData().add(new XYChart.Data<>(day + 1, values[day]));
    }

    lineChart.getData().add(series);
}

Where your own logic goes: the loop marked // your IA logic here, where you turn your numbers into points. Creating the series and adding it to the chart is reusable wiring.

Make it your own:

  • Replace the values array with your own data, and set the x value to whatever each point is measured against.
  • To draw a second line on the same chart, build another XYChart.Series, give it a name, and lineChart.getData().add(secondSeries). The chart shows both with a legend.

Watch out for:

  • The fx:id lineChart must match the @FXML field name exactly, or the screen will not load.
  • The <Number, Number> after XYChart is a pair of type parameters, the same idea as ArrayList<String>. They say the axes hold numbers. This generic syntax is outside the exam-style Java subset but is required here.
  • Each point is an XYChart.Data<>(xValue, yValue). Mixing up the order of x and y is the usual cause of a graph that looks wrong.

Mix with: Draw a bar graph, Update a chart when the data changes.

Draw a bar graph

What this does: draws one bar per category, with the bar height from your numbers.

When you would use it in your IA: comparing totals across named groups, such as votes per option, items per category, or count per status.

In SceneBuilder (the layout): add a BarChart and give it an fx:id of barChart. A bar chart uses a category axis for the labels and a number axis for the heights.

<BarChart fx:id="barChart">
    <xAxis>
        <CategoryAxis label="Colour" />
    </xAxis>
    <yAxis>
        <NumberAxis label="Votes" />
    </yAxis>
</BarChart>

In the controller (the .java file):

Imports:

import javafx.fxml.FXML;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.XYChart;

Controller:

@FXML private BarChart<String, Number> barChart;

@FXML
public void initialize() {
    XYChart.Series<String, Number> series = new XYChart.Series<>();
    series.setName("Votes");

    // your IA logic here: one data point per category, from your own totals
    series.getData().add(new XYChart.Data<>("Red", 12));
    series.getData().add(new XYChart.Data<>("Green", 8));
    series.getData().add(new XYChart.Data<>("Blue", 5));

    barChart.getData().add(series);
}

Where your own logic goes: the data points marked // your IA logic here, built from your own totals (for example by counting items in an ArrayList). The chart and series setup is reusable wiring.

Make it your own:

  • Change the category names and numbers to your own data.
  • The difference from the line chart is the x axis: CategoryAxis holds text labels, so the series is <String, Number> here.

Watch out for:

  • The fx:id barChart must match the @FXML field name exactly, or the screen will not load.
  • Build the bars from your own totals, for example by counting items in an ArrayList and adding one XYChart.Data<> per category.

Mix with: Draw a line graph from your data, Draw a pie chart.

Draw a pie chart

What this does: shows parts of a whole as slices, sized by your numbers.

When you would use it in your IA: showing a breakdown that adds up to a total, such as spending by category or responses by option.

In SceneBuilder (the layout): add a PieChart and give it an fx:id of pieChart. A pie chart has no axes.

<PieChart fx:id="pieChart" />

In the controller (the .java file):

Imports:

import javafx.fxml.FXML;
import javafx.scene.chart.PieChart;
import javafx.collections.FXCollections;

Controller:

@FXML private PieChart pieChart;

@FXML
public void initialize() {
    // your IA logic here: one slice per part, from your own counts
    pieChart.setData(FXCollections.observableArrayList(
        new PieChart.Data("Red", 12),
        new PieChart.Data("Green", 8),
        new PieChart.Data("Blue", 5)
    ));
}

Where your own logic goes: the slices marked // your IA logic here, built from your own counts. Setting the data on the chart is reusable wiring.

Make it your own:

  • Each slice is a PieChart.Data("label", value). Replace the labels and values with your own.
  • JavaFX works out the percentages from the raw numbers, so you pass real counts, not percentages.

Watch out for:

  • The fx:id pieChart must match the @FXML field name exactly, or the screen will not load.
  • A pie chart only makes sense when the slices are parts of one whole. For comparing separate totals, a bar chart is clearer.

Mix with: Draw a bar graph, Update a chart when the data changes.

Update a chart when the data changes

What this does: changes what a chart shows after it is first drawn, so it stays in step with your data.

When you would use it in your IA: redrawing a chart after the user adds a record, changes a filter, or finishes another round of input.

In SceneBuilder (the layout): nothing new; this uses the chart you already added.

In the controller (the .java file): keep a reference to the series (or pie data) and change it. The chart redraws itself.

Add a new point to a line or bar series:

series.getData().add(new XYChart.Data<>(6, 9));      // appears straight away

Change an existing point’s value:

series.getData().get(0).setYValue(15);               // updates the first bar or point

Rebuild from fresh numbers:

series.getData().clear();
for (int i = 0; i < newValues.length; i++) {
    // your IA logic here: your updated numbers
    series.getData().add(new XYChart.Data<>(i + 1, newValues[i]));
}

Update a pie slice:

pieSlice.setPieValue(20);                            // pieSlice is a PieChart.Data you kept

Where your own logic goes: the updated numbers marked // your IA logic here. The add, change, clear-and-rebuild calls are reusable wiring.

Make it your own:

  • Store the XYChart.Series (or the PieChart.Data slices) as fields so you can reach them again after setup.
  • Call the update whenever the underlying data changes, for example at the end of your add-record method.

Watch out for:

  • Keep a reference to the series when you create it. If you only build it inside initialize() and do not store it, you cannot update it later without rebuilding the whole chart.
  • For a full reset, clear() then re-add is simplest and reliable.

Mix with: Show progress toward a goal, Keep the table up to date.

© EduCS.me — A resource hub for Computer Science education

This site uses Just the Docs, a documentation theme for Jekyll.