DIV elements for Axis ticks and labels DOM handling(performance)

[daniel visinescu]

Dear all,

I am using the dygraphs library for a while now and i've incorporated in one of the products developed by the company that I am working for.

We are using it to render charts with information coming from PLC's and field instruments in automatization industry

For this usage it is required that the graphs can contain up to 12 series(Pen's) and it will update with live data(can be one second or event based)

I am having some performance issues and after some investigations is seems that the redraw causes some High CPU due to Garbage Collection

The main reason (from what I've seen ) is that on each draw the DIV's that contain the X/Y ticks (labels) are added to the DOM  and of course these are also removed when an update is required

The DOM operations are calling the GC and for our needs of update(multiple per second) it will freeze the page.

The main function causing the issue is makeDiv from the axes.js axes.prototype.willDrawChart () method.

I've seem that there is a maximum of 12 labels for the X axis(for example) so I propose to:

-Link the DIV elements to the master object and re-use these .Set only the CSS class and content(div.innerText or div.innerHtml?)

This will resolve the GC issues in high updates intervals .

I can't provide an example because the dygraphs library is embedded within other libraries but if you want I can simulate somehow.You can try to extend the live update example for multiple series that update on event

Attached a printscreen with the GC event on the Chrome timeline.

Please let me know if this can be implemented so that the there are not that many DOM manipulation event involved

Many Thanks,

Daniel

[Dan Vanderkam]

I agree that axis label divs should be cached and re-used when the chart redraws.

I don't think this would be terribly difficult to fix, if you're up for the challenge. The code for this is all contained in plugins/axes.js. It's quite well-encapsulated, so the change shouldn't be hard to make. See http://dygraphs.com/changes.html for some background on how to make your pull request a success.

--
You received this message because you are subscribed to the Google Groups "dygraphs-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dygraphs-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.