Multiple code inject in one post

Hi, I am using Ghost Pro. I can use

  1. code injection/header, html card; and
  2. code injection/footer, html card

to show two interactive charts in a post. But is there a way to use that process more than twice in any one post so I have the flexibility to show more than two interactive charts?

Thank you.

Code injection isn’t limited, so you should be able to add multiple charts either within the script tag or via multiple script tags.

If you share the page in question or the charting library you’re using, I might be able to help more :grinning:

Thanks. I am using bokeh. I tried to post the code for one of the charts, but it exceeds the 32000 characters allowed by this site (and also is over the 65535 characters allowed in the headers/footers in Ghost). Is there another way?

Is this because of the size of the data set?

And which export are you using from Bokeh: Standalone Html, JSON, or Component?

The charts in this particular example show monthly data for a couple of series over 10 years or so. But I also have charts which use longer time series.

I am using the file_html() function.


Getting Multiple

I’d look into the Component export or Autoloading Scripts (below). The file_html() function is exporting a full html page (unless your template is otherwise), but the Component code would give you both a bit of javascript and a div that javascript takes over.

Here’s a screen grab from their docs linked above, highlighting the elementId and the <div id= as that is what/how the script will be targeting and replacing with the chart.

This would allow you to place the javascript in the code injection footer of the post, and add the div code to an HTML block in the post editor in Ghost. That way you can place the charts where you want them with other content, as well as multiple per page, etc. (you’ll still need their CDN scripts imported of course)

Character Limit

If the character limit remains the main issue:

1 - I think you can use Bokeh’s Autoloading Scripts to work around this. You would add the script tag it generates to an html block in the post editor, and it would replace itself with the chart (and load the CDN if not already loaded).

You would need to upload the file it creates:
A subfolder in your theme’s assets directory may work, as that would be accessible via /assets/name-of-folder/script-file-bokeh-made.js
(If you’re using the GitHub integration to continuously deploy your theme, those uploads would at least be trivial.)

2 - if you can’t export that way, you could try a similar upload approach, but bring the .html files in via iframes inside an html block in the post editor. But I would try the Autoloading Scripts approach myself.

All that said, as you’re hosting with Ghost Pro, it couldn’t hurt to reach out to their support re: the file upload and see if they have a better/preferred solution.

1 Like

Thanks. I think the scripts are too long for the Component export idea, but I’ll follow up to see if I can get the Autoloading Scripts to work.