JavaFX 2.x : How to move Line, Grid and X Ticks together? - grid

Question

The code below plots a XYLineChart: by left mouse click and drag the plotted line can be translated left/right.
import javafx.application.Application;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.event.EventHandler;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
enter code here
public class GridMove extends Application {
BorderPane pane;
XYChart.Series series1 = new XYChart.Series();
SimpleDoubleProperty rectinitX = new SimpleDoubleProperty();
SimpleDoubleProperty rectX = new SimpleDoubleProperty();
SimpleDoubleProperty rectY = new SimpleDoubleProperty();
#Override
public void start(Stage stage) {
final NumberAxis xAxis = new NumberAxis(1, 12, 1);
final NumberAxis yAxis = new NumberAxis(0.53000, 0.53910, 0.0005);
xAxis.setAnimated(false);
yAxis.setAnimated(false);
yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis) {
#Override
public String toString(Number object) {
return String.format("%7.5f", object);
}
});
final LineChart<Number, Number> lineChart = new LineChart<Number, Number>(xAxis, yAxis);
lineChart.setCreateSymbols(false);
lineChart.setAlternativeRowFillVisible(false);
lineChart.setAnimated(false);
lineChart.setLegendVisible(false);
series1.getData().add(new XYChart.Data(1, 0.53185));
series1.getData().add(new XYChart.Data(2, 0.532235));
series1.getData().add(new XYChart.Data(3, 0.53234));
series1.getData().add(new XYChart.Data(4, 0.538765));
series1.getData().add(new XYChart.Data(5, 0.53442));
series1.getData().add(new XYChart.Data(6, 0.534658));
series1.getData().add(new XYChart.Data(7, 0.53023));
series1.getData().add(new XYChart.Data(8, 0.53001));
series1.getData().add(new XYChart.Data(9, 0.53589));
series1.getData().add(new XYChart.Data(10, 0.53476));
pane = new BorderPane();
pane.setCenter(lineChart);
Scene scene = new Scene(pane, 800, 600);
lineChart.getData().addAll(series1);
stage.setScene(scene);
scene.setOnMouseClicked(mouseHandler);
scene.setOnMouseDragged(mouseHandler);
scene.setOnMouseEntered(mouseHandler);
scene.setOnMouseExited(mouseHandler);
scene.setOnMouseMoved(mouseHandler);
scene.setOnMousePressed(mouseHandler);
scene.setOnMouseReleased(mouseHandler);
stage.show();
}
EventHandler<MouseEvent> mouseHandler = new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent mouseEvent) {
if (mouseEvent.getEventType() == MouseEvent.MOUSE_PRESSED) {
rectinitX.set(mouseEvent.getX());
} else if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED || mouseEvent.getEventType() == MouseEvent.MOUSE_MOVED) {
LineChart<Number, Number> lineChart = (LineChart<Number, Number>) pane.getCenter();
NumberAxis xAxis = (NumberAxis) lineChart.getXAxis();
double Tgap = xAxis.getWidth() / (xAxis.getUpperBound() - xAxis.getLowerBound());
double newXlower = xAxis.getLowerBound(), newXupper = xAxis.getUpperBound();
double Delta = 0.3;
if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED) {
if (rectinitX.get() < mouseEvent.getX()) {
newXlower = xAxis.getLowerBound() - Delta;
newXupper = xAxis.getUpperBound() - Delta;
} else if (rectinitX.get() > mouseEvent.getX()) {
newXlower = xAxis.getLowerBound() + Delta;
newXupper = xAxis.getUpperBound() + Delta;
}
xAxis.setLowerBound(newXlower);
xAxis.setUpperBound(newXupper);
}
rectinitX.set(mouseEvent.getX());
}
}
};
public static void main(String[] args) {
launch(args);
}
}
My questions are
1) Now by moving the Line left/right, Grid and X Ticks does not move: so, how to translate Line, Grid and X Ticks together?
2) Is it possible to accomplish this in JavaFx 2?
Thanks
Edit Nobody willing to help?
Edit 2: import statements added
Edit 3: Code improvements, now grid and line moves together. It only remains to move X axis ticks along with line and grid, and vertical grid lines are missing outside line range values
import java.util.Set;
import javafx.application.Application;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.scene.chart.Axis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.chart.XYChart.Series;
import javafx.stage.Stage;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
public class GridMove extends Application {
BorderPane pane;
XYChart.Series series1 = new XYChart.Series();
SimpleDoubleProperty rectinitX = new SimpleDoubleProperty();
SimpleDoubleProperty rectX = new SimpleDoubleProperty();
SimpleDoubleProperty rectY = new SimpleDoubleProperty();
LineChart<Number, Number> lineChart;
#Override
public void start(Stage stage) {
final NumberAxis xAxis = new NumberAxis(1, 12, 1);
final NumberAxis yAxis = new NumberAxis(0.53000, 0.53910, 0.0005);
xAxis.setAnimated(false);
yAxis.setAnimated(false);
yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis) {
#Override
public String toString(Number object) {
return String.format("%7.5f", object);
}
});
lineChart = new LineChart<Number, Number>(xAxis, yAxis);
lineChart.setCreateSymbols(false);
lineChart.setAlternativeRowFillVisible(false);
lineChart.setAnimated(false);
lineChart.setLegendVisible(false);
series1.getData().add(new XYChart.Data(1, 0.53185));
series1.getData().add(new XYChart.Data(2, 0.532235));
series1.getData().add(new XYChart.Data(3, 0.53234));
series1.getData().add(new XYChart.Data(4, 0.538765));
series1.getData().add(new XYChart.Data(5, 0.53442));
series1.getData().add(new XYChart.Data(6, 0.534658));
series1.getData().add(new XYChart.Data(7, 0.53023));
series1.getData().add(new XYChart.Data(8, 0.53001));
series1.getData().add(new XYChart.Data(9, 0.53589));
series1.getData().add(new XYChart.Data(10, 0.53476));
pane = new BorderPane();
pane.setCenter(lineChart);
Scene scene = new Scene(pane, 800, 600);
lineChart.getData().addAll(series1);
stage.setScene(scene);
scene.setOnMouseClicked(mouseHandler);
scene.setOnMouseDragged(mouseHandler);
scene.setOnMouseEntered(mouseHandler);
scene.setOnMouseExited(mouseHandler);
scene.setOnMouseMoved(mouseHandler);
scene.setOnMousePressed(mouseHandler);
scene.setOnMouseReleased(mouseHandler);
stage.show();
}
EventHandler<MouseEvent> mouseHandler = new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent mouseEvent) {
if (mouseEvent.getEventType() == MouseEvent.MOUSE_PRESSED) {
rectinitX.set(mouseEvent.getX());
} else if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED || mouseEvent.getEventType() == MouseEvent.MOUSE_MOVED) {
LineChart<Number, Number> lineChart = (LineChart<Number, Number>) pane.getCenter();
NumberAxis xAxis = (NumberAxis) lineChart.getXAxis();
double newXlower = xAxis.getLowerBound(), newXupper = xAxis.getUpperBound();
double Delta = 0.3;
if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED) {
if (rectinitX.get() < mouseEvent.getX()) {
Delta *= -1;
}
newXlower = xAxis.getLowerBound() + Delta;
newXupper = xAxis.getUpperBound() + Delta;
xAxis.setLowerBound(newXlower);
xAxis.setUpperBound(newXupper);
DoubleProperty p1 = xAxis.scaleXProperty();
DoubleProperty p2 = xAxis.translateXProperty();
double horizontalValueRange = xAxis.getUpperBound() - xAxis.getLowerBound();
double horizontalWidthPixels = xAxis.getWidth();
//pixels per unit
double xScale = horizontalWidthPixels / horizontalValueRange;
Set<Node> nodes = lineChart.lookupAll(".chart-vertical-grid-lines");
for (Node n: nodes) {
Path p = (Path) n;
double currLayoutX = p.getLayoutX();
p.setLayoutX(currLayoutX + (Delta*-1) * xScale);
}
double lox = xAxis.getLayoutX();
}
rectinitX.set(mouseEvent.getX());
}
}
};
public static void main(String[] args) {
launch(args);
}
}
Any help very much appreciated!

Answer 1

This is rather a comment but somehow im too new to comment.
I would approach this by embedding your chart in a ScrollPane with invisible scrollbars and set the chart's y-axis opacity to 0 as well. If it is not feasable to load all chart data into memory you have to manage data fetching in scroll events etc.
Additionally you can use a standalone NumberAxis for your y-axis. You have to do the propper scaling and positioning by hand.