Floxii
Floxii

Reputation: 55

How can I draw a crosshair Line on a LineChart following my mouse position

I'm trying to draw a vertical line and a horizontal line pointing where my mouse is pointing, I'd like to see my "cursor" moving with my mouse.

So I tried to add a Line to my chart but I can't add something because a linechart does not have a getChildren() function. Thus, I would like to have something like that :

enter image description here

I'm also thinking if these "cursor" can be a object, when I call my class "Cursor" it would create 2 lines, one vertical and one horizontal ?

My code :

I tried to use LineBuilder which draw a line but now how i wanted. Now, I succeed to get my mouse location, how could I draw 2 lines now?

    NumberAxis x = new NumberAxis();
    NumberAxis y = new NumberAxis();
    LineChart<Number,Number> chart = new LineChart<Number,Number>(x,y);
    XYChart.Series series1 = ...;
     // creating a series then giving this series 100 random values
    chart.getData().add(series1);
    chartPane.getChildren().add(chart);

    chart.setOnMousePressed((MouseEvent event) -> {

    Point2D mouseSceneCoords = new Point2D(event.getSceneX(),       event.getSceneY());
    double x = xAxis.sceneToLocal(mouseSceneCoords).getX();
    double y = yAxis.sceneToLocal(mouseSceneCoords).getY();

    primaryStage.setTitle("" +
        xAxis.getValueForDisplay(x) + ",  " +
        yAxis.getValueForDisplay(y)
    );
});

So now that I succeed to apply your code on my app, I have a problem : enter image description here My mouse was pointing on the point (800,10) but my cursor is totally far away from my mouse's location.

Upvotes: 4

Views: 1073

Answers (1)

SedJ601
SedJ601

Reputation: 13859

The key is using a StackPane. That way you can add a Pane that can handle the two lines. Here is a rough example:

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.ValueAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Line;
import javafx.stage.Stage;

public class LineChartExperiments extends Application
{

    double mouseX = 0;
    double mouseY = 0;

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

        primaryStage.setTitle("LineChart Experiments");

        ValueAxis xAxis = new NumberAxis();
        xAxis.setLabel("No of employees");

        ValueAxis yAxis = new NumberAxis();
        yAxis.setLabel("Revenue per employee");

        LineChart lineChart = new LineChart(xAxis, yAxis);

        XYChart.Series dataSeries1 = new XYChart.Series();
        dataSeries1.setName("2014");

        dataSeries1.getData().add(new XYChart.Data(1, 567));
        dataSeries1.getData().add(new XYChart.Data(5, 612));
        dataSeries1.getData().add(new XYChart.Data(10, 800));
        dataSeries1.getData().add(new XYChart.Data(20, 780));
        dataSeries1.getData().add(new XYChart.Data(40, 810));
        dataSeries1.getData().add(new XYChart.Data(80, 850));

        lineChart.getData().add(dataSeries1);

        Line verticleLine = new Line();
        verticleLine.setStrokeWidth(3);
        Line horizontalLine = new Line();
        horizontalLine.setStrokeWidth(3);

        Pane pane = new Pane(verticleLine, horizontalLine);

        AnimationTimer loop = new AnimationTimer()
        {
            @Override
            public void handle(long now)
            {
                verticleLine.setStartY(0);
                verticleLine.setEndY(pane.getHeight());
                verticleLine.setEndX(mouseX);
                verticleLine.setStartX(mouseX);

                horizontalLine.setStartX(0);
                horizontalLine.setEndX(pane.getWidth());
                horizontalLine.setEndY(mouseY);
                horizontalLine.setStartY(mouseY);
            }
        };

        pane.addEventFilter(MouseEvent.ANY, event -> {
            mouseX = event.getSceneX();
            mouseY = event.getSceneY();

            loop.start();
        });

        StackPane stackPane = new StackPane(lineChart, pane);

        Scene scene = new Scene(stackPane, 400, 200);

        primaryStage.setScene(scene);
        primaryStage.setHeight(500);
        primaryStage.setWidth(700);

        primaryStage.show();

    }

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

**This code has many flaws and should only be used as a proof of concept.

Upvotes: 5

Related Questions