GoogleChartAPIでテーブルをグラフで表示する

GoogleChartAPIのサンプルです。

下記記事のGoogleChartsとの比較用にテーブルをグラフ化します。

完成品


番号データ１データ2データ3
1102578401917
245225532115
3371619008972
463253017350
5491830514238
6127969006903
7992798597272
8817590257599
9850631088244
10651564529541

生成URL

https://chart.apis.google.com/chart?chs=600x200&chd=t:1025,452,3716,632,4918,1279,9927,8175,8506,6515|7840,2553,1900,5301,3051,6900,9859,9025,3108,6452|1917,2115,8972,7350,4238,6903,7272,7599,8244,9541&chds=a&cht=lc&chco=3366cc,dc3912,ff9900&chxt=x,y&chtt=タイトル&chdl=データ１|データ2|データ3

JavaScriptの実行で上記のURLを生成して、GoogleChartAPIから画像を取得します。

ソースコード

チャート描画部分<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  const tableid = "test-table";

  // テーブルヘッダ取得
  let thead = [];
  let thds = document.querySelectorAll('table#'+tableid+' thead tr th');
  for (let c=1; c<thds.length; c++) {
    thead.push(thds[c].innerText);
  }

  // テーブルデータ取得
  let tdata = [];
  let trs = document.querySelectorAll('table#'+tableid+' tbody tr')
  for (let r=0; r<trs.length; r++) {
    let row = [];
    let tds = trs[r].querySelectorAll('td');

    // 数値として取得する
    for (let c=1; c<tds.length; c++) {
      row.push(tds[c].innerText);
    }
    tdata.push(row);
  }
  // データを加工
  let data = [];
  for (let c=0; c<tdata[0].length; c++) {
    let col = []
    for (let r=0; r<tdata.length; r++) {
      col.push(Math.floor(tdata[r][c]));
    }
    data.push(col.join(','));
  }

  // 色を設定
  let colors = ['3366cc','dc3912','ff9900','109618','990099','0099c6','dd4477','66aa00','b82e2e','316395','994499','22aa99','aaaa11','6633cc','e67300','8b0707','651067','329262','5574a6','3b3eac','b77322','16d620','b91383','f4359e','9c5935','a9c413','2a778d','668d1c','bea413','0c5922','743411'];
  let chcos = [];
  for (let i=0; i<data.length; i++) {
    chcos.push(colors[i%colors.length]);
  }

  // チャート描画
  let url = 'https://chart.apis.google.com/chart'
  + '?chs=600x200'              // 画像サイズ(600x200)
  + '&cht=lc'                   // 棒グラフ
  + '&chd=t:'+ data.join('|')   // 数値データ
  + '&chds=a'                   // 自動スケーリング
  + '&chco='+chcos.join(',')    // シリーズ色
  + '&chtt=タイトル'            // タイトル
  + '&chxt=y'                   // 軸のスタイルとラベル
  + '&chdl='+thead.join('|');   // 凡例
  let chart = document.querySelector('img.test-chart');
  chart.src = url;
});
</script>
<img class="test-chart" src=""><br>
テーブル部分<table id="test-table">
<thead>
<tr><th>番号</th><th>データ１</th><th>データ2</th><th>データ3</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>1025</td><td>7840</td><td>1917</td></tr>
<tr><td>2</td><td>452</td><td>2553</td><td>2115</td></tr>
<tr><td>3</td><td>3716</td><td>1900</td><td>8972</td></tr>
<tr><td>4</td><td>632</td><td>5301</td><td>7350</td></tr>
<tr><td>5</td><td>4918</td><td>3051</td><td>4238</td></tr>
<tr><td>6</td><td>1279</td><td>6900</td><td>6903</td></tr>
<tr><td>7</td><td>9927</td><td>9859</td><td>7272</td></tr>
<tr><td>8</td><td>8175</td><td>9025</td><td>7599</td></tr>
<tr><td>9</td><td>8506</td><td>3108</td><td>8244</td></tr>
<tr><td>10</td><td>6515</td><td>6452</td><td>9541</td></tr>
</tbody>
</table>

※Markdownの都合上ページのソースコードとは一部異なります

補足

GoogleChartAPIは、基本的に静的ページ用だと考えているため、JavaScriptを使用してURLを取得するこの方法はあまり賢い方法ではないと思われます。

参考