Customizing Dashboard Charts
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: |
Horizontal Bar Chart: |
|
|
Line Chart: |
Area Chart: |
|
|
Pie Chart: |
Gauge Chart / Pie Chart with Gauge: |
|
|
Scatter Plot Chart: |
Bubble Chart: |
|
|
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 |
|
Changes the title in the chart itself (to show within exports, etc.). |
|
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 #). |
|
Changes the background color of a chart. |
|
Controls the minimum value set on the x-axis of the chart. |
|
Controls the maximum value set on the x-axis of the chart. |
|
Controls the minimum value set on the y-axis of the chart. |
|
Controls the maximum value set on the y-axis of the chart. |
|
Changes bar charts to be stacked. |
|
Change column charts to be stacked. |
|
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 '. |
|
Enables / disables the chart legend. |
|
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). |
|
Enables datalabels (the visible values for any point) with. |
|
Sets CSS styling properties for datalabels. |
|
Slants data labels to degree specified. |
|
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:
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:
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:
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 givenscatter.pointlabel "value"
- displays the x and y values and the respondent countscatter.pointlabel "both"
(orunspecified
) - 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.
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.
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
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'
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 thegauge
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
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
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
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
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 theimage
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. Thecond
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"
What's Next for Creating a Dashboard?
The following articles describe additional features that you can apply to your dashboard charts: