The 'chart' widget. Axis ticks and labels

How-to
1

LVGL v8.2
I’m using ‘chart’ widget (TFT 800*480) and while SLS do not fully support it initialization do as follow:

lv_obj_t * ui_ChartBat;
lv_chart_series_t *ser1,*ser2;
#define ui_ChartBatPointNum 10
int16_t Bufy[ui_ChartBatPointNum] = {0,2,4,6,8,10,12,14,16,18};
int16_t Bufx[ui_ChartBatPointNum] = {0,1,2,3,4,5,6,7,8,9};
 
  ui_ChartBat = lv_chart_create(ui_ScreenMain);
  lv_obj_set_width(ui_ChartBat, 794);
  lv_obj_set_height(ui_ChartBat, 251);
  lv_obj_set_x(ui_ChartBat, 0);
  lv_obj_set_y(ui_ChartBat, 0);
  lv_obj_set_align(ui_ChartBat, LV_ALIGN_BOTTOM_MID);
  lv_chart_set_type(ui_ChartBat, LV_CHART_TYPE_LINE);// Show lines and points too
  
  ser1 = lv_chart_add_series(ui_ChartBat, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
  ser2 = lv_chart_add_series(ui_ChartBat, lv_palette_main(LV_PALETTE_GREEN), LV_CHART_AXIS_SECONDARY_Y);
  lv_chart_set_div_line_count(ui_ChartBat,6,10);// кол-во разделительных линий x,y
  lv_chart_set_point_count(ui_ChartBat,ui_ChartBatPointNum);// количество точек (x=y)
  lv_chart_set_range(ui_ChartBat,LV_CHART_AXIS_PRIMARY_Y,0,20);
  lv_chart_set_range(ui_ChartBat,LV_CHART_AXIS_PRIMARY_X,0,10);
  
  ser1->x_points = &Bufx[0];ser1->y_points = &Bufy[0];
  lv_chart_set_update_mode(ui_ChartBat,LV_CHART_UPDATE_MODE_SHIFT);
 // this calls do not work
  lv_chart_set_axis_tick(ui_ChartBat,LV_CHART_AXIS_PRIMARY_Y,10,5,5,1,true,50);
  lv_chart_set_axis_tick(ui_ChartBat,LV_CHART_AXIS_PRIMARY_X,10,5,5,1,true,50);

Everything looks good, exept a last two calls of lv_chart_set_axis_tick do not work. There are no axis ticks, neither labels.
My project is highly customized and it looks like something resources needed for ‘chart’ has been disabled. Please help to undestand the problem…

2

Fix: chart ticks and labels drawn outside the chart body, so it’s not viewed if chart size equal X/Y screen size. I insert my chart to the ‘panel’ and aligned it to free some space around axies. Great!
But… next problem in LV_CHART_TYPE_LINE mode: how to adjust/change labels for X axis? In the example above for 10 points the X axis labeled as 0…9 and I cannot find a way to change it labels as [-9…0], for example…

3

Hi Vladi,

Take a look at example_chart_3.c in /lvgl/examples/widgets/chart/

This shows how to achieve your goal.

Cheers,

Pete

4

Thanks for the answer. Looks to ‘example_chart_3.c’ and found:

  1. This example for chart in LV_CHART_TYPE_BAR mode. I need to use LV_CHART_TYPE_LINE mode.
  2. lv_chart_set_range() function is adjust only the Y axis. The rang for X axis does not set! So, it place labels numbers for 12 point only, [0,12].
    It’s looking like in LV_CHART_TYPE_LINE and LV_CHART_TYPE_BAR modes the X axis is ‘free’ and does not used at all. Futhermore, user cannot operate which labels to place here.
    However, X axis labels are very useful. My project need to demonstrate last and 10 most recent battery voltage values. Hope, the LV_CHART_TYPE_LINE shift mode is right selected and it working good for me. But for X axis I don’t know how to place the custom labels. Only point numbers [0,10] available…

P.S. I found a help snippet in LVGL docs for the ‘month’ labels on X axis:

#include "../../lv_examples.h"
#if LV_USE_CHART && LV_BUILD_EXAMPLES

static void draw_event_cb(lv_event_t * e)
{
    lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
    if(!lv_obj_draw_part_check_type(dsc, &lv_chart_class, LV_CHART_DRAW_PART_TICK_LABEL)) return;

    if(dsc->id == LV_CHART_AXIS_PRIMARY_X && dsc->text) {
        const char * month[] = {"Jan", "Febr", "March", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec"};
        lv_snprintf(dsc->text, dsc->text_length, "%s", month[dsc->value]);
    }
}

Now, I learn a method to control X axis labels via void draw_event_cb(). But it’s a bit complex for me yet… )))