Creating Data Grid Summary Tables using CDL

Create summary tables using a two-step process in Studio. Transform grid data into two variables and use them in datagrid tables or charts.

Summary tables present a condensed view of multiple attributes and their values in a grid-like format. They serve as a convenient method of displaying a group of statements with shared answer categories.

Example of a Grid Summary table

Creating summary tables in Studio involves a two-step process.

Transform the grid data into two new variables by using the following code in the config hub section:

vtable split #summarytable {
source: survey:Q1Grid
}

The code will produce two new variables for the grid referred to by the name given to the table:

summarytable:field - contains the attribute statements (e.g. "Recognized needs", "Everything to Help", etc.)

summarytable:value - contains the answer categories or scale (e.g. a 10-point scale from "Not at all satisfied - 1" to "Very satisfied - 10").

Use the new variables in datagrid tables or charts as regular variables in columns or rows.

Example

To construct the summary table displayed using our newly created variables, follow this syntax:

    widget dataGridBeta {
    size:large
    label: "Grid Summary Tables Example"
    row cut {
      value: summarytable:field
    }
    column cut {
      value: summarytable:value
      cell {
        value: count(summarytable:)
        format:intFormat
      }
    }
    column {
      label: AVG {
        value: average(score(summarytable:value))
      }
    }
  }

Micro Charts

The code for setting the 100% stacked microcharts in the OSAT Breakdown column, linecharts in the OSAT Trend column, and microcharts in the Alerts Generated column in the illustration is provided as examples below.

    column #osat2 {
      label: "OSAT Breakdown"
	    cell microchart {
        value: count(survey:OSAT.1)
        breakdownBy cut {
          value: survey:OSatGroup
          }
        microchart stacked100PercentBar {
          valuePosition: inner
          palette:  @cr.palette3bar
          notAnswered: false
          showTool  true
        }
      }
    }

    column #osat3 {
      label: "OSAT Trend"
      cell microchart {
        value: @cp.Top3_OSAT_Percent
        breakdownBy date {
          value: survey:interview_start
          breakdownBy: calendarMonth
          start: "2016-07-01"
          end: "2017-10-31"
        }
        microchart line {
            min: 0
            max: 100
           color: #52B162
           showDots: false
        }
      }
    }

    column #alerts {
      label: "Alerts Generated"
      cell microchart {
        value: count(survey:AlertType)
        //format: pf
        target: 200
        microchart bar {
          max: 1000
          min: 0
          colorFormat: alertbarcolour
          valuePosition: outer
        }
      }
    }

Note

The properties in these code snippets apply only to the microchart columns.