Thread: How can I change the color of the Image (Circular Icon) on the legend of a Java FX Pie Chart

Hello everybody.

Now, I have another problem with anpther FX exercise.

This is the Exercise:


"
(Display a pie chart) Write a program that uses a pie chart to display the percent-
ages of the overall grade represented by projects, quizzes, midterm exams, and
the final exam, as shown in Figure. Suppose that projects take 20 percent
and are displayed in red, quizzes take 10 percent and are displayed in blue,
midterm exams take 30 percent and are displayed in green, and the final exam
takes 40 percent and is displayed in orange. Use the Arc class to display the pies.
Interested readers may explore the JavaFX PieChart class for further study.

"

Instead of using arcs I've decided to use the JavaFX Pie Chart class.

The program created the pie chart graph with the correct proportion of pies, but it had the colors wrong.

I was able to change the colors of the pies and now the pie chart is presenting the colors of the several tasks accordingly to what is asked in the exercise.

But, now I have another problem.

In the legends below the pie graph, the colors that are presented are the original colors of the corresponding "slices" of the pie chart.

So, my question is how can I change the color of the image (circular icon) that appears in the legend on the bottom of the pie chart ?

Thank you,

Rogério

Hello Norm.

I can post here the complete Program, but it is not small, it has hundreds of lines of code, even though the vast majority of those lines are in fact comments.

Please let me know if you want me to post the full program or if you want a smaller version of the program, just to make it easier for you to examine it.

Thank you.

Rogério

Very well, Norm.

I'm going to create a new, smaller version of the Program, and I will place it here.

Thank you,

Rogério

Hello everybody.

As requested by Norm, I've created a smaller version of the Program that shows the Problem.

Here it is:

 
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package Chapter14.EndofChapter14.Exerc14dot13;
 
/**
 *
 * @author Rogerio Biscaia
 */
 
 
 
 
/*
 
(Display a pie chart)
 
Write a program that uses a pie chart to display the
percentages of the overall grade represented by projects,
quizzes, midterm exams, and the final exam, as shown in Figure.
 
Suppose that
projects take 20 percent and are displayed in red,
quizzes take 10 percent and are displayed in blue,
midterm exams take 30 percent and are displayed in green, and
the final exam takes 40 percent and is displayed in orange.
 
Use the Arc class to display the pies.
 
Interested readers may explore the JavaFX PieChart class for further study.
 
*/
 
 
 
import java.util.Set;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.stage.Stage;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.control.Label;
import javafx.scene.Group;
 
 
 
 
 
public class DisplayPieChartShortVersion extends Application {
 
 
    @Override
    public void start(Stage primaryStage) throws Exception {
 
 
        int countDataPie;
 
        String[] xAxisLabels = {"Project -- 20%", "Quiz -- 10%", "Midterm -- 30%", "Final -- 40%"};
 
 
        /*
 
        Preparing the ObservableList Object
 
        Prepare an object of the interface ObservableList object by
        passing the data of the pie chart as shown below
 
        */
 
 
        ObservableList<PieChart.Data> pieChartData = FXCollections.observableArrayList(
                new PieChart.Data("Project -- 20%", 20.0),
                new PieChart.Data("Quiz -- 10%", 10.0),
                new PieChart.Data("Midterm -- 30%", 30.0),
                new PieChart.Data("Final -- 40%", 40.0)
 
        );
 
 
 
        /*
 
 
        Creating a PieChart Object
 
        Create a PieChart by passing the ObservableList object as shown below.
 
 
        */
 
 
        //Creating a Pie chart
 
        PieChart pieChart = new PieChart(pieChartData);
 
 
 
        /*
 
        Setting the Title of the Pie Chart
 
        Set the title of the Pie Chart using the setTitle()
        method of the class PieChart.
 
        This belongs to the package javafx.scene.chart −
 
        */
 
 
        //Setting the title of the Pie chart
 
        pieChart.setTitle("Percentages of the overall grade");
 
 
 
        /*
 
 
 
        Set the Labels Visible
 
        Set the labels of the pie chart to
        visible by passing the Boolean value true to
        the method setLabelsVisible() of the class PieChart.
 
        This belongs to the package javafx.scene.chart
 
 
        */
 
 
        //Setting the labels of the pie chart visible
 
        pieChart.setLabelsVisible(true);
 
 
 
        //Setting the legends of the pie chart visible
 
        pieChart.setLegendVisible(true);
 
 
        /*
 
        Change the colors in the pies
        of the Pie Chart
 
        */
 
 
        countDataPie = 0;
 
        ObservableList<PieChart.Data> allData = pieChart.getData();
 
 
 
        for(PieChart.Data data: allData) {
 
 
            System.out.println("node " +  countDataPie +  " is " + data.getName() );
 
 
 
 
            switch(countDataPie) {
 
                case 0: data.getNode().setStyle("-fx-pie-color: red;");
                break;
                case 1: data.getNode().setStyle("-fx-pie-color: blue;");
                break;
                case 2: data.getNode().setStyle("-fx-pie-color: green;");
                break;
                case 3: data.getNode().setStyle("-fx-pie-color: orange;");
                break;
                default:
 
            }
 
 
 
 
 
 
            countDataPie++;
 
 
        }
 
 
 
        pieChart.setData(allData);
 
 
 
        /*
        Change the colors of the labels
        */
 
 
        Set<Node> allLegends = pieChart.lookupAll("Label.chart-legend-item-icon");
 
        //Set<Node> allLegends = pieChart.lookupAll("Label.chart");
 
 
        countDataPie = 0;
 
 
 
        for(Node item: allLegends) {
 
 
 
            System.out.println("node " +  countDataPie +  " is " + item.toString() );
 
            /*
 
            -fx-text-fill: "
            is for the text in the legend
 
            */
 
 
            //item.setStyle("-fx-text-fill: red;");
 
            //item.setStyle("-fx-image-color: red");
 
            //item.setStyle("-fx-background-color: red;");
 
 
 
            item.setStyle("-fx-color: red;");
 
 
 
            countDataPie++;
 
 
        }
 
 
 
        /*
 
        Creating a Group Object
 
        In the start() method,
        create a group object by instantiating the class named Group.
 
        This belongs to the package javafx.scene.
 
        Pass the BarChart (node) object,
        created in the previous step as
        a parameter to the constructor of the Group class.
 
        This should be done in order to add it to the group as follows
 
        */
 
 
        Group root = new Group(pieChart);
 
 
 
        /*
        Create a scene and place it in the Stage 
        */
 
        Scene scene = new Scene(root, 600, 400);
 
        primaryStage.setTitle("Percentages that compose the overall grade");
 
        primaryStage.setScene(scene);
 
        primaryStage.show();
 
 
    } //end of the method public void start(Stage primaryStage)
 
 
 
 
 
    /*
    main
 
    The main method is only needed for the IDE with
    limited JavaFX support.
    Not needed for running from the
    command line
 
    */
 
 
    public static void main (String[] args)  {
 
        try {
 
            Application.launch(args);
 
        } catch(Exception ex1) {
 
            System.out.println("Exception in the main in the " +
                    "class DisplayPieChartShortVersion");
 
 
            System.out.println(ex1.toString());
 
 
        }
 
 
 
        //Application.launch(args);
 
 
    } //end of main
 
 
 
 
 
} //end of the class DisplayPieChartShortVersion

Thank you,

Rogério

Hello Norm.

Yes, I' ve already seen the Stack Overflow Page you mentioned.

First of all it is very information dense, and it also uses a Random Color generator, wich I don't need.

I tried commenting the other older part that was changing the colors in the pies of the Graph, and then I added the part that I think its used to change the colors.

The program after these changes does not change the colors of the pies in the Graph or in the legends.

I don't know what I'm doing wrong.

I'm trying to understand how can I "Extract" the circular icons in the legends, so that after that, I can change the colors.

Thank you,

Rogério

Hello Norm.

Yes you're Right.

Thank you.

Rogério

Hello everybody.

Let me start by sending a huge Compliment to the user James_D in the stack Overflow Website.

This is the page with his answer:


https://stackoverflow.com/questions/...d-color-change


Let me tell you I really strugled with this one.

But I've solved my problem.

Initially I just used a call to the method updateChart inside the start method:


updateChart(pieChart);


This changed only the colors in the pies but not in the labels.

It is necessary to put the button with the associated action to update the chart.


PieChart chart = new PieChart();

Button button = new Button("Generate Data");

button.setOnAction(e -> updateChart(chart));


when I click in the button, the PieChart is created with the same colors for the pies in the graph and also for the legends.

I really have to end by repeating myself with a huge Compliment to the user James_D in the stack Overflow Website.

Thank you James_D

Rogério