# 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

<figure><img src="/files/rjo6DkPtclX2RFvE3yrL" alt=""><figcaption></figcaption></figure>

***

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

#### 2.1 Chart Type Constants

<table><thead><tr><th width="207.4801025390625">Constant</th><th width="179.8721923828125">Description</th><th>Update Method</th></tr></thead><tbody><tr><td><code>LV_CHART_TYPE_LINE</code></td><td>เส้นเชื่อมจุด (default)</td><td><code>lv_chart_set_next_value()</code></td></tr><tr><td><code>LV_CHART_TYPE_BAR</code></td><td>แท่ง bar graph</td><td><code>lv_chart_set_value_by_id()</code> + <code>refresh()</code></td></tr><tr><td><code>LV_CHART_TYPE_SCATTER</code></td><td>จุดกระจาย (x, y)</td><td><code>lv_chart_set_next_value2()</code></td></tr></tbody></table>

#### 2.2 Bar Chart Functions

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

#### 2.3 Scatter Chart Functions

<table><thead><tr><th width="534.6072387695312">Function</th><th>Description</th></tr></thead><tbody><tr><td><code>lv_chart_set_type(chart, LV_CHART_TYPE_SCATTER)</code></td><td>ตั้งเป็น Scatter chart</td></tr><tr><td><code>lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_X, min, max)</code></td><td>ช่วงแกน X (<strong>ต้อง set</strong>)</td></tr><tr><td><code>lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, min, max)</code></td><td>ช่วงแกน Y</td></tr><tr><td><code>lv_chart_set_next_value2(chart, ser, x, y)</code></td><td>เพิ่มจุด (x, y)</td></tr></tbody></table>

#### 2.4 Area Chart (Line + Fill)

```c
/* 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

<table><thead><tr><th width="506.55682373046875">Function</th><th>Description</th></tr></thead><tbody><tr><td><code>lv_obj_set_style_size(chart, w, h, LV_PART_INDICATOR)</code></td><td>ขนาดจุด (0,0 = ซ่อน)</td></tr><tr><td><code>lv_obj_set_style_line_width(chart, px, LV_PART_ITEMS)</code></td><td>ความหนาเส้น</td></tr><tr><td><code>lv_chart_set_div_line_count(chart, h, v)</code></td><td>เส้น grid (horizontal, vertical)</td></tr><tr><td><code>lv_obj_set_style_bg_opa(chart, opa, LV_PART_ITEMS)</code></td><td>Area fill opacity</td></tr></tbody></table>

***

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

#### 3.1 Global Variables

```c
#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

```c
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

```c
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 (มุมซ้ายบน)

```c
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 (มุมขวาบน)

```c
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 (มุมซ้ายล่าง)

```c
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 (มุมขวาล่าง)

```c
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

```c
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 ที่เหมาะสม

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

#### 4.2 Bar Chart Gotchas

```c
/* 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

```c
/* 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

```c
/* 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

```c
/* คำนวณ 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](https://docs.lvgl.io/9.2/widgets/chart.html)
* [lv\_example\_chart\_1.c](https://github.com/lvgl/lvgl/blob/release/v9.2/examples/widgets/chart/lv_example_chart_1.c)
* [LVGL TabView](https://docs.lvgl.io/9.2/widgets/tabview.html)

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aic-eec.com/interfacing-with-infineon-psoc-tm-edge/hmi-development/sensor-to-hmi-display/ux-ui-workshops/chart-dashboard.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.