getBoundingClientRect error

[brandonhilkert]

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null rickshaw.js:2247
Rickshaw.Graph.HoverDetail.Rickshaw.Class.create._calcLayoutError rickshaw.js:2247
Rickshaw.Graph.HoverDetail.Rickshaw.Class.create.render rickshaw.js:2222
Rickshaw.Graph.HoverDetail.Rickshaw.Class.create.update rickshaw.js:2138
(anonymous function)

On hover, i get errors.

  graph.render();

  var hoverDetail = new Rickshaw.Graph.HoverDetail({
    graph: graph,
    yFormatter: function(y) { return Math.floor(y) }
  });

The hover works and everything. Would love to know how to get rid of these. It's for the Sidekiq Dashboard

Thanks!

[ajcarpenter]

I experienced the same issue when I was emptying out the graph element and creating a new graph and hover detail instance using the same graph element. The mousemove and mouseout event handlers added by the first hover detail were not being removed from the graph element and so it was still trying to call these on the old instance of hover detail, as well as the new one.

Since I didn't have references to these event handlers and couldn't manually unbind them, I ended up just cloning and replacing the graph element. This solved the issue for me. Hopefully it's something similar for you.

[honnel]

@ajcarpenter how do you clone and replace the graph element? Same Issue here. I'm using jQuery's .empty() to cleanup the div after that I'm painting a new graph because I can't find a possibility to update the data series of an exiting graph.

[ajcarpenter]

@honnel It's pretty messy but I'm doing something like this

$graph.empty();

var $newGraph = $graph.clone();
$graph.replaceWith($newGraph);
$graph = $newGraph;

graph = new Rickshaw.Graph({
    element: $graph[0],
    ...
});

There may be a better way. You probably don't even need to clone the old element. Just replace the existing one and recreate the graph with the replacement element. Hopefully Rickshaw can be enhanced with a way to explicitly destroy a chart and unbind the event handlers.

[honnel]

@ajcarpenter Nice! Thanks for your advice, its kind of messy but works without exceptions.

[andrecrt]

Had the same problem, solved it my fiddling with Rickshaw.Graph.HoverDetail and just submitted respective pull request https://github.com/shutterstock/rickshaw/pull/477

[jacek213]

@ajcarpenter thanks, your solution works great :+1: BTW, $graph = $newGraph; was not needed in my case.

[luketaverne]

@ajcarpenter Thank you!

Will this solution be merged? It seems very useful to provide a method for clearing a graph, especially when creating single page apps like in node.js.

[ChengHsin]

@ajcarpenter Thank you so much. I got the same problem, but I fixed it.

[cesine]

For #477 I can reproduce this using https://github.com/hendrikswan/tagtree-rickshaw

[cesine]

So far i found using graph.render instead of innerHTML="" fixes it https://github.com/hendrikswan/tagtree-rickshaw/pull/2