Dear readers,
I want to display an image on a Dash page that is generated by some JS code. See the description here: https://www.altmetric.com/assets/Getting_Started_Altmetric_Badges.pdf
In a static HTML page I include this script “<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>” and this DIV will show me the image:
<div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>
Now I want to display this image after calling a callback that gives me the hover position on a graph:
Here the variable badgelink contains a text like “<div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>”. By default the DIV with ID text-content is empty: html.Div(id='text-content',children=[html.Div("Thing 1")]),
Unfortunately this image is never shown. I have the impression the JS file is never loaded. I tried many ways to solve this: inclusing the JS file in the ASSETS directory in Visual Studio; or serve scripts locally (app.scripts.config.serve_locally) with TRUE or FALSE; and include the script with:
external_scripts = ['https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js']
app = dash.Dash(__name__, external_scripts=external_scripts)
But None of this works…
What I observe when inspecting the generated HTML code (by Visual Studio) I see that the SCRIPT code is a bit altered to something like this: <script type="text/javascript" src="Research%20Performance%20Report_files/embed.js"></script> but when I manually edit this code to what it should be: <script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>like in the documentation and save the local HTML file, the badge/image is shown ! Thus, the problem seems to be that Visual Studio makes the JS file a local file and then the badge (or function that generates the badge) is not working anymore… 
Any suggestions or someone who has been working with Altmetric badges before in Dash ?
Kind regards,
IvoB