Embedding Chartio dashboards

Embedding

Integrating dashboards into your application via embedded involves two open, simple, and easy-to-use technologies: JSON web tokens (JWT) and HTML iframes.

JWTs allow you to, in a tamper-proof manner from your end user’s perspective, pass Chartio the dashboard id you would like to embed as well as the values to apply to any dashboard variables. These values can be controlled by your application’s native UI elements to provide robust filtering capabilities.

If your organization has our newest version of Embedding enabled (Embedding 2.0), you’ll also have the ability to use Chartio’s native filters on your embedded page.

HTML iframes are a common technology used for embedding third party widgets into a webpage.

Plugging everything together is as simple as placing an iframe in your HTML that references in its srcattribute a Chartio endpoint appended with a JWT.

To learn more about Embedding and our available versions, view our Embedding documentation.

Embedded dashboard size

If your organization is using our Embedding 1.0, Chartio holds all the returned queries from the embedded dashboard until all results are returned before pushing to the embedded dashboard. The maximum size of the returned charts for the embedded dashboard cannot exceed 10MB.

If your organization is using our Embedding 2.0, we will load the full dashboard in an iframe. Therefore, your dashboard will load incrementally as a dashboard normally would in Chartio directly.

If you’re interested in seeing a demo or enabling Embedding for your account, please contact support@chartio.com.

How to determine the height of an embedded Chartio 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 with step by step instructions, see our Embedding documentation.


Related Embedding Help Articles

See more