Wednesday, February 27, 2013

Create dynamic StackedBarChart of JavaFX 2

***update@2013-03-02- It's not a good example! Please read the improved version "JavaFX 2: Update StackedBarChart dynamically, with TableView".

The example "JavaFX 2.1: javafx.scene.chart.StackedBarChart" demonstrate how to create StackedBarChart with preset data. In this example, we will modify the content in the XYChart.Series, via a TableView. The StackedBarChart will update accordingly in runtime.


package javafx_tableview;

import java.util.Arrays;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.*;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.util.Callback;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_TableView extends Application {
    
    private TableView<XYChart.Data> tableView = new TableView<>();
    
    private ObservableList<XYChart.Data> dataList =
            FXCollections.observableArrayList(
                new XYChart.Data("January", 100),
                new XYChart.Data("February", 200),
                new XYChart.Data("March", 50),
                new XYChart.Data("April", 75),
                new XYChart.Data("May", 110),
                new XYChart.Data("June", 300),
                new XYChart.Data("July", 111),
                new XYChart.Data("August", 30),
                new XYChart.Data("September", 75),
                new XYChart.Data("October", 55),
                new XYChart.Data("November", 225),
                new XYChart.Data("December", 99));
    
    /**
    * @param args the command line arguments
    */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        Group root = new Group();
        
        tableView.setEditable(true);
        Callback<TableColumn, TableCell> cellFactory =
            new Callback<TableColumn, TableCell>() {
                @Override
                public TableCell call(TableColumn p) {
                    return new EditingCell();
                }
            };
        
        TableColumn columnMonth = new TableColumn("Month");
        columnMonth.setCellValueFactory(
            new PropertyValueFactory<XYChart.Data,String>("XValue"));
        
        TableColumn columnValue = new TableColumn("Value");
        columnValue.setCellValueFactory(
            new PropertyValueFactory<XYChart.Data,Number>("YValue"));
        
        //--- Add for Editable Cell of Value field, in Number
        columnValue.setCellFactory(cellFactory);
        
        columnValue.setOnEditCommit(
            new EventHandler<TableColumn.CellEditEvent<XYChart.Data, Number>>() {
                
                @Override public void handle(TableColumn.CellEditEvent<XYChart.Data, Number> t) {
                    ((XYChart.Data)t.getTableView().getItems().get(
                            t.getTablePosition().getRow())).setYValue(t.getNewValue());
                }
            });
        
        //--- Prepare StackedBarChart
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Month");
        xAxis.setCategories(FXCollections.<String> observableArrayList(Arrays.asList(
                "January", 
                "February",
                "March",
                "April",
                "May",
                "June",
                "July",
                "August",
                "September",
                "October",
                "November",
                "December")));
        yAxis.setLabel("Value");
        final StackedBarChart<String,Number> stackedBarChart = new StackedBarChart<>(xAxis,yAxis);
        stackedBarChart.setTitle("StackedBarChart");
        XYChart.Series series1 = new XYChart.Series(dataList);
        series1.setName("XYChart.Series 1");
        
        //Series 2
        XYChart.Series<String,Number> series2 = new XYChart.Series();
        series2.setName("XYChart.Series 2");
           
        series2.getData().add(new XYChart.Data("January", 150));
        series2.getData().add(new XYChart.Data("February", 100));
        series2.getData().add(new XYChart.Data("March", 60));
        series2.getData().add(new XYChart.Data("April", 40));
        series2.getData().add(new XYChart.Data("May", 30));
        series2.getData().add(new XYChart.Data("June", 100));
        series2.getData().add(new XYChart.Data("July", 100));
        series2.getData().add(new XYChart.Data("August", 10));
        series2.getData().add(new XYChart.Data("September", 175));
        series2.getData().add(new XYChart.Data("October", 155));
        series2.getData().add(new XYChart.Data("November", 125));
        series2.getData().add(new XYChart.Data("December", 150));
        
        stackedBarChart.getData().addAll(series1, series2);
        
        //--- Prepare TableView
        tableView.setItems(dataList);
        tableView.getColumns().addAll(columnMonth, columnValue);
        
        HBox hBox = new HBox();
        hBox.setSpacing(10);
        hBox.getChildren().addAll(tableView, stackedBarChart);
        
        root.getChildren().add(hBox);
        
        primaryStage.setScene(new Scene(root, 750, 400));
        primaryStage.show();
    }
    
    class EditingCell extends TableCell<XYChart.Data, Number> {
        
        private TextField textField;
        
        public EditingCell() {}
        
        @Override
        public void startEdit() {
            
            super.startEdit();
            
            if (textField == null) {
                createTextField();
            }
            
            setGraphic(textField);
            setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
            textField.selectAll();
        }
        
        @Override
        public void cancelEdit() {
            super.cancelEdit();
            
            setText(String.valueOf(getItem()));
            setContentDisplay(ContentDisplay.TEXT_ONLY);
        }
        
        @Override
        public void updateItem(Number item, boolean empty) {
            super.updateItem(item, empty);
            
            if (empty) {
                setText(null);
                setGraphic(null);
            } else {
                if (isEditing()) {
                    if (textField != null) {
                        textField.setText(getString());
                    }
                    setGraphic(textField);
                    setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
                } else {
                    setText(getString());
                    setContentDisplay(ContentDisplay.TEXT_ONLY);
                }
            }
        }
        
        private void createTextField() {
            textField = new TextField(getString());
            textField.setMinWidth(this.getWidth() - this.getGraphicTextGap()*2);
            textField.setOnKeyPressed(new EventHandler<KeyEvent>() {
                
                @Override
                public void handle(KeyEvent t) {
                    if (t.getCode() == KeyCode.ENTER) {
                        commitEdit(Double.parseDouble(textField.getText()));
                    } else if (t.getCode() == KeyCode.ESCAPE) {
                        cancelEdit();
                    }
                }
            });
        }
        
        private String getString() {
            return getItem() == null ? "" : getItem().toString();
        }
    }
}


Compare with: Create and update LineChart from TableView

No comments:

Post a Comment

Post a Comment