nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to add embedded chart from Flourish

ManuelFrias

I want to embed a chart I made with Flourish into a story map I am making with Map Journal Builder. The iframe I get from Flourish looks like this:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>iframe</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>https://public.flourish.studio/visualisation/506598/embed<SPAN class="punctuation token">'</SPAN></SPAN> <SPAN class="attr-name token">frameborder</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>0<SPAN class="punctuation token">'</SPAN></SPAN> <SPAN class="attr-name token">scrolling</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>no<SPAN class="punctuation token">'</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">='</SPAN><SPAN class="attr-value token"><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>100%<SPAN class="punctuation token">;</SPAN><SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>600px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">'</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>iframe</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">='</SPAN><SPAN class="attr-value token"><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>100%!<SPAN class="punctuation token">;</SPAN><SPAN class="property token">margin-top</SPAN><SPAN class="punctuation token">:</SPAN>4px!important<SPAN class="punctuation token">;</SPAN><SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN>right!important<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">'</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>a</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>flourish-credit<SPAN class="punctuation token">'</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>https://public.flourish.studio/visualisation/506598/?utm_source<SPAN class="punctuation token">=</SPAN>embed&utm_campaign<SPAN class="punctuation token">=</SPAN>visualisation/506598<SPAN class="punctuation token">'</SPAN></SPAN> <SPAN class="attr-name token">target</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>_top<SPAN class="punctuation token">'</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">='</SPAN><SPAN class="attr-value token"><SPAN class="property token">text-decoration</SPAN><SPAN class="punctuation token">:</SPAN>none!important</SPAN><SPAN class="punctuation token">'</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>img</SPAN> <SPAN class="attr-name token">alt</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>Made with Flourish<SPAN class="punctuation token">'</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>https://public.flourish.studio/resources/made_with_flourish.svg<SPAN class="punctuation token">'</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">='</SPAN><SPAN class="attr-value token"><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>105px!important<SPAN class="punctuation token">;</SPAN><SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>16px!important<SPAN class="punctuation token">;</SPAN><SPAN class="property token">border</SPAN><SPAN class="punctuation token">:</SPAN>none!important<SPAN class="punctuation token">;</SPAN><SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN>0!important<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">'</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>a</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

As you see, below the <iframe> there is a <div> to show the credit.

When I add it to the story map (Main stage/embed code) I get this message: Embed code can only contain one "<iframe>"

I could just add the chart link (https://public.flourish.studio/visualisation/506598/embed) in the web page link field instead but then the credit doesn't show and it's required.

I have tried to tweak the code like, for example, adding the <div> part into the <iframe> using a property called srcdoc to no avail.

Any idea how I can solve this problem?

Thanks!

Encontre mais publicações marcadas com

Accepted answers

oevans_storymaps

Hi Manuel -- Sorry you are having trouble getting a chart embedded in your story how you want. Since the main stage is an iframe, you're not able to put multiple elements in it.

My suggestion is that you put the chart in the side panel. You can use the HTML source editing mode to paste in the embed code for the chart <iframe> and credit <div>. You'll want to add some sizing parameters to the iframe to get the chart the size you want. In my example I used width="100%" and height="400px."

Another suggestion is to put the chart in the main stage and just the credit in the side panel (also using the HTML view). In my example, I also removed the right aligned formatting, but you can tweak the code and other text in the section to format/layout things as you see fit.

Hope this helps!

Owen

All comments

oevans_storymaps

Hi Manuel -- Unfortunately, there isn't an HTML view in Cascade, but you can add the credit as text (with a link, if desired) in the caption, if you're using the chart in an immersive section, you could add it in the narrative panel.

ManuelFrias

Thanks Owen for your excellent suggestions!

How could I make this work also in the cascade builder?

Manuel

oevans_storymaps

Hi Manuel -- Sorry you are having trouble getting a chart embedded in your story how you want. Since the main stage is an iframe, you're not able to put multiple elements in it.

Hope this helps!

Owen

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.