Graph drawing problem

Question

I' like  to draw a graph which is updating data every 50ms but the speed is too late.

I expected  10 seconds only to draw 200 of points in logic but it takes about 2 minute actually.

 And the speed of drawing a graph is getting slower.

 

Graph 2 channel(GraphCh1, GraphCh2)

Timer: 50ms interval triggered

-------------------------------------------------------------------------

[Code]

if(CoordListCh1.NoOfItems >= 200)
{
    CoordListCh1.ClearList();
    CoordListCh2.ClearList();
}

var float val1 = -320.00 / 100.0 * math_rand(0.0, 100.0);
var float val2 = -320.00 / 100.0 * math_rand(0.0, 100.0);

CoordListCh1.AddCoord( CoordListCh1.NoOfItems, val1 );
CoordListCh2.AddCoord( CoordListCh2.NoOfItems, val2 );

GraphCh1.Coordinates = CoordListCh1;
GraphCh2.Coordinates = CoordListCh2;

-------------------------------------------------------------------------

lcd resolution: 800 x 480 (RGB565)

board: stm32f429 custom board

clock: 168Mhz

ltdc/dma2d used
double buffer used
 

[capture video]

download link:

https://hantas-my.sharepoint.com/:v:/g/personal/kyungtack_kim_hantas_kr/EcqZpZ5IelZOlUNYfYplyp8BAkVL2eGn7EDOmIoolOzCnw?e=beBUmS

 

help me. thank you.

Answer 1

Hello,

drawing graphs with a high refresh rate on embedded systems is always a critical task...

In your case, you want to draw two overlapping graphs containing 200 coordinates on a 800x480 display using an STM32F429 with 168 MHz. I assume (or I hope) that the SDRAM is connected with 32bit and not with 16bit.

First of all, it is important to know that the Charts::Graph class is drawing all lines by using a warp operation in order to draw anti-aliased line segments. This operation is done by software and costs a lot of CPU power. This is also the reason, why the drawing speed depends on the number of coordinates. The more line segments are stored within the graph, the longer it takes to redraw the screen.

In principle there are several solutions - depending on the use case:

1. You can use the class Charts::LineChart and set the LineWidth to 1. In this case all lines of the graph are drawn by using a simple 'DrawLine' operation instead of a 'Warp' operation. In this case the lines are not anti-aliased and you will see noticeable steps within the single lines. But the drawing performance will be much higher.

2. Since version 9.00 of Embedded Wizard, we support vector graphics. Building a graph by using vector graphics is faster than using the Charts::Graph class. The graphical result looks perfect with anti-aliased lines. Nevertheless, vector graphics is processed by CPU - there is no hardware acceleration.

3. In case you want to make some 'data plotter', that shifts the graph to the left and feeds the new data from the right side, it will be not sufficient to redraw the entire graph every 50 ms. In this case you need a more advanced solution that stores the graph in a separate bitmap (canvas). Within this canvas only the new data are drawn and then the final graph is copied (hardware accelerated) on the screen. You can find an example for that within the example SolarDemo.

I hope this gives you some ideas how to speed up your graphs.

In case you have further questions, please let us know more detaild what you finally want to achieve, e.g. how your graph screen should appear and behave.

Best regards,

Manfred.

Comments

Thanks for your the answer. But I have another problem.

I gave the data from 0 to 100 four times(four cycles)  and I expected the complete graph but as you see at the fourth cycle, the line chart was not completed when the date was scrolled.

I already check the data if  I put the data  in the chart data or not.  The data was in place extactly.

So please let me know why this chart was not completed.

Looking forward to hearing you soon.

Thank you in advance.

 

I wanted to make a chart but I faced some problem as attached GIF.

 

 

- Line Chart

- Outline width : 800 pixel

- Line Chart width : [Code]LineChartCh1.Bounds.w = LineChartCh1.BorderSize.x * 2 + RecordListCh1.NoOfItems * 4

- SlideTouchHandler used

- I refer to this [link]

---

Hello,

without seeing the implementation it is difficult to give you good advices... Maybe the calculation of the width is not correctly, or the RecordList does not contain the items...

Maybe you can post an example - then it will be easier to support you.

By the way: Can you please let me know more detaild what you finally want to achieve, e.g. how your graph screen should appear and behave?

Best regards,

Manfred.

---

Attached my sample project.   [download link]

The line ends unexpectedly.

Thank you.

---

Hello,

the unexpected end of the graph is caused by an accumulated rounding error within the class Charts::LineChart method Draw().

Please find here your modified example that contains a corrected copy of the class Charts::LineChart as Application::LineChart.

Overall, the class LineChart is intended to present a limited number of data as line chart. Due to the fact that the entire list of records is processed and drawn, the performance will go down the more data you add. When you add thousands of data records and only a few hundreds are visible, the entire list is processed and drawn.

Therefore, in order to find the best solution for your application it would be helpful to understand the application (e.g. amount of data, scrollable by user, animations, updates per second, moving graphs, ...).

Best regards,

Manfred.