Embedding a Single Chart In Your Application

In this article, we explore how to embed a single chart within your application. We'll delve into this approach and how you can easily embed a single chart from one of your dashboards. Whether you're building a business intelligence tool, a customer-facing app, or an internal data-driven platform, understanding when and why to embed a single chart will empower you to deliver a more efficient and tailored solution.

How To

Please refer to the course on Embedding dashboards using Embed tokens for an introduction to the general embedding process. Embedding charts and embedding dashboards is very similar. The main difference is you will, next to specifying a dashboardId, also specify an itemId.

An example of the code used to embed a single chart:

<luzmo-dashboard
  dashboardId="< a dashboard id >" 
  itemId="< an ID of a Luzmo chart >"
  authKey="< embed key from step 2 >"
  authToken="< embed token from step 2 >"
  appServer="< https://app.luzmo.com (default) or https://app.us.luzmo.com/ or your VPC-specific address >"
  itemDimensions="{ &quot;width&quot;: <width in pixels>, &quot;height&quot;: <height in pixels> }"
>
</luzmo-dashboard>

1. To start you will need the dashboardId and the itemId for the specific item you wish to embed. The dashboardId and itemId are unique identifiers for the dashboard and the specific item you want to embed respectively.
2. Next, you'll need to generate a Embed authentication token for your Collection. We will use the authKey and authToken from your Embed request to authenticate the dashboard request. How to Request a Embed token in your backend. This token should be dynamically generated each time the user visites the page in which the chart is embedded, similar to when you embed a dashboard
3. FIll in the appServer to be used. Depending on your organization's tenancy the appServer can be the default https://app.luzmo.com, or https://app.us.luzmo.com/ or your VPC-specific address.
4. Once you have all the necessary information, replace the placeholder text in the Luzmo code above with your specific identifiers and authentication tokens.
5. Add this updated embedded code into your webpage's code where you want the item to appear.
6. The embedded item will adjust to the available width, and its height will correspond to the height of the item in your dashboard. Optionally, you can adjust the size as per your requirements by specifying the itemDimensions width and height.

Remember, this embedding method is tailored to your needs, allowing you to showcase specific parts of your dashboards and provide a smoother experience for your users. Don't hesitate to contact us in case you have further questions or remarks. We're happy to help!