ccchart Demos

ccchartでしきい値を設定してアラートするサンプル

<canvas id="hoge2"></canvas> 
<script>
/* =============================================
 * チャートhoge2
 */
 
 
var chartCfg2 = {
  config: {
    "title" : "データがしきい値超えたらアラート",
    "subtitle" : "onmessage で設定する",
    "type": "line",
    "useMarker": "css-ring",
    "markerWidth": 10,
    "minY": 0,
    "maxY": 100,
    "xScaleRotate": -45,
    "xScaleAlign": "right",
    "xScaleYOffset": 18,
    "paddingBottom": 80,
    "colorSet" : ["#DDA0DD","#3CB000"],
    "xLines": [
          {"val": 70, "color": "orange"},
          {"val": 20, "color": "cyan"}
        ]
  },
  "data": [
    ["時間"],
    ["test data1"],
    ["test data2"]
  ]
};

//  ccchart.wsCloseAll();//一旦クリア
ccchart
  .init('hoge2', chartCfg2).base('white')

  .ws('ws://ccchart.com:8016')
  .on('message', ccchart.wscase.oneColAtATime)
  .on('message', function(msg){
  
    var that = ccchart.ops[this.op.id];//カレントチャートをthatへ入れておく
    var ws = this; //カレントWebSocketオブジェクトをwsへ入れておく
  
    // 着信したデータをJSONでパースする。不正規データなら無視
    try { var msgs = JSON.parse(msg.data); } catch(e) { return }

    // oneColAtATime 一度に1列ずつ [["2013"],[435],[600]] といった配列で届く場合
    for (var i = 0; i < msgs.length; i++) {

      
      //最初のデータ 1  (that.rowNames[1]) が
      if(i===1){
        if(msgs[i] >= 70){ //70超えたら.memoメソッドで文字出力
          that.memo({
            val: 'Over 70',
            left: 40,
            top:  80,
            color: 'orange',
            font: '100 32px "Arial"'
          })
          
          //アラートログ
          log1.innerHTML+= 
            '<div style="color:orange">Over  70: ' 
            + that.rowNames[1] + ': '
            + msgs[0] + ' ' + msgs[1]+ ' ' + msgs[2] 
            +'</div>'
        }
        if(msgs[i] <= 20){ //20を割ったら.memoメソッドで文字出力
          that.memo({
            val: 'Under 20',
            left: 40,
            top:  80,
            color: 'cyan',
            font: '100 32px "Arial"'
          })
          
          //アラートログ
          log1.innerHTML+= 
            '<div style="color:cyan">Under 20: ' 
            + that.rowNames[1] + ': '
            + msgs[0] + ' ' + msgs[1]+ ' ' + msgs[2]
            +'</div>'
          }
        }
      }

      //  console.log(that)
      //  console.log(ws)
      //  ccchart.wsCloseAll();//テスト用の停止
  });
      
</script>

閾値　超えたデータ名　時間　data2　data1