JavaFX LineChart or ScatterChart: Connect alternating points - javafx

Question

I'm trying to use either a ScatterChart or LineChart to make a Gantt chart of sorts. I have a series of events, and I'd like to make a line connect the start and end point of each event. The x axis will be time and the y axis will be an incrementing index. So in other words, if event 1 is from t=1 to t=5, and event 2 is from t=3 to t=10, I would like to connect the points (1,1) and (5,1), and (3,2) and (10,2), and no others.
There's an implementation of a Gantt chart elsewhere on StackOverflow, which I started out with, but it is unusably slow when trying to plot ten thousand events.
I know that one solution would be to have a XYChart.Series for each event, so that for 1000 events, the data input for the chart would consist of 1000 XYChart.Series, each containing 2 XYChart.Data objects. But style-wise this would be impossible, as I want there to be multiple series here, with different colors.
Is there a simple solution here? I know that in the worst case I can do this with Paths, although I'm not sure how so I'll have to research this, but I'm not sure if it's the best solution.
EDIT: Below are the examples of what I'm trying to do. I want to make something look like this, but without the vertical lines; I want them disconnected.
EDIT EDIT: I modified the datapoints so that they could overlap each other, for another aspect of the requirements. I added a policy to not sort the input points for the line chart. This is not needed or a valid option in the case where it's a scatter chart, so if you're going back and forth, you'd have to comment out the line chart.setAxisSortingPolicy(LineChart.SortingPolicy.NONE);
Here's the source code. Going from one to the other is as simple as swapping LineChart with ScatterChart (and commenting out the line mentioned above):
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class DummyGanttLineChartApp extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
ObservableList<Data<Number, Number>> dataList1 = FXCollections.observableArrayList();
ObservableList<Data<Number, Number>> dataList2 = FXCollections.observableArrayList();
dataList1.add(new Data<Number, Number>(1, 1));
dataList1.add(new Data<Number, Number>(2, 1));
dataList1.add(new Data<Number, Number>(1.5, 2));
dataList1.add(new Data<Number, Number>(2.5, 2));
dataList1.add(new Data<Number, Number>(2, 3));
dataList1.add(new Data<Number, Number>(3, 3));
dataList2.add(new Data<Number, Number>(1.5, 4));
dataList2.add(new Data<Number, Number>(2.5, 4));
dataList2.add(new Data<Number, Number>(2, 5));
dataList2.add(new Data<Number, Number>(3, 5));
dataList2.add(new Data<Number, Number>(2.5, 6));
dataList2.add(new Data<Number, Number>(3.5, 6));
Series<Number, Number> series1 = new Series<Number, Number>("List 1", dataList1);
Series<Number, Number> series2 = new Series<Number, Number>("List 2", dataList2);
ObservableList<Series<Number, Number>> data = FXCollections.observableArrayList();
data.add(series1);
data.add(series2);
NumberAxis xAxis = new NumberAxis();
NumberAxis yAxis = new NumberAxis();
xAxis.autoRangingProperty().set(false);
xAxis.setLowerBound(0);
xAxis.setUpperBound(5);
LineChart<Number, Number> chart = new LineChart<Number, Number>(xAxis, yAxis);
chart.setAxisSortingPolicy(LineChart.SortingPolicy.NONE);
chart.getData().addAll(data);
VBox box = new VBox(10);
box.getChildren().add(chart);
primaryStage.setScene(new Scene(box));
primaryStage.show();
}
}
This is a separate class that actually launches this (a workaround for some weirdness with my setup. You should be able to use a main method inside DummyGanttLineChartApp, but I get an error). Don't worry about that.
import javafx.application.Application;
public class DummyGanttLineChart {
public static void main(String [] args) {
Application.launch(DummyGanttLineChartApp.class, args);
}
}

Answer 1

Thanks for providing the screenshot and data. Considering your requirement, I think customizing ScatterChart can help you to get the desired behavior.
The idea is, we figure out the min and max data points for each unique Y value and draw a line between them (I am using Path). I am picking the series color from the data points itself and applying it on the Path. This works well good when resizing the chart as well.
Note: I have not tested the performance part as you mentioned (ten thousand events), may be you can give a try and update me about the performance :)
Below is the quick sample demo of what I have tried:
import javafx.application.Application;
import javafx.beans.NamedArg;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Bounds;
import javafx.scene.Scene;
import javafx.scene.chart.Axis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.chart.XYChart;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.layout.Region;
import javafx.scene.layout.VBox;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.concurrent.atomic.AtomicBoolean;
public class DummyGanttLineChartApp extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
ObservableList<Data<Number, Number>> dataList1 = FXCollections.observableArrayList();
ObservableList<Data<Number, Number>> dataList2 = FXCollections.observableArrayList();
dataList1.add(new Data<Number, Number>(1, 1));
dataList1.add(new Data<Number, Number>(2, 1));
dataList1.add(new Data<Number, Number>(1.5, 2));
dataList1.add(new Data<Number, Number>(2.5, 2));
dataList1.add(new Data<Number, Number>(3.5, 2)); // Including this to test whether it is picking min and max points ;)
dataList1.add(new Data<Number, Number>(2, 3));
dataList1.add(new Data<Number, Number>(3, 3));
dataList2.add(new Data<Number, Number>(1.5, 4));
dataList2.add(new Data<Number, Number>(2.5, 4));
dataList2.add(new Data<Number, Number>(2, 5));
dataList2.add(new Data<Number, Number>(3, 5));
dataList2.add(new Data<Number, Number>(2.5, 6));
dataList2.add(new Data<Number, Number>(3.5, 6));
Series<Number, Number> series1 = new Series<Number, Number>("List 1", dataList1);
Series<Number, Number> series2 = new Series<Number, Number>("List 2", dataList2);
ObservableList<Series<Number, Number>> data = FXCollections.observableArrayList();
data.add(series1);
data.add(series2);
NumberAxis xAxis = new NumberAxis();
NumberAxis yAxis = new NumberAxis();
xAxis.autoRangingProperty().set(false);
xAxis.setLowerBound(0);
xAxis.setUpperBound(5);
GanttLineChart chart = new GanttLineChart(xAxis, yAxis);
chart.getData().addAll(data);
VBox box = new VBox(10);
box.getChildren().add(chart);
primaryStage.setScene(new Scene(box));
primaryStage.show();
}
/**
* Custom GanttLine chart.
*/
class GanttLineChart extends ScatterChart<Number, Number> {
/**
* References to all paths. Usually one path per series.
*/
final List<Path> paths = new ArrayList<>();
public GanttLineChart(#NamedArg("xAxis") Axis<Number> xAxis, #NamedArg("yAxis") Axis<Number> yAxis) {
super(xAxis, yAxis, FXCollections.observableArrayList());
}
#Override
protected void layoutPlotChildren() {
super.layoutPlotChildren();
// Ensure to remove previous paths.
getPlotChildren().removeAll(paths);
for (XYChart.Series<Number, Number> series : getData()) {
// Map to keep references of min and max items for each unique Y value.
final Map<Number, MinMax<XYChart.Data<Number, Number>, XYChart.Data<Number, Number>>> yMap = new HashMap<>();
for (XYChart.Data<Number, Number> item : series.getData()) {
final Number y = item.getYValue();
MinMax<XYChart.Data<Number, Number>, XYChart.Data<Number, Number>> bounds = yMap.get(y);
if (bounds == null) {
bounds = new MinMax<>(item, item);
yMap.put(y, bounds);
}
if (bounds.getMin() != item) {
if (compareTo(item.getXValue(), bounds.getMin().getXValue()) < 0) {
bounds.setMin(item);
}
}
if (bounds.getMax() != item) {
if (compareTo(item.getXValue(), bounds.getMin().getXValue()) > 0) {
bounds.setMax(item);
}
}
}
final AtomicBoolean filled = new AtomicBoolean();
// Construct a path per series.
final Path path = new Path();
path.setStrokeWidth(2);
yMap.forEach((k, v) -> {
if (!filled.get()) {
Region node = (Region) v.getMin().getNode();
node.applyCss();
path.setFill(node.getBackground().getFills().get(0).getFill());
path.setStroke(path.getFill());
filled.set(true);
}
Bounds minPointBounds = v.getMin().getNode().getBoundsInParent();
Bounds maxPointBounds = v.getMax().getNode().getBoundsInParent();
double minX = minPointBounds.getMinX() + minPointBounds.getWidth() / 2;
double minY = minPointBounds.getMinY() + minPointBounds.getHeight() / 2;
double maxX = maxPointBounds.getMinX() + maxPointBounds.getWidth() / 2;
double maxY = maxPointBounds.getMinY() + maxPointBounds.getHeight() / 2;
// Draw a line in the path from min to max points for each unique Y value.
path.getElements().addAll(new MoveTo(minX, minY), new LineTo(maxX, maxY));
});
// Add the path to plot children and keep a reference for later use.
getPlotChildren().add(path);
paths.add(path);
}
}
private int compareTo(Number n1, Number n2) {
BigDecimal b1 = new BigDecimal(n1.doubleValue());
BigDecimal b2 = new BigDecimal(n2.doubleValue());
return b1.compareTo(b2);
}
/**
* Data object to hold min and max items.
*/
class MinMax<K, V> {
private K min;
private V max;
public MinMax(#NamedArg("key") K min, #NamedArg("value") V max) {
this.min = min;
this.max = max;
}
public K getMin() {
return min;
}
public V getMax() {
return max;
}
public void setMin(K min) {
this.min = min;
}
public void setMax(V max) {
this.max = max;
}
}
}
}