<!-- BEGIN [% component.name %] -->
<!-- highcharts secton -->
<div>
[% FOREACH section IN data.incomplete_section_tests;
div_id = section.key.replace(' ','-').lower; # INCLUDE dumper.tt dump = div_id;
div_width = section.value.size * 10; # approx width, between min & max
total = 0;
FOREACH test IN section.value;
total = total + test.value;
END;
%]
<div id="[% div_id %]" style="min-width: 30%; max-width: 90%; height: 300px;
width: [% div_width %]%; margin-left: 30px">
</div>
<script type="text/javascript">
$(function () {
$('#[% div_id %]').highcharts({
chart: {
type: 'column'
},
title: {
style: {
fontSize: '14px',
},
text: '[% section.key %] [[% total %]]',
align: 'left',
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'No. of tests'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'n = <b>{point.y}</b>'
},
series: [{
name: '[% div_id %]',
data: [
[% FOREACH test IN section.value %]
[ '[% test.key %]', [% test.value %] ],
[% END %]
],
dataLabels: {
enabled: false,
}
}]
});
});
</script>
[% END %]
</div>
<!-- END [% component.name %] -->