• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：jquery＋csvで簡易電力メーター）

jquery＋csvで簡易電力メーターを作成中！

このQ&Aのポイント
  • 節電対策として、jquery＋csvを使用して簡易電力メーターを作成しています。
  • 現在の時間帯の電力使用量を読み込み、その値を画像の長さに反映させています。
  • しかし、特定のCSVに対応する際には最終行の3列目を指定する必要があります。どのようにアプローチすればよいでしょうか？

質問者が選んだベストアンサー

  • ベストアンサー
  • mikemike7
  • ベストアンサー率87% (97/111)
回答No.3

>サンプルを単純化して、以下の様にしてみました。 まあ、それが良いならそれでいいですが（笑 必要な内容を消すことは単純化とはいいませんよ。 >最終行を読み込むにはどのようにするとよいのでしょうか？ 以下の行がそうです。 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">'; と書いても最終行のデータしか掲載されませんよ。 全体をループさせ、各行ごとに表示させないと。 私のソースじゃ、そうしているんですけどねえ。 なぜわざわざ消したのか...わからない。

すると、全ての回答が全文表示されます。

その他の回答 (5)

回答No.6

<!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">&nbsp;</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.json?screen_name=setsudensan&count=24&callback=view2"> </script> <script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=tohokuepcopower&count=48&callback=view"> </script>

すると、全ての回答が全文表示されます。
回答No.5

src がきえてた。てきとうにほせいして //api.twitter.com/1/statuses/user_timeline.json?screen_name=setsudensan&count=24&callback=view"></script>

すると、全ての回答が全文表示されます。
回答No.4

よくよくかんがえたら、ぜんぜんこたえになってなかった。 <!DOCTYPE html> <title></title> <style type="text/css"> meter { 　width:300px; } </style> <h1>東京電力</h1> <div id="hoge">&nbsp;</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.json?screen_name=setsudensan&count=24&callback=view"></script>

すると、全ての回答が全文表示されます。
  • mikemike7
  • ベストアンサー率87% (97/111)
回答No.2

節電対策ということなのでのってみました。 日付、時間もimgの幅に入ってしまいますよ。 カンマ区切りでOKなら、以下の感じでどうでしょうか。 <script type="text/javascript"><!-- $(function(){ $.get("sample.csv",{}, createGraph); }); function createGraph(gData){ var lines = gData.split("\r\n"); var lastdata = lines[(lines.length - 1)].split(","); var htmlText = "<p>現在の時間帯の電力使用量 : "+lastdata[2]+"</p>"; for (var i = 0; i < lines.length; i++){ if(lines[i] == ""){continue;} var gPoint = lines[i].split(","); htmlText += "<p>"+gPoint[0]+" "+gPoint[1]+"</p>"; for (var ii=2; ii < gPoint.length; ii++){ htmlText += '<div><img src="bar.gif" width="'+gPoint[ii]/4+'" height="30"></div>'; } } $("#chart").html(htmlText); } --></script> <div id="chart"></div> 統計みたいなら最終行から読み込んだほうが良い気もしますけどね（＾＾； あと$.getだとIEとか結構キャッシュされちゃうと思うので、頻繁に更新するならキャッシュさせないようにした方が良いかも。

momo_monom
質問者

補足

早速のご回答ありがとうございます。 サンプルを単純化して、以下の様にしてみました。 <script type="text/javascript"> <!-- $(function(){ $.get("sample.csv",{}, createGraph); }); function createGraph(gData){ var lines = gData.split("\r\n"); var lastdata = lines[(lines.length - 1)].split(","); var htmlText = '<img src="bar.gif" width="'+lastdata[2]/4+'" height="30">'; $("#chart").html(htmlText); } --> </script> CSVの１行目の3列目を読み込むようになりました！ lastdata[2] というところで、３列目を指定しているのですね。（？） それで、CSVなんですが最新データが最終行に追加されるようで、 最終行を読み込むにはどのようにするとよいのでしょうか？ var lastdata = lines[(lines.length - 1)].split(","); の辺りで、行数を分析しているのかな？と想像してみたのですが、 Javascriptのリファレンスを見ると列を分析しているような感じで、 ちょっと詰まってしまいました。 よろしくお願い致します。

すると、全ての回答が全文表示されます。
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

次の行がなければ最終行 という処理をすればOK。

momo_monom
質問者

補足

なるほど、、、ありがとうございます。 しかし、私のjavascriptの知識では、 手詰まりの模様です。

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

OKWAVE コラム

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する