Line chart with progressbar

Question

I want to add progress bar for this simple chart. I cannot find any suitable example on Internet.

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

public class MainApp extends Application
{

    @Override
    public void start(Stage stage)
    {

        setUserAgentStylesheet(STYLESHEET_CASPIAN);

        Scene scene = new Scene(chart(), 800, 600);

        stage.setScene(scene);
        stage.show();
    }

    private XYChart.Series series;

    private AreaChart<String, Number> chart()
    {
        CategoryAxis xAxis = new CategoryAxis();

        NumberAxis yAxis = new NumberAxis();

        // Chart
        final AreaChart<String, Number> sc = new AreaChart<>(xAxis, yAxis);

        sc.setCreateSymbols(false);

        sc.setPrefSize(1200, 210);

        series = new AreaChart.Series<>();
        series.setName("Area Chart Series");
        sc.getData().add(series);

        Node node = sc.lookup(".default-color0.chart-series-area-fill");
        node.setStyle("-fx-fill: linear-gradient(#f2f2f2, #d4d4d4);"
            + "  -fx-background-insets: 0 0 -1 0, 0, 1, 2;"
            + "  -fx-background-radius: 3px, 3px, 2px, 1px;");

        Node nodew = sc.lookup(".chart-series-area-line");
        nodew.setStyle("-fx-stroke: #989898; -fx-stroke-width: 1px; ");

        series.getData().add(new AreaChart.Data("Monday", 23));
        series.getData().add(new AreaChart.Data("Tuesday", 234));
        series.getData().add(new AreaChart.Data("Wednesday", 54));
        series.getData().add(new AreaChart.Data("Thursday", 565));
        series.getData().add(new AreaChart.Data("Friday", 78));
        series.getData().add(new AreaChart.Data("Saturday", 35));
        series.getData().add(new AreaChart.Data("Sunday", 65));

        return sc;
    }

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

}

For example I would like to display Loading during chart utilization.

Is there any example which can be used?

Answer 1

Just add the series data after the chart is drawn. Charts have animation turned on by default so you'll get to watch it being drawn. It's pretty cool to watch, I may use it myself.

public class DelayChart extends Application {
    @Override
    public void start(Stage stage) {

        setUserAgentStylesheet(STYLESHEET_CASPIAN);

        CategoryAxis xAxis = new CategoryAxis();
        NumberAxis yAxis = new NumberAxis();

        final AreaChart<String, Number> sc = new AreaChart<>(xAxis, yAxis);
        sc.setCreateSymbols(false);
        sc.setPrefSize(1200, 210);

        XYChart.Series series = new AreaChart.Series<>();
        series.setName("Area Chart Series");
        sc.getData().add(series);

        Node node = sc.lookup(".default-color0.chart-series-area-fill");
        node.setStyle("-fx-fill: linear-gradient(#f2f2f2, #d4d4d4);"
                + "  -fx-background-insets: 0 0 -1 0, 0, 1, 2;"
                + "  -fx-background-radius: 3px, 3px, 2px, 1px;");

        Node nodew = sc.lookup(".chart-series-area-line");
        nodew.setStyle("-fx-stroke: #989898; -fx-stroke-width: 1px; ");

        Scene scene = new Scene(sc, 800, 600);
        stage.setScene(scene);
        stage.show();

        //add longer delays here if you want
        series.getData().add(new AreaChart.Data("Monday", 23));
        series.getData().add(new AreaChart.Data("Tuesday", 234));
        series.getData().add(new AreaChart.Data("Wednesday", 54));
        series.getData().add(new AreaChart.Data("Thursday", 565));
        series.getData().add(new AreaChart.Data("Friday", 78));
        series.getData().add(new AreaChart.Data("Saturday", 35));
        series.getData().add(new AreaChart.Data("Sunday", 65));

    }
}

Answer 2

Short answer: You can't.

Long answer: There aren't any public APIs for knowing about the chart loading progress. Also, I seriously doubt that you will have so much data in the chart that it would require a progress bar.

Solution: I suppose you want that progress bar for the visual effect. Just create a StackPane containing a progress bar and a chart, and when the progress bar reached the end, bring the chart to the front. Really easy.

What about some code? I think I've been pretty clear with the specifications. There's really nothing to it. No hidden solution that you can't find on the Internet.