--- title: "Add a Sparkline to a Grid" slug: "add-a-sparkline-to-a-grid" updated: 2026-02-23T08:14:35Z published: 2026-02-23T08:14:35Z --- > ## Documentation Index > Fetch the complete documentation index at: https://documentation.lakesidesoftware.com/llms.txt > Use this file to discover all available pages before exploring further. # Add a Sparkline to a Grid A Sparkline is a visualization in which a simple graph is rendered inside of a grid cell. It is used to present the general shape of a variation (typically over time) in some measurement in a simple and highly condensed way. To create a Sparkline you start with a defined grid object, and use a Data Frame Control between a Query Data block and the grid to transform a single column value from multiple rows into an array of those data values in a single row. The example below shows trends in I/O and Memory for different applications. ![](https://cdn.document360.io/87d11426-6b1f-4b19-b593-b71e55a81af3/Images/Documentation/sparkline_example.png) ## Create a Sparkline 1. Drag a [Query Data block](/documentation/docs/define-a-query-data-block) to your workspace. 2. Drag a Data Frame Control to your workspace, and connect the Query Data block as input to the Data Frame Control. > [!NOTE] > **NOTE**: The Data Frame Control object will not appear when you view the dashboard. ![](https://cdn.document360.io/87d11426-6b1f-4b19-b593-b71e55a81af3/Images/Documentation/dataframe_80.png) 3. If you are using SysTrack Version 7.2 or lower follow instructions in the topic [Defining a Data Frame Control](/documentation/docs/define-a-data-frame-control). If you are using SysTrack 8.0 or above, in the **Mode** field select Transpose. ![](https://cdn.document360.io/87d11426-6b1f-4b19-b593-b71e55a81af3/Images/Documentation/dataframe_trans_concat.png) 4. Select a **Frame Column** from the drop-down list (the columns are defined in a visualization object, such as the grid in the example above). The **Frame Column** is the index column around which the data will be transformed. 5. Specify **Value Columns**. This is the column whose values will be concatenated or placed into a series of columns. Select a **Value Column** from the drop-down list. 6. To add another **Value Column**, click the **Add Value Column** button to select another value column. Repeat this step for each **Value Column** you wish to add. 7. When you are done, click the **Apply** button. 8. [Add a Grid block to your workspace](/documentation/docs/define-a-grid) and connect it to the Data Frame Control so that the Data Frame's output is the input to the grid. The grid presents the information you wish to use in a Sparkline in a vertical fashion with one record or row for each time stamp. In the example shown above, there a time stamp record for each unique application, and every record has one value for **I/O** and one value for **Memory**. 9. In the Grid block's **Column Properties** section, select one of the columns to be used for the Sparkline, (**I/O**in the example below) ![](https://cdn.document360.io/87d11426-6b1f-4b19-b593-b71e55a81af3/Images/Documentation/grid_properties_sparkline.png) 10. Select the **Sparkline type** from the drop-down list. 11. Repeat steps 4 - 7 for each Sparkline column you wish to display in the grid. 12. Click the **Apply** button to save your changes.