0

I am trying to convert my GUI in Matlab to a JavaFX 8 applet. I would like a to have scatter plot where the plots are on the image as shown below.

Example of desired scatter plot

As seen above the picture of the CIE diagram is integrated with the scatter plot. I tried using a stackpane but the plots aren't visible as the image is over it.

edit-

trying to override layoutplotchildren():

class SuperScatterChart extends ScatterChart{

        public SuperScatterChart(Axis arg0, Axis arg1) {
            super(arg0, arg1 );
            // TODO Auto-generated constructor stub
        }




        @Override
        protected void layoutPlotChildren(){

            ImageView iv1 = new ImageView(new Image("file:///C:/Desktop/cie.png",450,450,true,true));
           // How do I add iv1 to plot children?
            super.layoutPlotChildren();

        }



    }
hfz
  • 401
  • 4
  • 16
  • Two approaches come to mind. 1. Use CSS: the [`.chart-plot-background` node](http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#xychart) is a [`Region`](http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#region), so you can set a `-fx-background-image` on it in CSS. 2. Subclass `ScatterChart` and override `layoutPlotChildren()` to add the image to the plot area, before calling `super.layoutPlotChildren()` to add the scatter points. See http://stackoverflow.com/questions/38871202 for something a bit similar. – James_D Aug 12 '16 at 14:11
  • Also: "I tried using a stackpane but the plots aren't visible as the image is over it." - if you add the image to the stackpane *before* the chart, that shouldn't happen. – James_D Aug 12 '16 at 14:14
  • I tried the first approach however, the image is behind the scatter chart. As for the second approach, what is the code syntax to change the image to the plot area in the overwritten layoutPlotChildren() ? Thanks @James_D – hfz Aug 14 '16 at 14:47
  • Just add an `ImageView ` containing the required image to the plot children, before calling `super.layoutPlotChildren()` – James_D Aug 14 '16 at 15:56
  • [edit] your question, don't post the code in comments. What happens? – James_D Aug 16 '16 at 08:34
  • @James_D Thanks, edited and added the code above. Actually there is no change, I don't know how to add the imageview to the plot children – hfz Aug 16 '16 at 10:06

1 Answers1

0

You add the image view to the plot children with

getPlotChildren().add(iv1);

You might not need to do this in the overridden layoutPlotChildren() method: it may be enough just to do it once in the constructor:

class SuperScatterChart extends ScatterChart<Number, Number>{

    private final ImageView iv1 ;

    public SuperScatterChart(NumberAxis xAxis, NumberAxis yAxis) {
        super(xAxis, yAxis);
        iv1 = new ImageView(new Image("file:///C:/Desktop/cie.png",450,450,true,true));
        getPlotChildren().add(iv1);
    }

}

That will place the image in a default location (I don't think the plot area does any default layout, so I think this will just be positioned in the top left). If you need to move it, add

@Override
protected void layoutPlotChildren() {
    double x = ... ; // x coordinate of image in xAxis coordinates
    double y = ... ; // y coordinate of image in yAxis coordinates

    double layoutX = getXAxis().getDisplayPosition(x);
    double layoutY = getYAxis().getDisplayPosition(y);

    iv1.setLayoutX(layoutX);
    iv1.setLayoutY(layoutY);

    super.layoutPlotChildren();
}

Note this gives you the chance to easily position the image using the "plot coordinates", i.e. the coordinate system of the chart axes, instead of the pixel-based coordinate system.

James_D
  • 201,275
  • 16
  • 291
  • 322