Google Chartで縦棒グラフ（Column Chart）の作成方法

Google Chartを利用するとColumn Chart（縦棒グラフ）を簡単に作成することができます。Bar Chartと似ていますが、横棒でColumn Chartは縦棒で表示が違うだけで同じです。

Google ChartのColumn Chartのコードひな形
Column Cahrtの作成方法

Google ChartのColumn Chartのコードひな形

単純なグラフを表示するだけなら下のコードにある変数chartDataにColumn Chart用のデータを設定するだけでグラフを表示するコードは完成します。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var chartData = [...] //配列データ設定
  data = google.visualization.arrayToDataTable(chartData);
  chart = new google.visualization.ColumnChart(document.getElementById('chartPNG'));
  chart.draw(data);
}
</script>

実際にグラフを表示するには、bodyタグで<div id=”chartPNG”></div>を記述します。

Column Cahrtの作成方法

グラフ用に必要なデータを用意して設定するだけでグラフを表示できます。
Column Chart：データフォーマット
オブションを追加することもできます（オプション）

Column Chartの例

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var chartData = [
    ["都道府県","人口"],
    ["東京",13159388],
    ["大阪",8865245],
    ["神奈川",9048331],
    ["愛知",7410719],
    ["福岡",5071968],
    ["北海道",5506419],
    ["埼玉",7194556]
  ];
  /*
  options = {
    width:600, //横幅
    height: 300 //高さ
  }
  */
  data = google.visualization.arrayToDataTable(chartData);
  chart = new google.visualization.ColumnChart(document.getElementById('chartPNG'));
  chart.draw(data);
  // オプション設定する場合、変数optionsに値を設定し下のコードを使用
  //chart.draw(data,options); 
}
</script>