Google Chartで散布図（Scatter Chart）の作成方法

Google Chartを利用するとScatter Chart（散布図）を簡単に作成することができます。

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

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

単純なグラフを表示するだけなら下のコードにある変数chartDataにScatter 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.ScatterChart(document.getElementById('chartPNG'));
  chart.draw(data);
}
</script>

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

Scatter Cahrtの作成方法

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

Scatter 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 = [
    ["年代別","来店客"],
    [20,100,],
    [30,90],
    [40,50],
    [50,30],
    [60,10],
    [70,5]
  ];
  /*
  options = {
    width:600, //横幅
    height: 300 //高さ
  }
  */
  data = google.visualization.arrayToDataTable(chartData);
  chart = new google.visualization.ScatterChart(document.getElementById('chartPNG'));
  chart.draw(data);
  // オプション設定する場合、変数optionsに値を設定し下のコードを使用
  //chart.draw(data,options); 
}
</script>