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