How to combine scatter chart with line chart to show line of regression? JavaFX

Question

I've created a scatter chart with two sets of data; the first set is the actual data (x = year and y = pence) and the second set produces the same points but for the line of regression. However the problem I'm having is that both sets of data are shown as scatter points. I want to show the first set as scatter points and have the second set on the same graph but showing as a line. I've been at it for a long time but I can't figure out a way to do this.

the scatter chart code is shown on oracle; http://docs.oracle.com/javafx/2/charts/scatter-chart.htm�

For example, I've been trying to do this:

final ScatterChart<Number,Number> sc = new
        ScatterChart<Number,Number>(xAxis,yAxis);
final LineChart<Number,Number> lc = new
        LineChart<Number,Number>(xAxis,yAxis);

XYChart.Series series1 = new XYChart.Series();
    series1.setName("Equities");
    series1.getData().add(new XYChart.Data(4.2, 193.2));
    series1.getData().add(new XYChart.Data(2.8, 33.6));

XYChart.Series series2 = new XYChart.Series();
    series2.setName("Mutual funds");
    series2.getData().add(new XYChart.Data(5.2, 229.2));
    series2.getData().add(new XYChart.Data(2.4, 37.6));

    sc.getData().addAll(series1);
    lc.getData(0.addAll(series2);
    Scene scene  = new Scene(sc, 500, 400);
    stage.setScene(scene);
    stage.show();
}

public static void main(String[] args) {
    launch(args);
}

The problem is that the scene can only be set to either sc or lc, not both. Is there anything that I can do or is it just impossible?

Thanks

Answer 1

While @Mailkov solution is fine, it has some drawbacks (overlapping legends, tooltips...).

Just for mixing an scattered chart with a line chart in the same chart there's a very simple way, with css.

We create one LineChart with two series. Let's say the first one is the scatter, and the second the line, and with css we get rid of the line for the first one, while (this is optional) we take out the symbols of the second one, and keep both legends.

Using this css (chart.css):

.default-color0.chart-series-line { -fx-stroke: transparent; }
.default-color1.chart-series-line { -fx-stroke: red; }

.default-color0.chart-line-symbol { 
    -fx-background-color: white, green; 
}
.default-color1.chart-line-symbol { 
    -fx-background-color: transparent, transparent; 
}

.default-color0.chart-legend-item-symbol{
    -fx-background-color: green;
 }
.default-color1.chart-legend-item-symbol{
    -fx-background-color: red;
 }

and this code:

@Override
public void start(Stage stage) {
    final LineChart<Number,Number> sc = new LineChart<>(new NumberAxis(),new NumberAxis());

    XYChart.Series series1 = new XYChart.Series();
    series1.setName("Equities");
    series1.getData().add(new XYChart.Data(4.2, 193.2));
    series1.getData().add(new XYChart.Data(2.8, 33.6));
    series1.getData().add(new XYChart.Data(6.8, 23.6));

    XYChart.Series series2 = new XYChart.Series();
    series2.setName("Mutual funds");
    series2.getData().add(new XYChart.Data(5.2, 229.2));
    series2.getData().add(new XYChart.Data(2.4, 37.6));
    series2.getData().add(new XYChart.Data(6.4, 15.6));

    sc.setAnimated(false);
    sc.setCreateSymbols(true);

    sc.getData().addAll(series1, series2);

    Scene scene  = new Scene(sc, 500, 400);
    scene.getStylesheets().add(getClass().getResource("root.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
}

we will have one simple chart with two different series: