Scatter Graph - style multiple series distinctly - size & line width

How-to
1

What do you want to achieve?

Scatter chart with one series of points added in real time with lv_chart_set_next_value2() and a second distinct curve fit series set with lv_chart_set_series_values2(). Would like to have each series have a unique point size, and possibly line width, to visually distinguish between them.

What have you tried so far?

I have a good working version with points and a curve fit, but it’s visually difficult to distinguish between the two as the only difference is color.

Calling lv_obj_set_style_line_width() and lv_obj_set_style_size() between updating the first series and the second series has no effect or causes nothing to be drawn. I’m assuming I need to detect the series that is being drawn in a callback and modify base structures directly as each point is rendered. Something akin to the following hamfisted attempt:

{
  [...]
  lv_obj_add_event_cb(chart, draw_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL); 
  lv_obj_add_flag(chart, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
  [...]
}

static void draw_event_cb(lv_event_t * e)
{
    lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
    lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
    if(base_dsc->part != LV_PART_INDICATOR) return;
    lv_obj_t * obj = lv_event_get_target_obj(e);
    lv_chart_series_t * ser = lv_chart_get_series_next(obj, NULL);
    if (ser == ser_ptr) {
      lv_obj_set_style_size(chart_ptr, 4, 4, LV_PART_INDICATOR);
    }
    if (ser == ser2_ptr) {
      lv_obj_set_style_size(chart_ptr, 4, 4, LV_PART_INDICATOR);
      Serial.println("ser2_ptr");
    }
    ser = lv_chart_get_series_next(obj, ser);
    if (ser == ser_ptr) {
      lv_obj_set_style_size(chart_ptr, 4, 4, LV_PART_INDICATOR);
      // lv_area_t * area = base_dsc->area;  ???
      // area->x1 = 4;
      // area->x2 = 4;
      // area->y1 = 4;
      // area->y2 = 4;
    }
    if (ser == ser2_ptr) {
      lv_obj_set_style_size(chart_ptr, 2, 2, LV_PART_INDICATOR);
      // lv_area_t * area = base_dsc->area;  ???
      // area->x1 = 2;
      // area->x2 = 2;
      // area->y1 = 2;
      // area->y2 = 2;
      Serial.println("ser2_ptr");
    }

    lv_draw_fill_dsc_t * fill_draw_dsc = lv_draw_task_get_fill_dsc(draw_task);
    if(fill_draw_dsc == NULL) return;
    Serial.println("is indicator fill");
    fill_draw_dsc->radius = 20;
}

But I don’t know how to dig into the structures passed to get to the point size and line width. The example shows how to adjust opacity, color and things available in the lv_draw_fill_dsc_t * fill_draw_dsc = lv_draw_task_get_fill_dsc(draw_task); structure, but I haven’t figured out how to go up the object tree to adjust the size.

Environment

  • MCU/MPU/Board: Arduino Giga Display & its default libraries
  • LVGL version: 9.5.0