Embedding is a Premium feature and may need to be enabled for your account. Contact email@example.com for more information or questions.
Once a dashboard is created, it shouldn’t take too long to embed it into your application. Follow the steps below to embed a Chartio dashboard into your application.
If you’re still using the old version, you can still reference those instructions here.
1. Retrieve the dashboard embedding example code
Navigate to a dashboard you wish to embed, then open Settings from the dashboard sidebar and click the Embed button at the top-right of the modal.
This will bring you to the dashboard’s Embedding page, where you can see the dashboard example code in four languages:
For the following examples, we’ll use Python code.
Note: By default, viewers of embedded dashboards cannot change dashboard filters. To allow changing dashboard filters, refer to the Enable use of Dashboard Variables section of our Embedding page.
2. Retrieve the Embed Secret
All embedding will be encrypted by your organization’s unique Embed Secret. Find the Embed Secret by clicking the ellipsis (…) from the top navigation bar and choose Embedding; your Embed Secret will appear here. Keep it handy as we will refer to it in the next steps.
Note: Owner access is required to view the Embed Secret.
3. Install a third-party JWT library
We accept requests for the embedded dashboard using the JSON Web Token (JWT) standard. JWTs can be generated by following the procedure defined here; however, using a third-party library is recommended to reduce the chance for error.
In Python, for example, you can simply install using:
4. Construct a Payload
Construct a payload using the dashboard example code as a reference.
A payload should include the following:
organization: Your Chartio organization ID;
dashboard: Either the slug or the ID of the dashboard to be embedded;
env: A mapping of variable names to values which will be passed to the Hidden Variables on the dashboard;
exp(required): An expiration value that specifies when the token expires. The default (and max) value is 24 hours, but it can be set lower.
Example Python payload:
5. Wrap the payload in a JWT
Generate a JWT with the payload as the body using your organization Embed Secret (see Step 2) and the HMAC256 signature mechanism.
Example Python payload:
6. Submit the JWT in an iframe
<iframe> element into your HTML with a
src URL consisting of the generated JWT appended to the base URL from the dashboard example code.
7. Test the Results
Test the results by requesting the application page with the embedded
<iframe>. The dashboard’s charts are incrementally loaded each time an embedding request includes a brand new JWT. The dashboard will be cached on Chartio’s servers for all subsequent requests until the JWT expires.
If the dashboards aren’t loading as fast as you’d like, take a look at our documentation on optimizing embedding loading times.