Question

This code plots a simple XYLine Chart

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class XyChart extends Application {

@Override
public void start(Stage stage) {
   stage.setTitle("Line plot");

   final CategoryAxis xAxis = new CategoryAxis();
   final NumberAxis yAxis = new NumberAxis(1, 21,0.1);

   yAxis.setTickUnit(1);
   yAxis.setPrefWidth(35);
   yAxis.setMinorTickCount(10);

   yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis){
        @Override
    public String toString(Number object){
            String label;
            label = String.format("%7.2f", object.floatValue());
            return label;
    }
});
final LineChart<String, Number>lineChart = new LineChart<String, Number>(xAxis, yAxis);

   lineChart.setCreateSymbols(false);
   lineChart.setAlternativeRowFillVisible(false);
   lineChart.setLegendVisible(false);

   XYChart.Series series1 = new XYChart.Series();

    series1.getData().add(new XYChart.Data("Jan", 1));
    series1.getData().add(new XYChart.Data("Feb", 4));
    series1.getData().add(new XYChart.Data("Mar", 2.5));
    series1.getData().add(new XYChart.Data("Apr", 5));
    series1.getData().add(new XYChart.Data("May", 6));
    series1.getData().add(new XYChart.Data("Jun", 8));
    series1.getData().add(new XYChart.Data("Jul", 12));
    series1.getData().add(new XYChart.Data("Aug", 8));
    series1.getData().add(new XYChart.Data("Sep", 11));
    series1.getData().add(new XYChart.Data("Oct", 13));
    series1.getData().add(new XYChart.Data("Nov", 10));
    series1.getData().add(new XYChart.Data("Dec", 20));

    BorderPane pane = new BorderPane();
    pane.setCenter(lineChart);          
    Scene scene = new Scene(pane, 800, 600);
    lineChart.setAnimated(false);
    lineChart.getData().addAll(series1);       

    stage.setScene(scene);
    stage.show();
}

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

I would like to draw arrows on the chart by left mouse click pressed and moved, such as this example

How to do this?

Thanks all.

Answer 1

You can add mouse handlers to the border pane and draw the arrow when the mouse moves.
There might be better ways, but this is what I came up with:

Add mouse handler to your border pane:

MouseHandler mh = new MouseHandler( pane );
pane.setOnMouseClicked( mh );
pane.setOnMouseMoved( mh );

The handler class could be as follows:

class MouseHandler implements EventHandler< MouseEvent > {
    private boolean gotFirst    = false;
    private Line    line, head1, head2;
    private Pane    pane;
    private double  x1, y1, x2, y2;
    double          phi         = Math.toRadians( 40 );
    double          barb        = 20;

    public MouseHandler( Pane pane ) {
        this.pane = pane;
    }

    @Override
    public void handle( MouseEvent event ) {
        if( event.getEventType() == MouseEvent.MOUSE_CLICKED ) {
            if( !gotFirst ) {
                x1 = x2 = event.getX();
                y1 = y2 = event.getY();
                line = new Line( x1, y1, x2, y2 );
                head1 = new Line( x2, y2, x2, y2 );
                head2 = new Line( x2, y2, x2, y2 );
                pane.getChildren().add( line );
                pane.getChildren().add( head1 );
                pane.getChildren().add( head2 );
                gotFirst = true;
            } else {
                line = null;
                gotFirst = false;
            }
        } else {
            if( line != null ) {
                x2 = event.getX();
                y2 = event.getY();
                // update line
                line.setEndX( x2 );
                line.setEndY( y2 );
                // draw head
                // http://www.coderanch.com/t/340443/GUI/java/Draw-arrow-head-end-line
                double dx = x2 - x1;
                double dy = y2 - y1;
                double theta = Math.atan2( dy, dx );
                double x, y, rho = theta + phi;

                x = x2 - barb * Math.cos( rho );
                y = y2 - barb * Math.sin( rho );
                head1.setStartX( x2 );
                head1.setStartY( y2 );
                head1.setEndX( x );
                head1.setEndY( y );
                rho = theta - phi;
                x = x2 - barb * Math.cos( rho );
                y = y2 - barb * Math.sin( rho );
                head2.setStartX( x2 );
                head2.setStartY( y2 );
                head2.setEndX( x );
                head2.setEndY( y );
            }
        }
    }

}