JavaFx 2.x: How to write text on a chart?

Question

By left mouse click on a chart I would like to write text by creating a text area rectangle so to be able to resize and move.

Any help really appreciated

Edit: Hi sarcan thank you very much for your kind reply.

I tried your code, it compiles and it plots an area chart with annotation, very great work!

I now need to change your code in a way to be able to type with key keyboard once left mouse clicked instead of printing annotations as of now.

Below is your full code

import javafx.application.Application;
import javafx.beans.InvalidationListener;
import javafx.beans.Observable;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.Axis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.control.Label;
import javafx.scene.input.MouseButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

/**
*
* @author sarcan
*/
public class SampleApp extends Application {

public class SampleChart extends AreaChart<Number, Number> {
public SampleChart() {
    super(new NumberAxis(), new NumberAxis());

    getXAxis().setLabel("X");
    getYAxis().setLabel("Y");

    final Series<Number, Number> data = new Series<Number, Number>();
    data.setName("Dummy data");
    data.getData().addAll(
            new Data<Number, Number>(0,4),
            new Data<Number, Number>(1,5),
            new Data<Number, Number>(2,6),
            new Data<Number, Number>(3,5),
            new Data<Number, Number>(4,5),
            new Data<Number, Number>(5,7),
            new Data<Number, Number>(6,8),
            new Data<Number, Number>(7,9),
            new Data<Number, Number>(8,7)
    );

    getData().add(data);
}
}

public class ChartAnnotationNode {
private final Node _node;
private double _x;
private double _y;

public ChartAnnotationNode(final Node node, final double x, final double y) {
    _node = node;
    _x = x;
    _y = y;
}

public Node getNode() {
    return _node;
}

public double getX() {
    return _x;
}

public double getY() {
    return _y;
}

public void setX(final double x) {
    _x = x;
}

public void setY(final double y) {
    _y = y;
}
}

public class ChartAnnotationOverlay extends Pane {
private ObservableList<ChartAnnotationNode> _annotationNodes;
private XYChart<Number, Number> _chart;

public ChartAnnotationOverlay(final XYChart<Number, Number> chart) {
    _chart = chart;

    /* Create a list to hold your annotations */
    _annotationNodes = FXCollections.observableArrayList();

    /* This will be our update listener, to be invoked whenever the chart changes or annotations are added */
    final InvalidationListener listener = new InvalidationListener() {
        @Override
        public void invalidated(final Observable observable) {
            update();
        }
    };
    _chart.needsLayoutProperty().addListener(listener);
    _annotationNodes.addListener(listener);

    /* Add new annotations by shift-clicking */
    setOnMouseClicked(new EventHandler<MouseEvent>() {
        @Override
        public void handle(final MouseEvent mouseEvent) {
            if (mouseEvent.getButton() == MouseButton.PRIMARY  && mouseEvent.isShiftDown())
                addAnnotation(mouseEvent.getX(), mouseEvent.getY());
        }
    });
}

/**
 * Invoked whenever the chart changes or annotations are added. This basically does a relayout of the annotation nodes.
 */
private void update(){
    getChildren().clear();

    final Axis<Number> xAxis = _chart.getXAxis();
    final Axis<Number> yAxis = _chart.getYAxis();

    /* For each annotation, add a circle indicating the position and the custom node right next to it */
    for (ChartAnnotationNode annotation : _annotationNodes) {
        final double x = xAxis.localToParent(xAxis.getDisplayPosition(annotation.getX()), 0).getX() + _chart.getPadding().getLeft();
        final double y = yAxis.localToParent(0,yAxis.getDisplayPosition(annotation.getY())).getY() + _chart.getPadding().getTop();

        final Circle indicator = new Circle(3);
        indicator.setStroke(Color.BLUEVIOLET);
        indicator.setCenterX(x);
        indicator.setCenterY(y);

        getChildren().add(indicator);

        final Node node = annotation.getNode();
        getChildren().add(node);
        node.relocate(x + 10, y - node.prefHeight(Integer.MAX_VALUE) / 2);
        node.autosize();
    }
}

/**
 * Add a new annotation for the given display coordinate.
 */
private void addAnnotation(final double displayX, final double displayY){
    final Axis<Number> xAxis = _chart.getXAxis();
    final Axis<Number> yAxis = _chart.getYAxis();

    final double x = (xAxis.getValueForDisplay(xAxis.parentToLocal(displayX, 0).getX() - _chart.getPadding().getLeft())).doubleValue();
    final double y = (yAxis.getValueForDisplay(yAxis.parentToLocal(0, displayY).getY() - _chart.getPadding().getTop())).doubleValue();

    if (xAxis.isValueOnAxis(x) && yAxis.isValueOnAxis(y))
        _annotationNodes.add(new ChartAnnotationNode(new Label("Annotation "+System.currentTimeMillis()), x, y));
}
}


@Override
public void start(final Stage stage) throws Exception {
    final SampleChart chart = new SampleChart();

    final ChartAnnotationOverlay overlay = new ChartAnnotationOverlay(chart);

    final StackPane stackPane = new StackPane();
    stackPane.getChildren().addAll(chart, overlay);

    final Scene scene = new Scene(stackPane);
    stage.setScene(scene);
    stage.setWidth(800);
    stage.setHeight(600);
    stage.show();
}

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

Answer 1

1) I'd start by putting the chart within a StackPane. On top of the chart I'd place an anchor pane holding the text field upon mouse click.

2) When the user clicks the chart, I'd use the chart's axes to determine whether the click was inside the plot area and which 'value' was clicked (using NumberAxis#getValueForDisplay().

3) I would then add listeners to the chart in order to be notified of any changes (content, width, height...) and adapt the text area's position to always display near the same value.

Resizing / straight-forward, please let us know if that gives you any trouble.

Edit: As requested, here is some sample code. The code below provides a simplified example, allowing you to add text nodes (I'll call them annotations) to the chart by shift-clicking. Dragging or editing the annotations is straight-forward, but I wanted to keep the example concise.

Lets start by defining a sample chart:

public class SampleChart extends AreaChart<Number, Number> {
    public SampleChart() {
        super(new NumberAxis(), new NumberAxis());

        getXAxis().setLabel("X");
        getYAxis().setLabel("Y");

        final Series<Number, Number> data = new Series<Number, Number>();
        data.setName("Dummy data");
        data.getData().addAll(
                new Data<Number, Number>(0,4),
                new Data<Number, Number>(1,5),
                new Data<Number, Number>(2,6),
                new Data<Number, Number>(3,5),
                new Data<Number, Number>(4,5),
                new Data<Number, Number>(5,7),
                new Data<Number, Number>(6,8),
                new Data<Number, Number>(7,9),
                new Data<Number, Number>(8,7)
        );

        getData().add(data);
    }
}

Nothing fancy so far, I just create an area chart with some random mock data.

For the text nodes (or annotations), I've created a simple POJO containing the annotated X/Y value (not display position) and taking a custom node to be rendered:

public class ChartAnnotationNode {
    private final Node _node;
    private double _x;
    private double _y;

    public ChartAnnotationNode(final Node node, final double x, final double y) {
        _node = node;
        _x = x;
        _y = y;
    }

    public Node getNode() {
        return _node;
    }

    public double getX() {
        return _x;
    }

    public double getY() {
        return _y;
    }

    public void setX(final double x) {
        _x = x;
    }

    public void setY(final double y) {
        _y = y;
    }
}

The interesting stuff happens within what I'll refer to as the overlay: a transparent panel which will be placed above the chart. Note that I did not, as originally advised, choose AnchorPane, though that would have worked as well. Furthermore, this implementation is not exactly the most efficient approach, but I wanted to keep the example simple.

public class ChartAnnotationOverlay extends Pane {
    private ObservableList<ChartAnnotationNode> _annotationNodes;
    private XYChart<Number, Number> _chart;

    public ChartAnnotationOverlay(final XYChart<Number, Number> chart) {
        _chart = chart;

        /* Create a list to hold your annotations */
        _annotationNodes = FXCollections.observableArrayList();

        /* This will be our update listener, to be invoked whenever the chart changes or annotations are added */
        final InvalidationListener listener = new InvalidationListener() {
            @Override
            public void invalidated(final Observable observable) {
                update();
            }
        };
        _chart.needsLayoutProperty().addListener(listener);
        _annotationNodes.addListener(listener);

        /* Add new annotations by shift-clicking */
        setOnMouseClicked(new EventHandler<MouseEvent>() {
            @Override
            public void handle(final MouseEvent mouseEvent) {
                if (mouseEvent.getButton() == MouseButton.PRIMARY  && mouseEvent.isShiftDown())
                    addAnnotation(mouseEvent.getX(), mouseEvent.getY());
            }
        });
    }

    /**
     * Invoked whenever the chart changes or annotations are added. This basically does a relayout of the annotation nodes.
     */
    private void update(){
        getChildren().clear();

        final Axis<Number> xAxis = _chart.getXAxis();
        final Axis<Number> yAxis = _chart.getYAxis();

        /* For each annotation, add a circle indicating the position and the custom node right next to it */
        for (ChartAnnotationNode annotation : _annotationNodes) {
            final double x = xAxis.localToParent(xAxis.getDisplayPosition(annotation.getX()), 0).getX() + _chart.getPadding().getLeft();
            final double y = yAxis.localToParent(0,yAxis.getDisplayPosition(annotation.getY())).getY() + _chart.getPadding().getTop();

            final Circle indicator = new Circle(3);
            indicator.setStroke(Color.BLUEVIOLET);
            indicator.setCenterX(x);
            indicator.setCenterY(y);

            getChildren().add(indicator);

            final Node node = annotation.getNode();
            getChildren().add(node);
            node.relocate(x + 10, y - node.prefHeight(Integer.MAX_VALUE) / 2);
            node.autosize();
        }
    }

    /**
     * Add a new annotation for the given display coordinate.
     */
    private void addAnnotation(final double displayX, final double displayY){
        final Axis<Number> xAxis = _chart.getXAxis();
        final Axis<Number> yAxis = _chart.getYAxis();

        final double x = (xAxis.getValueForDisplay(xAxis.parentToLocal(displayX, 0).getX() - _chart.getPadding().getLeft())).doubleValue();
        final double y = (yAxis.getValueForDisplay(yAxis.parentToLocal(0, displayY).getY() - _chart.getPadding().getTop())).doubleValue();

        if (xAxis.isValueOnAxis(x) && yAxis.isValueOnAxis(y))
            _annotationNodes.add(new ChartAnnotationNode(new Label("Annotation "+System.currentTimeMillis()), x, y));
    }
}

The tricky part is the coordinate translation between view and display. To get the display position for a given value, you can invoke Axis#getDisplayPosition(...), yet the coordinate returned will be in the axis' coordinate space. The call to Axis#localToParent translates this into the chart's coordinate space. Normally, you'd expect to be able to just use those coordinates, but the chart has a default padding of 5 pixels that for some reason will not be translated correctly.

Here's a small test app putting it all together:

public class SampleApp extends Application {
    @Override
    public void start(final Stage stage) throws Exception {
        final SampleChart chart = new SampleChart();

        final ChartAnnotationOverlay overlay = new ChartAnnotationOverlay(chart);

        final StackPane stackPane = new StackPane();
        stackPane.getChildren().addAll(chart, overlay);

        final Scene scene = new Scene(stackPane);
        stage.setScene(scene);
        stage.setWidth(800);
        stage.setHeight(600);
        stage.show();
    }

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

Now that you have the overlay code + the idea behind translating coordinates, dragging the nodes should be simple as well. When an annotation's node is dragged, get its display position, add the drag delta, convert it to value and apply it to the annotation instance.

Hope this makes things a bit more clear.