Monday, May 28, 2012

Create PieChart using JavaFX and FXML


New a JavaFX FXML Application in NetBeans, modify Sample.fxml to add <PieChart> in FXML, and modify Sample.java to fill-in the ObservableList of PieChart.Data.

Sample.fxml
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.chart.*?>

<AnchorPane id="AnchorPane" prefHeight="520" prefWidth="520" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxml_charts.Sample">
    <children>
        <Button id="button1" layoutX="10" layoutY="10" text="Click to load PieChart 1" onAction="#handleButton1Action" fx:id="button1" />
        <Button id="button2" layoutX="10" layoutY="40" text="Click to load PieChart 2" onAction="#handleButton2Action" fx:id="button2" />
        <Button id="buttonclear" layoutX="10" layoutY="70" text="Clear PieChart" onAction="#handleButtonClearAction" fx:id="buttonclear" />
        
        <PieChart id="piechart" fx:id="piechart" layoutX="10" layoutY="110" />
        
    </children>
</AnchorPane>

Sample.java
package javafxml_charts;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.chart.PieChart;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class Sample implements Initializable {

    @FXML
    private PieChart piechart;
    
    @FXML
    private void handleButton1Action(ActionEvent event) {
        ObservableList<PieChart.Data> pieChartData = 
                FXCollections.observableArrayList(
                    new PieChart.Data("January", 100),
                    new PieChart.Data("February", 200),
                    new PieChart.Data("March", 50),
                    new PieChart.Data("April", 75),
                    new PieChart.Data("May", 110),
                    new PieChart.Data("June", 300),
                    new PieChart.Data("July", 111),
                    new PieChart.Data("August", 30),
                    new PieChart.Data("September", 75),
                    new PieChart.Data("October", 55),
                    new PieChart.Data("November", 225),
                    new PieChart.Data("December", 99));
        
        piechart.setTitle("Monthly Record");
        piechart.setData(pieChartData);
    }
    
    @FXML
    private void handleButton2Action(ActionEvent event) {
        ObservableList<PieChart.Data> pieChartData = 
                FXCollections.observableArrayList(
                    new PieChart.Data("Sunday", 30),
                    new PieChart.Data("Monday", 45),
                    new PieChart.Data("Tuesday", 70),
                    new PieChart.Data("Wednesday", 97),
                    new PieChart.Data("Thursday", 100),
                    new PieChart.Data("Friday", 80),
                    new PieChart.Data("Saturday", 10));
        
        piechart.setTitle("Weekly Record");
        piechart.setData(pieChartData);
    }
    
    @FXML
    private void handleButtonClearAction(ActionEvent event) {
        ObservableList<PieChart.Data> pieChartData = 
                FXCollections.observableArrayList();
        piechart.setTitle("");
        piechart.setData(pieChartData);
    }
        
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
}


4 comments:

  1. I think you forgot to add ( ) in Sample.fxml

    ReplyDelete
  2. Thanks sir for your tutorial.

    ReplyDelete
  3. Is the fade in and fade out animation default implemented? BTW it is a really good and clear tutorial, congratulations

    ReplyDelete