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

template/Ships.Scatter.html
Summary

Maintainability

Test Coverage

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

<html lang="{{:table.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}}",
                dataOpacity: 0.7,
                pointSize : 5, // default:7
                // legend : { position : "top", maxLines : 2 },
                selectionMode : "multiple",
                tooltip : { trigger: "both" },
                vAxis : {
                    {{if option.vertical.baseline > 0}}
                    baseline : {{:option.vertical.baseline}},
                    {{/if}}
                    {{if option.vertical.gridlines}}
                    gridlines : { count : {{:option.vertical.gridlines}} },
                    {{/if}}
                    {{if option.vertical.minorGridlines}}
                    minorGridlines : { count : {{:option.vertical.minorGridlines}} },
                    {{/if}}
                    {{if option.vertical.ticks}}
                    ticks : [{{:option.vertical.ticks}}],
                    {{/if}}
                    viewWindow : {
                         max : {{:option.vertical.maximum}},
                         min : {{:option.vertical.minimum}}
                    }
                },
                hAxis : {
                    {{if option.horizontal.gridlines}}
                    gridlines : { count : {{:option.horizontal.gridlines}} },
                    {{/if}}
                    {{if option.horizontal.minorGridlines}}
                    minorGridlines : { count : {{:option.horizontal.minorGridlines}} },
                    {{/if}}
                    {{if option.horizontal.ticks}}
                    ticks : [{{:option.horizontal.ticks}}],
                    {{/if}}
                    slantedText : true,
                    slantedTextAngle : 90
                }
            };

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

            function drawChart() {
                var chart = new google.visualization.ScatterChart(
                    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>