Use Case
For each of their multi-choice questions, the client would like to see the count and percentage of shops where each answer option was selected. They would also like to a graphical representation of the answer breakdown for each question.
Report
Code
{|SHOWIF|OUTPUT_MODE=|EVALCONST(KNICKERS_OUTPUT_STANDARD)|}{DATATYPES.CONTROLS_START}
{DATATYPES.DEFAULT_DATE_FILTERS}
{DATATYPES.CONTROLS_END}{/|SHOWIF|}
<div class='results'>
{|VANISHIF|DATATYPES.SHOW_DATATYPE.TOTAL_COUNT}
<div class='ui-state-highlight no-data'><p>No data was found to display</p></div>
{/|VANISHIF|}
{|SHOWIF|DATATYPES.SHOW_DATATYPE.TOTAL_COUNT}
#loop each group for this datatype that is of the type "question_multichoice"
{|LOOP|DATATYPES.SHOW_DATATYPE.GROUPS(FILTER=type|eq|question_multichoice,SORT=ORDER_NUM)}
<div class='mc-question-results'>
#display a graph for each multi-choice question
{|RESULT|}
<div id="my-graph" class="mc-question-graph">
{|HIGHCHARTS|}
{
#graph title
"title": {
"text": "",
"x": -20
},
#graph should be 300x300 pixels
"chart": {
"height": 250,
"width": 200
},
#remove 'highcharts' label from graph
"credits": {
"enabled": false
},
"plotOptions": {
"pie": {
"allowPointSelect": true,
"cursor": "pointer",
"dataLabels":
{
"enabled": false,
"color": "#000000",
"connectorColor": "#000000"
},
"showInLegend": true,
"animation": false
}
},
#our actual data
"series":
[
{
"type": "pie",
"name": "Count",
"data":
[
{|LOOP|RESULT.DYNAMIC_GROUP(GROUP_ID=|EVALTAG(GROUPS.ID)|,SORT=ORDER_NUM)}
[
#label for pie slice - HC_SAFE_STRING handles escaping quotes
"{DYNAMIC_GROUP.NAME.HC_SAFE_STRING}",
#actual data - HC_SAFE_NUMBER handles null values
{COUNT(DYNAMIC_GROUP).HC_SAFE_NUMBER}
]{LOOP.HASNEXT?,}
{/|LOOP|}
]
}
]
}
{/|HIGHCHARTS|}
</div>
{/|RESULT|}
#display a table for each multi-choice question
<div class = 'mc-question-data'>
{|RESULT|}
<table class='mc-question-table' id='mc-question-{GROUPS.ID}'>
<thead>
<tr class="mc-question-header">
<th colspan="3">{GROUPS.NAME}</th>
</tr>
<tr>
<th>{|SORT_TOGGLE|DYNAMIC_GROUP.ORDER_NUM}Response{/|SORT_TOGGLE|}</th>
<th>{|SORT_TOGGLE|COUNT(DYNAMIC_GROUP)}Count{/|SORT_TOGGLE|}</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
{|LOOP|RESULT.DYNAMIC_GROUP(GROUP_ID=|EVALTAG(GROUPS.ID)|,SORT=ORDER_NUM)}
<tr>
<th>{DYNAMIC_GROUP.NAME}</th>
<td>{COUNT(DYNAMIC_GROUP)}</td>
#calculate the percentage out of all responses given for this question
<td>{PERCENTAGE(COUNT(DYNAMIC_GROUP), COUNT(DYNAMIC_GROUP,OVERALL)).ROUND}</td>
</tr>
{/|LOOP|}
</tbody>
</table>
{/|RESULT|}
</div>
</div>
{/|LOOP|}
{/|SHOWIF|}
</div>
CSS
@import "themeroller/jquery.ui.all.css";
@import "themeroller/jquery.ui.all.css";
@import "chrome.theme.css";
@import "chrome.layout.css";
.mc-question-graph
{
text-align: center;
width:20%
}
.mc-question-data
{
width:55%;
height: 255px;
}
.mc-question-graph,
.mc-question-data
{
float: left;
}
.mc-question-results
{
clear:both;
}
.mc-question-table
{
margin-top:3.5em;
}