Alternative Grid type. Supports formatting, conditional highlighting, sorting, grouping, and search. It also supports Excel downloads ,sparkline charts within cells, and has a different look and feel than the basic grid type.
Display & Formatting
| Field | Interpretation |
|---|---|
| Title Font Color | Set the title font color of the widget |
| Title Font Size | The default title font size is 14px. |
| Font size | To set the size of the font |
| Font color | To set the color of the font |
| Grid line thickness | Grid line thickness value |
| Cell Padding | Padding of cell content |
| Data Format | Formatting for one or more fields |
Auto Scale (Sizing) |
This turns the proportions of the grid from absolute sizing to a variable based on the size of the container. This will make the font sizes, row, and column height/widths based on the container, not an absolute pixel size. It ensures that anybody viewing the grid can see the same regardless of screen size. For example, if one screen size displays 5 records, the same 5 records will show in a smaller screen size, and the ratio of the column widths will be the same. The footer size ratio may also need to be adjusted. |
Column and Header Settings
| Field | Interpretation |
|---|---|
| Header Background Color | Defaults to dark blue |
| Header Font Color | Defaults to black |
| Header Height | Height of header |
| Minimum Column Width | To enable horizontal scroll instead of fitting the grid into the viewport |
| Column Ordering | Column Ordering |
| Hide Column | To hide the column from the grid |
| Reset Column Width | Reset each column width to the default |
| Disable Click to Sort | When checked, the grid does not sort when the user clicks on a column |
| Merge cells with same values | When checked, it merges the cells that have the same value |
| Column Lines | When checked, it shows the column's vertical divider lines |
Note: The data grid widget displays a maximum of 256 columns in the grid view. However, this does not affect the underlying data. All available columns can still be accessed in the Analyze tab, and the full set of columns will be included when exporting the widget to Excel.
Column/Header Formatting Options:
The conditional formatting on columns is based on the values in the grid.
Users can customize the columns by applying the desired options to click on the ellipsis icon (three-dot) on each column of your datagrid.
Sort
| Ascending: Select this to sort the column data from the lowest value to the highest. |
| Descending: Select this to sort the column data from the highest value to the lowest. |
| Default: Select to reset by default |
Align Header
| Left: Select this to align the column header on the left side |
| Right: Select this to align the column header on the right side |
| Center: Select this to align the column header on the center |
Align
| Left: Select this to align the column data on the left side |
| Right: Select this to align the column data on the right side |
| Center: Select this to align the column data on the center |
Format
|
Format cells: This allows you to format each column by:
|
|
Conditional Formatting: This allows you to customize each column on the datagrid to highlight it differently based on your selection. You can also set the gradient color by applying the code values. Read more here.
|
| Text Wrap: Select this to continue on the text on the next line within the same text box or if it should overflow outside the box. |
Show Column stats
| Select this to view statistical information about the data in each column. |
Pin Columns
| Select this to freeze or lock a particular column so that it remains visible on the screen even when scrolling horizontally |
Conditional Formatting
Users can set the Gradient condition type for the data grid for a gradient effect on the data grid graph. There is an option to set the minimum and maximum gradient values, which also accepts an auto-defined value. Users can also set the minimum, middle, and max colors and font colors. The row level checkbox can be checked to apply the formatting for the row.
Users can set the Percentile condition type on the data grid to apply a color based on percentiles. This allows them to set conditions using operators such as greater than, less than, greater than or equal to, and less than or equal to, with a selectable percentile value between 1 and 99 (e.g., the 99th percentile). Additionally, enabling the row-level checkbox allows the formatting to be applied across the entire row.
Conditional formatting in the data grid now supports referencing other columns in the condition logic. This means you are no longer limited to comparing a column's value against a static number. Instead, you can dynamically reference another field to apply formatting based on column-to-column comparisons.
The Apply to Column Position checkbox locks the formatting to the column’s position.
For example, if it is applied to column number 3, the formatting stays with that position. Once enabled, you can rename the column without losing its formatting. If a new column is moved into position number 3, it will inherit the formatting from the column that originally occupied that space.
Row Settings
| Field | Interpretation |
|---|---|
| Color of Odd Rows | Default to white |
| Color of Even Rows | Default to white |
| Row Height | The height of each row in the grid |
Aggregation and Grouping
| Field | Interpretation |
|---|---|
| Aggregation | Aggregation for group |
| Grouping | Grouping by some parameters |
| Aggregation on top | Check to show aggregation on top |
Widget Menu
| Field | Interpretation |
|---|---|
| Show Title | Show Title on Widget |
| Analyze | Show Analyze menu |
| Alerts | Show Alert icon |
| Filters | Show Filter icon |
| Drilldowns | Show Drilldowns menu |
| Query | Show Query menu |
| Data/Export | Show Data/Export menu |
| Data Diagram | Show Data Diagram |
| Share | Show Share menu |
| Refresh | Show Refresh menu |
| Maximize | Show Maximize menu |
| Remove from Dashboard | Show Remove from the Dashboard menu |
Advanced Configuration
| Field | Interpretation |
|---|---|
| Scroll Limit | Scroll paging; default is 1000 records |
| Internal Sparkline Charts | Allows you to create charts within cells to see trends |
| Change Dataset | Change to a different dataset |
| On Click Event Handler | Define custom javascript behavior when a point is clicked |
Creating Sparklines: To create a sparkline within a chart, your data must first be in array format.
If your data is not in array format, you can use the ARRAY() function in Cloud9QL. You can add an array function via Settings > Data Transformation > Add Function.
In the examples below, we have illustrated adding the array formats for six different visualizations, including line, area, bar, spine, and more.
Line Visualization: Click the +Add Function button to add an array format for a line visualization.
Area Visualization: Click the +Add Function button to add an array format for an area visualization.
Bar Visualization: Click the +Add Function button to add an array format for a bar visualization.
Spline Visualization: Click the +Add Function button to add an array format for spline visualization.
Spline Area Visualization: Click the +Add Function button to add an array format for spline area visualization.
Pie Visualization: Click the +Add Function button to add an array format for a pie visualization.
Once your data is in array format, you can turn your data into sparklines via settings.