jquery＋csvで簡易電力メーター

解決済

質問者：momo_monom
質問日時：2011/06/24 12:27
回答数：6件

節電対策ということで、jquery＋csvで簡易電力メーターを作成中で、
以下のような単純なCSVを読み込むものは動作するようになりました。
電力量を読み込んで、画像の長さに反映しています。

///////////

＜CSV（現在の時間帯の電力使用量）＞
733

＜スクリプト＞
$(function(){
$.get("sample.csv",{}, createGraph);
});
function createGraph(gData){
var gPoint = gData.split(",");
var htmlText = "";
for (var i=0; i<gPoint.length; i++){
htmlText = htmlText + '<img src="bar.gif" width="'+gPoint[i]/4+'" height="30">';
}
$("#chart").html(htmlText);
}

///////////

が、以下のようなCSVに対応する場合には、

・最終行の３列目

を指定して読み込む必要があるとおもうのですが、
どのような方法や考え方をするとよいのでしょうか？

＜CSV（１時間ごとの電力使用量）＞
2011/3/14,22:00,742,594,23.5
2011/3/14,23:00,738,594,23.6
2011/3/15,0:00,733,592,24.6

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： mikemike7
回答日時：2011/06/24 17:14

>サンプルを単純化して、以下の様にしてみました。

まあ、それが良いならそれでいいですが（笑
必要な内容を消すことは単純化とはいいませんよ。

>最終行を読み込むにはどのようにするとよいのでしょうか？
以下の行がそうです。
var lastdata = lines[(lines.length - 1)].split(",");

gDataの中には、
2011/3/14,22:00,742,594,23.5
2011/3/14,23:00,738,594,23.6
2011/3/15,0:00,733,592,24.6
などのデータがはいっています。

これを行ごとに分割します。
var lines = gData.split("\r\n");

linesには各行のデータが入っています。
lines[0] = "2011/3/14,22:00,742,594,23.5";
lines[1] = "2011/3/14,23:00,738,594,23.6";
lines[2] = "2011/3/15,0:00,733,592,24.6";
行数を調べるには、
lines.length
とします。
lines.lengthの値は3ですが、配列は0から始まるので、
lines.length - 1
にした番号が最終行の配列キーになりますよね。
よって、
lines[(lines.length - 1)];
には、
2011/3/15,0:00,733,592,24.6
が入ります。
それを列に分割しなければなりません。
.split(",");
を追加し、
var lastdata = lines[(lines.length - 1)].split(",");
としています。

この時点でlastdataには
lastdata[0] = "2011/3/15";
lastdata[1] = "0:00";
lastdata[2] = "733";
lastdata[3] = "592";
lastdata[4] = "24.6";
となっています。

ただ
var htmlText = '<img src="bar.gif" width="'+lastdata[2]/4+'" height="30">';
と書いても最終行のデータしか掲載されませんよ。

全体をループさせ、各行ごとに表示させないと。
私のソースじゃ、そうしているんですけどねえ。
なぜわざわざ消したのか...わからない。

- 0
- 件

通報する

No.6

回答者： babu_baboo
回答日時：2011/07/01 18:48

<!DOCTYPE html>

<title></title>
<style type="text/css">
meter {
width:300px;
border-width:50px;
}
</style>

<h1>東北電力</h1>
<div id="hoge"> </div>
<h1>東京電力</h1>
<div id="hoge2"></div>

<script>
function view (data) {
var no = 0;
var obj;
var rec;
var html = '';
var day;

data.reverse ();
while (obj = data[no++]) {
day = new Date (obj.created_at);
rec = obj.text.replace (/,/g, '').match (/([-+]?[0-9.]+)/g);
if (rec.length == 12) continue;
dt = rec[0] + ':' + rec[1] + '-' + rec[2] + ':' + rec[3];
html += '<li>' + dt + '<meter high="90" max="100" value="' + rec[6] +
'"> 電力使用率:'+rec[6]+' % </meter> '+rec[4]+'万kW / '+rec[5]+'万kW</li>';
}
document.getElementById ('hoge').innerHTML = '<ol>'+ html + '</ol>';
}

function view2 (data) {
var no = 0;
var obj;
var rec;
var html = '';
var day;
data.reverse ();

while (obj = data[no++]) {
day = new Date (obj.created_at);
rec = obj.text.replace (/,/g, '').match (/([-+]?[0-9.]+)/g);
if (rec) {
dt = day.getDate () + ' ' + day.getHours () + ':00';
html += '<li>' + dt + '<meter high="90" max="100" value="' + rec[2] +
'"> 電力使用率:'+rec[2]+' % </meter> '+rec[1]+'万kW / '+rec[4]+'万kW</li>';
}
}
document.getElementById ('hoge2').innerHTML = '<ol>'+ html + '</ol>';
}

</script>
<script src="http://api.twitter.com/1/statuses/user_timeline. …
</script>
<script src="http://api.twitter.com/1/statuses/user_timeline. …
</script>

- 0
- 件

通報する

No.5

回答者： babu_baboo
回答日時：2011/06/24 19:57

src がきえてた。

てきとうにほせいして

//api.twitter.com/1/statuses/user_timeline.json?screen_name=setsudensan&count=24&callback=view"></script>

- 0
- 件

通報する

No.4

回答者： babu_baboo
回答日時：2011/06/24 19:54

よくよくかんがえたら、ぜんぜんこたえになってなかった。

<!DOCTYPE html>
<title></title>
<style type="text/css">
meter {
　width:300px;
}
</style>

<h1>東京電力</h1>
<div id="hoge"></div>

<script>
function view (data) {
　var no = 0;
　var obj;
　var rec;
　var html = '';
　var day;
　
　data.reverse ();
　
　while (obj = data[no++]) {
　　day = new Date (obj.created_at);
　　rec = obj.text.replace (/,/g, '').match (/([-+]?[0-9.]+)/g);
　　dt = day.getDate () + ' ' + day.getHours () + ':00';
　　html += '<li>' + dt + '<meter high="90" max="100" value="' + rec[2] +
　　　　　　'"> 電力使用率:'+rec[2]+' % </meter> '+rec[1]+'万kW / '+rec[4]+'万kW</li>';
　}
　document.getElementById ('hoge').innerHTML = '<ol>'+ html + '</ol>';
}
</script>

<script src="http://api.twitter.com/1/statuses/user_timeline. …

- 0
- 件

通報する

No.2

回答者： mikemike7
回答日時：2011/06/24 14:07

節電対策ということなのでのってみました。

日付、時間もimgの幅に入ってしまいますよ。
カンマ区切りでOKなら、以下の感じでどうでしょうか。

<script type="text/javascript"></script>
<div id="chart"></div>

統計みたいなら最終行から読み込んだほうが良い気もしますけどね（＾＾；
あと$.getだとIEとか結構キャッシュされちゃうと思うので、頻繁に更新するならキャッシュさせないようにした方が良いかも。

この回答への補足

早速のご回答ありがとうございます。
サンプルを単純化して、以下の様にしてみました。

<script type="text/javascript">

</script>

CSVの１行目の3列目を読み込むようになりました！
lastdata[2] というところで、３列目を指定しているのですね。（？）

それで、CSVなんですが最新データが最終行に追加されるようで、
最終行を読み込むにはどのようにするとよいのでしょうか？

var lastdata = lines[(lines.length - 1)].split(",");

の辺りで、行数を分析しているのかな？と想像してみたのですが、
Javascriptのリファレンスを見ると列を分析しているような感じで、
ちょっと詰まってしまいました。
よろしくお願い致します。