<!-- BEGIN [% component.name %] -->
<div id="drilldown" style="min-width: 30%; max-width: 90%; height: 400px; margin: 0 auto"></div>
[% pointFormatURL = # can't deal with '/' in test name - dispatcher assumes it's an arg delimiter
"<div><a href=\"${app_url}/resources/incomplete_tests/{series.name}/{point.name}\">" _
'<span style="color:{point.color}">{point.name}</span>' _
'</a>: <b>{point.y}</b></div>';
%]
<script src="/js/drilldown.js"></script>
<script type="text/javascript">
$(function () {
// set overrides:
Highcharts.setOptions({
lang: {
drillUpText: '<< back to lab sections',
},
});
// Create the chart
$('#drilldown').highcharts({
chart: {
type: 'column'
},
title: {
text: false, // 'Lab sections'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'No. of tests'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
tooltip: {
useHTML: true,
formatter: function () {
var seriesName = this.series.name;
var pointName = this.point.name;
var pointValue = this.point.y;
if (seriesName == 'Lab section') {
return false; /* to suppress empty tooltip */
}
else {
return '<div style="font-size:12px"><b>'
+ seriesName + '</b></div><div>'
+ '<a href="[% app_url %]/resources/incomplete_tests?'
+ 'section=' + encodeURIComponent(seriesName) + ';'
+ 'investigation=' + encodeURIComponent(pointName)
+ '">' + pointName + '</a>: <b>' + pointValue
+ '</b></div>';
}
}
/* for use without formatter function, but can't disable 'Lab section'
enabled: {series.name} == 'Lab section' ? false : true,
useHTML: true,
headerFormat: '<div style="font-size:12px"><b>{series.name}</b></div>',
pointFormat: '[% pointFormatURL %]',
footerFormat: '',
*/
},
[% BLOCK series_data;
total = 0;
FOREACH test IN section.value;
total = total + test.value;
END;
id = section.key.replace(' ','-').lower;
%]
{
name: '[% section.key %]',
y: [% total %],
drilldown: '[% id %]'
},
[% END %]
series: [{
name: 'Lab section',
colorByPoint: true,
data: [
[% INCLUDE series_data
FOREACH section IN data.incomplete_section_tests %]
]
}],
[% BLOCK drilldown_series_data;
# '+' chars for html source readability
# omit trailing comma on data block for IE8-compatibility
%]
['[% test.key %]', [% test.value %]][% ',' UNLESS loop.last +%]
[% END %]
drilldown: {
series: [
[% FOREACH section IN data.incomplete_section_tests;
id = section.key.replace(' ','-').lower;
+%]
{
id: '[% id %]',
name: '[% section.key %]',
data: [
[% INCLUDE drilldown_series_data
FOREACH test IN section.value +%]
]
}[% ',' UNLESS loop.last # for IE8 +%]
[% END %]
]
}
});
});
</script>
<!-- END [% component.name %] -->
