Google Charts を 4D で使用する方法

8月 9, 2017 1 読了時間

神経科学者によると、私たちは他のどのタイプの表現よりも、視覚的な形に対してより良く、より速く反応するのだそうです。そのため、グラフやチャートは、データをよりよく理解するための鍵であることは明らかです。

もし、棒グラフ、ヒストグラム、円グラフを、最新のブラウザーと完全に互換性があり、かつ人間の脳の情報処理方法に適した形で表示したいと考えているなら、Google Charts は一つの答えになるでしょう。Google Charts で利用可能なチャートの種類は様々です: 古典的な棒グラフや円グラフから、Google Charts はツリーマップ、キャンドルスティック、ゲージチャートのような手の込んだグラフも提供しています。

このブログでは、ドーナツグラフ、マップチャート、棒グラフの例を紹介します。それぞれのチャートは、南米の国別の人口を表示しています。以下のデータベースでは、データを取得するための 4Dメソッドと、さまざまなチャートを表示するための HTMLファイルをいくつか用意しています。

サンプルデータベース

データ形式

このデータベースは非常にシンプルで、メソッドが一つあるだけです。GetJsonDataは、Google Chart の仕様に準拠した JSON データ配列を返すために必要なものです。

以下の 3つのチャートの例では、データ形式は同じです (以下の通り)。

{
   "Data":[
      ["Country", "Population"],
      ["Argentina", 43847277],
      ["Bolivia", 10888402],
      ["Brazil", 209567920],
      ["Chile", 18131850],
      ["Colombia", 48654392],
      ["Ecuador", 16385450],
      ["Gabon", 1763142],
      ["Guyana", 77061],
      ["Paraguay", 6725430],
      ["Peru", 31774225],
      ["Suriname", 54761],
      ["Uruguay", 3444071],
      ["Venezuela", 31518855]
   ]
}