How to update the chart series using mouse to change value dynamically?

How-to
1

I was trying to update the chart values dynamically. I was able to update the value using slider as an input to the graph.

I was thinking if there is a way to remove slider out of the picture and update the chart directly using mouse as an input?

I am attaching code snippet I tried for your reference.

static void event_handler(lv_obj_t* obj, lv_event_t event){
if(event == LV_EVENT_VALUE_CHANGED)
    {
#if DEBUG
            printf("Value: %d\n", lv_spinbox_get_value(obj));
#endif
            arr[0] = lv_spinbox_get_value(obj);
            lv_chart_set_points(chart, ser1, (lv_coord_t*)arr);
            lv_chart_refresh(chart);
        }

}
....
    /*Create a chart*/

    chart = lv_chart_create(tab2, NULL);
    lv_obj_set_size(chart, 200, 150);
    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);
    lv_chart_set_range(chart, 0, 100);

    spinbox = lv_spinbox_create(tab2, NULL);
    lv_spinbox_set_digit_format(spinbox, 3, 0);
    lv_spinbox_set_range(spinbox, 0, 100);
    lv_spinbox_set_padding_left(spinbox, 6);
    lv_spinbox_step_prev(spinbox);
    lv_obj_set_width(spinbox, 100);
    lv_obj_align(spinbox, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_event_cb(spinbox, event_handler);

    btn7 = lv_btn_create(tab2, NULL);
    lv_obj_set_event_cb(btn7, event_handler);
    lv_obj_align(btn7, NULL, LV_ALIGN_CENTER, 100, 20);
    lv_obj_set_size(btn7, 28, 28);

    lv_obj_t* label6 = lv_label_create(btn7, NULL);
    lv_label_set_text(label6, "+");

    btn8 = lv_btn_create(tab2, NULL);
    lv_obj_set_event_cb(btn8, event_handler);
    //  lv_obj_align(btn8, NULL, LV_ALIGN_IN_TOP_LEFT, 60, 140);
    lv_obj_align(btn8, NULL, LV_ALIGN_CENTER, -28, 20);
    lv_obj_set_size(btn8, 28, 28);

    lv_obj_t* label7 = lv_label_create(btn8, NULL);
    lv_label_set_text(label7, "-");

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

    lv_chart_init_points(chart, ser1, 0);
    lv_chart_refresh(chart);
....
2

Do you mean dragging points? Or clicking the chart somewhere and move the nearest point there?

3

yes, draging the point using mouse.

4

I want to be able to drag the points vertically (one point at atime) to change the curve on the chart directly instead of using some intermediate widget like slider or buttons to update the value of the points.

5

I see. Unfortunately, there no built-in method for this. However, here we are talking about how to improve the chart object. One idea is supporting “cursor”. It means the library should be able to tell the nearest point to an x,y coordinate. It will allow you to create labels and lines there. It would be useful for you too, but it’s still just a plan…

What you can do now is adding an event to the chart, and in LV_EVENT_PRESSING get the points from the current input device and based on the x,y coordinates modify the appropriate value.
To get the pressed coordinates:

lv_point_t p;
lv_indev_get_point(lv_indev_get_act(), &p);
6

thankyou for your suggestion. I will definitely try it and let you know if it works for me.

1 Like
7

Thanks that worked well.

8

Sorry to bump old topic, but there are any update for dragging point function?
I also was create a thread long time ago but no reply so far here:

9

Hi TJ,

I’ve replied in to the topic you have linked.

1 Like