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

１）外部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>
　

２）外部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)
;
?>
　

３）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);
    });
  }
]);

４）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上に作成したデモはこちら。

関連記事の目次