Chart Dashboard

Lab 6: Chart Dashboard (Multiple Chart Types)

---

1. โครงสร้างภาพรวมของ Lab

Why? - ทำไมต้องเรียนรู้เรื่องนี้

• Data Visualization: ข้อมูลเดียวกันแสดงได้หลายรูปแบบ เลือก chart ที่เหมาะกับลักษณะข้อมูล

• Chart Type Selection: Bar chart เหมาะกับเปรียบเทียบค่า, Line chart เหมาะกับ time-series, Scatter chart เหมาะกับดูความสัมพันธ์

• Professional Dashboard: รูปแบบ multi-chart dashboard ใช้ในอุตสาหกรรม SCADA, Process Control

What? - จะได้เรียนรู้อะไร

1. Bar Chart: เปรียบเทียบค่า X, Y, Z แบบ side-by-side ด้วย LV_CHART_TYPE_BAR

2. Area Chart: แสดง trend พร้อม fill ด้านล่าง (Line + Opacity)

3. Scatter Chart: แสดงความสัมพันธ์ X vs Y ด้วย LV_CHART_TYPE_SCATTER

4. Line Chart: Multi-series time-series

5. 2x2 Grid Layout: จัดวาง 4 charts ในหน้าเดียว

How? - จะทำอย่างไร

1. สร้าง 2x2 grid layout บนหน้าจอ (480x320)

2. มุมซ้ายบน: Bar Chart - เปรียบเทียบ Accel X/Y/Z

3. มุมขวาบน: Area Chart - Magnitude over time

4. มุมซ้ายล่าง: Scatter Chart - X vs Y correlation

5. มุมขวาล่าง: Line Chart - Gyroscope Roll/Pitch/Yaw

6. Single timer อัพเดททุก chart ทุก 100ms

---

2. ฟังก์ชันสำคัญ

2.1 Chart Type Constants

Constant	Description	Update Method
LV_CHART_TYPE_LINE	เส้นเชื่อมจุด (default)	lv_chart_set_next_value()
LV_CHART_TYPE_BAR	แท่ง bar graph	lv_chart_set_value_by_id() + refresh()
LV_CHART_TYPE_SCATTER	จุดกระจาย (x, y)	lv_chart_set_next_value2()

2.2 Bar Chart Functions

Function	Description
lv_chart_set_type(chart, LV_CHART_TYPE_BAR)	ตั้งเป็น Bar chart
lv_chart_set_point_count(chart, n)	จำนวน bars (เช่น 3 สำหรับ X/Y/Z)
lv_chart_set_value_by_id(chart, ser, id, val)	อัพเดทค่า bar ตาม index
lv_chart_refresh(chart)	REQUIRED - รีเฟรชหลังอัพเดท
lv_obj_set_style_pad_column(chart, px, 0)	ระยะห่างระหว่าง bars

2.3 Scatter Chart Functions

Function	Description
lv_chart_set_type(chart, LV_CHART_TYPE_SCATTER)	ตั้งเป็น Scatter chart
lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_X, min, max)	ช่วงแกน X (ต้อง set)
lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, min, max)	ช่วงแกน Y
lv_chart_set_next_value2(chart, ser, x, y)	เพิ่มจุด (x, y)

2.4 Area Chart (Line + Fill)

/* Area Chart = Line Chart + Background Opacity บน LV_PART_ITEMS */
lv_chart_set_type(chart, LV_CHART_TYPE_LINE);
lv_obj_set_style_bg_opa(chart, LV_OPA_50, LV_PART_ITEMS);  /* Fill 50% */

2.5 Chart Styling Functions

Function	Description
lv_obj_set_style_size(chart, w, h, LV_PART_INDICATOR)	ขนาดจุด (0,0 = ซ่อน)
lv_obj_set_style_line_width(chart, px, LV_PART_ITEMS)	ความหนาเส้น
lv_chart_set_div_line_count(chart, h, v)	เส้น grid (horizontal, vertical)
lv_obj_set_style_bg_opa(chart, opa, LV_PART_ITEMS)	Area fill opacity

---

3. โค้ดตัวอย่าง

3.1 Global Variables

#include "lvgl.h"
#include <math.h>

#define CHART_POINTS    50
#define SCATTER_POINTS  30
#define CHART_W         220
#define CHART_H         110

/* Bar Chart */
static lv_obj_t * bar_chart;
static lv_chart_series_t * bar_ser;
static lv_obj_t * bar_value_label;

/* Area Chart */
static lv_obj_t * area_chart;
static lv_chart_series_t * area_ser;
static lv_obj_t * area_value_label;

/* Scatter Chart */
static lv_obj_t * scatter_chart;
static lv_chart_series_t * scatter_ser;
static lv_obj_t * scatter_value_label;

/* Line Chart */
static lv_obj_t * line_chart;
static lv_chart_series_t * line_ser[3];
static lv_obj_t * line_value_label;

static lv_timer_t * chart_timer;

3.2 Simulation Helpers

static void simulate_imu_accel(float *ax, float *ay, float *az)
{
    static float t = 0.0f;
    t += 0.05f;
    *ax = 0.5f * sinf(t * 1.0f) + 0.1f * sinf(t * 3.7f);
    *ay = 0.3f * cosf(t * 0.7f) + 0.05f * sinf(t * 5.1f);
    *az = 9.81f + 0.2f * sinf(t * 2.0f);
}

static void simulate_imu_gyro(float *gx, float *gy, float *gz)
{
    static float t = 0.0f;
    t += 0.04f;
    *gx = 0.3f * sinf(t * 1.5f);
    *gy = 0.2f * cosf(t * 1.2f);
    *gz = 0.15f * sinf(t * 0.8f);
}

3.3 Timer Callback - อัพเดททุก Chart

static void chart_timer_cb(lv_timer_t * timer)
{
    (void)timer;

    float ax, ay, az, gx, gy, gz;
    simulate_imu_accel(&ax, &ay, &az);
    simulate_imu_gyro(&gx, &gy, &gz);

    /* ===== BAR CHART: Accel X/Y/Z comparison ===== */
    int32_t bx = (int32_t)((ax + 2.0f) * 25.0f);  /* -2..+2 -> 0..100 */
    int32_t by = (int32_t)((ay + 2.0f) * 25.0f);
    int32_t bz = (int32_t)((az / 10.0f) * 10.0f);
    bx = LV_CLAMP(0, bx, 100);
    by = LV_CLAMP(0, by, 100);
    bz = LV_CLAMP(0, bz, 100);

    lv_chart_set_value_by_id(bar_chart, bar_ser, 0, bx);
    lv_chart_set_value_by_id(bar_chart, bar_ser, 1, by);
    lv_chart_set_value_by_id(bar_chart, bar_ser, 2, bz);
    lv_chart_refresh(bar_chart);  /* REQUIRED for bar chart */

    lv_label_set_text_fmt(bar_value_label,
        "X:%.1f Y:%.1f Z:%.1f", (double)ax, (double)ay, (double)az);

    /* ===== AREA CHART: Magnitude over time ===== */
    float mag = sqrtf(ax * ax + ay * ay + az * az);
    int32_t mag_scaled = (int32_t)(mag * 10.0f);
    if(mag_scaled > 150) mag_scaled = 150;

    lv_chart_set_next_value(area_chart, area_ser, mag_scaled);
    lv_label_set_text_fmt(area_value_label, "Mag: %.2f m/s2",
                          (double)mag);

    /* ===== SCATTER CHART: X vs Y ===== */
    int32_t sx = (int32_t)((ax + 2.0f) * 50.0f);  /* -2..+2 -> 0..200 */
    int32_t sy = (int32_t)((ay + 2.0f) * 50.0f);
    lv_chart_set_next_value2(scatter_chart, scatter_ser, sx, sy);
    lv_label_set_text_fmt(scatter_value_label,
        "X:%.2f Y:%.2f", (double)ax, (double)ay);

    /* ===== LINE CHART: Gyroscope Roll/Pitch/Yaw ===== */
    int32_t gr = (int32_t)((gx + 1.0f) * 50.0f);  /* -1..+1 -> 0..100 */
    int32_t gp = (int32_t)((gy + 1.0f) * 50.0f);
    int32_t gyw = (int32_t)((gz + 1.0f) * 50.0f);

    lv_chart_set_next_value(line_chart, line_ser[0], gr);
    lv_chart_set_next_value(line_chart, line_ser[1], gp);
    lv_chart_set_next_value(line_chart, line_ser[2], gyw);

    lv_label_set_text_fmt(line_value_label,
        "R:%.2f P:%.2f Y:%.2f", (double)gx, (double)gy, (double)gz);
}

3.4 สร้าง Bar Chart (มุมซ้ายบน)

static void create_bar_chart(lv_obj_t * parent)
{
    /* Title */
    lv_obj_t * title = lv_label_create(parent);
    lv_label_set_text(title, "Bar: Accel X/Y/Z");
    lv_obj_set_style_text_font(title, &lv_font_montserrat_14, 0);
    lv_obj_align(title, LV_ALIGN_TOP_LEFT, 10, 5);

    /* Bar Chart */
    bar_chart = lv_chart_create(parent);
    lv_obj_set_size(bar_chart, CHART_W, CHART_H);
    lv_obj_align(bar_chart, LV_ALIGN_TOP_LEFT, 10, 25);
    lv_chart_set_type(bar_chart, LV_CHART_TYPE_BAR);
    lv_chart_set_point_count(bar_chart, 3);  /* X, Y, Z */
    lv_chart_set_range(bar_chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);

    bar_ser = lv_chart_add_series(bar_chart,
                  lv_palette_main(LV_PALETTE_BLUE),
                  LV_CHART_AXIS_PRIMARY_Y);

    /* เพิ่มระยะห่างระหว่าง bars */
    lv_obj_set_style_pad_column(bar_chart, 30, 0);

    /* Value label */
    bar_value_label = lv_label_create(parent);
    lv_label_set_text(bar_value_label, "X:0 Y:0 Z:0");
    lv_obj_set_style_text_font(bar_value_label, &lv_font_montserrat_12, 0);
    lv_obj_align(bar_value_label, LV_ALIGN_TOP_LEFT, 10, CHART_H + 30);
}

3.5 สร้าง Area Chart (มุมขวาบน)

static void create_area_chart(lv_obj_t * parent)
{
    /* Title */
    lv_obj_t * title = lv_label_create(parent);
    lv_label_set_text(title, "Area: Magnitude");
    lv_obj_set_style_text_font(title, &lv_font_montserrat_14, 0);
    lv_obj_align(title, LV_ALIGN_TOP_LEFT, 250, 5);

    /* Area Chart (Line + Fill) */
    area_chart = lv_chart_create(parent);
    lv_obj_set_size(area_chart, CHART_W, CHART_H);
    lv_obj_align(area_chart, LV_ALIGN_TOP_LEFT, 250, 25);
    lv_chart_set_type(area_chart, LV_CHART_TYPE_LINE);
    lv_chart_set_point_count(area_chart, CHART_POINTS);
    lv_chart_set_range(area_chart, LV_CHART_AXIS_PRIMARY_Y, 0, 150);

    area_ser = lv_chart_add_series(area_chart,
                   lv_palette_main(LV_PALETTE_RED),
                   LV_CHART_AXIS_PRIMARY_Y);

    /* Area fill effect */
    lv_obj_set_style_bg_opa(area_chart, LV_OPA_50, LV_PART_ITEMS);
    lv_obj_set_style_size(area_chart, 3, 3, LV_PART_INDICATOR);
    lv_obj_set_style_line_width(area_chart, 2, LV_PART_ITEMS);
    lv_chart_set_div_line_count(area_chart, 4, 6);

    /* Value label */
    area_value_label = lv_label_create(parent);
    lv_label_set_text(area_value_label, "Mag: 0.00 m/s2");
    lv_obj_set_style_text_font(area_value_label, &lv_font_montserrat_12, 0);
    lv_obj_set_style_text_color(area_value_label,
        lv_palette_main(LV_PALETTE_RED), 0);
    lv_obj_align(area_value_label, LV_ALIGN_TOP_LEFT, 250, CHART_H + 30);
}

3.6 สร้าง Scatter Chart (มุมซ้ายล่าง)

static void create_scatter_chart(lv_obj_t * parent)
{
    /* Title */
    lv_obj_t * title = lv_label_create(parent);
    lv_label_set_text(title, "Scatter: X vs Y");
    lv_obj_set_style_text_font(title, &lv_font_montserrat_14, 0);
    lv_obj_align(title, LV_ALIGN_TOP_LEFT, 10, 170);

    /* Scatter Chart */
    scatter_chart = lv_chart_create(parent);
    lv_obj_set_size(scatter_chart, CHART_W, CHART_H);
    lv_obj_align(scatter_chart, LV_ALIGN_TOP_LEFT, 10, 190);
    lv_chart_set_type(scatter_chart, LV_CHART_TYPE_SCATTER);
    lv_chart_set_point_count(scatter_chart, SCATTER_POINTS);

    /* IMPORTANT: ต้อง set ทั้ง X range และ Y range */
    lv_chart_set_range(scatter_chart, LV_CHART_AXIS_PRIMARY_X, 0, 200);
    lv_chart_set_range(scatter_chart, LV_CHART_AXIS_PRIMARY_Y, 0, 200);

    scatter_ser = lv_chart_add_series(scatter_chart,
                      lv_palette_main(LV_PALETTE_BLUE),
                      LV_CHART_AXIS_PRIMARY_Y);

    /* จุดใหญ่ ๆ ให้เห็นชัด */
    lv_obj_set_style_size(scatter_chart, 8, 8, LV_PART_INDICATOR);
    lv_obj_set_style_bg_opa(scatter_chart, LV_OPA_70, LV_PART_INDICATOR);
    lv_chart_set_div_line_count(scatter_chart, 4, 4);

    /* Value label */
    scatter_value_label = lv_label_create(parent);
    lv_label_set_text(scatter_value_label, "X:0 Y:0");
    lv_obj_set_style_text_font(scatter_value_label, &lv_font_montserrat_12, 0);
    lv_obj_align(scatter_value_label, LV_ALIGN_TOP_LEFT, 10, CHART_H + 195);
}

3.7 สร้าง Line Chart (มุมขวาล่าง)

static void create_line_chart(lv_obj_t * parent)
{
    /* Title */
    lv_obj_t * title = lv_label_create(parent);
    lv_label_set_text(title, "Line: Gyro R/P/Y");
    lv_obj_set_style_text_font(title, &lv_font_montserrat_14, 0);
    lv_obj_align(title, LV_ALIGN_TOP_LEFT, 250, 170);

    /* Line Chart */
    line_chart = lv_chart_create(parent);
    lv_obj_set_size(line_chart, CHART_W, CHART_H);
    lv_obj_align(line_chart, LV_ALIGN_TOP_LEFT, 250, 190);
    lv_chart_set_type(line_chart, LV_CHART_TYPE_LINE);
    lv_chart_set_point_count(line_chart, CHART_POINTS);
    lv_chart_set_range(line_chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);

    /* ซ่อนจุด แสดงแค่เส้น */
    lv_obj_set_style_size(line_chart, 0, 0, LV_PART_INDICATOR);
    lv_obj_set_style_line_width(line_chart, 2, LV_PART_ITEMS);
    lv_chart_set_div_line_count(line_chart, 4, 4);

    /* 3 series: Roll(Red), Pitch(Green), Yaw(Blue) */
    lv_color_t colors[] = {
        lv_palette_main(LV_PALETTE_RED),
        lv_palette_main(LV_PALETTE_GREEN),
        lv_palette_main(LV_PALETTE_BLUE)
    };
    for(int i = 0; i < 3; i++) {
        line_ser[i] = lv_chart_add_series(line_chart, colors[i],
                                           LV_CHART_AXIS_PRIMARY_Y);
    }

    /* Value label */
    line_value_label = lv_label_create(parent);
    lv_label_set_text(line_value_label, "R:0 P:0 Y:0");
    lv_obj_set_style_text_font(line_value_label, &lv_font_montserrat_12, 0);
    lv_obj_align(line_value_label, LV_ALIGN_TOP_LEFT, 250, CHART_H + 195);
}

3.8 Main Function

void part2_ex6_chart_dashboard(void)
{
    /* พื้นหลังสีเทาอ่อน */
    lv_obj_set_style_bg_color(lv_screen_active(),
        lv_color_hex(0xF0F0F0), LV_PART_MAIN);

    /* สร้าง 4 charts ใน grid 2x2 */
    lv_obj_t * screen = lv_screen_active();
    create_bar_chart(screen);
    create_area_chart(screen);
    create_scatter_chart(screen);
    create_line_chart(screen);

    /* Single timer สำหรับอัพเดททุก chart */
    chart_timer = lv_timer_create(chart_timer_cb, 100, NULL);
}

---

4. องค์ความรู้และเทคนิค

4.1 เลือก Chart Type ที่เหมาะสม

ลักษณะข้อมูล	Chart Type ที่เหมาะ	เหตุผล
เปรียบเทียบค่าหลาย ๆ ตัว ณ เวลาเดียว	Bar	เห็นความแตกต่างชัดเจน
ข้อมูลเปลี่ยนแปลงตามเวลา	Line	เห็น trend ชัด
ข้อมูลเปลี่ยนแปลงตามเวลา + ปริมาณ	Area (Line+Fill)	เห็นทั้ง trend และ volume
ความสัมพันธ์ระหว่าง 2 ตัวแปร	Scatter	เห็น correlation pattern
สัดส่วน/เปอร์เซ็นต์	Arc/Bar	เห็นสัดส่วนชัด

4.2 Bar Chart Gotchas

/* BAR Chart: 3 ข้อควรจำ */

/* 1. point_count = จำนวน bars (ไม่ใช่ data points) */
lv_chart_set_point_count(chart, 3);  /* 3 bars: X, Y, Z */

/* 2. ใช้ set_value_by_id (ไม่ใช่ set_next_value) */
lv_chart_set_value_by_id(chart, ser, 0, val_x);  /* bar index 0 */
lv_chart_set_value_by_id(chart, ser, 1, val_y);  /* bar index 1 */

/* 3. MUST call refresh หลังอัพเดท */
lv_chart_refresh(chart);

4.3 Scatter Chart Gotchas

/* SCATTER Chart: 2 ข้อควรจำ */

/* 1. ต้อง set ทั้ง X range และ Y range */
lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_X, 0, 200);
lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 200);

/* 2. ใช้ set_next_value2 (ส่งทั้ง x และ y) */
lv_chart_set_next_value2(chart, ser, x_val, y_val);

4.4 Data Scaling Pattern

/* Pattern: แปลงค่า float range เป็น int range สำหรับ chart */

/* Accel: -2.0..+2.0 -> 0..100 */
int32_t scaled = (int32_t)((value + 2.0f) * 25.0f);
scaled = LV_CLAMP(0, scaled, 100);

/* Gyro: -1.0..+1.0 -> 0..100 */
int32_t scaled = (int32_t)((value + 1.0f) * 50.0f);

/* General formula: */
/* scaled = (value - src_min) / (src_max - src_min) * (dst_max - dst_min) + dst_min */

4.5 Grid Layout Tips

/* คำนวณ layout สำหรับ 2x2 grid บนหน้าจอ 480x320 */
#define SCREEN_W    480
#define SCREEN_H    320
#define MARGIN      10
#define CHART_W     ((SCREEN_W - 3 * MARGIN) / 2)   /* ~220 */
#define CHART_H     ((SCREEN_H - 3 * MARGIN - 40) / 2)  /* ~110 (reserve 40 for labels) */

/* ตำแหน่ง: */
/* Top-Left:     (MARGIN, 25) */
/* Top-Right:    (MARGIN + CHART_W + MARGIN, 25) */
/* Bottom-Left:  (MARGIN, 25 + CHART_H + 40) */
/* Bottom-Right: (MARGIN + CHART_W + MARGIN, 25 + CHART_H + 40) */

---

5. แบบฝึกหัด

Exercise 1: Weather Dashboard

โจทย์: สร้าง Weather Dashboard แบบ 2x2 grid แสดง 4 charts:

ตำแหน่ง	Chart Type	ข้อมูล	Range
ซ้ายบน	Line	Temperature (C)	20-40
ขวาบน	Area	Humidity (%)	40-100
ซ้ายล่าง	Bar	Pressure (hPa)	990-1030
ขวาล่าง	Scatter	Temp vs Humidity	correlation

• จำลองข้อมูลให้สมจริง (อุณหภูมิสัมพันธ์กับความชื้น)

• แต่ละ chart มี title และ value label

• อัพเดททุก 200ms

การประยุกต์ใช้งานจริง:

• สถานีตรวจอากาศ (Weather Station)

• ระบบ HVAC ในอาคาร

• Smart Agriculture - ตรวจสอบสภาพอากาศในฟาร์ม

---

Exercise 2: Chart Type Selector

โจทย์: เพิ่ม Dropdown ที่ด้านบนของหน้าจอ ให้ผู้ใช้เลือกประเภท Chart สำหรับ Accelerometer data:

• ตัวเลือก: "Line\nBar\nScatter"

• เมื่อเปลี่ยน dropdown จะทำลาย chart เก่าและสร้างใหม่ตาม type ที่เลือก

• ข้อมูลที่แสดงเหมือนกัน (Accel X/Y/Z) แต่เปลี่ยนวิธีแสดงผล

การประยุกต์ใช้งานจริง:

• Data Analytics Dashboard ที่ให้ผู้ใช้เลือกมุมมองข้อมูล

• Lab Equipment Software ที่วิศวกรต้องวิเคราะห์ข้อมูลหลายมุมมอง

Hint:

• lv_dropdown_create(parent) สร้าง dropdown

• lv_dropdown_set_options(dd, "Line\nBar\nScatter")

• Event callback: lv_dropdown_get_selected(dd) return 0, 1, 2

• ลบ chart เก่า: lv_obj_delete(old_chart)

---

6. References

• LVGL Chart

• lv_example_chart_1.c

• LVGL TabView

---