I am using the file_html function in bokeh to produce html that I want to embed into a ghost blog website.
If I load the id in a html card on the site, and then paste the head and body of the file into a code injection/header window, the output is fine.
But the html files can be long. So, rather than pasting the code, I want to save the file in my theme, and then include a link to that file. I've tried different ways, but can't get the chart to show.
This is what pasting the head/body into the code injection header looks like:
script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
<script type="application/json" id="1653">
{"1f335636-847c-44ca-ac3d-a39e52279a15":{"defs":[],"roots":{"references":[{"attributes":{"line_alpha":0.2,"line_color":"blue","x":{"field":"Date"},"y":{"field":"A"}},"id":"1474","type":"Line"},{"attributes":{"coordinates":null,"formatter":{"id":"1483"},"group":null,"major_label_policy":{"id":"1484"},"ticker":{"id":"1449"}},"id":"1448","type":"LinearAxis"},{"attributes":{},"id":"1483","type":"BasicTickFormatter"},{"attributes":{"coordinates":null,"formatter":{"id":"1480"},"group":null,"major_label_policy":{"id":"1481"},"ticker":{"id":"1453"}},"id":"1452","type":"LinearAxis"},{"attributes":{"data":{"A":{"__ndarray__":"q2jSD7sDvr+pDX3hPMntvxSFJEWY1eg/MVje9zOj8L+47dbtoFzTPw4XszUKu+0/","dtype":"float64","order":"little","shape":[6]},"B":{"__ndarray__":"1i8GC4Oi8D+uLg3FLEbsvwTnKftsKAPArl2CHJBq5L9l8duvR2/hPzi+J1DhqPA/","dtype":"float64","order":"little","shape":[6]},"C":{"__ndarray__":"hrXr9J6Xdr+t0s/xTnjKvxrjdAWjo/k/9U9XIzQq5D9rBurlogrxP0qoktgjAPg/","dtype":"float64","order":"little","shape":[6]},"D":{"__ndarray__":"s0qFVyjEtL+e/bFQtfTdv46B45hT4Mq/ftVSa9MK7b+DcTodgFj5P8Bs4A3NS/e/","dtype":"float64","order":"little","shape":[6]},"Date":{"__ndarray__":"AAAA57Nrd0IAAMBMBmx3QgAAgLJYbHdCAABAGKtsd0IAAAB+/Wx3QgAAwONPbXdC","dtype":"float64","order":"little","shape":[6]}},"selected":{"id":"1486"},"selection_policy":{"id":"1485"}},"id":"1437","type":"ColumnDataSource"},{"attributes":{},"id":"1440","type":"DataRange1d"},{"attributes":{"line_alpha":0.1,"line_color":"blue","x":{"field":"Date"},"y":{"field":"A"}},"id":"1473","type":"Line"},{"attributes":{},"id":"1484","type":"AllLabels"},{"attributes":{"coordinates":null,"data_source":{"id":"1437"},"glyph":{"id":"1491"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"1493"},"nonselection_glyph":{"id":"1492"},"view":{"id":"1495"}},"id":"1494","type":"GlyphRenderer"},{"attributes":{},"id":"1459","type":"SaveTool"},{"attributes":{},"id":"1442","type":"DataRange1d"},{"attributes":{"line_color":"blue","x":{"field":"Date"},"y":{"field":"A"}},"id":"1472","type":"Line"},{"attributes":{},"id":"1453","type":"BasicTicker"},{"attributes":{},"id":"1457","type":"WheelZoomTool"},{"attributes":{"below":[{"id":"1448"}],"center":[{"id":"1451"},{"id":"1455"},{"id":"1488"}],"left":[{"id":"1452"}],"renderers":[{"id":"1475"},{"id":"1494"}],"title":{"id":"1470"},"toolbar":{"id":"1463"},"x_range":{"id":"1440"},"x_scale":{"id":"1444"},"y_range":{"id":"1442"},"y_scale":{"id":"1446"}},"id":"1439","subtype":"Figure","type":"Plot"},{"attributes":{"axis":{"id":"1452"},"coordinates":null,"dimension":1,"group":null,"ticker":null},"id":"1455","type":"Grid"},{"attributes":{"overlay":{"id":"1462"}},"id":"1458","type":"BoxZoomTool"},{"attributes":{"tools":[{"id":"1456"},{"id":"1457"},{"id":"1458"},{"id":"1459"},{"id":"1460"},{"id":"1461"},{"id":"1508"}]},"id":"1463","type":"Toolbar"},{"attributes":{},"id":"1485","type":"UnionRenderers"},{"attributes":{"source":{"id":"1437"}},"id":"1476","type":"CDSView"},{"attributes":{"label":{"value":"A"},"renderers":[{"id":"1475"}]},"id":"1489","type":"LegendItem"},{"attributes":{},"id":"1486","type":"Selection"},{"attributes":{"bottom_units":"screen","coordinates":null,"fill_alpha":0.5,"fill_color":"lightgrey","group":null,"left_units":"screen","level":"overlay","line_alpha":1.0,"line_color":"black","line_dash":[4,4],"line_width":2,"right_units":"screen","syncable":false,"top_units":"screen"},"id":"1462","type":"BoxAnnotation"},{"attributes":{},"id":"1456","type":"PanTool"},{"attributes":{},"id":"1446","type":"LinearScale"},{"attributes":{"coordinates":null,"group":null,"text":"Trial"},"id":"1470","type":"Title"},{"attributes":{},"id":"1480","type":"BasicTickFormatter"},{"attributes":{"coordinates":null,"group":null,"items":[{"id":"1489"},{"id":"1507"}]},"id":"1488","type":"Legend"},{"attributes":{},"id":"1444","type":"LinearScale"},{"attributes":{"line_alpha":0.2,"line_color":"green","x":{"field":"Date"},"y":{"field":"B"}},"id":"1493","type":"Line"},{"attributes":{},"id":"1460","type":"ResetTool"},{"attributes":{"callback":null,"formatters":{"#Date":"datetime"},"tooltips":[["Date","#Date{%F}"],["A","#{A}{0,0.0}"],["B","#{B}{0,0.0}"]]},"id":"1508","type":"HoverTool"},{"attributes":{},"id":"1461","type":"HelpTool"},{"attributes":{"line_alpha":0.1,"line_color":"green","x":{"field":"Date"},"y":{"field":"B"}},"id":"1492","type":"Line"},{"attributes":{},"id":"1449","type":"BasicTicker"},{"attributes":{"line_color":"green","x":{"field":"Date"},"y":{"field":"B"}},"id":"1491","type":"Line"},{"attributes":{"axis":{"id":"1448"},"coordinates":null,"group":null,"ticker":null},"id":"1451","type":"Grid"},{"attributes":{"source":{"id":"1437"}},"id":"1495","type":"CDSView"},{"attributes":{"label":{"value":"B"},"renderers":[{"id":"1494"}]},"id":"1507","type":"LegendItem"},{"attributes":{},"id":"1481","type":"AllLabels"},{"attributes":{"coordinates":null,"data_source":{"id":"1437"},"glyph":{"id":"1472"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"1474"},"nonselection_glyph":{"id":"1473"},"view":{"id":"1476"}},"id":"1475","type":"GlyphRenderer"}],"root_ids":["1439"]},"title":"Bokeh Application","version":"2.4.3"}}
</script>
<script type="text/javascript">
(function() {
const fn = function() {
Bokeh.safely(function() {
(function(root) {
function embed_document(root) {
const docs_json = document.getElementById('1653').textContent;
const render_items = [{"docid":"1f335636-847c-44ca-ac3d-a39e52279a15","root_ids":["1439"],"roots":{"1439":"4484be71-5c42-4872-ad08-d14d68f5b8be"}}];
root.Bokeh.embed.embed_items(docs_json, render_items);
}
if (root.Bokeh !== undefined) {
embed_document(root);
} else {
let attempts = 0;
const timer = setInterval(function(root) {
if (root.Bokeh !== undefined) {
clearInterval(timer);
embed_document(root);
} else {
attempts++;
if (attempts > 100) {
clearInterval(timer);
console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
}
}
}, 10, root)
}
})(window);
});
};
if (document.readyState != "loading") fn();
else document.addEventListener("DOMContentLoaded", fn);
})();
</script>
And this is my latest attempt to replace the body with a link to the file:
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
<script type="text/html"
src="/assets/bokeh_new/s3_partial.html"
></script>
The problem is that after receiving the SSL certificate, and switch my site from http to https some functions of my site (on my own domain) on the blogger platform, stopped working.
How can I fix the code to make them work again?
<script type="text/javascript">
function LoadTheArchive(TotalFeed)
{
var PostTitles = new Array();
var PostURLs = new Array();
var PostYears = new Array();
var PostMonths = new Array();
var PostDays = new Array();
if("entry" in TotalFeed.feed)
{
var PostEntries=TotalFeed.feed.entry.length;
for(var PostNum=0; PostNum<PostEntries ; PostNum++)
{
var ThisPost = TotalFeed.feed.entry[PostNum];
PostTitles.push(ThisPost.title.$t);
PostYears.push(ThisPost.published.$t.substring(0,4));
PostMonths.push(ThisPost.published.$t.substring(5,7));
PostDays.push(ThisPost.published.$t.substring(8,10));
var ThisPostURL;
for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++)
{
if(ThisPost.link[LinkNum].rel == "alternate")
{
ThisPostURL = ThisPost.link[LinkNum].href;
break
}
}
PostURLs.push(ThisPostURL);
}
}
DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays);
}
function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays)
{
var MonthNames=["January","February","March","April","May","June","July","August","September","October","November","December"];
var NumberOfEntries=PostTitles.length;
var currentMonth = "";
var currentYear = "";
for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)
{
NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]
if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum])
{
currentMonth = NameOfMonth;
currentYear = PostYears[EntryNum];
document.write("<div class='dateStyle'><br />" + currentMonth+" "+currentYear+" </div>");
}
document.write('<div class=dayStyle>'+parseInt(PostDays[EntryNum],10)+": </div> "+PostTitles[EntryNum]+"<br />");
}
}
</script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=LoadTheArchive" />
</script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=151&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=301&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=451&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=601&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=851&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=1001&alt=json-in-script&callback=LoadTheArchive"></script>
<!--CUSTOMIZATION-->
<style type="text/css">
.dateStyle {
color:#000;
font-size: 30px;
font-family: Fjalla One;
margin: 0;
}
.dayStyle {
color:#000;
font-family: Droid Sans;
display: inline-block;
}
</style>
And now the form says that it looks like my post is mostly code, a I need to add some more details, but I don't know what to add more, because all what I needed, I was asked above.
What about changing script tags to the following
<script src="/feeds/posts/default?max-results=500&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=151&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=301&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=451&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=601&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=851&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=1001&alt=json-in-script&callback=LoadTheArchive"/>