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 <[email protected]> > 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 [email protected]. >> 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 [email protected]. For more options, visit https://groups.google.com/d/optout.
