Use Case
The client wants to see the percentage breakdown of their three customer satisfaction questions, regarding price, product quality, and overall satisfaction. Ideally these would be arranged in a way that would make it apparent how price and quality satisfaction contribute to satisfaction overall.
Report
Code
{|SHOWIF|OUTPUT_MODE=|EVALCONST(KNICKERS_OUTPUT_STANDARD)|}{DATATYPES.CONTROLS_START}
{DATATYPES.DEFAULT_DATE_FILTERS}
{DATATYPES.CONTROLS_END}{/|SHOWIF|}
<div class='results'>
{|VANISHIF|COUNT(DATATYPES.SHOW_DATATYPE)}
<div class='ui-state-highlight no-data'><p>No data was found to display</p></div>
{/|VANISHIF|}
{|SHOWIF|COUNT(DATATYPES.SHOW_DATATYPE)}
{|HIGHCHARTS|}
{
"chart":
{
"type": "pie",
"height": 600,
"width": 800
},
"title":
{
"text": "Customer Satisifaction Ratings",
"style": {"font-size": "3 EM", "font-weight": "bold"}
},
"colors":["#7A40FF", "#196C99", "#916499", "#CC5E65", "#CC9D1F"],
"credits": { "enabled": false },
"plotOptions":
{
"pie": {
"startAngle": 0,
"endAngle": 90,
"center": ["5%", "85%"],
"shadow": {
"offsetX": -0,
"offsetY": 2,
"opacity": 0.2,
"color": "#000000",
"width": 3
},
"tooltip": {
"valueSuffix": "%",
"shared": true
}
}
},
"legend": {
"enabled": false,
"align": "right",
"verticalAlign": "top",
"layout": "vertical",
"x": 10
},
"series":
[
{
"data": [{ "name": "Overall" }],
"startAngle": 0,
"shadow": false,
"size": 800,
"innerSize": 550,
"enableMouseTracking": false,
"dataLabels": {
"rotation": -90,
"distance": -65,
"x": -5,
"style": {
"color": "#081930",
"fontWeight": "bold",
"fontSize": "1.2em"
}
}
},
{
"type": "pie",
"name": "Overall",
"size": 800,
"innerSize": 550,
"zIndex": 2,
"data":
[
{|RESULT|}
{|LOOP|RESULT.CLIENT_55_SURVEY_1238_QUESTION_71}
[
#label for pie slice - HC_SAFE_STRING handles escaping quotes
"{CLIENT_55_SURVEY_1238_QUESTION_71.NAME.HC_SAFE_STRING}",
#actual data - HC_SAFE_NUMBER handles null values
{COUNT(CLIENT_55_SURVEY_1238_QUESTION_71).HC_SAFE_NUMBER}
]{LOOP.HASNEXT?,}
{/|LOOP|}
{/|RESULT|}
]
},
{
"data": [{ "name": "Prices" }],
"startAngle": 0,
"shadow": false,
"size": 550,
"innerSize": 300,
"enableMouseTracking": false,
"dataLabels": {
"rotation": -90,
"distance": -65,
"x": -5,
"style": {
"color": "#081930",
"fontWeight": "bold",
"fontSize": "1.2em"
}
}
},
{
"type": "pie",
"name": "Prices",
"dataLabels": { "enabled": false },
"size": 550,
"innerSize": 300,
"zIndex": 1,
"showInLegend": 1,
"data":
[
{|RESULT|}
{|LOOP|RESULT.CLIENT_55_SURVEY_1238_QUESTION_81}
[
#label for pie slice - HC_SAFE_STRING handles escaping quotes
"{CLIENT_55_SURVEY_1238_QUESTION_81.NAME.HC_SAFE_STRING}",
#actual data - HC_SAFE_NUMBER handles null values
{COUNT(CLIENT_55_SURVEY_1238_QUESTION_81).HC_SAFE_NUMBER}
]{LOOP.HASNEXT?,}
{/|LOOP|}
{/|RESULT|}
]
},
{
"data": [{ "name": "Quality" }],
"startAngle": 0,
"shadow": false,
"size": 300,
"innerSize": 0,
"enableMouseTracking": false,
"dataLabels": {
"rotation": -90,
"distance": -65,
"x": -5,
"style": {
"color": "#081930",
"fontWeight": "bold",
"fontSize": "1.2em"
}
}
},
{
"type": "pie",
"name": "Quality",
"dataLabels": { "enabled": false },
"size": 300,
"innerSize": 0,
"zIndex": 1,
"showInLegend": 1,
"data":
[
{|RESULT|}
{|LOOP|RESULT.CLIENT_55_SURVEY_1238_QUESTION_91}
[
#label for pie slice - HC_SAFE_STRING handles escaping quotes
"{CLIENT_55_SURVEY_1238_QUESTION_91.NAME.HC_SAFE_STRING}",
#actual data - HC_SAFE_NUMBER handles null values
{COUNT(CLIENT_55_SURVEY_1238_QUESTION_91).HC_SAFE_NUMBER}
]{LOOP.HASNEXT?,}
{/|LOOP|}
{/|RESULT|}
]
}
]
}
{/|HIGHCHARTS|}
{/|SHOWIF|}
</div>
CSS
@import "themeroller/jquery.ui.all.css";
@import "chrome.theme.css";
@import "chrome.layout.css";