2014年08月

ccchart

http://ccchart.com

デモ・日本語ドキュメントがそろっている。特にデモの数が、非常に細かいレベルで揃っていてありがたい。
まだ実装はしてないけど、オプションも多いし、サンプルも多いし一番とっつきやすく、かつ色々なことが出来そう。


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  011  (棒グラフ 縦 図) 実験 (動くかな?)

/////// 

///////
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
var chartdata80 = {

  "config": {
    "title": "WS Bar Chart",
    "subTitle": "WebSocketで列データをリアルタイム受信し追記描画する",
    "type": "bar",
    "maxY": 100,
    "minY": 0,
    "barWidth": 24,
    "useVal": "yes",
    "maxWsColLen": 4,
    "textColors": {"title":"#222","subTitle":"#222","hanrei":"#777","unit":"#777"
          },
    "colorSet": 
          ["red","#FF9114","#3CB000","#00A8A2","#0036C0","#C328FF","#FF34C0"],
    "shadows": {"all":["#444",5,5,5]}
  },

  "data": [
    ["種別"],
    ["朝"],
    ["昼"],
    ["夜"]
  ]
};

  ccchart.wsCloseAll();//一旦クリア

  ccchart
      .init('hoge', chartdata80,
        function () {
          this
            .ws('ws://ccchart.com:8017')
            .on('message', ccchart.wscase.someColsAtATime)
        }
      );

</script>
/////// 

ccchart

http://ccchart.com

デモ・日本語ドキュメントがそろっている。特にデモの数が、非常に細かいレベルで揃っていてありがたい。
まだ実装はしてないけど、オプションも多いし、サンプルも多いし一番とっつきやすく、かつ色々なことが出来そう。


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  010  (シンプルな 折れ線の図) 実験 (動くかな?)

/////// 

///////
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
var chartdata81 = {

  "config": {
    "title": "WebSocket Line Chart",
    "subTitle": "WebSocketで列データをリアルタイム受信し追記描画する",
    "type": "line",
    "lineWidth": 1,
    "maxY": 100,
    "minY": 0,
    "useVal": "yes",
    "useMarker": "arc",
    "xScaleSkip": 3,
    "maxWsColLen": 18,
    "colorSet": 
          ["#DDA0DD","#3CB000"],
    "xLines": [
          {"useRow":1,"color":"rgba(250,250,250,0.7)"
          }
        ]
  },

  "data": [
    ["年月"],
    ["データ1"],
    ["データ2"]
  ]
};

  ccchart.wsCloseAll();//一旦クリア

  ccchart
    .init('hoge', chartdata81)
    .ws('ws://ccchart.com:8016')
    .on('message', ccchart.wscase.oneColAtATime);

</script>
/////// 

ccchart

http://ccchart.com

デモ・日本語ドキュメントがそろっている。特にデモの数が、非常に細かいレベルで揃っていてありがたい。
まだ実装はしてないけど、オプションも多いし、サンプルも多いし一番とっつきやすく、かつ色々なことが出来そう。


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  009  (Canvasを使ったベジェなライン図) 実験 くれよん(動くかな?)
/////// 

/////// 
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
var chartdata82 = {

  "config": {
    "title": "WebSocket bezierLine Chart",
    "subTitle": "Canvasを使ったベジェなラインチャートです",
    "type": "bezi",
    "lineWidth": 3,
    "maxWsColLen": 12,
    "colorSet": 
          ["red","#FF9114","#3CB000","#00A8A2","#0036C0","#C328FF","#FF34C0"],
    "bgGradient": {
            "direction":"vertical",
            "from":"#687478",
            "to":"#222222"
          }
  },

  "data": [
    ["年度"],
    ["紅茶"],
    ["コーヒー"],
    ["ジュース"]
  ]
};

  ccchart.wsCloseAll();//一旦クリア

  ccchart
    .init('hoge', chartdata82)
    .ws('ws://ccchart.com:8018')
    .on('message', ccchart.wscase.oneColAtATime);

</script>
/////// 

ccchart

http://ccchart.com

デモ・日本語ドキュメントがそろっている。特にデモの数が、非常に細かいレベルで揃っていてありがたい。
まだ実装はしてないけど、オプションも多いし、サンプルも多いし一番とっつきやすく、かつ色々なことが出来そう。


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  008  (積み上げ 縦 グラフ) 実験 (動くかな?)

/////// 
///////
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
var chartdata83 = {

  "config": {
    "title": "WebSocket stacked Chart",
    "subTitle": "積み上げチャート/ 列データを受信パターンoneColAtATimeでリアルタイム描画 ",
    "type": "stacked",
    "useVal": "yes",
    "barWidth": 12,
    "colorSet": 
          ["red","#FF9114","#3CB000","#00A8A2","#0036C0","#C328FF","#FF34C0"],
    "bgGradient": {
            "direction":"vertical",
            "from":"#687478",
            "to":"#222222"
          }
  },

  "data": [
    ["Time"],
    ["紅茶"],
    ["コーヒー"],
    ["ジュース"]
  ]
};

  ccchart.wsCloseAll();//一旦クリア

  ccchart
    .init('hoge', chartdata83)
    .ws('ws://ccchart.com:8018')
    .on('message', ccchart.wscase.oneColAtATime);

</script>
/////// 

ccchart

http://ccchart.com

デモ・日本語ドキュメントがそろっている。特にデモの数が、非常に細かいレベルで揃っていてありがたい。
まだ実装はしてないけど、オプションも多いし、サンプルも多いし一番とっつきやすく、かつ色々なことが出来そう。


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  006  (なめらか曲線 図) 実験 (動くかな?)

///////

///////
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
var chartdata85 = {

  "config": {
    "title": "WebSocket test",
    "subTitle": "列データをリアルタイム受信描画 受信パターンはoneColAtATime",
    "type": "bezi2",
    "lineWidth": 2,
    "minY": 0,
    "xScaleSkip": 3,
    "maxWsColLen": 18,
    "colorSet": 
          ["#DDA0DD","#3CB000"]
  },

  "data": [
    ["年月"],
    ["データ1"],
    ["データ2"]
  ]
};

  ccchart.wsCloseAll();//一旦クリア

  ccchart
      .init('hoge', chartdata85)
      .ws('ws://ccchart.com:8016')
      .on('message', ccchart.wscase.oneColAtATime)

</script>
/////// 

↑このページのトップヘ