<!-- BEGIN [% component.name %] -->
<div id="drilldown" style="min-width: 30%; max-width: 90%; height: 400px; margin: 0 auto"></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: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
},
series: [{
name: 'Lab section',
colorByPoint: true,
data: [
[% FOREACH section IN data.incomplete_section_tests;
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 %]
]
}],
[% BLOCK format_data %]
[ '[% test.key %]', [% test.value %] ][%- END -%]
drilldown: {
series: [
[% FOREACH section IN data.incomplete_section_tests;
id = section.key.replace(' ','-').lower;
%]
{
id: '[% id %]',
name: '[% section.key %]',
data: [
[% FOREACH test IN section.value;
INCLUDE format_data; ',' UNLESS loop.last; END %]
]
}[% ',' UNLESS loop.last %]
[% END %]
]
}
});
});
</script>
<!-- END [% component.name %] -->