How to change LineChart XAxis lower/upper bounds in ScalaFX?

Question

I have a ScalaFX LineChart whose XAxis is time. The data is dynamic, being updated in an AnimationTimer . As time progresses the plot moves to the right but the plot always starts at 0, so the visible domain increases, compressing the data points.

Here is the Stage :

new Stage {
  title = plotTitle
  scene = new Scene(600, 600) {
    val series = new XYChart.Series[Number, Number]()
    series.setName(s"Simple")
    val xAxis = NumberAxis("Time (s)")
    val yAxis = NumberAxis("Amplitude")
    val lineChart = new LineChart(xAxis, yAxis)
    lineChart.setAnimated(false)
    lineChart.getData.add(series)
    lineChart.setCreateSymbols(false)
    root = lineChart

    var index = 0
    val timer = AnimationTimer { time =>
      series.getData.add(XYChart.Data[Number, Number](index, math.cos(index)))
      if (series.getData.size > 100) series.getData.remove(0, series.getData.size() - 100)
      xAxis.lowerBound.value = math.max(index - 100, 0) // this has no effect
      xAxis.upperBound.value = math.max(index, 100) // this has no effect
      index += 1
    }
    timer.start()
  }
}

How do I update the lower/upper bounds of the XAxis in the AnimationTimer update? I tried setting the XAxis.lower/upperBound values during the animation update but it has no effect. I have tried other things to no avail. There are JavaFX solutions I've seen but I can't translate it to ScalaFX because there is not a one-to-one mapping of types.

Answer 1

You can specify an explicit lower bound in a few ways, but all require (to the best of my knowledge) manually also setting an upper bound and tick unit, and disabling auto-ranging:

1. By specifying the lower & upper bounds, and tick unit, as fixed values, in the NumberAxis constructor for the X-axis . Axes created in this way are automatically not auto-ranging.
2. By setting the lowerBound , upperBound and tickUnit properties of the X-axis NumberAxis to fixed values. This also requires setting the X-axis 's autoRanging = false .
3. By binding DoubleProperty instances to the lowerBound , upperBound and tickUnit properties of the X-axis NumberAxis . This allows the bounds and tick unit to be dynamically adjusted, by changing the value of the associated property. This also requires setting autoRanging = false .

Here's an example of the first option:

new Stage {
  title = plotTitle
  scene = new Scene(600, 600) {
    val series = new XYChart.Series[Number, Number]()
    series.setName(s"Simple")

    // Specify an X-axis with fixed upper & lower bounds, and tick unit
    // (separation of major tick values).
    //
    // Note: This is automatically not an auto-ranging axis.
    val xAxis = NumberAxis("Time (s)", 115.0, 225.0, 25.0)
    val yAxis = NumberAxis("Amplitude")
    val lineChart = new LineChart(xAxis, yAxis)
    lineChart.setAnimated(false)
    lineChart.getData.add(series)
    lineChart.setCreateSymbols(false)
    root = lineChart

    var index = 0
    val timer = AnimationTimer { time =>
      series.getData.add(XYChart.Data[Number, Number](index, math.cos(index)))
      if (series.getData.size > 100) series.getData.remove(0, series.getData.size() - 100)
      index += 1
    }
    timer.start()
  }
}

In this example, I'm combining the second and third options to use properties for the lower & upper bounds, with a fixed tick unit.

new Stage {
  title = plotTitle
  scene = new Scene(600, 600) {
    val series = new XYChart.Series[Number, Number]()
    series.setName(s"Simple")

    // Note: This axis is automatically auto-ranging.
    val xAxis = NumberAxis("Time (s)")
    val yAxis = NumberAxis("Amplitude")

    // Disable auto-ranging of the xAxis.
    xAxis.autoRanging = false

    // Create a double property whose value will be used as the lower bound of the
    // X-axis. If the value of this property is changed, the chart will update
    // accordingly, automatically. Make this 0 initially.
    val xLowBound = DoubleProperty(0.0)

    // Bind this property to the lowerBound of the X-axis
    xAxis.lowerBound <== xLowBound

    // Repeat for the upper bound. 100, initially.
    val xUpBound = DoubleProperty(100.0)
    xAxis.upperBound <== xUpBound

    // Set the tick unit to a fixed value.
    xAxis.tickUnit = 25.0

    val lineChart = new LineChart(xAxis, yAxis)
    lineChart.setAnimated(false)
    lineChart.getData.add(series)
    lineChart.setCreateSymbols(false)
    root = lineChart

    var index = 0
    val timer = AnimationTimer { time =>
      series.getData.add(XYChart.Data[Number, Number](index, math.cos(index)))
      if (series.getData.size > 100) series.getData.remove(0, series.getData.size() - 100)

      // Dynamically update the lower & upper bounds.
      xLowBound.value = math.max(index - 100, 0)
      xUpBound.value = math.max(index, 100)

      index += 1
    }
    timer.start()
  }
}

Let me know if this does the trick for you.