Updated June 12, 2023
Introduction to JavaFX Charts
As we all know, the chart is known as the graphical way of representing data. These charts help in analyzing the huge volumes of data which makes it easy for several real-time applications. It is mainly used for recording purposes. There are different types of charts such as Scatter Chart, Bar Chart, Line Chart, Pie Chart, Stacked Area Chart, Stacked Bar Chart, etc. Even though there are several types, all of them won’t support analyzing data. In Java, these charts are supported by JavaFX. Let us look into the different types of charts and how to create them in JavaFX in detail.
How to Create JavaFx Charts?
In order to create charts, the following steps can be performed.
1. Configure the Axes
Firstly, define what should be mentioned in the X and Y Axes of the chart. There are two methods to configure the axes. CategoryAxis is used while mentioning category and NumberAxis is used for mentioning numerical value. For example, numerical details have to be mentioned as follows.
//x axis representation
NumberAxis x = new NumberAxis();
x.setLabel("No of books owned");
//y axis representation
NumberAxis y = new NumberAxis();
y.setLabel("Rate per book");In the example, the number of books owned is denoted in the x-axis and the rate per book is denoted in Y-axis.
2. Create the Chart
Instantiate the class based on the chart needed. There will be different syntaxes for each chart. That will be discussed in the next section. As of now, for example, let us see the syntax used for LineChart.
LineChart ll = new LineChart(x, y);
ll.setTitle("Line Chart Example");The above-mentioned syntax also set a title for the line chart.
3. Passing Data to the Chart
This is the most crucial step in this process where an instance is created for XYChart.Series. The number of series is the same as the count of entities in the chart. In order to pass data to the chart, the following syntax is used.
XYChart.Series sr = new XYChart.Series();4. Adding Data to the Series
Now, the mapping between the values in the x-axis and y-axis has to be done in order to create the chart. The values that need to be displayed in the chart will be added using the below syntax.
sr.getData().add(new XYChart.Data( 1, 567));
sr.getData().add(new XYChart.Data( 2, 557));
sr.getData().add(new XYChart.Data( 3, 547));Here, 3 values are added to display in the chart.
5. Configure Group and Scene
Configuring group and scene is the common portion in all applications of JavaFX. Once the group is created, the chart will be added to it.
Group gp = new Group();Then, an object of scene class will be created and it will be passed to the setScene () Method as follows.
Scene s = new Scene(gp,600,400);
Stage.setScene(s);
Stage.showTitle("Chart Example ");
Stage.show();Types of JavaFX Charts
In JavaFX, the package javafx.scene and class helps in creating charts. This class is the base class of all the available charts.
The following are the charts that are part of the package javafx.scene.
- Pie Chart
- Line Chart
- Scatter Chart
- Bar Chart
- Bubble Chart
- Area Chart`
- Stacked Area Chart
- Stacked Bar Chart
1. Pie Chart
In the Pie chart, data will be represented in the form of a circle separated into slices. All these slices will together form a whole circle. Each slice has a different proportion since the data varies based on the data represented by that slice.
- Class used for Pie Chart: javafx.scene.chart.PieChrt.
Syntax:
ObservableList<PieChart.Data> pcd = FXCollections.observableArrayList(
new PieChart.Data("Happy",50),
new PieChart.Data("Sad", 25),
new PieChart.Data("No emotions", 10),
new PieChart.Data("Confused", 15));
PieChart pc = new PieChart(pcd);2. Line Chart
The line chart links a series of data with certain connection points. The variation in data can also be visualized using this chart.
- Class used for Line Chart: javafx.scene.chart.LineChart
Syntax:
NumberAxis x = new NumberAxis();
x.setLabel("No of books owned");
NumberAxis y = new NumberAxis();
y.setLabel("Rate per book");
//line chart syntax
LineChart ll = new LineChart(x, y);3. Scatter Chart
A scatter chart is displayed based on the values in both axes without any links. The markings can be seen scattered.
- Class used for Scatter Chart: javafx.scene.chart.ScatterChart
Syntax:
NumberAxis x = new NumberAxis(0, 12, 3);
x.setLabel("Count");
NumberAxis y = new NumberAxis(0, 16, 4);
y.setLabel("Rating");
//scatter chart syntax
ScatterChart<String, Number> scatterChart = new ScatterChart(x, y);4. Bar Chart
Data gets displayed in the form of rectangle bars with height or length based on the proportion of the values.
- Class used for Bar Chart: javafx.scene.chart.BarChart
Syntax:
CategoryAxis x = new CategoryAxis();
x.setLabel("Mobile");
NumberAxis y = new NumberAxis();
y.setLabel("count");
//bar chart creation
BarChart bc = new BarChart(x, y);5. Bubble Chart
This chart is a modification of a scatter chart where data is represented in the form of bubbles instead of data points and another variable of the data is denoted as the bubble size.
- Class used for Bubble Chart: javafx.scene.chart.BubbleChart
Syntax:
NumberAxis x = new NumberAxis(0, 100, 10);
x.setLabel("Age");
NumberAxis y = new NumberAxis(20, 100, 10);
y.setLabel("No. of books owned");
BubbleChart bubbleChart = new BubbleChart(x, y);6. Area Chart
Area Chart displays quantitative data and the area between axis and line is filled with colors.
- Class used for Area Chart: javafx.scene.chart.AreaChart
Syntax:
NumberAxis x = new NumberAxis();
x.setLabel("No of students");
NumberAxis y = new NumberAxis();
y.setLabel("fees per student");
AreaChart a = new AreaChart(x, y);7. Stacked Area Chart
This chart is an extension of the normal area charts where the area is marked for the data points in the group.
- Class used for Bubble Chart: javafx.scene.chart. StackedAreaChart
Syntax:
StackedAreaChart<String, Number> ac = new StackedAreaChart(xAxis, yAxis);
ac.setTitle(" Stacked Area Example");8. Stacked Bar Chart
The chart displays the different group’s values on a rectangular bar and is arranged in the form of a stack.
- Class used for Bubble Chart: javafx.scene.chart. StackedBarChart
Syntax:
StackedBarChart<String, Number> sb = new StackedBarChart<>(xAxis, yAxis);
sb.setTitle("Example");Recommended Articles
This is a guide to JavaFX Charts. Here we discuss how to create javafx charts? and types which include, pie chart, line chart and, scatter chart, etc. You may also look at the following articles to learn more –
