ネットワーク温度計から取得した温度データをサーバーから読み込みグラフとして表示するサンプルです。ネットワーク温度計は、某製作所で作ってもらったTN001試作品を使用しています。
ここでは動作させるブラウザを
Windows版、Firefox 1.5、Opera 9以降
Macintosh版、Safari 2、Firefox 1.5、Opera 9以降
としています。
http通信部分に関しては、今までと全く変わらないので他のページの解説を参照してください。
まず、グラフを描くためのキャンバスを用意します。これは<canvas>タグを使います。以下のように指定すると横320ピクセル×縦240ピクセルのキャンバスが作成されます。
<canvas id="imgCanvas" width="320" height="240"></canvas>
Safari 2は</canvas>の閉じタグがなくても動作しますが、Firefox、Operaでは必須です。閉じていない場合にはキャンバスにアクセスすることができません。また、キャンバスを操作するためにID属性で名前をつけておきます。
ページ上に用意されたボタンをクリックすると温度データを読み込みます。温度データはカンマ区切りの形式になっています。
2005/11/05 08:41:01, 25
2005/11/05 08:42:01, 25
2005/11/05 08:43:01, 26
2005/11/05 08:44:01, 26
このデータを読み込みます。一括して変数に読み込み、まず改行コードで区切ります。このサンプルの場合、改行コードはLF (10進数で10、16進数では0A）なので、split()を使って区切ります。これで配列形式になり１行が配列名[参照番号]としてアクセスできます。次に、この１行を同様にsplit()でカンマで区切ります。日付データと温度データになりますから、温度データを利用してキャンバスに描画します。温度が高いほど上に伸びるグラフになります。
キャンバスへの描画は、まずキャンバスオブジェクトへの参照を取得します。これは以下のようになります。
canvasObj = document.getElementById("imgCanvas");
conObj = canvasObj.getContext("2d");
次に描画する色を指定します。
conObj.fillStyle = "rgba(255,0,0,1)";
引数はRed、Green、Blue、αチャンネルになります。Red、Green、Blueは0〜255、αチャンネルは0〜1の範囲になります。αチャンネルは0が透明で1が完全な不透明になります。
次に温度の棒グラフを描きます。
conObj.fillRect(x,y,1,320);
いくつか命令がありますが、ここでは塗りつぶした四角を描くfillRect()を使っています。引数はX座標、Y座標、横幅、縦幅の順番になります。原点は左下になりますので、右上に行くに従って値が大きくなります。
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ajax test</title>
<style type="text/css"><!--
#ondoData {
font-size:9pt;
width:160px;
}
--></style>
<script language="javascript"><!--
result = "";
LF = String.fromCharCode(10);
function clearCanvas()
{
canvasObj = document.getElementById("imgCanvas");
conObj = canvasObj.getContext("2d");
conObj.fillStyle = "rgba(255,255,255,1)";
conObj.fillRect(0,0,320,240);
}
function drawLine()
{
canvasObj = document.getElementById("imgCanvas");
conObj = canvasObj.getContext("2d");
conObj.fillStyle = "rgba(0,40,200,1)";
conObj.fillRect(0,200,320,1);
}
function drawPoint(x,y)
{
canvasObj = document.getElementById("imgCanvas");
conObj = canvasObj.getContext("2d");
conObj.fillStyle = "rgba(255,0,0,1)";
conObj.fillRect(x,y,1,320);
}
function ondo()
{
clearCanvas();
result = result.split(LF);
count = 1280;
if (result.length < 1280) count = result.length;
for (i=0; i<count; i++)
{
d = result[i].split(",");
n = parseInt(d[1]);
if (n > -98) drawPoint(i/4,200-n*4);
}
drawLine();
}
function getPage(pageURL) {
xmlhttp = createXMLHttp();
if (xmlhttp)
{
document.getElementById("ondoData").innerHTML = "Loading...";
xmlhttp.onreadystatechange = setPageData;
xmlhttp.open('GET', pageURL);
xmlhttp.send(null);
}else{
alert("XMLHttpRequest失敗");
}
}
function setPageData()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
result = document.getElementById("ondoData").innerHTML = xmlhttp.responseText;
ondo();
}
}
// XMLHttpsオブジェクト作成
function createXMLHttp()
{
try {
return new ActiveXObject ("Microsoft.XMLHTTP");
}catch(e){
try {
return new XMLHttpRequest();
}catch(e) {
return null;
}
}
return null;
}
// --></script>
</head>
<body>
<form>
<input type="button" value="温度読み込み" onClick="getPage('../ondo.txt')">
</form>
<canvas id="imgCanvas" width="320" height="240" style="border:1px black solid"></canvas>
<div id="ondoData"></div>
</body>
</html>