#やりたいこと
##CakePHP2から出てきたデータをGoogle Chartsでプロットする.
このときに左右の異なるy軸をもつようにプロットしたい.
例えばテスト結果をプロットするなら以下のようにしたい.
左y軸: 解答率
右y軸: 解答スピード
Google Charts ?
Googleの提供するjavascriptのグラフ描画ライブラリ
https://developers.google.com/chart/interactive/docs/
#コード
script.js
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(<?php echo $data ?>);
// CakePHPから出てくる配列は,以下のようになっている.
// $data[0] = array('x label', 'y1 label', 'y2 label');
// forで幾つかのデータを入れる
// array_push($data, array('x data', 'y1 data', 'y2 data'))
var options = {
chartArea: {'width': '600', 'height': '450'},
series: {
0: {targetAxisIndex:0}, // 第1系列は左のY軸を使用
1: {targetAxisIndex:1}, // 第2系列は右のY時を使用
},
hAxis: {title: 'Day', minValue: 0, maxValue: 32}, // x軸のラベル
vAxes: {
// Add labels to each y axis.
0: {
title: 'y1',
minValue: 0
},
1: {
title: 'y2',
minValue: 0
}
},
};
var chart = new google.visualization.LineChart(document.getElementById('daily_chart'));
chart.draw(data, options);
}
</script>
<div id="daily_chart" style="width: 700px; height: 600px"></div>