Data Grid Formats

1: Overview

Customize your Data Grid to display data clearly and meaningfully. After you set up rows and columns, apply formats to enhance how values are presented.

The Data Grid includes four default formats:

• Percent

• Chart

• Difference

• Hierarchy

To edit a format, click the wrench icon. Each format supports the following options:

• Background color formatter

• Text color formatter

• Number formatter

2: Percent

Use the Percent format to display values as percentages instead of raw numbers.

To apply a percent format:

1. Click the edit widget icon.

2. Under Columns, select the percent icon.

3. In the Break By field, select a variable.

4. Choose how to display percentages:

Vertical percents to show column percentages

Horizontal (Row) Percents:

3: Charts

Use Charts to display inline visualizations within each cell.

To add a chart:

• Click the edit widget icon.

• Under Columns, select the chart icon.

• Select a chart type.

4: Bar Charts

1. Select Bar chart from the list.

2. Set Min, Max, and Target values as needed.

3. Use Background Format to control positive and negative colors.

5: Bar Direction:

• Left to Right (default): bars grow from left to right.

• Diverge from zero: bars start at zero and extend left or right based on value.

• Right to Left: bars grow from right to left.

Use existing formatters to handle positive / negative colours

When using Diverge from zero, the axis is fixed at zero and values extend in both directions. A dotted zero line helps distinguish it from the target.

	
widget dataGrid #dataGridWidget {  
    label: "Data Grid" 
    size: "large" 
    column #column { 
      cell microchart #cell { 
        value: average(numeric(:OSAT)) 
        microchart bar #barMicrochart { 
          min: -10 
          max: 10 
          barDirection: fromZero //The new property. Default is leftToRight, which is current behaviour 
        } 
        target: 7 
      } 
    } 
    row cut #row { 
      value: :claimsCenter 
    } 
  } 
			

6: Line Charts

A Line Chart, also known as a line plot or line graph, displays information as a series of data points connected by straight lines. It's a common chart type used to show trends and is widely used across many fields.

1. From the drop-down menu, select "Line Chart".

2. Click in the "Break By" field and pick a variable from the drop-down menu.

7: Stacked bar chart

A Stacked Bar Chart can present multiple sets (series) of categorical data in each bar or stack, with the bar element lengths being proportional to the data values.

The 100% Stacked Bar Chart displays multiple sets (series) of data as stacked bars, and the cumulative proportion of each stacked element always totals 100%.

1. From the drop-down menu, select "Stacked bar chart" or "Stacked bar chart (100%").

2. Click in the "Break By" field and pick a variable from the drop-down menu.

8: Difference

The Difference format allows you to incorporate reporting periods, thereby providing a visual comparison of time periods.

1. Click the edit widget icon.

2. Choose a variable for the "value" field.

3. Click the Difference icon.

Following this, two new columns will appear in the data grid.

9: Properties

Click the wrench icon to configure the properties.

9.1: Compare With Field

The "Compare With" field is where you will perform most of the setup. Once you have selected an option from this field, positive and negative changes are depicted with up and down arrows. The following options can be selected without further configuration:

• Previous period

• Year-over-Year

• Include All Data

9.2.1: Days

By selecting this option, you are given the following choices:

Compare with days

9.2.2: Weeks

By selecting this option, you are given the following choices:

Compare with weeks

Click either of arrows to change the calendar week:

Changing the calendar week

9.2.3: Months

By selecting this option, you are given the following choices:

Compare with months

You can change the Month/Year in the drop-down.

9.2.4: Quarters

By selecting this option, you are given the following choices:

Compare with quarters

You can change the quarter/year in the drop-down.

9.2.5: Years

By selecting this option, you are given the following choices:

Compare with years

You can select the Calendar year in the drop-down.

9.2.6: Custom

By selecting this option, you are given the following choices:

Compare with custom

By clicking inside the "From" and "To" fields, you can select custom dates. Clicking the month/year at the top of the calendar lets you quickly make changes.

Selecting custom dates

Note

If you leave either field empty the range will be open ended.

10: Hierarchy

1. Click the edit widget icon.

2. Under "Columns," click the Hierarchy button.

3. Choose a Hierarchy from the drop-down menu.