Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 813
HassanTheGooner Avatar asked Nov 07 '14 14:11

HassanTheGooner


People also ask

How do you overlay a line on a scatter plot in Excel?

On the All Charts tab, select Combo. For the main data series, choose the Line chart type. For the Vertical Line data series, pick Scatter with Straight Lines and select the Secondary Axis checkbox next to it. Click OK.

How do you make a line graph in Javafx?

To create a line chart, at a minimum, you must define two axes, create the LineChart object by instantiating the LineChart class, create one or more series of data by using the XYChart. Series class, and assign the data to the chart.

Do you connect the lines on a scatter plot?

Scatter plots are similar to line graphs in that they start with mapping quantitative data points. The difference is that with a scatter plot, the decision is made that the individual points should not be connected directly together with a line but, instead express a trend.

Which chart is used to show pairs of values scatter format?

Often referred to as an xy chart, a scatter chart never displays categories on the horizontal axis. A scatter chart always has two value axes to show one set of numerical data along a horizontal (value) axis and another set of numerical values along a vertical (value) axis.


1 Answers

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:

scatter and line chart

like image 189
José Pereda Avatar answered Sep 25 '22 19:09

José Pereda