![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
code(JavaScript?){{
?xml version="1.0">
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
title>adk-wiki-graph</title>
script language="javascript" type="text/javascript">
var ctx; var bool_first = true; var canvases=new Array; var contexts=new Array; var images; var xList; var yList; var imagesPointer; var pictIndex = 0; var logInterval = 10;
var tabLinks = new Array(); var contentDivs = new Array();
var debugFlag = true;
window.addEventListener?("load", initial, false); var tempArray=new Array; tempArray['p']=0; tempArray['max']=60; tempArray['x-label']=''; var lightArray=new Array; lightArray['p']=0; lightArray['max']=60; lightArray['x-label']=''; var pirArray=new Array; pirArray['p']=0; pirArray['max']=60; pirArray['x-label']=''; var airPolArray?=new Array; airPolArray?['p']=0; airPolArray?['max']=60; airPolArray?['x-label']=''; function initial() {
document.getElementById('message').textContent = "initial";
canvases['tempGraph']=document.getElementById('tempGraph');
canvases['lightGraph']=document.getElementById('lightGraph');
canvases['pirGraph']=document.getElementById('pirGraph');
canvases['airPolGraph']=document.getElementById('airPolGraph');
contexts['tempGraph']=canvases['tempGraph'].getContext('2d');
contexts['lightGraph']=canvases['lightGraph'].getContext('2d');
contexts['pirGraph']=canvases['pirGraph'].getContext('2d');
contexts['airPolGraph']=canvases['airPolGraph'].getContext('2d');
if (document.referrer.length !=0 ){
var myRef = document.referrer;
if ( myRef.indexOf( "http://www.google.co.jp" ) == 0 ){
}
else
if ( myRef == "http://www.red.oit-net.jp/tatsuya/java/index.htm" ){
}
else{
document.form1.urlbox.value=myRef;
phase1(document.form1.urlbox.value)
}
}
else{
}
} function $(id) { return document.getElementById?(id); } function appendMessage(m){ }
var multiGraphColor?=new Array; multiGraphColor?[0]='rgb(255, 0, 0)'; multiGraphColor?[1]='rgb( 0,255, 0)'; multiGraphColor?[2]='rgb( 0,0 ,255)'; multiGraphColor?[3]='rgb(255, 255, 0)'; multiGraphColor?[4]='rgb( 0,255, 255)'; multiGraphColor?[5]='rgb( 255,0,255)'; multiGraphColor?[6]='rgb(120,120, 0)'; multiGraphColor?[7]='rgb( 90,150, 0)'; multiGraphColor?[8]='rgb(230, 20, 0)'; multiGraphColor?[9]='rgb(200, 50, 0)'; multiGraphColor?[10]='rgb(180, 70, 0)'; multiGraphColor?[11]='rgb(150,100, 0)'; multiGraphColor?[12]='rgb( 60,180, 0)'; multiGraphColor?[13]='rgb( 30,210, 0)'; multiGraphColor?[14]='rgb(255, 0, 20)'; multiGraphColor?[15]='rgb(230, 20,40)'; multiGraphColor?[16]='rgb(200, 50,60)'; multiGraphColor?[17]='rgb(180, 70,80)'; multiGraphColor?[18]='rgb(150,100,100)'; multiGraphColor?[19]='rgb(120,120,120)'; multiGraphColor?[20]='rgb( 90,150,140)'; multiGraphColor?[21]='rgb( 60,180,160)'; multiGraphColor?[22]='rgb( 30,210,180)';
function drawGraph(array,field,area,color) {
var w=250;
var h=200;
var lm=30;
var rm=30;
var tm=30;
var bm=30;
var canvas = canvases[area];
var context = contexts[area];
context.save();
context.beginPath();
context.clearRect(0, 0, w+lm+rm, h+tm+bm);
context.strokeStyle='rgb(0, 0, 0)' ;
context.strokeRect(lm, tm, w, h);
context.lineWidth=1;
var xvals=new Array;
var lines;
if(array['p']<=0) return;
var mlines=array['lines'];
var lines=mlines[0];
var lmaxw=getMax(lines);
var lmax=5;
var scale=1;
for(var i=0;i<10;i++){
if(lmax>lmaxw) break;
if(lmaxw>5*scale) lmax=10*scale;
if(lmaxw>10*scale) lmax=20*scale;
if(lmaxw>20*scale) lmax=50*scale;
scale=scale*10;
}
var recs=array[0];
var minRecs=recs[0];
var minXVal=getItemFromRecord(array['x-label'],minRecs);
var maxRecs=recs[recs.length-1];
var maxXVal=getItemFromRecord(array['x-label'],maxRecs);
context.strokeText("0",10,h+tm);
context.strokeText(""+lmax,10,tm);
context.strokeStyle='rgb(0,0,0)';
context.moveTo(lm,h/5+tm);
context.lineTo(lm+w,h/5+tm);
context.strokeText(""+(lmax*4/5),10,h/5+tm);
context.moveTo(lm,h*2/5+tm);
context.lineTo(lm+w,h*2/5+tm);
context.strokeText(""+(lmax*3/5),10,h*2/5+tm);
context.moveTo(lm,h*3/5+tm);
context.lineTo(lm+w,h*3/5+tm);
context.strokeText(""+(lmax*2/5),10,h*3/5+tm);
context.moveTo(lm,h*4/5+tm);
context.lineTo(lm+w,h*4/5+tm);
context.strokeText(""+(lmax/5),10,h*4/5+tm);
context.stroke();
context.beginPath()
var xmax= lines.length; // parseInt(xvals[array['p']-1]);
var xmin= 0; // parseInt(xvals[0]);
var minxlen=context.measureText(minXVal);
var maxxlen=context.measureText(maxXVal);
context.strokeText(minXVal,lm-(minxlen.width)/3,h+tm+20);
context.strokeText(maxXVal,lm+w-(maxxlen.width)/3,h+tm+20);
context.strokeText(field,lm+w/2,h+tm+bm+10);
context.strokeStyle='rgb(0,0,0)';
for(var i=1;i<24;i++){
context.moveTo(lm+(i*w)/24,tm);
context.lineTo(lm+(i*w)/24,h+tm);
}
context.strokeText("12",lm+w/2-5,h+tm+15);
context.strokeText("6",lm+w/4-5,h+tm+15);
context.strokeText("18",lm+(w*3)/4-5,h+tm+15);
var xwidth=w;
var yheight=h;
if(xmax-xmin==0) return;
context.strokeStyle=color;
var x0=xwidth*(xmin-xmin)/(xmax-xmin);
var y0=yheight-yheight*lines[0]/lmax;
context.moveTo(x0+lm,y0+tm);
for (var i = 1; i <lines.length; i ++) {
var x1=xwidth*(i-xmin)/(xmax-xmin);
var y1=yheight-yheight*(lines[i])/(lmax);
context.lineTo(x1+lm, y1+tm);
}
context.stroke();
context.restore();
}
function getFloatDataOfLabel?(label,array){
var mlines=new Array;
var lines=new Array;
var rec=array[0];
var p=0;
for(var j=0;j<rec.length;j++){
var oneRecord=rec[j];
var ds=getItemFromRecord(label, oneRecord);
ds=ds.replace(/[\n\r]/g,"");
if(ds==""){
}
else{
try{
lines[p]=parseFloat(ds);
p++;
}
catch(e)
{
alert(e+"...parseFloat("+ds+")");
continue;
}
}
}
mlines[0]=lines;
array['lines']=mlines;
}
function getItemFromRecord?(label, rec){
var items=rec.split(',');
for(var j=0;j<items.length;j++){
var item=items[j];
var pos=item.indexOf(label+"=");
if(pos>=0){
var ds=item.substring((label+"=").length+pos);
if(ds=="") ds=0;
return ds;
}
}
return "";
}
function getMax(data){ var max=data[0]; for(var i=1;i<data.length;i++){ if(data[i]>max) max=data[i]; } return max; } function getMin(data){ var min=data[0]; for(var i=1;i<data.length;i++){ if(data[i]<min) min=data[i]; } return min; }
function requestNextFrame?() { wSocket.send("get"); }
function onUnload() { wSocket.close(); } function onError(){ appendMessage("WebScreenShare? : Error.\n"); } function buttonClicked(btnName){
if(btnName=="joinButton"){ // Join the Group
var addr=document.getElementById('rootAddress').value;
var port=document.getElementById('rootPort').value;
var sending="action join "+addr+" "+port;
appendMessage(sending+"\n");
wSocket.send(sending);
}
else
if(btnName=="leaveButton"){ // Join the Group
var sending="action leave group";
appendMessage(sending+"\n");
wSocket.send(sending);
}
else
if(btnName=="connectButton"){
var addr=document.getElementById('upAddress').value;
var port=document.getElementById('upPort').value;
var sending="action connect "+addr+" "+port;
appendMessage(sending+"\n");
wSocket.send(sending);
}
else
if(btnName=="disConnectButton"){
var sending="action disConnect";
appendMessage(sending+"\n");
wSocket.send(sending);
}
else
if(btnName=="listenStartButton"){
}
else
if(btnName=="send"){
var cmd=document.getElementById('commandField').value;
var sending="action send "+cmd;
appendMessage(sending+"\n");
wSocket.send(sending);
}
else
if(btnName=="myHostListenReStart"){
var addr=document.getElementById('myHostPort').value;
var port=document.getElementById('relayWSPort').value;
var sending="action myHostRestart "+addr+" "+port;
appendMessage(sending+"\n");
wSocket.send(sending);
}
else
if(btnName=="adminRestartButton"){
var addr=document.getElementById('adminPPort').value;
var port=document.getElementById('adminWSPort').value;
var sending="action adminRestart "+addr+" "+port;
appendMessage(sending+"\n");
wSocket.send(sending);
}
else
if(btnName=="clientsAssignmentPolicyChanged"){
var v=document.getElementById('clientsAssignmentPolicy').value;
var sending="action clientsAssignmentPolicy "+v;
appendMessage(sending);
wSocket.send(sending);
}
else
if(btnName=="maxWebClientsChanged"){
var v=document.getElementById('clientsLimit').value;
var sending="action clientsLimit "+v;
appendMessage(sending);
wSocket.send(sending);
}
else
if(btnName=="traceLevelCheckChanged"){
var v="off";
if(document.getElementById('traceLevelChk').checked)
v="on";
var sending="action traceLevelCheck "+v;
appendMessage(sending);
wSocket.send(sending);
}
else
if(btnName=="traceLevelChanged"){
var v=document.getElementById('traceLevel').value;
var sending="action traceLevelx "+v;
appendMessage(sending);
wSocket.send(sending);
}
else
if(btnName=="logLevelCheckChanged"){
var v="off";
if(document.getElementById('logLevelChk').checked)
v="on";
var sending="action logLevelCheck "+v;
appendMessage(sending);
wSocket.send(sending);
}
else
if(btnName=="logLevelChanged"){
var v=document.getElementById('logLevel').value;
var sending="action logLevelx "+v;
appendMessage(sending);
wSocket.send(sending);
}
else
if(btnName=="showPrivateServers"){
var sending="action showPrivateServers ";
appendMessage(sending);
wSocket.send(sending);
}
else
if(btnName=="gotoRoot"){
var addr=document.getElementById('rootAddress').value;
var port=8880;
var xurl="http://"+addr+":"+port+"/controller.html";
location.href=xurl;
}
else
if(btnName=="gotoUp"){
var addr=document.getElementById('upAddress').value;
var port=8880;
var xurl="http://"+addr+":"+port+"/controller.html";
location.href=xurl;
}
else
if(btnName=="gotoLeft"){
var addr=document.getElementById('downLeft').value;
var addr2=addr.split("/");
var port=8880;
var xurl="http://"+addr2[0]+":"+port+"/controller.html";
location.href=xurl;
}
else
if(btnName=="gotoRight"){
var addr=document.getElementById('downRight').value;
var addr2=addr.split("/");
var port=8880;
var xurl="http://"+addr2[0]+":"+port+"/controller.html";
location.href=xurl;
}
} function onChangeFunction?(name,value){
if(name=="myAddressList"){
var sending="action myAddress "+value;
appendMessage(sending);
wSocket.send(sending);
}
}
function getFloatDataOf?(intext,array,kind,xKind,field){
if(getNumbers(intext,array,kind)){
getFloatDataOfLabel(field,array);
array['x-label']=xKind;
}
}
function getMultiDataOf?(intext,marray,kind,field){
var clog=grep(intext,kind);
if(clog==null) return false;
var date=new Date();
var timeNow=date.getTime();
clog=timeNow+","+clog;
var recarray=clog.split(",");
var ds=getItemFromRecord('id',recarray);
if(ds=="") return false;
if(marray['labels']==null) {
marray['lmax']=0;
var labels=new Array;
marray['labels']=labels;
}
var labels=marray['labels'];
for(var i=0;i<marray['lmax'];i++){
if(ds==labels[i]) break;
}
if(i>=marray['lmax']) {
labels[marray['lmax']]=ds;
marray['lmax']++;
}
marray['lables']=labels;
if(marray[ds]==null){
var array=new Array;
array['p']=0;
array['max']=60;
marray[ds]=array;
}
var array=marray[ds];
if(array['p']>=array['max']){
for(var i=0;i<array['max'];i++){
array[i]=array[i+1];
}
array['p']--;
}
array[array['p']]=recarray;
array['p']++;
var data=getFloatDataOfLabel(field,array);
array['lines']=data;
return true;
} function getNumbers(intext,array,kind){
var clog=grep(intext,kind);
if(clog==null) return false;
var date=new Date();
var clog2 = clog.replace(/[\n\r]/g,"\n");
var recarray=clog2.split("\n");
recarray.length=recarray.length-1;
if(array['p']>=array['max']){
for(var i=0;i<array['max'];i++){
array[i]=array[i+1];
}
array['p']--;
}
array[array['p']]=recarray;
array['p']++;
return true;
// var
}
function getMultiNumbers?(intext,array,kind){
var clog=grep(intext,kind);
if(clog==null) return false;
var date=new Date();
var timeNow=date.getTime();
clog=timeNow+","+clog;
var recarray=clog.split(",");
if(array['p']>=array['max']){
for(var i=0;i<array['max'];i++){
array[i]=array[i+1];
}
array['p']--;
}
array[array['p']]=recarray;
array['p']++;
return true;
// var
} function grep(intext,matchtext){
if(intext.indexOf(matchtext)>=0){
return intext;
}
return null;
}
function createhttprequest(){
var request=null;
if("XMLHttpRequest" in window){
request= new XMLHttpRequest();
}
else if("ActiveXObject" in window){
try{
request=new ActiveXobject("Msxml2.XMLHTTP");
}catch(e){
try{
request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
return request;
}
var request;
function requestsource(url){
request=createhttprequest();
request.open("GET",url,true); request.onreadystatechange=sourceget; request.send(null); }
function filter(intext,key){
var lines = intext.split( '\n' );
var outText="";
for ( var i = 0; i < lines.length; i++ ) {
// 空行は無視する
var l=grep(lines[i],key);
if(l!=null){
outText=outText+l+"\n";
}
}
return outText;
}
function sourceget(){
var xpage; if (request.readyState == 4 && request.status == 200){
xpage=request.responseText;
var prePosition=xpage.search("<pre>");
var postPosition=xpage.search("</pre>");
var ypage=xpage.substring(prePosition,postPosition);
var dataPosition=ypage.search("result:");
var dataPage=ypage.substring(dataPosition);
var work1=dataPage.replace(/\r\n|\r/g, "\n");
/*
var lines = work1.split( '\n' );
var outArray = new Array();
for ( var i = 0; i < lines.length; i++ ) {
// 空行は無視する
if ( lines[i].search("a-2")>0) {
outArray.push( lines[i]+"\n" );
}
}
document.getElementById('source').value=work1;
phase2();
} else{
}
}
function phase1(url){
requestsource(url);
} function phase2(){
var text=document.getElementById('source').value;
var wtext=filter(text,'device=a-2');
getFloatDataOf(wtext,tempArray,'device=a-2','Date','cd');
drawGraph(tempArray,'Temprature(c)', 'tempGraph', 'rgb(255,0,0)');
wtext=filter(text,'device=a-1');
getFloatDataOf(wtext,lightArray,'device=a-1','Date','ave');
drawGraph(lightArray,'Lux', 'lightGraph', 'rgb(0,255,0)');
wtext=filter(text,'device=a-0');
getFloatDataOf(wtext,pirArray,'device=a-0','Date','ave');
drawGraph(pirArray, 'Pir', 'pirGraph','rgb(0,0,255)');
wtext=filter(text,'device=a-3');
getFloatDataOf(wtext,airPolArray,'device=a-3','Date','ave');
drawGraph(airPolArray, 'AirPol', 'airPolGraph','rgb(255,255,0)');
}
/script>
/head>
body> A URL of the adk-wiki-1(daily) collected data;
form name="form1">
input type="text" name="urlbox" size="40" value="http://www.yama-lab.org/adk-wiki-1/index.php?daily-1-1">
input type="button" value="Show the graph" onclick="phase1(document.form1.urlbox.value)">
/form>
<p>Graph Area</p> <canvas id="tempGraph" width="350" height="300"></canvas> <canvas id="lightGraph" width="350" height="300"></canvas> <canvas id="pirGraph" width="350" height="300"></canvas> <canvas id="airPolGraph" width="350" height="300"></canvas>
<br>
textarea id="source" name="source" rows="20" cols="100"> source data
/textarea>
textarea id="message" name="message" rows="20" cols="100">
/textarea>
/body>
/html>
}}
