I’d like to add a legend to a graph. Looking at the docs I dont see anything. I was wondering what the best way would be to make this happen.
Simulator/Pi Zero w/ 7" touch display
8.1
As described
Docs
N/A
None as of yet.
@bader given you have been soo helpful of late, maybe you have some input on this one?
Maybe I should submit it as a request if there is no easy way…
What do you think?
Thanks!
I think it is not that hard to implement by hardcoding the legends and align them to the lv_chart. It might be challenging to do it dynamically though. Do you have an illustration of what you want to achieve?
Good question.
I was thinking of either having the legend in the chart with a colour that indicates the line and some text that explains what it is.
Alternatively it could be to the left or under the chart itself.
I was kind of hoping that someone had done this already and identified where the best positioning might be…
Hi,
I gave it a try, but it is hardcoded and not dynamic at all, any slight change could miss up the final result. I will keep working on it in my free time. Is there any suggestions on how to keep it more dynamic in way that the width and height were calculated based on the content of the labels?
top/down legends:
#define LEGENDS_CONTAINER_WIDTH 250
#define LEGENDS_CONTAINER_HEIGHT 28
lv_style_t legends_container_style;
lv_style_init(&legends_container_style);
lv_obj_t* legends_container = lv_obj_create(lv_scr_act());
lv_obj_set_width(legends_container, LEGENDS_CONTAINER_WIDTH);
lv_obj_set_height(legends_container, LEGENDS_CONTAINER_HEIGHT);
lv_obj_set_flex_flow(legends_container, LV_FLEX_FLOW_ROW);
lv_obj_set_flex_align(legends_container, LV_FLEX_ALIGN_SPACE_AROUND, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_align_to(legends_container, chart, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
lv_obj_set_style_pad_all(legends_container, 0, 0);
//lv_obj_set_style_border_color(legends_container, lv_color_black(), 0);
lv_obj_set_style_border_opa(legends_container, LV_OPA_0, 0);
lv_obj_set_style_border_width(legends_container, 1, 0);
lv_obj_set_style_radius(legends_container, 3, 0);
lv_obj_clear_flag(legends_container, LV_OBJ_FLAG_SCROLLABLE);
// Series 1
lv_obj_t* series_container = lv_obj_create(legends_container);
lv_obj_set_height(series_container, lv_pct(100));
lv_obj_set_flex_flow(series_container, LV_FLEX_FLOW_ROW_REVERSE);
lv_obj_set_flex_align(series_container, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_style_pad_all(series_container, 0, 0);
lv_obj_t* series_label = lv_label_create(series_container);
lv_label_set_text(series_label, "Series 1");
lv_obj_t* color_square = lv_obj_create(series_container);
lv_obj_set_size(color_square, 10, 10);
lv_obj_set_style_radius(color_square, 0, 0);
lv_obj_set_style_bg_color(color_square, lv_palette_main(LV_PALETTE_GREEN), 0);
lv_obj_set_style_bg_opa(color_square, LV_OPA_100, 0);
// Series 2
series_container = lv_obj_create(legends_container);
lv_obj_set_style_pad_all(series_container, 0, 0);
lv_obj_set_height(series_container, lv_pct(100));
lv_obj_set_flex_flow(series_container, LV_FLEX_FLOW_ROW_REVERSE);
lv_obj_set_flex_align(series_container, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
series_label = lv_label_create(series_container);
lv_label_set_text(series_label, "Series 2");
color_square = lv_obj_create(series_container);
lv_obj_set_size(color_square, 10, 10);
lv_obj_set_style_radius(color_square, 0, 0);
lv_obj_set_style_bg_color(color_square, lv_palette_main(LV_PALETTE_RED), 0);
lv_obj_set_style_bg_opa(color_square, LV_OPA_100, 0);
left/right legends:
#define LEGENDS_CONTAINER_WIDTH 100
#define LEGENDS_CONTAINER_HEIGHT 150
lv_style_t legends_container_style;
lv_style_init(&legends_container_style);
lv_obj_t* legends_container = lv_obj_create(lv_scr_act());
lv_obj_set_width(legends_container, LEGENDS_CONTAINER_WIDTH);
lv_obj_set_height(legends_container, LEGENDS_CONTAINER_HEIGHT);
lv_obj_set_flex_flow(legends_container, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(legends_container, LV_FLEX_ALIGN_SPACE_AROUND, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_align_to(legends_container, chart, LV_ALIGN_OUT_LEFT_MID, -10, 0);
lv_obj_set_style_pad_all(legends_container, 0, 0);
//lv_obj_set_style_border_color(legends_container, lv_color_black(), 0);
lv_obj_set_style_border_opa(legends_container, LV_OPA_0, 0);
lv_obj_set_style_border_width(legends_container, 1, 0);
lv_obj_set_style_radius(legends_container, 3, 0);
lv_obj_clear_flag(legends_container, LV_OBJ_FLAG_SCROLLABLE);
// Series 1
lv_obj_t* series_container = lv_obj_create(legends_container);
lv_obj_set_width(series_container, lv_pct(100));
lv_obj_set_height(series_container, 30);
lv_obj_set_flex_flow(series_container, LV_FLEX_FLOW_ROW_REVERSE);
lv_obj_set_flex_align(series_container, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_style_pad_all(series_container, 0, 0);
lv_obj_t* series_label = lv_label_create(series_container);
lv_label_set_text(series_label, "Series 1");
lv_obj_t* color_square = lv_obj_create(series_container);
lv_obj_set_size(color_square, 10, 10);
lv_obj_set_style_radius(color_square, 0, 0);
lv_obj_set_style_bg_color(color_square, lv_palette_main(LV_PALETTE_GREEN), 0);
lv_obj_set_style_bg_opa(color_square, LV_OPA_100, 0);
// Series 2
series_container = lv_obj_create(legends_container);
lv_obj_set_width(series_container, lv_pct(100));
lv_obj_set_height(series_container, 30);
lv_obj_set_flex_flow(series_container, LV_FLEX_FLOW_ROW_REVERSE);
lv_obj_set_flex_align(series_container, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_style_pad_all(series_container, 0, 0);
series_label = lv_label_create(series_container);
lv_label_set_text(series_label, "Series 2");
color_square = lv_obj_create(series_container);
lv_obj_set_size(color_square, 10, 10);
lv_obj_set_style_radius(color_square, 0, 0);
lv_obj_set_style_bg_color(color_square, lv_palette_main(LV_PALETTE_RED), 0);
lv_obj_set_style_bg_opa(color_square, LV_OPA_100, 0);