Get the height of an embedded dashboard
If you would like to set the height of your frame to match the content provided by Chartio’s dashboard you can use the following code to do so:
<html>
<head>
<title>Chartio Embedding Iframe Height Example</title>
<script type="text/javascript">
window.onload = () => {
const iframe = document.querySelector('#chartio-embed-iframe');
window.addEventListener('message', (message) => {
if (message.origin !== 'https://embed.chartio.com') return;
if (message.data && message.data.height) {
iframe.height = message.data.height + 'px';
}
});
};
</script>
</head>
<body>
<iframe id="chartio-embed-iframe" width="100%" src="Embed URL from Dashboard Settings">
</body>
</html>
Update the iframe src attribute with the Example Usage URL value from the dashboard’s Embedding settings and save the HTML below in file with a .html extension. Then, open the file in a browser.
For additional information about the Embedding feature including step-by-step instructions, see our Embedding documentation.