Setting "fillGraph" results in considerable slowdown for complex charts #346

Closed
danvk opened this Issue Oct 20, 2014 · 8 comments

Projects

None yet

2 participants

@danvk
Owner
danvk commented Oct 20, 2014

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
Owner
danvk commented Oct 20, 2014

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

Labels: Performance

@danvk
Owner
danvk commented Oct 20, 2014

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

Labels: Version-2

@danvk
Owner
danvk commented Oct 20, 2014

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
Owner
danvk commented Oct 20, 2014

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
Owner
danvk commented Oct 21, 2014

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 danvk added this to the v1.1 milestone Oct 21, 2014
@danvk
Owner
danvk commented Nov 11, 2014

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
Owner
danvk commented Nov 11, 2014

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):

screen shot 2014-11-11 at 3 06 26 pm

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):

screen shot 2014-11-11 at 3 08 18 pm

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.

@danvk danvk referenced this issue Nov 11, 2014
Merged

Fast Fill #462

@danvk danvk removed the Version-2 label Nov 12, 2014
@danvk danvk self-assigned this Nov 12, 2014
@danvk danvk closed this in #462 Nov 16, 2014
@KrishnaPG

Just wanted to say excellent job. Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment