Customizing Dashboard Charts

Zuletzt aktualisiert
Als PDF speichern

This article contains information on advanced customization for dashboard charts, including instructions for setting chart types, colors, and advanced data views.

Overview

There are many different options within dashboards for using charts and changing their overall look and feel. This article outlines some of the most commonly used charts and the customization options available for them.

1: Selecting a Chart Type

The default chart type within dashboards is a bar graph, but charts are dynamic and can be reset using the keyword type. Using type, you can set a chart to appear as any one of the following base chart types:

Vertical Bar Chart: `column`	Horizontal Bar Chart: `bar`

Line Chart: `line`	Area Chart: `area`

Pie Chart: `pie`	Gauge Chart / Pie Chart with Gauge: `gauge`

Scatter Plot Chart: `scatter plot`	Bubble Chart: `bubble`

Example:

table Gender of Respondents
   rows Q1.r1 Q1.r2
   chart
       type line

2: Customizing Charts

2.1: Setting Chart Colors

By default, the color selection uses the following colors:

The keyword palette configures the default color palette used for banner segment colors in charts and pie slices. Color codes follow the standard hexadecimal character format without the preceding hash (#) per code. When a chart needs more colors than specified, the coloring will restart from the beginning.

palette <color> <color> …

Note: hexadecimal characters should NOT be prefixed with a hash (#) when referenced in the dashboard editor, as the system will interpret any text following the hash as a comment.

Example:

chart Gender of Respondents
   rows Q1.r1-r2
   palette 000000 cccccc

Note: The palette keyword can use up to 10 colors as arguments.

2.2: Style Options

The keyword chartopt adds customization to the chart including a chart title, background color, axis scale, segment stacking, chart legend, data labels, data label rotation and axis styling.

chartopt <option> <value>

The chartopt keyword can be used to even further customize dashboard charts. Using the system's syntax with the available options from the Highcharts API, you can modify a chart's look and feel, CSS style, size, and display attributes.

Some of the most commonly used chartopt functions are listed below with descriptions on how to use them.

Attribute Name	Description
`title.text`	Changes the title in the chart itself (to show within exports, etc.).
`title.style.color`	Changes the color of the chart title. You can use the name of any color that can be defined with CSS, or use the hex value (without the #).
`chart.backgroundColor`	Changes the background color of a chart.
`xAxis.min`	Controls the minimum value set on the x-axis of the chart.
`xAxis.max`	Controls the maximum value set on the x-axis of the chart.
`yAxis.min`	Controls the minimum value set on the y-axis of the chart.
`yAxis.max`	Controls the maximum value set on the y-axis of the chart.
`yAxis.stackLabels.enabled`	Changes bar charts to be stacked.
`plotOptions.column.stacking`	Change column charts to be stacked.
`plotOptions.column.dataLabels.color`	Changes the color of the column headers in a chart.
`plotOptions.series.animation`	Enables / disables the initial animation when a series is displayed. Possible values are `1` and `0`.
`plotOptions.series.animation.duration`	Controls the duration of a series' animation in milliseconds.
`plotOptions.series.animation.easing`	A string reference to an easing animation function. Set to '`easeOutBounce`'.
`legend.enabled`	Enables / disables the chart legend.
`legendPrecision`	If the chart legend is enabled, sets the precision for the legend. The count equals the number of decimal places displayed for a label. Valid values are 0 - 20 (by default, this option is set to 0).
`plotOptions.series.dataLabels.enabled`	Enables datalabels (the visible values for any point) with.
`plotOptions.series.dataLabels.style`	Sets CSS styling properties for datalabels.
`plotOptions.series.dataLabels.rotation`	Slants data labels to degree specified.
`(x\|y)Axis.labels.style`	Sets general style using CSS properties for each axis label.

3: Data Options

There are a variety of data display options available when creating a dashboard chart. Here, you can find information on specifying units of measurement, plotting multiple sets of data, adding bases, and even how to show a grid question directly within a chart.

3.1: Specifying the Unit of Measurement for Datapoints

You have the ability to specify the unit of measurement for data points in your dashboard chart. There are different attributes and measurement units available, depending on whether you are using non-numeric or numeric datapoints.

Note: When specifying a unit of measurement, make sure that the dashboard's Compat is set to level 2+.

3.1.1: Non-Numeric Data Points

The default unit of measurement for non-numeric input data is a percentage (pct). If you would like to use a different unit of measurement for non-numeric data, you can use the chart.data attribute to specify one of the following alternatives:

count - This will show the overall response count (n=xxxx) of the datapoint.
hpct - This will display horizontal percentages, instead of the default vertical percentages.
effbase - This will show the effective base of the data point when weighting is applied.

Example:

chart Chart with Counts
chart.data count
type bar
rows q1.r5-r10

The code above would create a table similar to the below, where each bar is labeled with total counts, instead of percentages:

=2015-09-14_1017.png

Tip: You can access this information on a dashboard when you click on the “Quick Reference” link located in the top-left corner of the dashboard editor.

3.1.2: Numeric Datapoints

The default unit of measurement for numeric input data is the mean (mean) of the data. If you would like to use a different unit of measurement for numeric data, you can use the chart.stat attribute to specify one of the following alternatives:

stddev - This will show the standard deviation of the datapoint.
median - This will show the median of the datapoint.
sum - This will show the sum of the datapoint.
stderr - This will show the standard error of the datapoint.
count - This will show the count of the datapoint.
pct - This will show the percentage of the datapoint.

Example:

chart
chart Things Owned
chart.stat stddev
type bar
rows q6.r1-r4

Tip: You can access this information on a dashboard when you click on the “Quick Reference” link located in the top-left corner of the dashboard editor.

3.2: Plotting Two Sets of Data

It is possible to plot two sets of data on a single chart, but you must first program each set of data into a separate chart.

Note: When combining data sets, there are no restrictions to the chart type or Compat level; however, for best results, it is recommended that you use a line chart when combining two sets of data.

Once you have each set of data programmed into its own chart, you can use the following steps to combine the two sets of data into a single chart:

Set the attribute hide=1 on the first chart.
Set the attribute combineWith=xxxx on the second chart where "xxxx" is the ID of the hidden chart.

Note: For line charts, add chartopts chart.alignTicks false to the dashboard syntax (if you do not set this attribute on a line chart, the datapoints will stack on top of each other).

Example:

chart id=5 hide=1 "Counts"
   type line
   chart.data count
   chartopts chart.alignTicks false
   chart.stat formula
   stats formula
   formula (mean / 5) * 100
   row q8.r1.c1
   row q8.r2.c1
   row q8.r3.c1
   row q8.r4.c1
   row q8.r5.c1
   banner.local
       segment "q4.r1" "Car Salesman Q8"
       segment "q4.r2" "Architect Q8"

chart id=6 combinewith=5 "Q8/Q9 Combined Data"
   type line
   chart.data count
   chartopts chart.alignTicks false
   chart.stat formula
   stats formula
   formula (mean / 5) * 100
   row q9.r1.c1 "Row 1"
   row q9.r2.c1 "Row 2"
   row q9.r3.c1 "Row 3"
   row q9.r4.c1 "Row 4"
   row q9.r5.c1 "Row 5"
   banner.local
       segment "q4.r1" "Car Salesman Q9"
       segment "q4.r2" "Architect Q9"

Note: The first chart must have an id and be defined before the chart that uses "combineWith". The “hide=1" attribute will only work on a chart that is combined with another.

The code above would produce the line chart below:

=plot_data.png

There are some limitations and additional considerations when combining data sets in a chart. See below for details:

Local banner groups and local filter groups with drop-down menus are not supported in charts using multiple data sources.
Charts with multiple data sources cannot be exported, and will only be available within the dashboard itself.
Due to the overall complexity of this functionality, it is not recommended to use multiple data sources when chart stacking or when using NPS charts.
Only two charts can be combined at one time.

3.3: Adding Bases Within a Chart

It is possible to add the base (count) of a datapoint within a chart. The keyword showbase allows you to add the base below a bar or column in its chart.

Note: When using the showbase keyword make sure that the dashboard's Compat is set to level 2+.

To enable the base display, you would need to set showbase 1. When showbase is enabled, “N=XXX” displays below the bar or column where XXX is the total base for the column/bar.

Note: The NPS add-on automatically shows the base if chart.data is set to "count".

Example:

chart Chart Showing Base
showbase 1
type column
rows q1.r5-r10

This produces the following results:

=2015-09-14_1058.png

3.4: Displaying a Grid Question Within a Chart

It is possible to display a grid question within a single table or chart using the conds attribute. To create this display, you would need to define multiple conditions on each row that corresponds to a segment.

Note: For a chart, each row renders as a stacked bar and the columns render in the relative color for each stacked bar.

Example:

chart Rating
type column
banner.local
segment q3.r1.any "Availability"
segment q3.r2.any "Speed"
segment q3.r3.any "Stability"
transpose
row conds="q3.c1.r1, q3.c1.r2, q3.c1.r3" q3.c1.any Poor
row conds="q3.c2.r1, q3.c2.r2, q3.c2.r3" q3.c2.any Fair
row conds="q3.c3.r1, q3.c3.r2, q3.c3.r3" q3.c3.any Good
row conds="q3.c4.r1, q3.c4.r2, q3.c4.r3" q3.c4.any Excellent
chartopt plotOptions.column.stacking 'normal'

Once run, your chart would appear per the below, where each option appears as a different color within its appropriate segment (column):

4: Adding Specialized Chart Types

Along with the basic chart types, you have the option to create specialized chart types with more refined data options. Scatter plot and bubble charts are particularly useful in determining the relationship between datapoints.

Note: There is no export support for any of the specialized chart types, so data for these will only be available within the dashboard itself.

4.1: Displaying a Scatter Plot Chart

It is possible to build a scatter plot chart to display values for multiple variables for a set of data.

Note: When creating a scatter plot be sure that the dashboard's Compat is set to level 3+.

When displaying a scatter chart, you will need to define the following attributes:

type scatter
numeric rows for the X and Y axis
region attribute that specifies the color, coordinates for the polygon areas, and name (optional)

Note: If you want just the area highlighted, you can omit the region name. Un-named regions are not shown in the legend.

You can also specify the datapoint display details using the following attributes:

scatter.pointlabel "text" - displays only the text given
scatter.pointlabel "value" - displays the x and y values and the respondent count
scatter.pointlabel "both" (or unspecified) - displays both labels and values

Additionally, you can specify 'scatter.centered 1' (on its own line) to center the chart on the x/y axis (point 0,0).

Example:

chart Scatter Chart
   bannergroup.local
       banner.local By Gender
           segment GENDER.r1 Male
           segment GENDER.r2 Female
   filtergroup.local Gender
       filter.local id=db-2 GENDER.r1 Male
       filter.local id=db-3 GENDER.r2 Female
   type scatter
   width 6
   chartopt xAxis.allowDecimals false
   chartopt xAxis.gridLineWidth 0
   chartopt xAxis.startOnTick true
   chartopt xAxis.endOnTick true
   chartopt xAxis.tickInterval 1
   chartopt xAxis.min -1
   chartopt xAxis.max 12
   chartopt yAxis.allowDecimals false
   chartopt yAxis.gridLineWidth 0
   chartopt yAxis.startOnTick true
   chartopt yAxis.endOnTick true
   chartopt yAxis.tickInterval 1
   chartopt yAxis.min -1
   chartopt yAxis.max 12
   
   # Red/Green areas. Created by polygon with these coordinates
   region "Red" #00FF00 0,0 999,999 0,999
   region "Green" #FF0000 0,0 999,999 999,0
   
   stats count
   stats.prec 3
   # X Axis, numeric row
   row PRODUCT_PURCHASED_COUNTS.r1.val "Primary Bank Purchased Products"
   # Y Axis, numeric row
   row PRODUCT_PURCHASED_COUNTS.r2.val "Alternative Bank Purchased Products"

Note: In above example, the chartopt customizations are for presentation purposes only and can be removed.

As shown in the resulting chart below, you can hover over a datapoint to see its details. You can also click on a datapoint to drill-down into the responses report showing the respondents that comprise the point.

=2015-11-20_0926.png

4.2: Displaying a Bubble Chart

A bubble chart is defined similarly to a scatter chart but in the display, the size of the data point (bubble) reflects the number of respondents that comprise the point.

Note: When creating a bubble chart be sure that the dashboard's Compat is set to level 3+.

When displaying a bubble chart, you will need to define the following attributes:

type bubble
numeric rows for the X and Y axis
region attribute that specifies the color, coordinates for the polygon areas, and name (optional)

Note: If you want just the area highlighted, you can omit the region name. Un-named regions are not shown in the legend.

Additionally, you can specify 'scatter.centered 1' (on its own line) to center the chart on the x/y axis (point 0,0).

Example:

chart Bubble Chart
   bannergroup.local
       banner.local By Gender
           segment GENDER.r1 Male
           segment GENDER.r2 Female
   filtergroup.local Gender
       filter.local id=db-2a GENDER.r1 Male
       filter.local id=db-3a GENDER.r2 Female
   type bubble
   width 6
   chartopt xAxis.allowDecimals false
   chartopt xAxis.gridLineWidth 0
   chartopt xAxis.startOnTick true
   chartopt xAxis.endOnTick true
   chartopt xAxis.tickInterval 1
   chartopt xAxis.min -1
   chartopt xAxis.max 12
   chartopt xAxis.plotLines function () { return [{color: "'#C0C0C0'", width: 1, value: 5}, {color: "'#C0C0C0'", dashStyle: "'LongDash'", width: 1, value: 0}]; })(
   chartopt yAxis.allowDecimals false
   chartopt yAxis.gridLineWidth 0
   chartopt yAxis.startOnTick true
   chartopt yAxis.endOnTick true
   chartopt yAxis.tickInterval 1
   chartopt yAxis.min -1
   chartopt yAxis.max 12
   chartopt yAxis.plotLines function () { return [{color: "'#C0C0C0'", width: 1, value: 5}, {color: "'#C0C0C0'", dashStyle: "'LongDash'", width: 1, value: 0}]; })(
   
   # Red/Green areas. Created by polygon with these coordinates
   region #00FF00 0,0 999,999 0,999
   region #FF0000 0,0 999,999 999,0
   
   stats count
   stats.prec 3
   # X Axis, numeric row
   row PRODUCT_PURCHASED_COUNTS.r1.val "Primary Bank Purchased Products"
   # Y Axis, numeric row
   row PRODUCT_PURCHASED_COUNTS.r2.val "Alternative Bank Purchased Products"

As shown in the resulting chart below, you can hover over a datapoint to see its details. You can also click on the datapoint to drill-down into the responses report showing the respondents that comprise the point.

=2015-11-19_1611.png

4.3: Displaying a Gauge Chart

Using the gauge type, point, and sections attributes, you can create a chart showing an angular gauge where sections are the plotBands (regions) of the chart, and point becomes the needle of the gauge.

Note: When creating a gauge chart be sure that the dashboard's Compat is set to level 3+.

Benefits of using gauge:

You can specify the regions by simply providing a range of numbers

Limitations:

No banner support
A gauge chart has the dials hidden below the chart. You may need to make axis adjustments via the dashboard syntax

Example #1:

chart width=6 "Gauge Chart (Basic)"
 type Gauge
 # the "needle" of the gauge
 point NPSSCORE.val "NPS"
 sections 0-25 25-75 75-100

=typegauge1.png

Example #2:

chart width=6 "Gauge Chart (customized)"
 type gauge
 point NPSSCORE.val "Score"
 sections 0-100 100-175 175-225 225-250
 palette 00FF66 FFFF66 FF9966 FF0000
 chartopt yAxis.min 0
 chartopt yAxis.max 250
 chartopt pane.startAngle -150
 chartopt pane.endAngle 150
 chartopt plotOptions.series.animation.duration 2000
 chartopt plotOptions.series.animation.easing 'easeOutBounce'

=typeguage2.png

4.3.1: Gauge Chart Options

The following options are available for customizing your gauge chart display:

benchmark - displays the point label(s) and benchmark label above/outside the gauge chart.
gauge.thickness - the specified value defines the thickness of each section.

Example - Benchmark Gauge:

chart "Benchmark Gauge"
       type gauge
       point q2.r1 "Blue"
       sections 0-20 20-40 40-60 60-80 80-100
       benchmark 40 "Benchmark"
       width 4

=2015-12-08_1019.png

Example - Benchmark Gauge Thick:

chart "Benchmark Gauge Thick"
       type gauge
       point q2.r1 "Blue"
       sections 0-20 20-40 40-60 60-80 80-100
       benchmark 55 "Spot"
       gauge.thickness "40%"
       width 4

=2015-12-08_1024.png

Example - Fully Customized Gauge Chart:

chart id=db-12 width=6 "Expenditure Benchmark Rebranded"
       filtergroup.local
           filter.local id=db-13  q4.r1 McDonalds
           filter.local id=db-14  q4.r2 Burger King
           filter.local id=db-15  q4.r3 Subway
           filter.local id=db-16  q4.r4 KFC
           filter.local id=db-17  q4.r5 Dunkin Donuts
       type gauge
       palette FF0000 FF6600 FFFF00 66ff00 00FF00
       stats mean
       point q1.r2.val "Current"
       benchmark 60 "Target"      
 # define and style the "sections"
 sections 0-20 20-40 40-60 60-80 80-100
 chartopt yAxis.tickLength 25
 chartopt yAxis.tickPosition 'outside'
 chartopt yAxis.tickColor '#C0D0E0'
 #thickness of the sections
 gauge.thickness '35%'
  # hides the label below the needle
 chartopt plotOptions.series.dataLabels.enabled true
  # style the "needle"
 chartopt plotOptions.gauge.dial.baseLength '0%'
 chartopt plotOptions.gauge.dial.baseWidth 10
 chartopt plotOptions.gauge.dial.radius '95%'
 chartopt plotOptions.gauge.dial.rearLength '0%'
 chartopt plotOptions.gauge.dial.topWidth 1

5: More Chart Type Customizations

There are a number of additional options you have to further customize your specialized chart types. Two of the more popular customization options include adding a gauge or an image to a pie chart, and the setups for these options are outlined below.

5.1: Displaying a Pie Chart with a Gauge

A gauge uses the existing row functionality in a pie chart to create its regions and offers more control with region labeling. With gauge applied, the pie displays as a half circle when the chart is rendered and encounters a point option. Then the point value becomes the needle of the gauge.

Limitations:

No banner support
No export support
This type of gauge chart has the dials hidden below the pie chart. You may need to make axis adjustments via the dashboard syntax

Example #1:

chart width=6 "Pie Chart w/gauge (Basic)"
 type pie
 row base="NPSSCORE_BRAND.r6.val" "NPSSCORE_BRAND.r6.val" "First Direct"
 row base="NPSSCORE_BRAND.r9.val" "NPSSCORE_BRAND.r9.val" "Nationwide"
 row base="NPSSCORE_BRAND.r11.val" "NPSSCORE_BRAND.r11.val" "Post Office"
 row base="NPSSCORE_BRAND.r12.val" "NPSSCORE_BRAND.r12.val" "Royal Bank of Scotland"
 row base="NPSSCORE_BRAND.r21.val" "NPSSCORE_BRAND.r21.val" "Metro Bank"
 #the "needle" of the gauge
 point NPSSCORE.val "Satisfaction"
 chartopt labels.style.top -20
 chartopt labels.style.left 200

=2015-11-17_0924.png

If a row label is set to be blank (""), then the percentage and count are shown. The default maximum of the point is the total of all rows. For example, if the rows add up to 50, then 50 will be the max. The following examples show percentages and counts on the gauge chart instead of the row text.

Note: To show percentages and counts, you must use "row" instead of "rows" and you must have quotes with no text inside (empty quotes).

Example #2:

chart width=6 "Pie Chart w/gauge (customized)"
 type pie
 row base="NPSSCORE_BRAND.r6.val" "NPSSCORE_BRAND.r6.val" ""
 row base="NPSSCORE_BRAND.r9.val" "NPSSCORE_BRAND.r9.val" ""
 row base="NPSSCORE_BRAND.r11.val" "NPSSCORE_BRAND.r11.val" ""
 row base="NPSSCORE_BRAND.r12.val" "NPSSCORE_BRAND.r12.val" ""
 row base="NPSSCORE_BRAND.r21.val" "NPSSCORE_BRAND.r21.val" ""
 point NPSSCORE.val "NPS SCORE"
 chartopt yAxis.max 100

=2015-11-17_1013.png

5.2: Displaying a Pie Chart with an Image

You can display images in the center of a pie chart, and/or specify multiple images within a range and each image will display when the percentage range is met. This allows you to dynamically show/hide images based on a survey variable.

Note: When creating a pie chart with image be sure that the dashboard's Compat is set to level 2+.

To add an image to a pie chart, you will need to use the following keywords and attributes:

chartopt plotOptions.pie.innerSize 'xxx' - Hollows the center of the pie chart making room for the image by the percentage given.
image imagewidth='50' imageheight='xxx' https://v2.decipherinc.com/example.png - Specifies the image to use, sets the image size in pixels, and provides the path to a image that has been uploaded to a project.
cond="q1.r1" range='0-50' - Optional for dynamic images. The cond attribute provides the variable to check and returns its percentage value. If that value is within the range given, the image is shown; otherwise, it is hidden.

Example:

chart width=6  "Last Brand Experience"
     type pie
     chartopt plotOptions.pie.innerSize '60%'
     image imagewidth='50' imageheight='50' cond="q1.r1" range='0-50' https://v2.decipherinc.com/example.png
     image imagewidth='50' imageheight='50' cond="q1.r1" range='50-100' https://v2.decipherinc.com/example2.png
     row q1.r1 "Much better than expected"
     row q1.r2 "Better than expected"

=2016-01-27_1550.png

What's Next for Creating a Dashboard?

The following articles describe additional features that you can apply to your dashboard charts: