Using JavaFX to create a StackedAreaChart and implementing the setLowerBound method

I am encountering some issues with the Class StackedAreaChart and setLowerBound function. When I enable the autoRangingProperty to true, everything works fine.

However, when I disable autoRanging and apply certain parameters, I encounter some bugs.

import java.util.Random;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.StackedAreaChart;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class TestStackedAreaChart extends Application {

    StackPane mainGraphStackPane = null;
    BorderPane pane;

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

    @Override
    public void start(Stage stage) {
        // /
        Random generator = new Random();

        XYChart.Series<Number, Number> series1 = new XYChart.Series<>(); // line
        XYChart.Series<Number, Number> series2 = new XYChart.Series<>(); // down
        XYChart.Series<Number, Number> series3 = new XYChart.Series<>(); // up
        for (int i = 1; i < 50; i++) {
            Double value = generator.nextDouble() + 1;
            series1.getData().add(new XYChart.Data<Number, Number>(i, value));
            Double Ymin = value - generator.nextDouble() * 0.2;
            series2.getData().add(new XYChart.Data<Number, Number>(i, Ymin));
            Double Ymax = (value - Ymin) + generator.nextDouble() * 0.2;
            series3.getData().add(new XYChart.Data<Number, Number>(i, Ymax));

        }
        // /

        final NumberAxis xAxisLC = new NumberAxis();
        final NumberAxis yAxisLC = new NumberAxis();
        /////////what's wrong
        yAxisLC.autoRangingProperty().set(false);
        yAxisLC.setMinorTickLength(yAxisLC.getTickLength());
        yAxisLC.setMinorTickCount(0);
        yAxisLC.setUpperBound(2.5);
        yAxisLC.setLowerBound(1.0); //when I set 0.0 is OK
        yAxisLC.setTickUnit(0.2);
        ///////
        pane = new BorderPane();
        mainGraphStackPane = new StackPane();
        mainGraphStackPane.getChildren().add(pane);

        StackedAreaChart<Number, Number> areaChart = new StackedAreaChart<Number, Number>(
                xAxisLC, yAxisLC);
        areaChart.setCreateSymbols(false);
        areaChart.setAlternativeRowFillVisible(false);
        areaChart.setAnimated(false);
        areaChart.setLegendVisible(false);
        areaChart.getData().add(series2);
        areaChart.getData().add(series3);

        Scene scene = new Scene(mainGraphStackPane);
        mainGraphStackPane.getChildren().add(areaChart);
        mainGraphStackPane.getStylesheets().add("chart.css");
        stage.setScene(scene);
        Group root = new Group();
        pane.getChildren().add(root);
        stage.show();
        stage.setWidth(stage.getWidth() + 1);
        stage.setHeight(stage.getHeight() + 1);

    }
}

and CSS file

@CHARSET "UTF-8";
.default-color0.chart-area-symbol { -fx-background-color: #e9967a, #ffa07a; }
.default-color1.chart-area-symbol { -fx-background-color: #e9967a, #ffa07a; }

.default-color0.chart-series-area-line { -fx-stroke: #ffaa00; }
.default-color1.chart-series-area-line { -fx-stroke: #ffaa00; }

.default-color0.chart-series-area-fill { -fx-fill: #ffff0055; }
.default-color1.chart-series-area-fill { -fx-fill: #ffaa005

Looking for suggestions or solutions to resolve this issue.

Answer №1

I faced a similar challenge while working with the StackedAreaChart. To address it, I had to adjust all the values before plotting them on the chart in such a way that the chart would start from zero. Additionally, I made necessary modifications to ensure the y-axis labels were accurate.

  1. setAutoRanging(false);
  2. setForceZeroInRange(false);
  3. Determine the range of values that will be added to the graph by noting down the maximum and minimum values.
  4. Add all values after subtracting the minimum value.
  5. setLowerBound(0);
  6. setUpperBound(...); (maximum value minus minimum value).
  7. Utilize setTickLabelFormatter on the y-axis and incorporate your minimum value into the StringConverter<Number> toString method before formatting the value.

For instance, if your data falls within the range 3 to 10, you can represent it on the graph as 0 to 7. Consequently, the adjusted y-axis label for 0 would be 3, 1 would be 4, and so forth.

Although my graph is quite complex, I may simplify it in the future and share some sample code. However, the instructions provided above should give you a good starting point.

Answer №2

Click here to view the chart in detail

I am contemplating different ways to magnify this visualization. The Linechart class seems to handle this task well :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Printing style in CSS

Everything looks good on my webpage. For printing, my CSS adjusts the layout and section sizes. Unfortunately, there is an issue with the print layout - there is a one-inch margin on the left side causing two elements to go off the page on the right. I ...

Tips for triggering jquery code when a variable containing a CSS attribute is modified

I have a specific requirement where I need to reset the scrollleft value to 0 on my wrapper whenever a particular CSS property changes. Although I am new to using jQuery and haven't worked with variables much, I believe I need to create a variable to ...

Webkit causing complications with straightforward CSS3 animation

I'm currently working on a website and you can check it out here: Unfortunately, I've encountered an issue where the animations aren't triggering specifically on webkit browsers like Chrome and Safari: @-webkit-keyframes slideright{ 0% {tr ...

Tips for locating direct children of a non-root element using CSS selectors in Selenium

When working with a <table> element, I encountered the need to search for its descendants and direct descendants while avoiding wading through nested tables. The elements I seek lack reasonable IDs, so specific selectors are essential: <html> ...

employing personalized CSS styles

When I implement the following code: <div class="metanav"> ... </div> Every element inside that div will inherit the styling of .metanav. But if I duplicate .metanav in the CSS and rename it to A; then update the div's class to: <d ...

Iterator: The final element in Java's rearview mirror

Is it similar to C++ in Java, where the iterator ends up at the position one past the last element? while (iterator.hasNext()) { String color = iterator.next(); } For example, in C++, we have: Blue Green Purple ^ ^ ^ ^ begin e ...

``To ensure Google Maps fills the entire height of its parent div, set the

Is there a way to display a Google Map at 100% of the parent div's height? I've noticed that setting the height to 100% makes the map not visible, but if I use a pixel value for the height, the map displays correctly. Are there any tricks or solu ...

Is there a way to search for specific JSON elements using Retrofit?

Currently, I am utilizing Retrofit to fetch and parse JSON data that I have created and uploaded online. Even though I can successfully showcase all the data, as a newcomer to Retrofit, I find it challenging to grasp how to query and display specific items ...

When an element within a dropdown is hovered over, a dropdown menu is triggered

As a newcomer to Web Development, I am facing a fundamental issue with my bootstrap navigation bar. The navigation bar contains multiple dropdown buttons that activate on hover. One of the buttons within a dropdown needs another dropdown to appear when hov ...

Neglecting images on Zoom

Looking to scale up the elements on an HTML page by 50%, without affecting the resolution of images. Despite trying zoom: 150% in CSS3, it ends up zooming pictures as well, resulting in blurry visuals. Is there a way to enlarge all HTML components while ...

Detecting collisions on a tile map using only JavaScript

Currently, I am developing a tile-based game using a traditional method (utilizing two for loops) and struggling with writing collision detection. I want the blue square to remain on the screen and appear on top of the tiles once the start button is clicke ...

What's the difference in width between Inline-Block and Float?

HTML <ul> <li><a href="#">Item #1</a></li> <li><a href="#">Item #2</a></li> <li><a href="#">Item #3</a></li> <li><a href="#">Item #4</a></li> & ...

Utilizing conditional statements and time to dynamically alter the class of an object

I need to change the class of an object based on the time, with two classes available: recommendedspot and notrecommended. The code I've written so far is not displaying the image correctly. Can someone help me troubleshoot this issue? Here is my cur ...

Troubleshooting problem with presenting real-time data in a Bootstrap Carousel using PHP

Currently, I am in the process of developing a dynamic events calendar to showcase on a website homepage. The information displayed on this calendar is retrieved from a database using PHP. Additionally, I have implemented the Bootstrap framework (version 4 ...

Tips for fixing OneSignal Issue: "Segment does not qualify as a valid filter field"

I'm looking to apply a filter when sending a push notification via OneSignal. However, when I try to assign a field using the tag, I encounter a 400-Error message stating that "Segment is not a valid filter field." The body of my message sent was: ...

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text

I have designed a menu-header section for my website, inspired by this image. I created a fiddle to showcase it. However, I am facing an issue where the dropdown elements for "PROGRAMS" and "WORLD OF NORTHMAN" should start from the border of the header ins ...

Storing data in mongoDB Collections without an automatically generated _id field

Following up on my previous query regarding setting up separate data for Replica sets, I have discovered that it is possible to specify a collection for each replica to read and even simulate the oplog.rs. By ensuring that these files contain different in ...

Tips for organizing components in jQuery Mobile

Displaying a survey creation form: <!-- HTML structure --> <div data-role="page" data-theme="b"> <div data-role="header"> <h1> Create Survey </h1> </div> <div id="main" data ...

Searching for values within a JSON file can be accomplished by using the appropriate tools

I'm trying to extract the value of "ID" which is set to "SGML" from the following JSON data. I am currently using Gson to parse the JSON file. How can I efficiently locate and retrieve this information? { "glossary": { "title": "example g ...

Guide on navigating to a specific page with ngx-bootstrap pagination

Is there a way to navigate to a specific page using ngx-bootstrap pagination by entering the page number into an input field? Check out this code snippet: ***Template:*** <div class="row"> <div class="col-xs-12 col-12"> ...