外部HTMLファイルのテーブルデータをGoogleチャートでグラフ作成

外部HTMLファイル内のテーブルデータをJSONデータに変換してAngularJSで取り込み、Googleチャートでグラフを作成する方法です。

1)外部HTMLファイル内のテーブルデータの仕様


 
下記のテーブルデータを基にグラフ化します。
(外部HTMLファイルのテーブルデータ sample-table.html)
<table id=”sample1″ border=1>
<caption>サンプルテーブル</caption>
<tr><th>サイズ</th><th>商品A</th><th>商品B</th></tr>
<tr><td>~15</td><td>4512</td><td>4428</td></tr>
<tr><td>~20</td><td>3994</td><td>3803</td></tr>
<tr><td>~25</td><td>3616</td><td>3414</td></tr>
<tr><td>~30</td><td>3228</td><td>3021</td></tr>
<tr><td>~35</td><td>3909</td><td>4445</td></tr>
</table>
 

2)外部HTMLファイル内のテーブルデータをJSONに変換


下記記事参照
PHPでHTMLテーブルをJSONに変換
 
上記記事のツールを使って下記PHPスクリプトを作成します。
(table.php)
<?php
include_once ‘src/HTMLTable2JSON.php’;
$helper = new HTMLTable2JSON();
echo $helper->tableToJSON(‘http://www.example.com/wp/wp-content/uploads/table/sample-table.html’,FALSE,”,NULL,NULL,FALSE,FALSE,TRUE,FALSE,FALSE,NULL)
;
?>
 

3)AngularJSスクリプト作成


 
ここでは、WordPressのサイト全体でAngularJSが使用できる状態になっていると仮定しています。
AngularJSをヘッダーでインクルードして利用できるようにする手順は下記参照。
ブートストラップ3を使って作成したナビゲーションメニューをAngularJSを使う形に変更する方法
 
(gglchrt0827.js)

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

google.setOnLoadCallback(function() {
  angular.bootstrap(document.body, ['googleMapApp']);
});

var mymodule = angular.module('googleMapApp', []);

mymodule.controller('MyCtrl0827', ['$scope', '$http',
  function($scope, $http) {
    $http({
      method: 'get',
      url: 'http://www.example.com/wp/wp-content/themes/ang/tbl-json/table.php'
    }).success(function(data) {
      var options = {
        title: 'Company Performance'
      };
      var data1 = new google.visualization.DataTable();
      data1.addColumn('string', 'サイズ');
      data1.addColumn('number', '商品A');
      data1.addColumn('number', '商品B');
      for(i = 0 ; i < data.length;i++) {
        data1.addRow([ data[i]["サイズ"], parseInt(data[i]["商品A"]),parseInt( data[i]["商品B"]) ]);
      }
      var chart = new google.visualization.LineChart(document.getElementById('chart_div0827'));
      chart.draw(data1, options);
    });
  }
]);

4)WordPress投稿本文

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/gglchrt0827.js'></script>

<div ng-controller="MyCtrl0827">
<div id="chart_div0827"></div>
</div>

実際にWordPress上に作成したデモはこちら

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です