Setting "fillGraph" results in considerable slowdown for complex charts

[danvk]

From da...@google.com on March 29, 2012 15:16:22

This is particularly evident when setting "animatedZooms".

Original issue: http://code.google.com/p/dygraphs/issues/detail?id=308

[danvk]

From konigsb...@gmail.com on December 04, 2012 04:18:32

Labels: Performance

[danvk]

From konigsb...@google.com on February 08, 2013 09:46:05

Labels: Version-2

[danvk]

From phildcr...@gmail.com on December 07, 2013 06:14:43

Attached a quick CPU Profile screenshot of the slow functions for a Graph with a single series of approx. 10,000 data points.

Attachment: CPU_Profile_cropped.png

[danvk]

From zasebn...@gmail.com on June 19, 2014 06:28:04

I have the same problem. I'm loading 100k points and without fillGraph, it takes about 5-10 seconds. But when I use it, it never loads (chrome/ff and others just crashes).

[danvk]

One idea would be to be more aggressive about down-sampling when using fillPlotter. For linePlotter, we plot a pixel if it changes the x- or y-coordinate. For fillPlotter, we need only plot the max value for each x-coordinate.

[danvk]

I added a "Fill" checkbox to the dygraph-many-points-benchmark.html tool. Plotting 10k sinusoidal points 10 times, I get:

(no fill)
Durations: 56,29,29,18,14,11,12,9,11,8
Average: 19.7

(fill)
Durations: 717,751,735,731,730,739,732,722,706,717
Average: 728

i.e. fillGraph results in a 37x slowdown! Dropping points which don't have different x-values almost entirely eliminates this slowdown.

[danvk]

Looking more deeply at fillPlotter, I'm slightly horrified at how it draws.

Here's how you might expect a filled graph to be drawn (from the bottom left point):

You start on the axis, draw the chart line across the top, then drop down to the axis and close.

Now here's how dygraphs draws it (I've dropped the fill for clarity):

For each pair of next/prev points, dygraphs moves to the left x-value on the x-axis. Then it draws a line to the right point on the x-axis. Then it draws a line up to the chart line. Then it draws a line back to the previous point on the chart. On the next iteration through, it moves to the next point on the x-axis.

This is crazy. It involves far more lines than is necessary and it thwarts attempts to drop unnecessary lineTos that don't move very far.

[KrishnaPG]

Just wanted to say excellent job. Thank you.