Re: [elm-discuss] Re: Errors when using Chart.js in a port subscription

[Coury Ditch]

Hopefully this will be helpful for someone. I've struggled with an elegant 
solution to this problem the last couple days, and found something that 
worked out quite nicely.
http://stackoverflow.com/questions/38952724/how-to-coordinate-rendering-with-port-interactions-elm-0-17/42451273#42451273

On Sunday, November 13, 2016 at 4:00:15 AM UTC-7, Austin Bingham wrote:
>
> That definitely looks like it would address the issues I'm seeing. Thanks 
> for pointing it out!
>
> ‪On Sun, Nov 13, 2016 at 12:53 AM ‫أحمد حبنكة‬‎  > wrote:‬
>
>>
>>
>> بتاريخ الأربعاء، 9 نوفمبر، 2016 10:11:06 ص UTC+2، كتب Austin Bingham:
>>>
>>> I'm trying to use Chart.js from my elm app, and I'm running into some 
>>> errors that I can't sort out. In short, I've got a elm-to-javascript port 
>>> that takes in a data structure describing the chart I want to draw. Then on 
>>> the javascript side I've got a subscription to that port that renders that 
>>> chart. A trimmed version of that function looks like this:
>>>
>>> var brooksChart = null;
>>>
>>> function chart(val) {
>>>  var datasets = ... // calculate data sets from `val`
>>>
>>>  var ctx = document.getElementById("bark-spider-canvas");
>>>
>>>  if (brooksChart) {
>>>  brooksChart.destroy();
>>>  }
>>>
>>>  brooksChart = new Chart(ctx, {
>>>  type: 'line',
>>>  data: {
>>>  datasets: datasets
>>>  },
>>>  options: {
>>>  scales: {
>>>  xAxes: [{
>>>  type: 'linear',
>>>  position: 'bottom'
>>>  }]
>>>  }
>>>  }
>>>  });
>>>  };
>>>  
>>> When I run this and pass data into the port, the chart is rendered 
>>> correctly. But, at some point after the "new Chart(...)" call completes, I 
>>> get errors in the javascript console like this:
>>>
>>> bark_spider.js:8139 Uncaught TypeError: Cannot read property 
>>> 'childNodes' of undefined(…)addDomNodesHelp @ 
>>> bark_spider.js:8139addDomNodesHelp @ bark_spider.js:8147addDomNodesHelp @ 
>>> bark_spider.js:8147addDomNodesHelp @ bark_spider.js:8147addDomNodesHelp @ 
>>> bark_spider.js:8147addDomNodes @ bark_spider.js:8066applyPatches @ 
>>> bark_spider.js:8195updateIfNeeded @ bark_spider.js:7232
>>>
>>> The fallout of this seems to be that the elm runtime gets confused, at 
>>> least insofar as I don't receive Msgs that I ought to be receiving. In 
>>> fact, if I take the call to "new Chart(...)" out, then my app works just 
>>> fine (except of course that charts aren't rendered).
>>>
>>> So, does anyone have any idea what I'm going wrong? This seems like 
>>> pretty standard use of both ports and chart.js, but clearly I'm missing 
>>> something.
>>>
>>
>>  I think your problem is related to this issue : 
>> https://github.com/elm-lang/html/issues/19 , the feature request is 
>> added in this meta issue : https://github.com/elm-lang/html/issues/53 So 
>> I think it's only a matter of time before we have true interop with JS :) 
>>
>> -- 
>> You received this message because you are subscribed to the Google Groups 
>> "Elm Discuss" group.
>> To unsubscribe from this group and stop receiving emails from it, send an 
>> email to elm-discuss...@googlegroups.com .
>> For more options, visit https://groups.google.com/d/optout.
>>
>

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Errors when using Chart.js in a port subscription

[Austin Bingham]

That definitely looks like it would address the issues I'm seeing. Thanks
for pointing it out!

‪On Sun, Nov 13, 2016 at 12:53 AM ‫أحمد حبنكة‬‎ 
wrote:‬

>
>
> بتاريخ الأربعاء، 9 نوفمبر، 2016 10:11:06 ص UTC+2، كتب Austin Bingham:
>
> I'm trying to use Chart.js from my elm app, and I'm running into some
> errors that I can't sort out. In short, I've got a elm-to-javascript port
> that takes in a data structure describing the chart I want to draw. Then on
> the javascript side I've got a subscription to that port that renders that
> chart. A trimmed version of that function looks like this:
>
> var brooksChart = null;
>
> function chart(val) {
>  var datasets = ... // calculate data sets from `val`
>
>  var ctx = document.getElementById("bark-spider-canvas");
>
>  if (brooksChart) {
>  brooksChart.destroy();
>  }
>
>  brooksChart = new Chart(ctx, {
>  type: 'line',
>  data: {
>  datasets: datasets
>  },
>  options: {
>  scales: {
>  xAxes: [{
>  type: 'linear',
>  position: 'bottom'
>  }]
>  }
>  }
>  });
>  };
>
> When I run this and pass data into the port, the chart is rendered
> correctly. But, at some point after the "new Chart(...)" call completes, I
> get errors in the javascript console like this:
>
> bark_spider.js:8139 Uncaught TypeError: Cannot read property 'childNodes'
> of undefined(…)addDomNodesHelp @ bark_spider.js:8139addDomNodesHelp @
> bark_spider.js:8147addDomNodesHelp @ bark_spider.js:8147addDomNodesHelp @
> bark_spider.js:8147addDomNodesHelp @ bark_spider.js:8147addDomNodes @
> bark_spider.js:8066applyPatches @ bark_spider.js:8195updateIfNeeded @
> bark_spider.js:7232
>
> The fallout of this seems to be that the elm runtime gets confused, at
> least insofar as I don't receive Msgs that I ought to be receiving. In
> fact, if I take the call to "new Chart(...)" out, then my app works just
> fine (except of course that charts aren't rendered).
>
> So, does anyone have any idea what I'm going wrong? This seems like pretty
> standard use of both ports and chart.js, but clearly I'm missing something.
>
>
>  I think your problem is related to this issue :
> https://github.com/elm-lang/html/issues/19 , the feature request is added
> in this meta issue : https://github.com/elm-lang/html/issues/53 So I
> think it's only a matter of time before we have true interop with JS :)
>
> --
> You received this message because you are subscribed to the Google Groups
> "Elm Discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to elm-discuss+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Errors when using Chart.js in a port subscription

[Austin Bingham]

heh...that episode was next in my podcast queue! I'll give it a listen. 
Thanks!

On Wednesday, November 9, 2016 at 10:19:09 PM UTC+1, Rolf Sievers wrote:
>
> The lastest Elm Town Podcast did discuss JS interop and also mentioned 
> waiting for the dom to update.
>
> They suggest you wait for the next animation frame, then the DOM will be 
> rendered. I guess that is what you want over waiting 50ms. I did a quick 
> search on elm-package and found this one:
>
> http://package.elm-lang.org/packages/fredcy/elm-defer-command/latest
>
> I didn't try that myself yet, so treat my suggestion with a grain of salt. 
> Maybe look for more info on animation frames yourself.
>
>
>

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Errors when using Chart.js in a port subscription

['Rolf Sievers' via Elm Discuss]

The lastest Elm Town Podcast did discuss JS interop and also mentioned 
waiting for the dom to update.

They suggest you wait for the next animation frame, then the DOM will be 
rendered. I guess that is what you want over waiting 50ms. I did a quick 
search on elm-package and found this one:

http://package.elm-lang.org/packages/fredcy/elm-defer-command/latest

I didn't try that myself yet, so treat my suggestion with a grain of salt. 
Maybe look for more info on animation frames yourself.


-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Errors when using Chart.js in a port subscription

[Austin Bingham]

I think I've got it somewhat sorted. First, I needed to explicitly destroy 
the chart object prior to making certain changes to the view/dom. I'm not 
entirely sure why (or if) this is necessary, but it seems to alleviate the 
problem. I assume that the chart object was holding on to and using parts 
of the dom that were being manipulated or deleted by elm, though I can't 
point to why that should be happening.

The second part was what you suggested: I needed to wait for the dom 
manipulation to settle down. I somewhat arbitrarily picked 50ms as the 
delay, but I'm not entirely comfortable with that. Is there a proper way to 
know if elm has finished "changing things"?

I did try implementing a simple loop to wait for the existence of the dom 
node to which I attached the chart. For some reason this didn't solve the 
problem. Even when I attached the chart only when the canvas element 
existed, I still saw errors in the console. The only way I'm able to 
consistently avoid errors is to just wait a bit before trying to attach. So 
clearly I don't understand everything that's going on, and I'd be grateful 
for any advice on more robust implementations.

Austin

On Wednesday, November 9, 2016 at 11:50:03 AM UTC+1, Austin Bingham wrote:
>
> There does seem to be some effect related to the timing of dom rendering, 
> but it's not really clear what it is. If I add a setTimeout on the js 
> function, the very first rendering of the chart works without an error, but 
> subsequent renderings have errors. In fact, based on the timing of errors 
> and breakpoints, it looks like the errors are happening prior to the second 
> rendering. I may need a phase where I explicitly destroy the existing chart 
> in preparation for creating a new one. Thanks for your help on this.
>
> On Wed, Nov 9, 2016 at 11:21 AM Magnus Rundberget  
> wrote:
>
>> I'm guessing that you are contructing the div inside your Elm app and 
>> that the virtual dom might not have completed rendering/updating the div in 
>> question before you try using it on the js side of things.
>> Maybe just try to introduce a setTimeOut on the js sider or something to 
>> that effect, so that you allow elm time to render the div ?
>>
>> -magnus
>>
>>
>>
>>
>> On Wednesday, 9 November 2016 09:11:06 UTC+1, Austin Bingham wrote:
>>>
>>> I'm trying to use Chart.js from my elm app, and I'm running into some 
>>> errors that I can't sort out. In short, I've got a elm-to-javascript port 
>>> that takes in a data structure describing the chart I want to draw. Then on 
>>> the javascript side I've got a subscription to that port that renders that 
>>> chart. A trimmed version of that function looks like this:
>>>
>>> var brooksChart = null;
>>>
>>> function chart(val) {
>>>  var datasets = ... // calculate data sets from `val`
>>>
>>>  var ctx = document.getElementById("bark-spider-canvas");
>>>
>>>  if (brooksChart) {
>>>  brooksChart.destroy();
>>>  }
>>>
>>>  brooksChart = new Chart(ctx, {
>>>  type: 'line',
>>>  data: {
>>>  datasets: datasets
>>>  },
>>>  options: {
>>>  scales: {
>>>  xAxes: [{
>>>  type: 'linear',
>>>  position: 'bottom'
>>>  }]
>>>  }
>>>  }
>>>  });
>>>  };
>>>  
>>> When I run this and pass data into the port, the chart is rendered 
>>> correctly. But, at some point after the "new Chart(...)" call completes, I 
>>> get errors in the javascript console like this:
>>>
>>> bark_spider.js:8139 Uncaught TypeError: Cannot read property 
>>> 'childNodes' of undefined(…)addDomNodesHelp @ 
>>> bark_spider.js:8139addDomNodesHelp @ bark_spider.js:8147addDomNodesHelp @ 
>>> bark_spider.js:8147addDomNodesHelp @ bark_spider.js:8147addDomNodesHelp @ 
>>> bark_spider.js:8147addDomNodes @ bark_spider.js:8066applyPatches @ 
>>> bark_spider.js:8195updateIfNeeded @ bark_spider.js:7232
>>>
>>> The fallout of this seems to be that the elm runtime gets confused, at 
>>> least insofar as I don't receive Msgs that I ought to be receiving. In 
>>> fact, if I take the call to "new Chart(...)" out, then my app works just 
>>> fine (except of course that charts aren't rendered).
>>>
>>> So, does anyone have any idea what I'm going wrong? This seems like 
>>> pretty standard use of both ports and chart.js, but clearly I'm missing 
>>> something.
>>>
>> -- 
>> You received this message because you are subscribed to the Google Groups 
>> "Elm Discuss" group.
>> To unsubscribe from this group and stop receiving emails from it, send an 
>> email to elm-discuss+unsubscr...@googlegroups.com.
>> For more options, visit https://groups.google.com/d/optout.
>>
>

-- 
You received this message because you are subscribed to 

Re: [elm-discuss] Re: Errors when using Chart.js in a port subscription

[Austin Bingham]

There does seem to be some effect related to the timing of dom rendering,
but it's not really clear what it is. If I add a setTimeout on the js
function, the very first rendering of the chart works without an error, but
subsequent renderings have errors. In fact, based on the timing of errors
and breakpoints, it looks like the errors are happening prior to the second
rendering. I may need a phase where I explicitly destroy the existing chart
in preparation for creating a new one. Thanks for your help on this.

On Wed, Nov 9, 2016 at 11:21 AM Magnus Rundberget  wrote:

> I'm guessing that you are contructing the div inside your Elm app and that
> the virtual dom might not have completed rendering/updating the div in
> question before you try using it on the js side of things.
> Maybe just try to introduce a setTimeOut on the js sider or something to
> that effect, so that you allow elm time to render the div ?
>
> -magnus
>
>
>
>
> On Wednesday, 9 November 2016 09:11:06 UTC+1, Austin Bingham wrote:
>
> I'm trying to use Chart.js from my elm app, and I'm running into some
> errors that I can't sort out. In short, I've got a elm-to-javascript port
> that takes in a data structure describing the chart I want to draw. Then on
> the javascript side I've got a subscription to that port that renders that
> chart. A trimmed version of that function looks like this:
>
> var brooksChart = null;
>
> function chart(val) {
>  var datasets = ... // calculate data sets from `val`
>
>  var ctx = document.getElementById("bark-spider-canvas");
>
>  if (brooksChart) {
>  brooksChart.destroy();
>  }
>
>  brooksChart = new Chart(ctx, {
>  type: 'line',
>  data: {
>  datasets: datasets
>  },
>  options: {
>  scales: {
>  xAxes: [{
>  type: 'linear',
>  position: 'bottom'
>  }]
>  }
>  }
>  });
>  };
>
> When I run this and pass data into the port, the chart is rendered
> correctly. But, at some point after the "new Chart(...)" call completes, I
> get errors in the javascript console like this:
>
> bark_spider.js:8139 Uncaught TypeError: Cannot read property 'childNodes'
> of undefined(…)addDomNodesHelp @ bark_spider.js:8139addDomNodesHelp @
> bark_spider.js:8147addDomNodesHelp @ bark_spider.js:8147addDomNodesHelp @
> bark_spider.js:8147addDomNodesHelp @ bark_spider.js:8147addDomNodes @
> bark_spider.js:8066applyPatches @ bark_spider.js:8195updateIfNeeded @
> bark_spider.js:7232
>
> The fallout of this seems to be that the elm runtime gets confused, at
> least insofar as I don't receive Msgs that I ought to be receiving. In
> fact, if I take the call to "new Chart(...)" out, then my app works just
> fine (except of course that charts aren't rendered).
>
> So, does anyone have any idea what I'm going wrong? This seems like pretty
> standard use of both ports and chart.js, but clearly I'm missing something.
>
> --
> You received this message because you are subscribed to the Google Groups
> "Elm Discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to elm-discuss+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Re: Errors when using Chart.js in a port subscription

[Magnus Rundberget]

I'm guessing that you are contructing the div inside your Elm app and that 
the virtual dom might not have completed rendering/updating the div in 
question before you try using it on the js side of things.
Maybe just try to introduce a setTimeOut on the js sider or something to 
that effect, so that you allow elm time to render the div ?

-magnus



On Wednesday, 9 November 2016 09:11:06 UTC+1, Austin Bingham wrote:
>
> I'm trying to use Chart.js from my elm app, and I'm running into some 
> errors that I can't sort out. In short, I've got a elm-to-javascript port 
> that takes in a data structure describing the chart I want to draw. Then on 
> the javascript side I've got a subscription to that port that renders that 
> chart. A trimmed version of that function looks like this:
>
> var brooksChart = null;
>
> function chart(val) {
>  var datasets = ... // calculate data sets from `val`
>
>  var ctx = document.getElementById("bark-spider-canvas");
>
>  if (brooksChart) {
>  brooksChart.destroy();
>  }
>
>  brooksChart = new Chart(ctx, {
>  type: 'line',
>  data: {
>  datasets: datasets
>  },
>  options: {
>  scales: {
>  xAxes: [{
>  type: 'linear',
>  position: 'bottom'
>  }]
>  }
>  }
>  });
>  };
>  
> When I run this and pass data into the port, the chart is rendered 
> correctly. But, at some point after the "new Chart(...)" call completes, I 
> get errors in the javascript console like this:
>
> bark_spider.js:8139 Uncaught TypeError: Cannot read property 'childNodes' 
> of undefined(…)addDomNodesHelp @ bark_spider.js:8139addDomNodesHelp @ 
> bark_spider.js:8147addDomNodesHelp @ bark_spider.js:8147addDomNodesHelp @ 
> bark_spider.js:8147addDomNodesHelp @ bark_spider.js:8147addDomNodes @ 
> bark_spider.js:8066applyPatches @ bark_spider.js:8195updateIfNeeded @ 
> bark_spider.js:7232
>
> The fallout of this seems to be that the elm runtime gets confused, at 
> least insofar as I don't receive Msgs that I ought to be receiving. In 
> fact, if I take the call to "new Chart(...)" out, then my app works just 
> fine (except of course that charts aren't rendered).
>
> So, does anyone have any idea what I'm going wrong? This seems like pretty 
> standard use of both ports and chart.js, but clearly I'm missing something.
>

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.