Updating line-chart produces weird result

[maacl]

I get this result when trying to update a line-chart:

using this code:

(ns cljfx.exploration
  (:require [cljfx.api :as fx]
            [user :refer [fx-help]]))


(defn root-view [{:keys [showing line-data]}]
  {:fx/type :stage
   :showing showing
   :width 960
   :height 540
   :on-close-request {::event ::close-window}
   :scene {:fx/type :scene
           :root {:fx/type :v-box
                  :children [{:fx/type :line-chart
   :x-axis {:fx/type :number-axis
            :auto-ranging true}
   :y-axis {:fx/type :number-axis
            :auto-ranging false}
   :data [{:fx/type :xy-chart-series
           :name "data"
           :data line-data}]}]}}})
;; events

(defmulti handle ::event)

(defmethod handle :default [event]
  (println (::event event) (dissoc event ::event :state)))

(defmethod handle ::close-window [{:keys [state]}]
  {:set-state (assoc state :showing false)})

;; renderer setup

(defonce *state
  (atom {:showing true}))

(def map-event-handler
  (-> handle
      (fx/wrap-co-effects
        {:state (fx/make-deref-co-effect *state)})
      (fx/wrap-effects
        {:set-state (fx/make-reset-effect *state)
         :dispatch fx/dispatch-effect})))

(defonce renderer
  (fx/create-renderer
    :middleware (fx/wrap-map-desc #'root-view)
    :opts {:fx.opt/map-event-handler #'map-event-handler}))

(fx/mount-renderer *state renderer)


(comment
  ;; Initial event setup binds state's :showing key to window's :showing prop. If you
  ;; close a window, you can open it again by changing atom:
  (swap! *state assoc :showing true :line-data
         [{:fx/type :xy-chart-data, :x-value 0, :y-value 0}
 {:fx/type :xy-chart-data, :x-value 1, :y-value 27}
 {:fx/type :xy-chart-data, :x-value 2, :y-value 45}
 {:fx/type :xy-chart-data, :x-value 3, :y-value 26}
 {:fx/type :xy-chart-data, :x-value 4, :y-value 88}
 {:fx/type :xy-chart-data, :x-value 5, :y-value 45}
 {:fx/type :xy-chart-data, :x-value 6, :y-value 72}
 {:fx/type :xy-chart-data, :x-value 7, :y-value 62}
 {:fx/type :xy-chart-data, :x-value 8, :y-value 35}
 {:fx/type :xy-chart-data, :x-value 9, :y-value 54}]
         )

  ;; You need to trigger UI refresh when modifying view components since `renderer` does
  ;; not watch them as it watches `*state`, this can be achieved by "touching" the state:
  (swap! *state identity)
  ;; Alternatively, you can just reload this namespace: `fx/mount-renderer` will also
  ;; trigger UI refresh.


  (swap! *state update :line-data conj
                        {:fx/type :xy-chart-data
                          :x-value 10
                          :y-value 100})

  ;; when in doubt, you can use `fx-help` function:
  ;; - to get short overall javafx/cljfx components overview
  (println (fx-help))
  ;; - to list all available props on a particular built-in component
  (fx-help :v-box)
  ;; - to show some prop information
  (fx-help :v-box :children)
  (fx-help :v-box :padding))

[vlaaad]

It's actually a bug in JavaFX charts: I made a repro and submitted a bug report.
Repro:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;

public class LineChartRepro extends Application  {
    public void start(Stage stage) throws Exception {
        LineChart<Number, Number> chart = new LineChart<>(new NumberAxis(), new NumberAxis());
        XYChart.Series<Number, Number> series = new XYChart.Series<>();
        series.setData(FXCollections.observableList(Arrays.asList(
                new XYChart.Data<>(0,0),
                new XYChart.Data<>(1,1))));
        chart.getData().setAll(Collections.singletonList(series));
        Button addChartData = new Button("Add Chart data");
        addChartData.setOnAction(e -> {
            ArrayList<XYChart.Data<Number, Number>> newList = new ArrayList<>(series.getData());
            newList.add(new XYChart.Data<>(newList.size(), newList.size()));
            series.setData(FXCollections.observableList(newList));
        });
        stage.setScene(new Scene(new VBox(chart, addChartData)));
        stage.show();
    }

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

Bug report: JDK-9064593 (supposedly will be visible once they screen it)

[maacl]

Ok, thanks for submitting it. It worked ok with the pie-chart.

[vlaaad]

Update: screened bug report is here: JDK-8243128.

[Folcon]

Is there a workaround for this? As it seems like from their perspective this is intended behaviour.

[vlaaad]

A workaround is described here.

[maacl]

Very cool. That looks quite workable. Thank you very much for this.

[CoutCesar]

It can be easily solved by disabling the chart animations with chart.setAnimated(false);