template/Ships.Histogram.html from gardejo/js-kancolle-logistics-visualizer

template/Ships.Histogram.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="{{:locale}}">

    <head>

        <title>{{>table.title}}</title>

{{include tmpl="meta"/}}

        <link
            rel="stylesheet"
            type="text/css"
            href="../template/chart.css"
        >

        <script
            type="text/javascript"
            src="https://www.google.com/jsapi"
        ></script>

        <script
            type="text/javascript"
        ><!--

            var table = {
                "cols" : {{:~formatter.stringify(table.columns, null, '    ')}},
                "rows" : {{:~formatter.stringify(table.rows, null, '    ')}}
            };

            var option = {
                title : "{{>table.title}}",
                interpolateNulls: false,
                isStacked : true,
                dataOpacity: 0.7,
                {{if table.kind == "Levels"}}
                histogram: {
                    bucketSize: 10
                },
                {{/if}}
                hAxis: {
                    slantedText : true,
                    slantedTextAngle : 90
                },
                vAxis : {
                    minorGridlines : { count: 4 }
                }
            };

            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            {{if option.redraw}}
            window.onresize = drawChart;
            {{/if}}

            function drawChart() {
                var chart = new google.visualization.Histogram(
                    document.getElementById('chart')
                );
                chart.draw(
                    new google.visualization.DataTable(table),
                    option
                );
                document.getElementById('download').innerHTML =
                    '<a href="' + chart.getImageURI() + '">&#x1f4c8; PNG</a>';

                return;
            }

        --></script>

    </head>

{{include tmpl="body"/}}

</html>