JavaFX: Appending line to path as animation

Question

Hi,

I am trying to create an animated chart which grows to the right as new data is added. I'm using a path for plotting the variables (JavaFX LineChart seems too slow), attempting to plot a new variable every 500ms by appending a new LineTo to the set of path elements. I have reduced the problem down to the following sample code. Could any JavaFX experts tell me why this doesn't result in a line that grows down and to the right as time passes?:

var newX = 10;
var lineElements: PathElement[];


Timeline {
   repeatCount: Timeline.INDEFINITE
   keyFrames: [
      KeyFrame {
         time: 500ms
         canSkip: false
         action: function () {
            newX = newX + 10;
            insert [LineTo {x: newX, y: 100}] into lineElements;
         }
      }
   ]
}.play();

Stage {
   title: "Application title"
   scene: Scene {
      width: 250
      height: 80
      content: [
         Path {
            fill: null
            stroke: Color.RED
            strokeWidth: 2
            elements: bind lineElements = [
               MoveTo {
                  x: 0
                  y: 100
               }
            ]
         }
      ]
   }
}

Thanks a bunch.

Answer 1

I think you are doing two things wrong:

I do not like the initialization order but that might be just a style thing

You need to also increase Y or make your PathElements relative to each other.

var lineElements: PathElement[] = [MoveTo {
     x: 0
     y: 100
}];
Timeline {
   repeatCount: Timeline.INDEFINITE
   keyFrames: [
      KeyFrame {
         time: 500ms
         canSkip: false
         action: function () {
            insert LineTo {x: 10 y: 10 absolute: false} into lineElements;
         }
      }
   ]
}.play();

Stage {
   scene: Scene {
      content: [
         Path {
            fill: null
            stroke: Color.RED
            strokeWidth: 2
            elements: bind lineElements
         }
      ]
   }
}