RSS Git Download  Clone
Raw Blame History
<!-- 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 %] -->