Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Memory leak when redrawing graphs #64

Closed
senexada opened this issue Jun 6, 2012 · 9 comments
Closed

Memory leak when redrawing graphs #64

senexada opened this issue Jun 6, 2012 · 9 comments

Comments

@senexada
Copy link

senexada commented Jun 6, 2012

When I call Morris.Line(...) many times within a web page, the browser leaks memory.

I noticed the problem when designing a web page that uses a 1 second timeout to load new data points (via ajax), then I plot the new points using Morris.Line(). Thus the webpage has the appearance of a rolling graph, which looks great. But the browser leaks memory like crazy (1MB/second or more in my project).

Ajax might contribute to the leaks, so I created a simple example with no ajax (html below). My browser leaks around 5MB/minute while viewing the sample. I measure the leaks using Windows Task Manager. I'm running Windows 7 Professional. I see similar leakage rates in Chrome 17.0.963.79 m and Firefox 12.0 .

<title>Real time data</title> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/raphael-2.0.2-min.js"></script> <script src="js/morris.min.js"></script> Graph 0
<script> var nReloads = 0; function draw() { Morris.Line({ element: 'graph0', data: [ {'date': '2012-06-01 15:06:57', 'Apples': 672, 'Bananas': 644, 'Oranges': 185, 'Peaches': 218, 'Pears': 0}, {'date': '2012-06-01 15:06:58', 'Apples': 380, 'Bananas': 259, 'Oranges': 65, 'Peaches': 115, 'Pears': 0}, {'date': '2012-06-01 15:06:59', 'Apples': 305, 'Bananas': 258, 'Oranges': 60, 'Peaches': 132, 'Pears': 0}, {'date': '2012-06-01 15:07:00', 'Apples': 568, 'Bananas': 481, 'Oranges': 137, 'Peaches': 215, 'Pears': 0}, {'date': '2012-06-01 15:07:01', 'Apples': 654, 'Bananas': 538, 'Oranges': 162, 'Peaches': 265, 'Pears': 0}, ], xkey: 'date', ykeys: ['Apples', 'Bananas', 'Oranges', 'Peaches', 'Pears'], labels: ['Apples', 'Bananas', 'Oranges', 'Peaches', 'Pears'], parseTime: false, hideHover: true, ymin: 0, ymax: 'auto 100' }); nReloads++; $('#reloadStatus').text(nReloads + ' reloads'); setTimeout(function() { draw(); }, 1000); } draw(); </script>
@senexada
Copy link
Author

senexada commented Jun 6, 2012

Hmm, when I posted my code example, it wasn't properly escaped, so it didn't show correctly.
Sorry, I'm new to github.
Trying again here:

<html>
<head>
<title>Real time data</title>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/raphael-2.0.2-min.js"></script>
<script src="js/morris.min.js"></script>
</head>
<body>
Graph 0
<div class='graph' id='graph0'></div>
<div id='reloadStatus'></div>

<script>
var nReloads = 0;
function draw() {

  Morris.Line({
    element: 'graph0',
    data: [
      {'date': '2012-06-01 15:06:57', 'Apples': 672, 'Bananas': 644, 'Oranges': 185, 'Peaches': 218, 'Pears': 0},
      {'date': '2012-06-01 15:06:58', 'Apples': 380, 'Bananas': 259, 'Oranges': 65, 'Peaches': 115, 'Pears': 0},
      {'date': '2012-06-01 15:06:59', 'Apples': 305, 'Bananas': 258, 'Oranges': 60, 'Peaches': 132, 'Pears': 0},
      {'date': '2012-06-01 15:07:00', 'Apples': 568, 'Bananas': 481, 'Oranges': 137, 'Peaches': 215, 'Pears': 0},
      {'date': '2012-06-01 15:07:01', 'Apples': 654, 'Bananas': 538, 'Oranges': 162, 'Peaches': 265, 'Pears': 0},
    ],
    xkey: 'date',
    ykeys: ['Apples', 'Bananas', 'Oranges', 'Peaches', 'Pears'],
    labels: ['Apples', 'Bananas', 'Oranges', 'Peaches', 'Pears'],
    parseTime: false,
    hideHover: true,
    ymin: 0,
    ymax: 'auto 100'
  });

  nReloads++;
  $('#reloadStatus').text(nReloads + ' reloads');
  setTimeout(function() { draw(); }, 1000);
}
draw();
</script>

</body>
</html>

@oesmith
Copy link
Contributor

oesmith commented Jun 10, 2012

I've had a hack at this today, and I've added a setData() method to Morris.Line. Take a look at the 'updating' example to see how it works.

Currently this is just on the master branch, but I'll include it in the next release (v0.2.10). Let me know if it solves your problem.

@senexada
Copy link
Author

Olly, I tried your fix, and it works great. No signs of memory leaks. Thanks so much. This program has been super helpful to me.

@ttback
Copy link

ttback commented Jul 29, 2012

Tried setData() inside $(window).resize() event handler, it may have cutoffs and misplacement of lines upon redraw. Could you check if setData can maintain proper coordinate for the graph.

Also, is there a way to set the graph canvas' width and height? The div container's width and height seems ignored on my end (doesn't matter if it is 50x 50 or 500 x 500)

@oesmith
Copy link
Contributor

oesmith commented Jul 30, 2012

Right now there's no code to support resizing the graph, so I'd expect 'odd' behaviour when resizing.

Can you send me a jsfiddle that reproduces the container width and height problems you're experiencing?

@ttback
Copy link

ttback commented Aug 2, 2012

I will need to get back to you on this later in the week because I'm a noob with jsfiddles. Still need to set it up.

@schubert1983
Copy link

Is it possible to dynamically update other options besides the data?

@TRTL4LIFE
Copy link

I have the same question as @schubert1983 "Is it possible to dynamically update other options besides the data?"

@xaifuddin
Copy link

How to get data from SQL ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@oesmith @ttback @senexada @schubert1983 @TRTL4LIFE @xaifuddin