AnsweredAssumed Answered

D3 chart not visible in iFrame

Question asked by tom.rippetoe on Jan 2, 2020
Latest reply on Jan 3, 2020 by tom.rippetoe

In our Hub site, we've been using d3 charts in iFrames for a while. However, when we recently (12/30 or so) added a new d3 chart to an iFrame card, the chart is not visible in the iFrame.

 

When in Edit mode and the iFrame card is first added to the Hub page and the URL set, the chart is visible as expected (screen cap 1 below). However, the chart does not appear after saving the Hub page and switching to 'View' mode (Screen cap 2). And a heap of D3 related error messages are displayed in the Chrome dev-tools console (Screen cap 3). Then when returning to Edit mode for the Hub page, the d3 chart is not visible and the error messages are displayed in the dev-tools console.  If the iFrame card is deleted and replaced with a new card (or if the URL in the existing iFrame card is replaced (copy/pasted)), the chart shows as expected. Until the Hub page is saved and viewed.

 

When the D3 chart is viewed as its own standalone page, the chart/page renders as expected with no error messages.

 

Any thoughts about what's going on either with Hub or our D3 chart?

 

Screen cap 1. D3 chart is visible when first added to the iFrame card:

D3 chart is visible when first creating iFrame card

 

Screen cap 2. D3 chart is not visible after saving and switching to View mode:

D3 chart is not visible in View mode

 

Screen cap 3. Lots of d3 related errors in dev-tools console:

Lots of d3 related errors in dev-tools console

Outcomes