Overview

Charts have a rectangle-like background with horizontal and vertical division lines. You can add any number of series to the charts by lv_chart_add_series(chart, color). It allocates data for a lv_chart_series_t structure which contains the chosen color and an array for the data.

You have several options to set the data of series:

  1. Set the values manually in the array like ser1->points[3] = 7 and refresh the chart with lv_chart_refresh(chart).
  2. Use the lv_chart_set_next(chart, ser, value) function to shift all data to left and set a new data on the most right position.
  3. Initialize all points to a given value with: lv_chart_init_points(chart, ser, value)
  4. Set all points from an array with: lv_chart_set_points(chart, ser, value_array)

There are four data display types:

  • LV_CHART_TYPE_NONE: do not display the points. It can be used if you would like to add your own draw method.
  • LV_CHART_TYPE_LINE: draw lines between the points
  • LV_CHART_TYPE_COL: Draw columns
  • LV_CHART_TYPE_POINT: Draw points

You can specify the display type with lv_chart_set_type(chart, TYPE). The LV_CHART_TYPE_LINE | LV_CHART_TYPE_POINT type is also valid to draw both lines and points.

You can specify a the min. and max. values in y directions with lv_chart_set_range(chart, y_min, y_max). The value of the points will be scaled proportionally. The default range is: 0..100.

The number of points in the data lines can be modified by lv_chart_set_point_count(chart, point_num). The default value is 10.

The number of horizontal and vertical division lines can be modified by lv_chart_set_div_line_count(chart, hdiv_num, vdiv_num). The default settings are 3 horizontal and 5 vertical division lines.

To set the line width and point radius use the lv_chart_set_series_width(chart, size) function. The default value is: 2.

The *opacity of the data lines can be specified by lv_chart_set_series_opa(chart, opa). The default value is: OPA_COVER.

You can apply a dark color fade on the bottom of columns and points by lv_chart_set_series_darking(chart, effect) function. The default dark level is OPA_50.

Style usage

  • style.body properties set the background's appearance
  • style.line properties set the division lines' appearance

The series related parameters can be set directly for each chart with lv_chart_set_series_width(), lv_chart_set_series_opa() and lv_chart_set_series_dark().

Notes

Example of Chart in Littlev Graphics Library

						/*Create a style for the chart*/
static lv_style_t style;
lv_style_copy(&style, &lv_style_pretty);
style.body.shadow.width = 6;
style.body.shadow.color = LV_COLOR_GRAY;
style.line.color = LV_COLOR_GRAY;

/*Create a chart*/
lv_obj_t * chart;
chart = lv_chart_create(lv_scr_act(), NULL);
lv_obj_set_size(chart, 200, 150);
lv_obj_set_style(chart, &style);
lv_obj_align(chart, NULL, LV_ALIGN_CENTER, 0, 0);
lv_chart_set_type(chart, LV_CHART_TYPE_POINT | LV_CHART_TYPE_LINE);   /*Show lines and points too*/
lv_chart_set_series_opa(chart, LV_OPA_70);                            /*Opacity of the data series*/
lv_chart_set_series_width(chart, 4);                                  /*Line width and point radious*/

lv_chart_set_range(chart, 0, 100);

/*Add two data series*/
lv_chart_series_t * ser1 = lv_chart_add_series(chart, LV_COLOR_RED);
lv_chart_series_t * ser2 = lv_chart_add_series(chart, LV_COLOR_GREEN);

/*Set the next points on 'dl1'*/
lv_chart_set_next(chart, ser1, 10);
lv_chart_set_next(chart, ser1, 50);
lv_chart_set_next(chart, ser1, 70);
lv_chart_set_next(chart, ser1, 90);

/*Directly set points on 'dl2'*/
ser2->points[0] = 90;
ser2->points[1] = 70;
ser2->points[2] = 65;
ser2->points[3] = 65;
ser2->points[4] = 65;
ser2->points[5] = 65;

lv_chart_refresh(chart); /*Required after direct set*/

lv_obj_t *

lv_chart_create

(lv_obj_t * par, lv_obj_t * copy);

Create a chart background objects

par pointer to an object, it will be the parent of the new chart background

copy pointer to a chart background object, if not NULL then the new object will be copied from it

return pointer to the created chart background

lv_chart_series_t *

lv_chart_add_series

(lv_obj_t * chart, lv_color_t color);

Allocate and add a data series to the chart

chart pointer to a chart object

color color of the data series

return pointer to the allocated data series

void

lv_chart_set_div_line_count

(lv_obj_t * chart, uint8_t hdiv, uint8_t vdiv);

Set the number of horizontal and vertical division lines

chart pointer to a graph background object

hdiv number of horizontal division lines

vdiv number of vertical division lines

void

lv_chart_set_range

(lv_obj_t * chart, lv_coord_t ymin, lv_coord_t ymax);

Set the minimal and maximal y values

chart pointer to a graph background object

ymin y minimum value

ymax y maximum value

void

lv_chart_set_type

(lv_obj_t * chart, lv_chart_type_t type);

Set a new type for a chart

chart pointer to a chart object

type new type of the chart (from 'lv_chart_type_t' enum)

void

lv_chart_set_point_count

(lv_obj_t * chart, uint16_t point_cnt);

Set the number of points on a data line on a chart

chart pointer r to chart object

point_cnt new number of points on the data lines

void

lv_chart_set_series_opa

(lv_obj_t * chart, lv_opa_t opa);

Set the opacity of the data series

chart pointer to a chart object

opa opacity of the data series

void

lv_chart_set_series_width

(lv_obj_t * chart, lv_coord_t width);

Set the line width or point radius of the data series

chart pointer to a chart object

width the new width

void

lv_chart_set_series_darking

(lv_obj_t * chart, lv_opa_t dark_eff);

Set the dark effect on the bottom of the points or columns

chart pointer to a chart object

dark_eff dark effect level (LV_OPA_TRANSP to turn off)

void

lv_chart_init_points

(lv_obj_t * chart, lv_chart_series_t * ser, lv_coord_t y);

Initialize all data points with a value

chart pointer to chart object

ser pointer to a data series on 'chart'

y the new value for all points

void

lv_chart_set_points

(lv_obj_t * chart, lv_chart_series_t * ser, lv_coord_t * y_array);

Set the value s of points from an array

chart pointer to chart object

ser pointer to a data series on 'chart'

y_array array of 'lv_coord_t' points (with 'points count' elements )

void

lv_chart_set_next

(lv_obj_t * chart, lv_chart_series_t * ser, lv_coord_t y);

Shift all data right and set the most right data on a data line

chart pointer to chart object

ser pointer to a data series on 'chart'

y the new value of the most right data

void

lv_chart_set_style

(lv_obj_t *chart, lv_style_t *style);

Set the style of a chart

chart pointer to a chart object

style pointer to a style

lv_chart_type_t

lv_chart_get_type

(lv_obj_t * chart);

Get the type of a chart

chart pointer to chart object

return type of the chart (from 'lv_chart_t' enum)

uint16_t

lv_chart_get_point_cnt

(lv_obj_t * chart);

Get the data point number per data line on chart

chart pointer to chart object

return point number on each data line

lv_opa_t

lv_chart_get_series_opa

(lv_obj_t * chart);

Get the opacity of the data series

chart pointer to chart object

return the opacity of the data series

lv_coord_t

lv_chart_get_series_width

(lv_obj_t * chart);

Get the data series width

chart pointer to chart object

return the width the data series (lines or points)

lv_opa_t

lv_chart_get_series_darking

(lv_obj_t * chart);

Get the dark effect level on the bottom of the points or columns

chart pointer to chart object

return dark effect level (LV_OPA_TRANSP to turn off)

lv_style_t*

lv_chart_get_style

(lv_obj_t *chart);

Get the style of an chart object

chart pointer to an chart object

return pointer to the chart's style

void

lv_chart_refresh

(lv_obj_t * chart);

Refresh a chart if its data line has changed

chart pointer to chart object

LittlevGL - Open-source Embedded GUI Library

LittlevGL is a free and open-source graphics library providing everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and low memory footprint.

If you like LittlevGL, please
support its deveopment!


The founder of Littlev Graphics Library (LittlevGL) and related software modules is:
Gábor Kiss-Vámosi
All Rights Reserved ©  2018 Hungary