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

[フレーム]

Subscribe to: Post Comments (Atom)

AltStyle によって変換されたページ (->オリジナル) /