テキストベースでグラフを描画できるGoogle Chart Toolsは、ruhohと相性が良い。 表や円グラフなど、よく使いそうなフォーマットを下記にメモ

準備

header部分に下記を記載しておく

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

<script type="text/javascript">   //Google Chart Api[table]
    google.load('visualization', '1', {packages:['table']});
    google.setOnLoadCallback(drawTable);

    function drawTable() {
        var data = google.visualization.arrayToDataTable([
                [ ' 学部 ' , ' 人数 ' , ' 出席率 ' ] ,
                [ ' 工学 ' , ' 10   ' , ' 91     ' ] ,
                [ ' 法学 ' , ' 70   ' , ' 81     ' ] ,
                [ ' 科学 ' , ' 80   ' , ' 100    ' ]
                ]);

        var options = {  };
        var chart = new google.visualization.Table(document.getElementById('drawTable'));
        chart.draw(data, options);
    }
</script>

<div id="drawTable"></div>

円グラフ

<script type="text/javascript">   //Google Chart Api[pie]
    google.load('visualization', '1', {packages:['corechart']});
    google.setOnLoadCallback(drawPie);

    function drawPie() {
        var data = google.visualization.arrayToDataTable([
                [ ' Task     ' , ' Hours per Day ' ] ,
                [ ' Work     ' , 11                ] ,
                [ ' Eat      ' , 2                 ] ,
                [ ' Commute  ' , 2                 ] ,
                [ ' Watch TV ' , 2                 ] ,
                [ ' Sleep    ' , 7                 ]
                ]);
        var options = { 
            title: '一日の時間の消費割合',
            titleTextStyle: {fontSize:14}
        };
        var chart = new google.visualization.PieChart(document.getElementById('drawPie'));
        chart.draw(data, options);
    }
</script>

<div id="drawPie"></div>

棒グラフ

<script type="text/javascript">   //Google Chart Api[column chart]
    google.load('visualization', '1', {packages:['corechart']});
    google.setOnLoadCallback(drawColumn);

    function drawColumn() {
        var data = google.visualization.arrayToDataTable([
                ['年度' , '支店1' , '支店2' , '支店3' ] ,
                ['2005' , 3.6     , 2       , 1       ] ,
                ['2006' , 3       , 2       , 1.5     ] ,
                ['2007' , 4.6     , 2       , 2       ] ,
                ['2008' , 7.6     , 2       , 3       ] ,
                ['2009' , 9.6     , 2       , 4       ] 
                ]);
        var options = {
                title:          '支店の売上げ推移'      ,
                titleTextStyle: {fontSize: 14          },
                hAxis:          {title:    '年度'      },
                vAxis:          {title:    '売上げ規模'}
                };
        var chart = new google.visualization.ColumnChart(document.getElementById('drawColumn'));
        chart.draw(data, options);
    }
</script>

折れ線グラフ

<script type="text/javascript">   //Google Chart Api[Line chart]
    google.load('visualization', '1', {packages:['corechart']});
    google.setOnLoadCallback(drawLine);

    function drawLine() {
        var data = google.visualization.arrayToDataTable([
                ['年度' , '支店1' , '支店2' , '支店3' ] ,
                ['2005' , 3.6     , 2       , 1       ] ,
                ['2006' , 3       , 2       , 1.5     ] ,
                ['2007' , 4.6     , 2       , 2       ] ,
                ['2008' , 7.6     , 2       , 3       ] ,
                ['2009' , 9.6     , 2       , 4       ] 
                ]);
        var options = {
                title:          '支店の売上げ推移'      ,
                titleTextStyle: {fontSize: 14          },
                hAxis:          {title:    '年度'      },
                vAxis:          {title:    '売上げ規模'}
                };
        var chart = new google.visualization.LineChart(document.getElementById('drawLine'));
        chart.draw(data, options);
    }
</script>

<div id="drawLine"></div>

地図チャート

<script type="text/javascript">   //Google Chart Api[Geo chart]
    google.load('visualization', '1', {packages:['geochart']});
    google.setOnLoadCallback(drawGeo);

    function drawGeo() {
        var data = google.visualization.arrayToDataTable([
                ['Country'       , 'Popularity' ] ,
                ['Germany'       , 200          ] ,
                ['United States' , 300          ] ,
                ['Brazil'        , 400          ] ,
                ['Canada'        , 500          ] ,
                ['France'        , 600          ] ,
                ['RU'            , 700          ]
                ]);
        var options = {};
        var chart = new google.visualization.GeoChart(document.getElementById('drawGeo'));
        chart.draw(data, options);
    }
</script>

<div id="drawGeo"></div>


blog comments powered by Disqus

Categories

Tags

iPhone Sales

Books

Pinboard