グラフ描画の手法

このページでは、グラフをインスタンス化して描画するためのさまざまな方法を説明します。どちらの方法にも長所と短所があります。以下に例を示します。

目次

  1. chart.draw()
  2. グラフのラッパー
  3. DrawChart()
  4. 詳細情報

Chart.draw()

これは、このドキュメントの Hello Chart! の例で説明している基本的な方法です。基本的な手順は次のとおりです。

  1. gstatic ライブラリのローダー、Google の可視化、グラフ ライブラリの読み込み
  2. データの準備
  3. グラフのオプションを用意する
  4. グラフクラスをインスタンス化し、ページコンテナ要素にハンドルを渡します。
  5. 必要に応じて、グラフイベントを受信するように登録します。グラフのメソッドを呼び出す場合は、「ready」イベントをリッスンする必要があります。
  6. chart.draw() を呼び出して、データとオプションを渡します。

メリット:

  • プロセスの全ステップを完全に制御できます。
  • チャートによってスローされたすべてのイベントをリッスンするように登録できます。

デメリット:

  • 詳細
  • 必要なグラフ ライブラリをすべて明示的に読み込む必要があります。
  • クエリを送信する場合は、手動でコールバックを実装し、成功を確認して、返された DataTable を抽出し、グラフに渡す必要があります。

例:

<html>
   <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
     var data;
     var chart;

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create our data table.
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

グラフラッパー

ChartWrapper は、グラフ ライブラリの適切な読み込みをすべて処理し、グラフツール データソースへのクエリの送信を簡素化する便利なクラスです。

メリット:

  • はるかに少ないコード
  • 必要なグラフ ライブラリをすべて読み込みます。
  • Query オブジェクトを作成し、コールバックを処理することで、データソースのクエリがはるかに簡単になります。
  • コンテナ要素 ID を渡すと、getElementByID が呼び出されます。
  • データは、値の配列として、JSON リテラル文字列として、DataTable ハンドルとして、さまざまな形式で送信できます。

デメリット:

  • ChartWrapper は現在、選択イベント、準備完了イベント、エラーイベントのみを伝播しています。他のイベントを取得するには、ラップされたグラフのハンドルを取得して、そこでイベントに登録する必要があります。例については、ChartWrapper のドキュメントをご覧ください。

例:

以下は、ローカルで作成されたデータが配列として指定された縦棒グラフの例です。配列構文を使用してグラフのラベルや日時の値を指定することはできませんが、それらの値を使用して DataTable オブジェクトを手動で作成し、dataTable プロパティに渡すことは可能です。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

これは、Google スプレッドシートにクエリを実行してデータを取得する折れ線グラフの例です。なお、このコードでコールバックを処理する必要はありません。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

自動読み込みと組み合わせることで、非常にコンパクトなコードを作成できます。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

ChartWrapper でグラフエディタを使用する

Google スプレッドシートに組み込まれているグラフエディタ ダイアログを使ってグラフをデザインし、そのグラフを表すシリアル化された ChartWrapper 文字列をリクエストできます。この文字列をコピーして貼り付け、上記の ChartWrapper の説明に沿って使用できます。

自身のページにグラフエディタを埋め込み、ユーザーが他のデータソースに接続してメソッドが ChartWrapper 文字列を返すためのメソッドを公開できます。詳しくは、ChartEditor のリファレンス ドキュメントをご覧ください。

 

DrawChart()

DrawChart は、ChartWrapper をラップするグローバル静的メソッドです。

メリット:

  • ChartWrapper と同じですが、使用時間が少し短くなります。

デメリット:

  • ラッパーにハンドルを返しないため、イベントを処理できません。
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

詳細情報