CODEWITHSUNDEEP
javascriptmemorydygraphs
Chad Johnson
Chad Johnson

Reputation: 21895

How to reduce memory footprint for dygraphs graph

I'm using dygraphs to produce a canvas-based stock chart in a web trading platform I'm developing -- source here. Data is delivered to the web client via a WebSocket connection.

If you look at the source, you'll see I'm appending data for the chart to an array, chartData, as data comes in over the socket (line 100), and then I'm passing the data to the dygraphs chart via updateOptions (line 111), causing the chart to redraw itself using the most current data.

This works fine, and it performs well. However, after about an hour, when maybe 10,000 data items are appended to the chart, the page (I'm using Chrome) crashes, probably due to memory usage. Data is stored in both the chart AND the array (chartData), so I imagine that's a good chunk of memory for one web page. Plus, I'm using ExtJS which is a hog :)

Does anyone have suggestions on how I can reduce the memory footprint for the chart?

Upvotes: 0

Views: 711

Answers (1)

Scott Sauyet
Scott Sauyet

Reputation: 50797

Besides the obvious, "Don't use Ext", I can offer several guesses, but nothing definitive.

If, as I assume, much of the data being used is not in a currently viewable portion of the chart, then perhaps you can simply remove it. After you have enough data to fill the chart, every time you add n records to the end, splice off n records from the beginning.

If the data is coming in faster than you can comfortably render it (unlikely but possible), swap in and out several images: collect the data into a group. At a certain interval, clone that group into your rendering area, and use that to render a new chart. When rendering is complete, place it in the DOM, discarding the old one.

But simply removing older data might solve many of your problems...

... especially if you get rid of Ext.

Upvotes: 1

Related Questions