0

I have an interactive chart in JavaFX using linechart and a slider that represents a graphed value over time. The user moves the slider and it moves a cursor across the chart. I figured out how to add the cursor line to the linechart by adding the chart and a pane containing a line to a stackpane and updating the line's position relative to the chart.

Now I want to draw some vertical lines on my slider to indicate areas of interest at specific intervals. However I do not have tick marks showing on my slider so I can't look up the axis to get any positions.

I also don't know how many areas of interest there will be so I'm trying to draw lines on the slider after it has all been drawn initially and I'm not sure if it will work. I tried adding the slider and a canvas to a stackpane and then retrieving the 2d graphics context of the canvas and using strokeline but nothing is showing up. I'm not really sure what to try.

Basically I want to know if there is a way to draw multiple vertical lines on top of a slider at any position and how to retrieve the graphical position based off slider value if ticks are turned off and we can't access the axis property.

Edit: I figured out how to draw lines on the chart but now I can't get the correct position. What I did was add both the slider and another transparent pane to a stack pane, then on the transparent pane I added a line. However I can't get it to draw in the correct position using axis getDisplayPosition.

If I do this:

jSlider.setValue(14);
NumberAxis axis = (NumberAxis) jSlider.lookup(".axis");
Bounds bounds = axis.localToScene(axis.getBoundsInLocal());

double x = axis.getDisplayPosition(14);
x += axis.getLayoutX() + bounds.getMinX();

line = new Line(x,0,x,100);
line.getStyleClass().clear();
line.getStyleClass().add("multi_graph_scribe");
glassPane.getChildren().add(line);
if(!line.isVisible())
    line.setVisible(true);

incorrect placement using axis display position of value

I end up with a slider in the wrong spot, see my first screenshot. If I draw a line where the thumb is it ends up in the correct spot, but of course I don't want to preposition the slider just to draw these lines. I feel like I'm missing the offest for the axis position even though I tried to account for it with set bounds to local. But even then I'm not sure, because I tried getting display position for a value of 20 and the line moves but it doesn't move 6 ticks worth of real estate.

jSlider.setValue(14);
NumberAxis axis = (NumberAxis) jSlider.lookup(".axis");
Bounds bounds = axis.localToScene(axis.getBoundsInLocal());

double x = axis.getDisplayPosition(14);
x += axis.getLayoutX() + bounds.getMinX();

StackPane p = (StackPane)jSlider.lookup(".thumb");
x = p.getLayoutX() +( p.getWidth() /2);


line = new Line(x,0,x,100);
line.getStyleClass().clear();
line.getStyleClass().add("multi_graph_scribe");
glassPane.getChildren().add(line);
if(!line.isVisible())
    line.setVisible(true);

correct placement using thumb position

Mark
  • 158
  • 1
  • 2
  • 8
  • 2
    What do you mean by "vertical lines" if you don't mean 'ticks'? I'm confused about what you're asking. – MMAdams Jan 08 '18 at 19:56
  • Yes ticks basically, but at specific irregular positions. Like if my data spans 0 - 200 seconds I might have one at 15 seconds, one at 55 seconds and one at 197 seconds for example. It's like a flight recorder and I'm loading files already recorded and want to highlight particular events. – Mark Jan 08 '18 at 21:23
  • Possible duplicate of [JavaFX 2.2 configuring Slider ticks manually](https://stackoverflow.com/questions/18904969/javafx-2-2-configuring-slider-ticks-manually) – meowgoesthedog Jan 09 '18 at 01:39

0 Answers0