0

I am trying to visualize the count of datasets that falls into particular range(Start Date and End Date). Following example from this I was able to do that. My code is here. The visualization at the bottom allow the user to filter the year range. The result of the filter shows up at the top visualization. However, if you check the console, it is giving an error as

IntervalTree.js:105 Uncaught TypeError: Cannot read property 'mid' of null

Due to which the rendering of the two visualizations are not proper. I am using Lysenko Interval Tree. I will appreciate your assistance. Example image for better clarification of problem

Example image for better clarification of problem

Community
  • 1
  • 1
user3050590
  • 1,656
  • 4
  • 21
  • 40
  • Glad you're using this example! It's a favorite of mine. I'm not seeing the warning you mention, is there some particular range you have to select? I'm getting some moment warning about bad string syntax instead. (Chrome/OSX) – Gordon May 03 '16 at 21:23
  • @Gordon I really appreciate your interest in this example. I have included the screenshot of the error message. Whenever, I select some range at the bar chart to filter out the Area chart at the top , it shows the error message as in the console box. Even if you look the line at of the area chart is not smooth as it should be. I tried to find the solution but could not get any success. Thanks – user3050590 May 05 '16 at 19:41
  • Unfortunately I'm still not able to repro the error using the plnkr example you provided. I am still seeing the moment.js warning but not the `mid` error. Do you see the error when using the plnkr? – Gordon May 07 '16 at 13:59
  • No idea why this is getting close/down votes. Haters gotta hate, I guess. – Gordon May 07 '16 at 14:00
  • @Gordon which browser are you using? The above error is on chrome. On Firefox, I am getting "TypeError: b is null IntervalTree.js:105:3", as you can see, it is on the same line. It is giving error on "v.remove(d.interval);" of script. The above screenshot is from the plnkr. If still you cant see it, is there any other way I can share the session and show you live. – user3050590 May 08 '16 at 16:18
  • Well that's weird. I tried both browsers. Unlikely, but what OS are you on? This doesn't happen. – Gordon May 08 '16 at 16:34
  • @Gordon I am on windows 8 – user3050590 May 08 '16 at 16:38
  • I dont understand why cant you see that? Can you please tell me what shape of charts do you get when you filter it? Is it as rigid as in the screenshot above or it is smooth like normal linechart/area chart. – user3050590 May 09 '16 at 08:18
  • @Gordon I have tried to run on linux machine and it is giving the same error "TypeError: b is null IntervalTree.js:105:3". Could you please try on some other machine?. Thanks – user3050590 May 09 '16 at 08:43

1 Answers1

1

It looks like if you disable the filterHandler for the monthChart, then it fixes the problem (which I was able to reproduce, finally).

      monthChart.filterHandler(function() {});

I think the problem is that the month chart is a focus chart and for whatever reason it is re-invoking the filter when it is focused. This seems like odd behavior, because the range chart has already set the filter, but probably the focus chart is not expecting this unconventional dimension.

You aren't yet using the interval functionality in this example, so it's unclear if this is working in the larger sense, but that's the particular problem. Filtering twice also explains the weird behavior where it looked okay for a moment and then got all jagged.

Fork of your plnkr: https://plnkr.co/edit/gNtz8glVVNneTekKrjqt?p=preview

Gordon
  • 19,811
  • 4
  • 36
  • 74
  • Thank you so much. Though I still could not understand the reason of this behavior but your solution works perfect on my main project. Moreover, because the error message was pointing to the interval script, thus I thought probably it is related with the interval tree. You are genius, I could have never thought of this solution myself. – user3050590 May 09 '16 at 14:36
  • Awesome. I guess I'm pretty tuned into the idiosyncrasies of dc.js by now. I think the reasoning is that you might want to zoom the focus chart to change the filter/selection. But it's kind of a weird way to achieve that, and should probably be rethought. Glad it works! – Gordon May 09 '16 at 15:55
  • Hey, another thing I noticed is that, the range chart should not change when it is brushed on the focus chart but currently, even in your plnk when you filter the brush on the range chart, the shape or axis also get changed. Any idea why it is happening? or it is because of the same odd behavior as you mentioned before, shall I put another question regarding that? – user3050590 May 10 '16 at 15:42