Charts and graphs (Chart နဲ့ ဂရပ်များ)

IA (Internal Assessment: IB သင်တန်းမှာ ကျောင်းသားတစ်ယောက်ချင်း ကိုယ်တိုင် တည်ဆောက်ရပြီး ကျောင်းက ဆရာက အမှတ်ပေးတဲ့ အပိုင်း) အတွက် tool တွေပါ၊ စာမေးပွဲ ခေါင်းစဉ် မဟုတ်ပါဘူး။ ဒါတွေက ကိုယ့် IA နဲ့ ကိုက်အောင် ပြင်သုံးဖို့ JavaFX (Java နဲ့ desktop app တည်ဆောက်တဲ့ library) မှာ အသင့်ပါတဲ့ chart (ဒေတာကို ပုံနဲ့ ပြတဲ့ ဂရပ်) တွေကို သုံးပါတယ်။ ဒီထဲက ဘာကိုမှ စာမေးပွဲမှာ မမေးပါဘူး၊ ပြီးတော့ IA က ကိုယ်တိုင် လုပ်ထားတဲ့ အလုပ် ဖြစ်ရပါမယ်။

JavaFX မှာ javafx.scene.chart ထဲမှာ chart တွေ ပါပြီးသားမို့ ကိုယ့် ဂဏန်းတွေကနေ ဂရပ် ဆွဲဖို့ အပို library (အသင့်ရေးထားတဲ့ code အစု) ဘာမှ မလိုပါဘူး။ ဒီစာမျက်နှာမှာ line chart (အမှတ်တွေကို မျဉ်းနဲ့ ဆက်ပြတဲ့ ဂရပ်)၊ bar chart (ဘားတိုင်တွေနဲ့ ပြတဲ့ ဂရပ်)၊ pie chart (စက်ဝိုင်းကို အစိတ်တွေ ခွဲပြတဲ့ ဂရပ်) တွေနဲ့ ဒေတာ ပြောင်းတဲ့အခါ chart ကို update လုပ်ပုံကို လေ့လာပါမယ်။

ဒီ cookbook ကို ပထမဆုံး ဖတ်တာလား။ Start here: how every recipe fits together (ဒီမှာ စပါ: recipe တိုင်း ဘယ်လို ချိတ်ဆက်ထားလဲ) ကို အရင် ဖတ်ပါ။ အဲဒီ စာမျက်နှာက ကိုယ် ပြင်ရမယ့် နေရာ နှစ်ခုကို ရှင်းပြထားပြီး recipe (ချက်ချင်း ယူသုံးလို့ရတဲ့ code နမူနာ) တိုင်း အားကိုးရတဲ့ fx:id (screen ပေါ်က button၊ text box စတာတွေကို code ထဲက variable နဲ့ ချိတ်တဲ့ နာမည်) ချိတ်ဆက်မှုကိုလည်း ရှင်းပြထားပါတယ်။

ကိုယ့်ဒေတာကနေ line graph ဆွဲခြင်း

ဒါက ဘာလုပ်ပေးလဲ: ကိုယ့် တန်ဖိုးတွေကို ယူပြီး ဂဏန်း axis (ဂရပ်ရဲ့ ဝင်ရိုး) တွေပေါ်မှာ အမှတ်တွေ ချပြီး အဲဒီ အမှတ်တွေကို မျဉ်း တစ်ကြောင်းအဖြစ် ဆက်ပေးပါတယ်။

ကိုယ့် IA မှာ ဘယ်အခါ သုံးမလဲ: အချိန်နဲ့အမျှ ပြောင်းလဲလာပုံကို ပြတဲ့အခါ သုံးပါ၊ ဥပမာ ကြိုးစားမှု တစ်ကြိမ်ချင်းစီရဲ့ အမှတ်၊ တစ်ရက်ချင်းစီရဲ့ အရောင်း ဒါမှမဟုတ် တိုင်းယူမှု တစ်ကြိမ်ချင်းစီက တိုင်းတာထားတဲ့ တန်ဖိုး။

SceneBuilder ထဲမှာ (layout): SceneBuilder (FXML layout ကို ပုံနဲ့ မြင်ရင်း ပြင်တဲ့ editor) ထဲက layout (control တွေကို screen ပေါ်မှာ စီစဉ်ထားပုံ) မှာ LineChart တစ်ခု ထည့်ပြီး lineChart ဆိုတဲ့ fx:id ပေးပါ။ Line chart မှာ ဂဏန်း axis နှစ်ခု လိုပါတယ်: x axis (အလျားလိုက် ဝင်ရိုး) အတွက် NumberAxis တစ်ခု၊ y axis (ဒေါင်လိုက် ဝင်ရိုး) အတွက် NumberAxis တစ်ခု ထည့်ပြီး axis တစ်ခုစီကို label (axis ဘေးမှာ ပြတဲ့ နာမည်) ပေးပါ။

<LineChart fx:id="lineChart">
    <xAxis>
        <NumberAxis label="Day" />
    </xAxis>
    <yAxis>
        <NumberAxis label="Sales" />
    </yAxis>
</LineChart>

Controller (user လုပ်တာတွေကို ကိုင်တွယ်ပြီး Model နဲ့ screen တွေကို ချိတ်ပေးတဲ့ class) ထဲမှာ (.java file):

Import (တခြားနေရာက code ကို ယူသုံးမယ်လို့ ကြေညာခြင်း) line များ:

import javafx.fxml.FXML;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.XYChart;

Controller ထဲမှာ (တန်ဖိုးတွေက ပုံမှန်အားဖြင့် ကိုယ့်ဒေတာကနေ လာပါလိမ့်မယ်၊ ဥပမာ ကြီးလာ၊ သေးသွားနိုင်တဲ့ list ဖြစ်တဲ့ ArrayList တစ်ခုကနေ):

@FXML private LineChart<Number, Number> lineChart;

@FXML
public void initialize() {
    XYChart.Series<Number, Number> series = new XYChart.Series<>();
    series.setName("Daily sales");

    // your IA logic here: feed the series from your own data
    int[] values = {3, 5, 4, 7, 6};
    for (int day = 0; day < values.length; day++) {
        series.getData().add(new XYChart.Data<>(day + 1, values[day]));
    }

    lineChart.getData().add(series);
}

ကိုယ်ပိုင် logic (ဘာလုပ်မလဲ ဆုံးဖြတ်တဲ့ code) ကို ဘယ်မှာ ထည့်ရမလဲ: // your IA logic here (ကိုယ့် IA ရဲ့ logic ကို ဒီမှာ ထည့်ပါ) လို့ မှတ်ထားတဲ့ loop (ထပ်ခါထပ်ခါ run တဲ့ code အပိုင်း) ပါ၊ အဲဒီမှာ ကိုယ့် ဂဏန်းတွေကို အမှတ်တွေအဖြစ် ပြောင်းပါ။ Series (chart ပေါ်က မျဉ်း တစ်ကြောင်းစာ ဒေတာ အမှတ်အစု) ကို ဖန်တီးပြီး chart ထဲ ထည့်တာက ပြန်သုံးလို့ရတဲ့ wiring (control တွေနဲ့ code ကို ချိတ်ဆက်ပေးတဲ့ အသင့် code) ပါ။

ကိုယ့် project နဲ့ ကိုက်အောင် ပြင်ပါ:

  • values array (အရွယ်အစား ပုံသေ၊ အမျိုးအစားတူ ဒေတာစု) ကို ကိုယ့်ဒေတာနဲ့ အစားထိုးပါ၊ ပြီးရင် x တန်ဖိုးကို အမှတ် တစ်ခုစီ ဘာအလိုက် တိုင်းထားလဲ ဆိုတဲ့ တန်ဖိုး ဖြစ်အောင် သတ်မှတ်ပါ။
  • Chart တစ်ခုတည်းပေါ်မှာ ဒုတိယ မျဉ်း တစ်ကြောင်း ဆွဲချင်ရင် XYChart.Series နောက်တစ်ခု တည်ဆောက်၊ နာမည် ပေးပြီး lineChart.getData().add(secondSeries) လုပ်ပါ။ Chart က မျဉ်း နှစ်ကြောင်းလုံးကို legend (မျဉ်း တစ်ကြောင်းစီက ဘာလဲ ပြတဲ့ အညွှန်း) နဲ့ ပြပါတယ်။

သတိထားရမယ့် အချက်များ:

  • fx:id lineChart က @FXML field (FXML ထဲက control နဲ့ ချိတ်ထားတဲ့ controller ထဲက variable) နာမည်နဲ့ အတိအကျ ကိုက်ရပါမယ်။ မကိုက်ရင် screen က load မဖြစ်ပါဘူး။
  • XYChart နောက်က <Number, Number> က type parameter (class က ဘယ် type ကို သိမ်းမလဲ ပြတဲ့ < > ထဲက type) တစ်စုံပါ၊ ArrayList<String> မှာလို အယူအဆ တစ်ခုတည်းပါ။ Axis တွေမှာ ဂဏန်းတွေ ရှိတယ်လို့ သူတို့က ပြောပါတယ်။ ဒီ generics (သိမ်းမယ့် ဒေတာ type ကို ထောင့်ကွင်း < > ထဲမှာ သတ်မှတ်ပေးတဲ့ ပုံစံ) ရေးပုံက IB စာမေးပွဲမှာ စစ်တဲ့ Java အပိုင်းထဲမှာ မပါပေမဲ့ ဒီမှာတော့ မဖြစ်မနေ လိုပါတယ်။
  • အမှတ် တစ်ခုစီက XYChart.Data<>(xValue, yValue) တစ်ခုပါ။ ဂရပ် မှားနေသလို ပေါ်ရတဲ့ အဖြစ်များဆုံး အကြောင်းရင်းက x နဲ့ y ရဲ့ အစဉ်ကို ရောထွေးမိတာပါ။

တွဲသုံးလို့ရတဲ့ recipe များ: Bar graph ဆွဲခြင်း၊ ဒေတာ ပြောင်းတဲ့အခါ chart ကို update လုပ်ခြင်း။

Bar graph ဆွဲခြင်း

ဒါက ဘာလုပ်ပေးလဲ: category (အမျိုးအစား) တစ်ခုကို bar (ဘားတိုင်) တစ်ခုစီ ဆွဲပေးပါတယ်၊ bar ရဲ့ အမြင့်က ကိုယ့် ဂဏန်းတွေကနေ လာပါတယ်။

ကိုယ့် IA မှာ ဘယ်အခါ သုံးမလဲ: နာမည်ပေးထားတဲ့ အုပ်စုတွေကြား စုစုပေါင်း တန်ဖိုးတွေကို နှိုင်းယှဉ်တဲ့အခါ သုံးပါ၊ ဥပမာ ရွေးချယ်စရာ တစ်ခုစီ ရတဲ့ မဲ၊ category တစ်ခုစီထဲက item အရေအတွက် ဒါမှမဟုတ် အခြေအနေ တစ်ခုစီရဲ့ အရေအတွက်။

SceneBuilder ထဲမှာ (layout): BarChart တစ်ခု ထည့်ပြီး barChart ဆိုတဲ့ fx:id ပေးပါ။ Bar chart က category label (bar တွေရဲ့ အောက်က နာမည်) တွေအတွက် category axis (category နာမည်တွေ ပြတဲ့ ဝင်ရိုး) ကို သုံးပြီး အမြင့်တွေအတွက် number axis (ဂဏန်း ဝင်ရိုး) ကို သုံးပါတယ်။

<BarChart fx:id="barChart">
    <xAxis>
        <CategoryAxis label="Colour" />
    </xAxis>
    <yAxis>
        <NumberAxis label="Votes" />
    </yAxis>
</BarChart>

Controller ထဲမှာ (.java file):

Import line များ:

import javafx.fxml.FXML;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.XYChart;

Controller ထဲမှာ:

@FXML private BarChart<String, Number> barChart;

@FXML
public void initialize() {
    XYChart.Series<String, Number> series = new XYChart.Series<>();
    series.setName("Votes");

    // your IA logic here: one data point per category, from your own totals
    series.getData().add(new XYChart.Data<>("Red", 12));
    series.getData().add(new XYChart.Data<>("Green", 8));
    series.getData().add(new XYChart.Data<>("Blue", 5));

    barChart.getData().add(series);
}

ကိုယ်ပိုင် logic ကို ဘယ်မှာ ထည့်ရမလဲ: // your IA logic here လို့ မှတ်ထားတဲ့ ဒေတာ အမှတ်တွေပါ၊ ကိုယ့် စုစုပေါင်း တန်ဖိုးတွေကနေ တည်ဆောက်ပါ (ဥပမာ ArrayList ထဲက item တွေကို ရေတွက်ပြီး)။ Chart နဲ့ series ကို ပြင်ဆင်တဲ့ code က ပြန်သုံးလို့ရတဲ့ wiring ပါ။

ကိုယ့် project နဲ့ ကိုက်အောင် ပြင်ပါ:

  • Category နာမည်တွေနဲ့ ဂဏန်းတွေကို ကိုယ့်ဒေတာအဖြစ် ပြောင်းပါ။
  • Line chart နဲ့ ကွာတာက x axis ပါ: CategoryAxis မှာ စာသား label တွေ ရှိလို့ ဒီမှာ series က <String, Number> ဖြစ်ပါတယ်။

သတိထားရမယ့် အချက်များ:

  • fx:id barChart က @FXML field နာမည်နဲ့ အတိအကျ ကိုက်ရပါမယ်။ မကိုက်ရင် screen က load မဖြစ်ပါဘူး။
  • Bar တွေကို ကိုယ့် စုစုပေါင်း တန်ဖိုးတွေကနေ တည်ဆောက်ပါ၊ ဥပမာ ArrayList ထဲက item တွေကို ရေတွက်ပြီး category တစ်ခုကို XYChart.Data<> တစ်ခုစီ ထည့်ပါ။

တွဲသုံးလို့ရတဲ့ recipe များ: ကိုယ့်ဒေတာကနေ line graph ဆွဲခြင်း၊ Pie chart ဆွဲခြင်း။

Pie chart ဆွဲခြင်း

ဒါက ဘာလုပ်ပေးလဲ: တစ်ခုလုံးရဲ့ အစိတ်အပိုင်းတွေကို slice (pie chart ထဲက အစိတ်) တွေအဖြစ် ပြပါတယ်၊ slice တစ်ခုစီရဲ့ အရွယ်အစားက ကိုယ့် ဂဏန်းတွေပေါ် မူတည်ပါတယ်။

ကိုယ့် IA မှာ ဘယ်အခါ သုံးမလဲ: ပေါင်းလိုက်ရင် စုစုပေါင်း တစ်ခု ဖြစ်တဲ့ ခွဲခြမ်းပြချက်ကို ပြတဲ့အခါ သုံးပါ၊ ဥပမာ category အလိုက် သုံးစွဲငွေ ဒါမှမဟုတ် ရွေးချယ်စရာ အလိုက် ဖြေကြားချက်တွေ။

SceneBuilder ထဲမှာ (layout): PieChart တစ်ခု ထည့်ပြီး pieChart ဆိုတဲ့ fx:id ပေးပါ။ Pie chart မှာ axis မရှိပါဘူး။

<PieChart fx:id="pieChart" />

Controller ထဲမှာ (.java file):

Import line များ:

import javafx.fxml.FXML;
import javafx.scene.chart.PieChart;
import javafx.collections.FXCollections;

Controller ထဲမှာ:

@FXML private PieChart pieChart;

@FXML
public void initialize() {
    // your IA logic here: one slice per part, from your own counts
    pieChart.setData(FXCollections.observableArrayList(
        new PieChart.Data("Red", 12),
        new PieChart.Data("Green", 8),
        new PieChart.Data("Blue", 5)
    ));
}

ကိုယ်ပိုင် logic ကို ဘယ်မှာ ထည့်ရမလဲ: // your IA logic here လို့ မှတ်ထားတဲ့ slice တွေပါ၊ ကိုယ် ရေတွက်ထားတဲ့ အရေအတွက်တွေကနေ တည်ဆောက်ပါ။ Chart ပေါ်မှာ ဒေတာ သတ်မှတ်တာက ပြန်သုံးလို့ရတဲ့ wiring ပါ။

ကိုယ့် project နဲ့ ကိုက်အောင် ပြင်ပါ:

  • Slice တစ်ခုစီက PieChart.Data("label", value) တစ်ခုပါ။ Label တွေနဲ့ တန်ဖိုးတွေကို ကိုယ့်ဟာနဲ့ အစားထိုးပါ။
  • JavaFX က မူရင်း ဂဏန်းတွေကနေ ရာခိုင်နှုန်းတွေကို သူ့ဘာသာ တွက်ပေးလို့ ရာခိုင်နှုန်း မဟုတ်ဘဲ တကယ့် အရေအတွက်တွေကို ပေးပါ။

သတိထားရမယ့် အချက်များ:

  • fx:id pieChart က @FXML field နာမည်နဲ့ အတိအကျ ကိုက်ရပါမယ်။ မကိုက်ရင် screen က load မဖြစ်ပါဘူး။
  • Slice တွေက တစ်ခုလုံးရဲ့ အစိတ်အပိုင်းတွေ ဖြစ်မှသာ pie chart က အဓိပ္ပာယ် ရှိပါတယ်။ သီးခြားစီ ဖြစ်တဲ့ စုစုပေါင်း တန်ဖိုးတွေကို နှိုင်းယှဉ်ဖို့ဆိုရင် bar chart က ပိုရှင်းပါတယ်။

တွဲသုံးလို့ရတဲ့ recipe များ: Bar graph ဆွဲခြင်း၊ ဒေတာ ပြောင်းတဲ့အခါ chart ကို update လုပ်ခြင်း။

ဒေတာ ပြောင်းတဲ့အခါ chart ကို update လုပ်ခြင်း

ဒါက ဘာလုပ်ပေးလဲ: chart ကို ပထမဆုံး ဆွဲပြီးနောက် chart ပြတာကို ပြောင်းပေးပါတယ်၊ ဒါကြောင့် chart က ကိုယ့်ဒေတာနဲ့ ကိုက်ညီနေပါတယ်။

ကိုယ့် IA မှာ ဘယ်အခါ သုံးမလဲ: user က record (အချက်အလက် အများကြီး စုထားတဲ့ ဒေတာ တစ်ခု) တစ်ခု ထည့်ပြီးတဲ့အခါ၊ filter (condition နဲ့ ကိုက်တာတွေကိုပဲ ရွေးထုတ်ခြင်း) ကို ပြောင်းပြီးတဲ့အခါ ဒါမှမဟုတ် input (program ထဲ ထည့်ပေးတဲ့ ဒေတာ) နောက်တစ်ကြိမ် ထည့်ပြီးတဲ့အခါ chart ကို ပြန်ဆွဲဖို့ သုံးပါ။

SceneBuilder ထဲမှာ (layout): အသစ် ဘာမှ မလိုပါဘူး၊ ဒီ recipe က ကိုယ် ထည့်ပြီးသား chart ကို သုံးပါတယ်။

Controller ထဲမှာ (.java file): series (ဒါမှမဟုတ် pie ဒေတာ) ရဲ့ reference (object ရှိရာ memory နေရာကို ညွှန်းတဲ့ တန်ဖိုး) ကို သိမ်းထားပြီး အဲဒါကို ပြောင်းပါ။ Chart က သူ့ဘာသာ ပြန်ဆွဲပါတယ်။

Line ဒါမှမဟုတ် bar series ထဲကို အမှတ် အသစ် တစ်ခု ထည့်ခြင်း:

series.getData().add(new XYChart.Data<>(6, 9));      // appears straight away

ရှိပြီးသား အမှတ် တစ်ခုရဲ့ တန်ဖိုးကို ပြောင်းခြင်း:

series.getData().get(0).setYValue(15);               // updates the first bar or point

ဂဏန်း အသစ်တွေကနေ ပြန်တည်ဆောက်ခြင်း:

series.getData().clear();
for (int i = 0; i < newValues.length; i++) {
    // your IA logic here: your updated numbers
    series.getData().add(new XYChart.Data<>(i + 1, newValues[i]));
}

Pie slice တစ်ခုကို update လုပ်ခြင်း:

pieSlice.setPieValue(20);                            // pieSlice is a PieChart.Data you kept

ကိုယ်ပိုင် logic ကို ဘယ်မှာ ထည့်ရမလဲ: // your IA logic here လို့ မှတ်ထားတဲ့ update လုပ်ထားတဲ့ ဂဏန်းတွေပါ။ ထည့်တာ၊ ပြောင်းတာ၊ ရှင်းပြီး ပြန်တည်ဆောက်တာအတွက် method (သီးခြား အလုပ်တစ်ခု လုပ်ပေးတဲ့ code အပိုင်း) ခေါ်တာတွေက ပြန်သုံးလို့ရတဲ့ wiring ပါ။

ကိုယ့် project နဲ့ ကိုက်အောင် ပြင်ပါ:

  • ပြင်ဆင်ပြီးနောက် ပြန်ယူသုံးလို့ရအောင် XYChart.Series ကို (ဒါမှမဟုတ် PieChart.Data slice တွေကို) field (object ထဲက အချက်အလက် အကွက်) တွေအဖြစ် သိမ်းထားပါ။
  • နောက်ကွယ်က ဒေတာ ပြောင်းတိုင်း update ကို ခေါ်ပါ၊ ဥပမာ record ထည့်တဲ့ ကိုယ့် method ရဲ့ အဆုံးမှာ။

သတိထားရမယ့် အချက်များ:

  • Series ကို ဖန်တီးတဲ့အခါ သူ့ reference ကို သိမ်းထားပါ။ initialize() ထဲမှာပဲ တည်ဆောက်ပြီး မသိမ်းထားရင် chart တစ်ခုလုံးကို ပြန်မတည်ဆောက်ဘဲ နောက်မှ update လုပ်လို့ မရပါဘူး။
  • အားလုံးကို အစကနေ ပြန်စချင်ရင် clear() လုပ်ပြီး ပြန်ထည့်တာက အရိုးရှင်းဆုံး ဖြစ်ပြီး စိတ်ချရပါတယ်။

တွဲသုံးလို့ရတဲ့ recipe များ: Show progress toward a goal (ပန်းတိုင်ဆီ ဘယ်လောက် ရောက်ပြီလဲ ပြခြင်း)၊ Keep the table up to date (table ကို ဒေတာနဲ့ ကိုက်ညီအောင် update လုပ်ထားခြင်း)။