計測結果をグラフ化する
サンプル3の結果画面は、視覚的に分かりやすいとは言えません。そこで、計測された値を元に円グラフを表示するように改良しましょう。どの処理に時間がかかっているのかを簡単に把握できるようになります。
円グラフを描画するライブラリーは数多くありますが、今回はGoogle Chart Toolsの「Visualization API」を利用します。Chart Tootlsは数多くのグラフに対応しており、さまざまなオプションを設定できます。
- Google Visualization API
- http://code.google.com/intl/ja/apis/chart/interactive/docs/gallery/columnchart.html
Google Visualization APIを利用するには、以下のようにしてライブラリーを読み込ませます。
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
次に、ライブラリー読み込み後のコールバック関数を指定します。
google.setOnLoadCallback(コールバック関数名)
コールバック関数内で円グラフを描画する処理を書きます。最初に、円グラフを表示するためにデータを設定します。以下のようにしてデータを格納するデータテーブルを用意します。
var data = new google.visualization.DataTable();
次に、格納するデータの種類と名前を指定します。Navigation Timingの名前と値の2つを以下のようにして設定します。
data.addColumn("string", "type");
data.addColumn("number", "time");
data.addColumn()の第1引数がデータの種類を示し、第2引数が名前になります。
data.addRows()を使って配列にデータ名と値を格納していきます。格納するデータはdata.addColumn()と対応している必要があります。[名前, 計測値]として必要な数だけ格納していきます。
data.addRows([
[ "DNS", dnsTime],
[ "TCP", tcpTime],
[ "Request", requestTime],
[ "Response", responseTime],
[ "DOM Interactive", domInteractiveTime],
[ "DOM Complete", domCompleteTime]
]);
これで表示するデータを用意できました。続いて、円グラフを表示するためのオブジェクトを生成します。PieChart()の引数には円グラフを表示するdiv要素を指定します（div要素のID名ではなく、div要素そのものを指定）。
var chart = new google.visualization.PieChart(document.getElementById("graph"));
あとはdrawメソッドを使って円グラフを描画します。draw()メソッドの最初の引数がデータ、2番目はオプションです。オプションには円グラフの表示サイズや円グラフのタイトルを指定できます。
chart.draw(data, {
width: 500,
height: 300,
title: "Navigation Timing Result"
});
実際のプログラムはサンプル4です。ボタンをクリックすると計測値とともに円グラフが表示されます。
Google Chromeでの結果。ボタンをクリックすると計測値とともに円グラフが表示される
Android OS 4での結果。スマートフォンでも利用できるのでサイト制作時に役立つ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation Timing計測結果(グラフ)</title>
<script src="https://www.google.com/jsapi"></script>
</head>
<body>
<h1>Navigation Timing計測結果(グラフ)</h1>
<form>
<input type="button" id="btn" value="結果表示">
</form>
<div id="graph"></div>
<output id="result"></output>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function(){
document.getElementById("btn").onclick = function(){
var pt = performance.timing;
var startTime = pt.navigationStart;
var dnsTime = pt.domainLookupEnd - pt.domainLookupStart; // DNS処理時間
var tcpTime = pt.connectEnd - pt.connectStart; // TCP処理時間
var requestTime = pt.responseStart - pt.requestStart; // リクエスト時間
var responseTime = pt.responseEnd - pt.responseStart; // レスポンス時間
var domInteractiveTime = pt.domInteractive - pt.domLoading; // DOM操作可能までの時間
var domCompleteTime = pt.domComplete - pt.domLoading; // DOM構築完了までの時間
var text = "DNS："+dnsTime+"ミリ秒<br>";
text += "TCP："+tcpTime+"ミリ秒<br>";
text += "Request："+requestTime+"ミリ秒<br>";
text += "Response："+responseTime+"ミリ秒<br>";
text += "DOM Interactive："+domInteractiveTime+"ミリ秒<br>";
text += "DOM Complete："+domCompleteTime+"ミリ秒<br>";
document.getElementById("result").innerHTML = text;
// 円グラフ描画
var data = new google.visualization.DataTable();
data.addColumn("string", "type");
data.addColumn("number", "time");
data.addRows([
[ "DNS", dnsTime],
[ "TCP", tcpTime],
[ "Request", requestTime],
[ "Response", responseTime],
[ "DOM Interactive", domInteractiveTime],
[ "DOM Complete", domCompleteTime]
]);
var chart = new google.visualization.PieChart(document.getElementById("graph"));
chart.draw(data, {
width: 500,
height: 300,
title: "Navigation Timing Result"
});
}
});
</script>
</body>
</html>
