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

Already on GitHub? Sign in to your account

Charts interfere with each other #32

Closed
jcdarwin opened this Issue Feb 4, 2013 · 9 comments

Comments

Projects
None yet
7 participants

jcdarwin commented Feb 4, 2013

When showing a couple of the default bar charts on a page, the self._destroy method applied to the first chart manages to affect the data for the second chart (causing the bars in the second chart to disappear), as the _mainStorage ends up with only the bar data belonging to the second chart.

As a quick hack, I've commented out the destroy method to stop this causing a problem for me (at line 740):

if (self._vis) {
// _mainStorage is getting polluted with the data from another chart.
// This causes the other chart to lose its bars when the first chart is redrawn.
// Ignoring this destroy call is the easiest hack to stop this happening.
//      self._destroy(self._vis, self._mainStorage);
}

Hi @jcdarwin,
I think I had a similar problem, where calling setData() on one graph, would destroy all graphs on the page. The solution is noted in the docs here http://tenxer.github.com/xcharts/docs/#data-main . Basically you just have to set a unique className per graph.
Hope that helps :) cheers!

jcdarwin commented Feb 9, 2013

Thanks for that -- yes, the classnames are different for each graph, but
this doesn't stop the problem. The example that relates to this issue can
be found at:

http://cwa-lml.github.com/babynames/

https://github.com/cwa-lml/babynames

Cheers,

Jason

On Sun, Feb 10, 2013 at 9:41 AM, Aleš Kocjančič notifications@github.comwrote:

Hi @jcdarwin https://github.com/jcdarwin,
I think I had a similar problem, where calling setData() on one graph,
would destroy all graphs on the page. The solution is noted in the docs
here http://tenxer.github.com/xcharts/docs/#data-main . Basically you
just have to set a unique className per graph.
Hope that helps :) cheers!


Reply to this email directly or view it on GitHubhttps://github.com/tenXer/xcharts/issues/32#issuecomment-13338294..

If you look at the xcharts examples page source or here on line 32, you'll see for multiple xcharts on the same page you can wrap each in a anonymous function separating the scope of the charts from each other.
e.g.

(function () {

      var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    }
  ]
 };
      var myChart = new xChart('bar', data, '#example1');

}());

victmo commented May 23, 2013

Neither the scope nor the classNames approach worked for me, but I found a workaround. Just loop through all your charts and call the _resize() method on each one.

charts[n].setData({ ... });

$.each(charts, function(index, chart){
    chart._resize();
});

This will prevent the updated chart from wiping down the rest of the charts.

Contributor

paularmstrong commented Jun 28, 2013

Can someone provide a simple test case that shows this behavior? I'm not able to reproduce the issue.

Here's source code for the bug.
https://github.com/alecklandgraf/d3-test/blob/gh-pages/test.html
I have two charts, two data objects, and a different class for each data object.

Updating one of the charts causes the other chart to disappear.

live at which is just my github page for it: http://aleck.me/d3-test/test.html

Cakez0r commented Aug 7, 2013

This bug is still present. Every line has a unique className and i've tried scoping each chart individually. The only solution that's worked for me is to use jcdarwin's hack - commenting out the self._destroy(self._vis, self._mainStorage); (currently line 753 in xcharts.js 0.2.0 build).

ViniH commented Jul 5, 2016 edited

I've encountered a similar issue to this, which was difficult to trace due to our use of Knockout bindings, components, and modules.

What I realised after much debugging was that both the class names within the data object AND the class names (and obviously IDs) of the HTML figure element must both be unique on the page: I got around this by setting up KO computed observables for the class and ID names which were made unique on a given page of our application by suffixing with a unique identifier - I then bound these values using Knockout to the figure element e.g.

<figure data-bind="css:outboundClass, attr: {'id': outboundId }"></figure>

I'm posting here in case what I found helps anyone else who finds this post due to similar issues.

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