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 old version of embedding, 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 Interactive Embedding, 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 email@example.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:
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.