﻿<!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 = [
                {{:~formatter.stringify(table.columns)}}{{props table.rows}}
                ,{{:~formatter.stringify(prop)}}{{/props}}
            ];

            var option = {
                title : "{{>table.title}}",
                bubble : {
                    opacity : 0.7
                },
                colorAxis : {
                    legend : {
                        numberFormat : "#%",
                    },
                    colors : ["blue", "yellow", "red"],
                    minValue : 0, // fixed
                    maxValue : 1  // fixed
                },
                hAxis: {
                    title : "{{>table.columns[1]}}",
                    logScale : true,
                    ticks : [0, 10, 20, 30, 40, 50, 60, 70], // generated
                    textPosition : "in"
                },
                vAxis : {
                    title : "{{>table.columns[2]}}",
                    ticks : [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150], // generated
                    minorGridlines : { count: 1 } // filled
                }
            };

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

            function drawChart() {
                new google.visualization.BubbleChart
                        (document.getElementById("chart"))
                    .draw(
                        google.visualization.arrayToDataTable(table),
                        option
                    );

                return;
            }

        --></script>

    </head>

{{include tmpl="body"/}}

</html>

Append a tentative template for a bubble chart
Append a tentative template for a bubble chart
