I have attached an example file, which uses chart.js and also contains a console.log in the document head.
Examining the OAM file itself, I can see that the script and the console.log are being exported, so I presume the problem I am facing has something to do with the Wordpress plugin.
I would appreciate any help you can offer, thanks!
example OAM.hype.zip (124.5 KB)
When embedding with the plugin, the default embed mode is ‘div’ which strips anything you have in the head. The embed in this format does not include the entire HTML document, just the embedded Hype
So you’ll need to switch to the ‘iframe’ embedding method on the list of embeds:
Or, you can embed the chart info somehow in your Wordpress page where you have the object embedded.
Thankyou for your assistance, Daniel.
<head> and into a div, like so:
However the script is not loaded:
Am I missing something obvious? Hype file attached
example OAM.hype.zip (113.2 KB)
Super close: You actually do want to keep those JS files included in the head.
- Check those 'include in head boxes for the two functions
- Re-upload the OAM widget to the Wordpress plugin
- Visit the list of your uploaded widgets and modify this one to be embedded as an ‘iframe’:
- Use the shortcode to embed and it will load everything correctly.
An alternative for you is to use the free CDN for Chartjs ( https://cdnjs.com/libraries/Chart.js/1.0.2 ). Or, you could host those JS files on your server, and use absolute URLs within the inner HTML of your rectangle (example: https://site.com/chart.js). When using relative URLs, the URL structure of Wordpress pages confuses things and they can’t be found. The iframe method is likely what you want here.
Thank you, Daniel, much easier than I expected
The iframe method of embedding does indeed work, however I am hoping to avoid iframe if possible. I tried your second solution of using a CDN, however I cannot seem to get it to work unless I use the ‘html widget’.
For instance, if I do the following:
OAM-test2.hype.zip (6.2 KB)
You’ll need to load the JS file as HTML, not within the inner HTML of a rectangle. The CSS reference is a bit more forgiving, but the JS file needs to be loaded either in the head of your Wordpress site, within the HTML Widget (which is an iframe), or some other way that isn’t a dynamically-created Hype element.
Much appreciated, thank you!