バブルチャート

チャート本体

バブルチャートは横軸、縦軸、バブルの大きさの３つのカラムが値として必要になります。また、このチャートはGoogle Apps Scriptでは作成できません。故に、ガジェットにて作成します。

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

<ModulePrefs title="sample1" />

<Content type="html">

<![CDATA[

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>

      Google Visualization API Sample

    </title>

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

    <script type="text/javascript">

//corechartのパッケージをロード

google.load("visualization", "1", {packages:["corechart"]});

      google.setOnLoadCallback(initialize);

      function initialize() {

        // The URL of the spreadsheet to source data from.

        var query = new google.visualization.Query(

            'https://docs.google.com/spreadsheet/pub?key=0AjN10lCzkUqkdHJqaUxkaUdyOUR3VGQwM3VHWTdWcGc&single=true&gid=6');

        query.send(draw);

      function draw(response) {

        if (response.isError()) {

          alert('Error in query');

        var data = response.getDataTable();

        var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));

//グラフオプションの指定

var options = {

          title: 'トラブルの多さと投薬回数、金額との相関関係',

          hAxis: {title: '使用回数'},

          vAxis: {title: '値段'},

          bubble: {textStyle: {fontSize: 11}},

chartArea:{left:100,top:30,width:"80%",height:"75%"},

height: 600,

width: 1000,

};

//グラフの描画

        chart.draw(data, options);

}

    </script>

  </head>

  <body style="font-family: Arial;border: 0 none;">

    <div id="chart_div"></div>

  </body>

</html>

]]>

</Content>

</Module>