Bar Chart - updating X-Axis labels

How-to
1

Description

My bar chart is displaying a realtime time series of values updated every 30 mins. I need to update the X axis lables every 30 mins so they start at the time of the update, eg 13:00, 13:30, 14:00 etc.
It seems I can only set once using lv_scale_set_text_src(ui_Chart1_Xaxis, custom_labels) with a static list.

What MCU/Processor/Board and compiler are you using?

esp32-8048S043C

What LVGL version are you using?

9.2.2

What do you want to achieve?

Update x-axis lables periodically

What have you tried so far?

I have seen the topic Dynamically updating chart x-axis label values using callback but this is for v8.2 and I am using v9.2.2
Can someone please help convert the callback to v9, or let me know if there is a different way in v9 to dynamically update the x-axis labels.
V8 callback:

static void chart_event_cb(lv_event_t * e)
{

  lv_event_code_t code = lv_event_get_code(e);
  if (code == LV_EVENT_DRAW_PART_BEGIN) {

    lv_obj_draw_part_dsc_t * dsc = (lv_obj_draw_part_dsc_t*) lv_event_get_param(e);
    if (dsc->part == LV_PART_TICKS && dsc->id == LV_CHART_AXIS_PRIMARY_X) {
      lv_snprintf(dsc->text, sizeof(dsc->text), "%lu", time_T);
    }
  }

For example LV_EVENT_DRAW_PART_BEGIN doesn’t exist in v9

2

Hello @kisvegabor are you able to offer any help please, I didn’t get any replies from the community. I need to update the x-axis lables, eg in the pic they start at midnight 00:00, and in an hour I want to update the labels to start from 01:00 so I can show new data etc
The example on how to do this is for v8.2, but I cannot see how to convert it to 9.2.
Thanks

image0 (3)
image0 (3)1346×630 333 KB

3

static char time_strings[13][6];
static const char* time = {
time_strings[0], time_strings[1], time_strings[2], time_strings[3],
time_strings[4], time_strings[5], time_strings[6], time_strings[7],
time_strings[8], time_strings[9], time_strings[10], time_strings[11], NULL
};

static void add_data(lv_timer_t* t)
{
lv_obj_t* scale_bottom = lv_timer_get_user_data(t);
static int hour_offset = 0;

hour_offset = (hour_offset + 1) % 24;

for (int i = 0; i < 12; i++) {
    int hour = (i + hour_offset) % 24;
    snprintf(time_strings[i], sizeof(time_strings[i]), "%02d:00", hour);
}

lv_scale_set_text_src(scale_bottom, time);

}

void lv_example_chart_2(void)
{
/Create a container/
lv_obj_t* main_cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(main_cont, 200, 150);
lv_obj_center(main_cont);

/*Create a transparent wrapper for the chart and the scale.
 *Set a large width, to make it scrollable on the main container*/
lv_obj_t* wrapper = lv_obj_create(main_cont);
lv_obj_remove_style_all(wrapper);
lv_obj_set_size(wrapper, lv_pct(300), lv_pct(100));
lv_obj_set_flex_flow(wrapper, LV_FLEX_FLOW_COLUMN);

/*Create a chart on the wrapper
 *Set it's width to 100% to fill the large wrapper*/
lv_obj_t* chart = lv_chart_create(wrapper);
lv_obj_set_width(chart, lv_pct(100));
lv_obj_set_flex_grow(chart, 1);
lv_chart_set_type(chart, LV_CHART_TYPE_BAR);
lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);
lv_chart_set_range(chart, LV_CHART_AXIS_SECONDARY_Y, 0, 400);
lv_chart_set_point_count(chart, 12);
lv_obj_set_style_radius(chart, 0, 0);


/*Create a scale also with 100% width*/
lv_obj_t* scale_bottom = lv_scale_create(wrapper);
lv_scale_set_mode(scale_bottom, LV_SCALE_MODE_HORIZONTAL_BOTTOM);
lv_obj_set_size(scale_bottom, lv_pct(100), 25);
lv_scale_set_total_tick_count(scale_bottom, 12);
lv_scale_set_major_tick_every(scale_bottom, 1);
lv_obj_set_style_pad_hor(scale_bottom, lv_chart_get_first_point_center_offset(chart), 0);

for (int i = 0; i < 12; i++) {
    int hour = i;
    snprintf(time_strings[i], sizeof(time_strings[i]), "%02d:00", hour);
}

lv_scale_set_text_src(scale_bottom, time);
lv_timer_create(add_data, 1000, scale_bottom);
/*Add two data series*/
lv_chart_series_t* ser1 = lv_chart_add_series(chart, lv_palette_lighten(LV_PALETTE_GREEN, 2), LV_CHART_AXIS_PRIMARY_Y);
lv_chart_series_t* ser2 = lv_chart_add_series(chart, lv_palette_darken(LV_PALETTE_GREEN, 2), LV_CHART_AXIS_PRIMARY_Y);

/*Set the next points on 'ser1'*/
uint32_t i;
for (i = 0; i < 12; i++) {
    lv_chart_set_next_value(chart, ser1, lv_rand(10, 60));
    lv_chart_set_next_value(chart, ser2, lv_rand(50, 90));
}
lv_chart_refresh(chart); /*Required after direct set*/

}

4

Thanks for this, did it work for you? I get a warning “excess elements in scalar initializer” as is expecting pointer here:

static const char* time = {
time_strings[0], time_strings[1], time_strings[2], time_strings[3],
time_strings[4], time_strings[5], time_strings[6], time_strings[7],
time_strings[8], time_strings[9], time_strings[10], time_strings[11], NULL
};

and also

lv_scale_set_text_src(scale_bottom, time);

warns “passing argument 2 of ‘lv_scale_set_text_src’ from incompatible pointer type [-Wincompatible-pointer-types]”

and it crashes out.

5

yes, it work in my vs2019 simulator
image
image