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.
