Alternative Grid type. Supports formatting, conditional highlighting, sorting, grouping, and search. 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 variable based on the size of the container. This will make the font sizes, row and column height/widths all based on the container and not an absolute pixel size. It ensures that anybody viewing the grid can see the same thing regardless of screen size. For example, if one screen size is displaying 5 records, the same 5 records will show in a smaller screen size and the ratio of the column widths would 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 default |
Column/Header Formatting Optons:
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.
| Option | Formatting/Description: |
| 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 - Number - Currency - Date - Percentage - HTML - Array |
|
Conditional Formatting: This allows to you customize each column on the datagrid so that it can be highlighted differently based on your selection. You can also set the gradient color by applying the code values.
|
|
| 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 they remain visible on the screen even when scrolling horizontally |
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 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 on the +Add Function button to add an array format for a line visualization.
Area Visualization: Click on the +Add Function button to add an array format for an area visualization.
Bar Visualization: Click on the +Add Function button to add an array format for a bar visualization.
Spline Visualization: Click on the +Add Function button to add an array format for spline visualization.
Spline Area Visualization: Click on the +Add Function button to add an array format for spline area visualization.
Pie Visualization: Click on 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.