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:

Answer 2

An easier way might be just to use LineChart for all series and then add the below line for any series in which you don't want lines to be plotted. Line below changes series 0 to have no line but for other series you can simply change number (default-colourXX) to define which series.

sc.lookup(".default-color0.chart-series-line").setStyle("-fxstroke: transparent");

Very similar to @José Pereda but perhaps little easier than messing around with CSS files.

Answer 3

I add to Pane the two ScatterChart and i have set Opacity at (0.5) try it.

I hope I have helped.

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().addAll(series2);

Pane pane=new Pane();
pane.getChildren().add(sc);
pane.getChildren().add(lc);

lc.setOpacity(0.5);

Scene scene  = new Scene(pane, 500, 400);
stage.setScene(scene);
stage.show();
}

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

Answer 4

I do not have enough "reputation" to add a comment below Mailkov's answer, but I think that there is an issue with the proposed answer.

1) As a matter of fact, the full orange dots of the scattered chart are not where they are supposed to be (x = 2.8 and x = 4.2).

import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class Exemple158bis_JavaFX_Overlaid_Stacked_Charts extends Application {

@Override
public void start(Stage stage) throws Exception {

    NumberAxis xAxis = new NumberAxis();
    NumberAxis yAxis = new NumberAxis();

    final ScatterChart<Number, Number> sc = new ScatterChart<>(xAxis, yAxis);
    final LineChart<Number, Number> lc = new LineChart<>(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().addAll(series2);

    Pane pane = new Pane();
    pane.getChildren().add(sc);
    pane.getChildren().add(lc);

    lc.setOpacity(0.5);

    Scene scene = new Scene(pane, 800, 600);
    stage.setScene(scene);
    stage.show();
}

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

}

2) A solution is to set the bounds of the axis from the beginning:

NumberAxis xAxis = new NumberAxis(0, 5.5, 0.5); 
NumberAxis yAxis = new NumberAxis(0, 240, 10);