SIMILE Timeplotでoutputzのグラフを作成する

JavaScript


Groovyでoutputzの文字数を取得する(改行の改造版)で取得したoutputzのデータをSIMILE Timeplotでグラフ化する。

データ形式

データは、日付(-区切り)とoutputzから取得した文字数で、カンマ区切りになっている。

----省略-----
2011-01-01,6831
2011-01-02,4143
2011-01-03,5769
2011-01-04,2839
2011-01-05,4038
2011-01-06,3059
2011-01-07,2276
2011-01-08,2276
2011-01-09,5727
2011-01-10,8288
2011-01-11,10980
2011-01-12,3572
2011-01-13,7690
2011-01-14,311
2011-01-15,4725
HTML

SIMILE Timeplotで点と線の折れ線グラフを作成するで作成したHTMLをベースに作成

<html>
  <head>
    <title>outputz</title>
    <link rel='stylesheet' href='styles.css' type='text/css' />
    <script src="http://api.simile-widgets.org/timeplot/1.1/timeplot-api.js" type="text/javascript">
    </script>
    <script>
        var timeplot;
        function onLoad() {
            var darkblue = new Timeplot.Color('#00008b');
            
            var eventSource = new Timeplot.DefaultEventSource();
            var plotInfo = [
                Timeplot.createPlotInfo({
                    id: "plot1",
                    dataSource: new Timeplot.ColumnSource(eventSource,1),
                    valueGeometry: new Timeplot.DefaultValueGeometry({
                        gridColor: "#000000",
                        axisLabelsPlacement: "left",
                        min: 0
                    }),
                    timeGeometry: new Timeplot.DefaultTimeGeometry({
                        gridColor: "#000000",
                        axisLabelsPlacement: "top"
                    }),
                    lineColor: darkblue,
                    dotColor: darkblue,
                    showValues: true
                })
            ];
          
            timeplot = Timeplot.create(document.getElementById("outputz-timeplot"), plotInfo);
            timeplot.loadText("outputz.txt", ",", eventSource);
        }
        
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    timeplot.repaint();
                }, 100);
              }
        }
  </script>
  </head>
  <body onload="onLoad();" onresize="onResize();">
      <ul id="path">
      <li><span>outputz</span></li>
    </ul>
  <div id="outputz-timeplot" style="height: 500px;"></div>
  </body>
</html>
CSS
@import url("http://www.simile-widgets.org/styles/common.css");
動作するHTML

http://dl.dropbox.com/u/645223/outputz/outputz.html







気になるモノ




差し込み収納ラック



差し込み収納ラック


ベッドやソファに簡単に差し込むだけで収納ラックになる新しい発想のラックが登場！座ったまま、寝たまま、リモコンがすぐ見つかる！

あなろ(インテリア雑貨)

￥ 980 （税込、送料別）

価格は記載時点のものです。購入前にご確認ください。





楽天市場 で詳細を見る