Hai,

Pada Kesempatan kali ini saya akan menjelaskan Tutorial Membuat Line Chart dengan NetBeans IDE.

Berikut adalah langkah – langkah nya :

1. Buka Netbeans kalian, lalu pilih di bagian File -> New Project -> pilih di ‘JavaFx’ dibagian Categories, untuk lebih jelas nya lihat gambar berikut…
3. Lalu namai Project anda dan Finish..
4. Sebelum kita coding program LineChart nya, terlebih dahulu kita import ‘JFreeChart’ dan ‘JCommon’ nya.
5. Bagi yang belum punya 2 Library itu, bisa di download di https://sourceforge.net/projects/jfreechart/files/
6. Jika sudah di download, klik kanan pada bagian ‘Libraries’ lalu pilih ‘Add JAR/Folder’.
7. Kita import ‘JFreeChart’ nya, buka file JFreeChart yang anda download tadi, lalu pilih ‘lib’ -> kemudian cari ‘jfreechart-1.0.19.jar’..
8. Setelah itu kita import ‘JCommon’ nya, buka file JCommon yang anda download tadi, lalu pilih ‘jcommon-1.0.23.jar’.
9. Jika sudah, maka dibagian Library akan bertambah seperti ini…
10. Berikut adalah codingan nya :

<code>
/*Keterangan
'<code>' tidak perlu di ketik.
*/

package line_chart;

import javafx.application.Application;
import static javafx.application.Application.launch;
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;
/**
*
* @author Marc Alvan
*/
public class Line_Chart extends Application {

private TableView&lt;XYChart.Data&gt; tableView = new TableView&lt;&gt;();

private ObservableList&lt;XYChart.Data&gt; dataList =
FXCollections.observableArrayList(
new XYChart.Data("January", 0),
new XYChart.Data("February", 0),
new XYChart.Data("March", 0),
new XYChart.Data("April", 0),
new XYChart.Data("May", 0),
new XYChart.Data("June", 0),
new XYChart.Data("July", 0),
new XYChart.Data("August", 0),
new XYChart.Data("September", 0),
new XYChart.Data("October", 0),
new XYChart.Data("November", 0),
new XYChart.Data("December", 0));

/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}

@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Line Chart");

Group root = new Group();

tableView.setEditable(true);
Callback&lt;TableColumn, TableCell&gt; cellFactory =
new Callback&lt;TableColumn, TableCell&gt;() {
@Override
public TableCell call(TableColumn p) {
return new EditingCell();
}
};

TableColumn columnMonth = new TableColumn("Month");
columnMonth.setCellValueFactory(
new PropertyValueFactory&lt;XYChart.Data,String&gt;("XValue"));

TableColumn columnValue = new TableColumn("Value");
columnValue.setCellValueFactory(
new PropertyValueFactory&lt;XYChart.Data,Number&gt;("YValue"));

//--- Add for Editable Cell of Value field, in Number
columnValue.setCellFactory(cellFactory);

columnValue.setOnEditCommit(
new EventHandler&lt;TableColumn.CellEditEvent&lt;XYChart.Data, Number&gt;&gt;() {
@Override public void handle(TableColumn.CellEditEvent&lt;XYChart.Data, Number&gt; t) {
((XYChart.Data)t.getTableView().getItems().get(
t.getTablePosition().getRow())).setYValue(t.getNewValue());
}
});

//---

//--- Prepare LineChart
final CategoryAxis xAxis = new CategoryAxis();
final NumberAxis yAxis = new NumberAxis();

xAxis.setLabel("Month");
yAxis.setLabel("Value");

final LineChart&lt;String, Number&gt; lineChart = new LineChart&lt;&gt;(xAxis,yAxis);

lineChart.setTitle("LineChart");
XYChart.Series series = new XYChart.Series(dataList);
series.setName("XYChart.Series");
lineChart.getData().add(series);

//--- Prepare TableView

tableView.setItems(dataList);
tableView.getColumns().addAll(columnMonth, columnValue);

//---

HBox hBox = new HBox();
hBox.setSpacing(10);
hBox.getChildren().addAll(tableView, lineChart);

root.getChildren().add(hBox);

primaryStage.setScene(new Scene(root, 670, 400));
primaryStage.show();
}

class EditingCell extends TableCell&lt;XYChart.Data, Number&gt; {

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&lt;KeyEvent&gt;() {

@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();
}
}

}
</code></code>

10. Setelah selesai, kita jalankan program nya, masukan angka di kolom value sesuai yang anda mau…