JavaFX Linechart - Different Color between Data Points

Question

In our JavaFX project we need a line chart (one Data Serie) with different color between the Data Points which depends on the following rule: (t=time)

If Value t(x) < t(x+1) => Color should be green
If Value t(x) > t(x+1) => Color should be red
If Value t(x) = t(x+1) => Color should be grey

I can easily change the color of the entire line chart using CSS, but I have no clue how to solve this problem!

Yes, basically I could use for each line between two Data points a new Serie but I don't think it make sense if I have 4k of Data Points. Maybe there is a way to do this with 3 Series (green, red, grey) but I'm not sure how to make gaps (no line) between two Data Points. Thx — mitso, Aug 25 '17 at 15:26

SedJ601 · Accepted Answer · 2017-08-25T15:53:21.480

Here is a crude example of how to connect different Series. Comments in the code.

import java.util.Random;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;


public class LineChartSample extends Application {

    @Override public void start(Stage stage) {
        stage.setTitle("Line Chart Sample");
        //defining the axes
        final NumberAxis xAxis = new NumberAxis();
        final NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Number of Month");
        //creating the chart
        final LineChart<Number,Number> lineChart = 
                new LineChart<Number,Number>(xAxis,yAxis);

        lineChart.setTitle("Stock Monitoring, 2010");
        //defining a series
        XYChart.Series series1 = new XYChart.Series();
        XYChart.Series series2 = new XYChart.Series();
        XYChart.Series series3 = new XYChart.Series();

        series1.setName("t <= 10");
        series2.setName("10 <= t <= 20");
        series3.setName("t >= 20");
        //populating the series with data

        Random random = new Random();

        int whenIEquals10 = -1;//Used to store the value to start second series. This will be the last value in the first series.
        int whenIEquals20 = -1;//Used to store the value to start third series. This will be the last value in the second series.

        for(int i = 1; i <= 30; i++)
        {
            if(i <= 10)//range of first series
            {
                int randomNumber = random.nextInt(50) + 1;//Populate graph with random numbers.
                series1.getData().add(new XYChart.Data(i, randomNumber));
                if(i == 10)//The first series ends at 10, so save this value to start the second series.
                {
                    whenIEquals10 = randomNumber;
                }
            }
            if(i >= 10 && i <= 20)//Range of second series.
            {
                int randomNumber = random.nextInt(50) + 1;
                if(i == 10)//Start this second series with the last value from the first series.
                {
                    randomNumber = whenIEquals10;
                }

                series2.getData().add(new XYChart.Data(i, randomNumber));

                if(i == 20)//The second series ends at 20, so save this value to start the third series.
                {
                    whenIEquals20 = randomNumber;
                }                
            }
            if(i >= 20)//Range of thired series.
            {
                int randomNumber = random.nextInt(50) + 1;
                if(i == 20)//Start this third series with the last value from the second series.
                {
                    randomNumber = whenIEquals20;
                }

                series3.getData().add(new XYChart.Data(i, randomNumber));
            }
        }        

        Scene scene  = new Scene(lineChart,800,600);
        lineChart.getData().addAll(series1, series2, series3);

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

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

Thx vm Sedrick, if you add now again series1 for the range (>=30) you will get a red line though the chart from (x10) to x(30), is there a way to hide this section of line? That would solve my question! — mitso, Aug 25 '17 at 16:34
Start a new question with your new problem after giving this new problem a hard try. Make sure your new question is clear because I don't understand what you are asking. — SedJ601, Aug 25 '17 at 16:44
K thx feedback, I was looking for that [link](https://stackoverflow.com/questions/11962836/jfreechart-different-colors-in-different-regions-for-the-same-dataseries) but for a JavaFX LineChart. Anyway thx vm for your input. — mitso, Aug 25 '17 at 17:53

JavaFX Linechart - Different Color between Data Points

1 Answers1