Embedding Data Visualizations within Elements

The Dashboard Widget is a versatile component that enables data visualization within other elements, such as the Resizable Grid Layout. It can be used to display charts, graphs, and other visual data representations, making it a valuable tool for creating dynamic, data-rich interfaces within modals.

Installation

1. Access the Element Studio:

   • In the Individual App Canvas, locate and hover over the modal where you want to add a parent element (e.g., Resizable Grid Layout) that will hold the Dashboard Widget.

   • Click Access Element Studio.

2. Add a Parent Element:

   • Inside Element Studio, click Add New Block.

   • Use the search bar to find the parent element (such as "Resizable Grid Layout") and click on it to add it to the modal.

3. Add the Dashboard Widget:

   • Once the parent element is in place, add the Dashboard Widget within it by configuring one of the available cells or sections to display the widget.

   • 
     

Configuring the Dashboard Widget

1. Create Widgets in Dashboard Builder:

   • Go to Project Canvas > Project Configuration (top right) > Dashboard Builder.

   • Create and configure the necessary widgets for your project in the Dashboard Builder. You can set up various visualizations, such as bar charts, line graphs, or custom data displays, based on your data needs.

2. Link Widgets to the Parent Element:

   • Once your widgets are created in the Dashboard Builder, return to Element Studio, and select the appropriate widget for each cell or section where you want to display it.

With the Dashboard Widget, you can add interactive data visualizations to elements within your app, helping users to monitor and analyze key metrics effectively within their workflow.