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.

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.

The pattern:

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");

    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);
}

FXML (a line chart needs two number axes):

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

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 <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.

The pattern:

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");

    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);
}

FXML (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>

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:

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.

The pattern:

Imports:

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

Controller:

@FXML private PieChart pieChart;

@FXML
public void initialize() {
    pieChart.setData(FXCollections.observableArrayList(
        new PieChart.Data("Red", 12),
        new PieChart.Data("Green", 8),
        new PieChart.Data("Blue", 5)
    ));
}

FXML (a pie chart has no axes):

<PieChart fx:id="pieChart" />

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:

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.

The pattern: 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++) {
    series.getData().add(new XYChart.Data<>(i + 1, newValues[i]));
}

Update a pie slice:

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

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.