I am trying to include three javascript elements (interactive statistical graphs created with highcharter in R) via the `Embed Code' feature into my Weebly website - not in the header or footer but as elements in a single page (exactly what is described e.g. here: https://www.amcharts.com/docs/v3/tutorials/adding-charts-and-maps-to-a-weebly-website/).
When I insert an `Embed Code field' into the page in the Editor and then paste the code into it, the scripts run flawlessly, the graphs appear, and they look just as they should. Everything is zen.
But when the page is then autosaved (e.g. when I make any changes to the page settings in the Editor or simply go to a different page and back), something I do not understand changes and only the top parts of the graphs are shown. Also shown is a little blue triangle, which is not originally part of the graph and which I cannot click on or do anything with.
And when I then publish the website and visit it myself, the graphs do not appear at all (I tried it with Firefox (69.0.3 Mac) and Safari (13.0.2).)
I have taken screenshots and added them here: graph as it should look; graphs as they end up looking; here is also a link to the (currently hidden) page: https://benefitconditionality.weebly.com/interactive-graphs.html#
A code snipped for the graphs (the, as far as I can tell, relevant part) is provided below; more is on my github profile: https://github.com/cknotz/conditionality_interactivegraphs (the three html-files).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>highchart</title>
<script src="data:application/x-javascript;base64,
[lots of gibberish]
</script>
</head>
<body style="background-color: white;">
<div id="htmlwidget_container">
<div id="htmlwidget-ec519bcd5ef9e0e24b75" class="highchart html-widget" style="width:100%;height:500px;">
</div>
</div>
<script type="application/json" data-for="htmlwidget-ec519bcd5ef9e0e24b75">{"x":{"hc_opts":{"title":{"text":"Overall benefit conditionality"},"yAxis":{"title":{"text":"Strictness score"},"max":1,"min":0},"credits":{"enabled":false},"exporting":{"enabled":true,"filename":"conditionality"},"plotOptions":{"series":{"label":{"enabled":false},"turboThreshold":0},"treemap":{"layoutAlgorithm":"squarified"}},"xAxis":{"categories":[1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012]},"series":[{"data":[0.5,0.5,0.5,0.5,0.5,0.5,0.62360954,0.52704626,0.52704626,0.54326689,0.56978309,0.58630198,0.58630198,0.58630198,0.62915289,0.62915289,0.6454972,0.58925563,0.58925563,0.57433534,0.57433534,0.57433534,0.57433534,0.57433534,0.57433534,0.51370114,0.51370114,0.51370114,0.51370114,0.48052344,0.48052344,0.48052344,0.48052344],"name":"Australia","type":"line"},{"data":[0.23570226,0.23570226,0.23570226,0.23570226,0.23570226,0.23570226,0.23570226,0.23570226,0.23570226,0.23570226,0.23570226,0.23570226,0.23570226,0.39086798,0.39086798,0.39086798,0.40824831,0.40824831,0.40824831,0.40824831,0.40824831,0.43301269,0.43301269,0.43301269,0.57735026,0.57735026,0.57735026,0.57735026,0.57735026,0.57735026,0.57735026,0.54006171,0.54006171],"name":"Austria","type":"line","visible":false},{"data":[0.5204165,0.5204165,0.5204165,0.5204165,0.5204165,0.5204165,0.5204165,0.5204165,0.5204165,0.5204165,0.5204165,0.5,0.52704626,0.52704626,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.52704626,0.52704626,0.52704626,0.52704626,0.52704626,0.52704626,0.52704626,null,null],"name":"Belgium","type":"line","visible":false},{"data":[0.25,0.25,0.25,0.25,0.25,0.25,0.25,0.25,0.25,0.25,0.30618623,0.30618623,0.30618623,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.3385016,0.39086798],"name":"Canada","type":"line","visible":false},{"data":[null,null,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.39747468,0.39747468,0.39747468,0.39747468,0.41247895,0.41247895,0.41247895,0.41247895,0.4269563,0.45452967,0.45452967,0.45452967,0.44095856,0.44095856,0.43301269,0.43301269,0.43301269,0.43301269,0.43301269,0.43301269,0.45643547,0.45643547,0.45643547,0.45643547],"name":"Denmark","type":"line"},{"data":[0.35355338,0.35355338,0.35355338,0.35355338,0.3818813,0.3818813,0.3818813,0.3818813,0.3818813,0.3818813,0.34860834,0.34860834,0.34860834,0.45643547,0.45643547,0.45643547,0.45643547,0.56211406,0.56211406,0.56211406,0.56211406,0.56211406,0.58333331,0.58333331,0.58333331,0.58333331,0.60380739,0.60380739,0.60380739,0.60380739,0.62360954,0.62360954,0.62360954],"name":"Finland","type":"line","visible":false},{"data":[0.47871354,0.47871354,0.45643547,0.45643547,0.45643547,0.52704626,0.52704626,0.52704626,0.52704626,0.52704626,0.52704626,0.52704626,0.51031035,0.48412293,0.48412293,0.48412293,0.48412293,0.48412293,0.48412293,0.48412293,0.535218,0.49300665,0.49300665,0.49300665,0.49300665,0.52704626,0.55277079,0.55277079,0.45643547,0.45643547,0.45643547,0.45643547,0.45643547],"name":"France","type":"line","visible":false},{"data":[0.25,0.2763854,0.41457811,0.41457811,0.45069391,0.45069391,0.45069391,0.45069391,0.45069391,0.45069391,0.45069391,0.45069391,0.45069391,0.45069391,0.45069391,0.45069391,0.45069391,0.62360954,0.62360954,0.60380739,0.60380739,0.62360954,0.55277079,0.60092521,0.60092521,0.60092521,0.60092521,0.60092521,0.60092521,0.60092521,0.60092521,0.56211406,0.56211406],"name":"Germany","type":"line","visible":false},{"data":[0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.559017,0.559017,0.559017,0.559017,0.559017,0.559017,0.559017,0.559017,0.559017,0.559017,0.559017,0.559017],"name":"Greece","type":"line","visible":false},{"data":[0.25,0.25,0.25,0.25,0.25,0.25,0.25,0.25,0.25,0.3227486,0.3227486,0.3227486,0.3359274,0.3359274,0.3359274,0.3359274,0.3359274,0.3359274,0.36799005,0.4750731,0.4750731,0.4750731,0.4750731,0.4750731,0.4750731,0.4750731,0.4750731,0.4750731,0.4750731,0.4750731,0.60380739,0.60380739,0.60380739],"name":"Ireland","type":"line","visible":false},{"data":[0.1502313,0.1502313,0.1502313,0.1502313,0.1502313,0.1502313,0.1502313,0.27003086,0.27003086,0.27003086,0.27003086,0.36799005,0.36799005,0.36799005,0.36799005,0.36799005,0.36799005,0.36799005,0.43301269,0.43301269,0.43301269,0.43301269,0.61237246,0.43301269,0.43301269,0.43301269,0.43301269,0.43301269,0.43301269,0.43301269,0.43301269,0.43301269,null],"name":"Italy","type":"line","visible":false},{"data":[0.2795085,0.2795085,0.2795085,0.2795085,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189,0.3307189],"name":"Japan","type":"line","visible":false},{"data":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,0.51706976,0.51706976,0.45833334,0.45833334,0.45833334,0.45833334,0.45833334,0.45833334,0.45833334,0.45643547,0.5,0.5,0.5,0.45643547,0.45643547,0.45643547,0.45643547],"name":"Korea","type":"line","visible":false},{"data":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,0.58630198,0.58630198,0.58630198,0.58630198,0.63737744,0.63737744,0.63737744,0.63737744,0.63737744,0.63737744,0.63737744,0.625,0.625,0.625,0.625,0.66536331],"name":"Netherlands","type":"line","visible":false},{"data":[0.53033006,0.53033006,0.61237246,0.61237246,0.61237246,0.61237246,0.61237246,0.61237246,0.61237246,0.59511906,0.61237246,0.68465322,0.70341432,0.70341432,0.70341432,0.70341432,0.62915289,0.62915289,0.602368,0.602368,0.602368,0.51370114,0.51370114,0.51370114,0.51370114,0.51370114,0.51370114,0.51370114,0.51370114,0.51370114,0.57735026,0.559017,0.559017],"name":"New Zealand","type":"line","visible":false},{"data":[0.54326689,0.54326689,0.54326689,0.54326689,0.54326689,0.54326689,0.54326689,0.54326689,0.54326689,0.54326689,0.51031035,0.51031035,0.51031035,0.51031035,0.51031035,0.51031035,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331,0.58333331],"name":"Norway","type":"line","visible":false},{"data":[0.559017,0.559017,0.559017,0.559017,0.559017,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.53033006,0.66143781,0.66143781,0.66143781,0.66143781,0.66143781,0.66143781,0.72886896,0.72886896,0.72886896,0.72886896,0.72886896,0.72886896,0.72886896,0.79056942,0.79056942,0.79056942,0.79056942,0.79056942,null,null],"name":"Portugal","type":"line","visible":false},{"data":[0.56978309,0.56978309,0.56978309,0.56978309,0.56978309,0.4208127,0.4208127,0.4208127,0.43301269,0.43301269,0.43301269,0.43301269,0.43301269,0.50518149,0.50518149,0.50518149,0.50518149,0.50518149,0.50518149,0.50518149,0.50518149,0.50518149,0.602368,0.602368,0.602368,0.602368,0.602368,0.602368,0.602368,0.602368,0.602368,0.602368,0.602368],"name":"Spain","type":"line"},{"data":[0.29462782,0.29462782,0.3227486,0.26352313,0.26352313,0.26352313,0.26352313,0.26352313,0.29462782,0.29462782,0.29462782,0.29462782,0.29462782,0.26352313,0.26352313,0.41666666,0.41666666,0.41666666,0.41666666,0.41666666,0.47871354,0.47871354,0.47871354,0.47871354,0.47871354,0.47871354,0.47871354,0.54006171,0.54006171,0.54006171,0.54006171,0.57735026,0.59511906],"name":"Sweden","type":"line","visible":false},{"data":[null,null,0.22821774,0.34860834,0.34860834,0.34860834,0.34860834,0.34860834,0.34860834,0.34860834,0.34860834,0.3227486,0.34860834,0.34860834,0.34860834,0.41247895,0.41247895,0.41247895,0.41247895,0.3818813,0.3818813,0.3818813,0.3818813,0.3818813,0.3818813,0.3818813,0.3818813,0.3818813,0.3818813,0.3818813,0.3818813,0.3818813,0.3818813],"name":"Switzerland","type":"line","visible":false},{"data":[0.25,0.25,0.25,0.22821774,0.22821774,0.22821774,0.3307189,0.3307189,0.3656235,0.5204165,0.54006171,0.54006171,0.54006171,0.54006171,0.54006171,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.66536331,0.6454972],"name":"United Kingdom","type":"line","visible":false},{"data":[0.385028258823529,0.386580341176471,0.387204224210526,0.389277006842105,0.395364065789474,0.389730037368421,0.401630600526316,0.402853562631579,0.406969840526316,0.42240482,0.425213848421053,0.432607669473684,0.436192405789474,0.460208033684211,0.461039857368421,0.479056475263158,0.482581448,0.49879814,0.500661823333333,0.505861542857143,0.511249254761905,0.510291140952381,0.521097178095238,0.514470929523809,0.522632064285714,0.52127528047619,0.528487832857143,0.531409174285714,0.526232376190476,0.523693354761905,0.533797429047619,0.517630837894737,0.527366978333333],"name":"Average","type":"line","visible":true}]},"theme":{"colors":["#737373","#D8D7D6","#B2B0AD","#8C8984"],"chart":{"style":{"fontFamily":"Cardo"}},"xAxis":{"lineWidth":0,"minorGridLineWidth":0,"lineColor":"transparent","tickColor":"#737373"},"yAxis":{"lineWidth":0,"minorGridLineWidth":0,"lineColor":"transparent","tickColor":"#737373","tickWidth":1,"gridLineColor":"transparent"}},"conf_opts":{"global":{"Date":null,"VMLRadialGradientURL":"http =//code.highcharts.com/list(version)/gfx/vml-radial-gradient.png","canvasToolsURL":"http =//code.highcharts.com/list(version)/modules/canvas-tools.js","getTimezoneOffset":null,"timezoneOffset":0,"useUTC":true},"lang":{"contextButtonTitle":"Chart context menu","decimalPoint":".","downloadJPEG":"Download JPEG image","downloadPDF":"Download PDF document","downloadPNG":"Download PNG image","downloadSVG":"Download SVG vector image","drillUpText":"Back to {series.name}","invalidDate":null,"loading":"Loading...","months":["January","February","March","April","May","June","July","August","September","October","November","December"],"noData":"No data to display","numericSymbols":["k","M","G","T","P","E"],"printChart":"Print chart","resetZoom":"Reset zoom","resetZoomTitle":"Reset zoom level 1:1","shortMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"thousandsSep":" ","weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]}},"type":"chart","fonts":"Cardo","debug":false},"evals":[],"jsHooks":[]}</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-ec519bcd5ef9e0e24b75">{"viewer":{"width":"100%","height":350,"padding":0,"fill":true},"browser":{"width":"100%","height":500,"padding":0,"fill":true}}</script>
</body>
</html>
I am not an HTML or Java programmer (I can sort of make sense of HTML code, but that is it), so I have no idea what the problem could be or how to fix it. It does seem to me that the Weebly Editor somehow and for some reason minimizes the sizes of the graphs. I have no idea why the graphs then do not show up on the published website, though.
A similar question has been asked and solved here already, but this question was about what to do when a highcharter graph does not appear at all. My situation is different and there are, as far as I have found, no solved question related to this problem.
Any help would be greatly appreciated!
