how can I manage a scatterChar in the javaFX from scene builder? - javafx-8

Question

I know how to manage the scatter chart inside the start method, but I want to use a fxml file containing a scatter chart and then I want to use a controller to control that. I used Scenebuilder for this purpose, but I don't know how I can add category axis to the scatterChar, I found the numeric Axis, but I didn't see any category axis to add.There is a horizontal category axis in the scene builder that is with the scatter chart, but I don't know, how I can add some values to it. Is that possible inside the scene builder, or I must do it in the controller?

Answer 1

Code based solution
Select your scatter chart in SceneBuilder.
In the Code panel for the scatter chart, type the fx:id you want to assign (e.g. scatterChart).
In your controller inject the scatter chart reference:
#FXML ScatterChart scatterChart;
In the initialize() method for your controller add your categories.
CategoryAxis xAxis = (CategoryAxis) scatterChart.getXAxis();
xAxis.getCategories().setAll(
"UFO sightings",
"Paranormal Events",
"Inexplicable Tweets"
);
If you need to pass data into your controller to plot inside your chart, select a method from:
Passing Parameters JavaFX FXML
Alternate partial FXML based solution
Although you cannot add the categories to the chart via the SceneBuilder UI, you can hand edit the FXML file load the edited file up in SceneBuilder (which will parse the file fine and display the categories and will preserve your hand-edits when you save the file in SceneBuilder).
Instead of adding the categories in code in the initialize() as defined in step 4, edit your FXML file manually and add the categories. Here is a sample:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.String?>
<?import javafx.collections.FXCollections?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.chart.ScatterChart?>
<ScatterChart fx:id="scatterChart" title="Concerning Events" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
<xAxis>
<CategoryAxis side="BOTTOM">
<categories>
<FXCollections fx:factory="observableArrayList">
<String fx:value="UFO Sightings" />
<String fx:value="Paranormal Activity" />
<String fx:value="Inexplicable Tweets" />
</FXCollections>
</categories>
</CategoryAxis>
</xAxis>
<yAxis>
<NumberAxis side="LEFT" />
</yAxis>
</ScatterChart>
You can't repopulate the chart with actual data using FXML (but it is highly unlikely that would want to do that anyway).