JavaScript
Node.js
ccchart
obniz

Obniz の ディスプレイに ccchart で描いてみる

昨日
Obniz に canvas でチャートを描いてみる
https://qiita.com/toshirot/items/fe596aeb12e9a78ba408

でObniz の ディスプレイに ccchart でチャートを描けることがわかったので、


そのコードサンプル。
barタイプのチャートをタイトルや値を省略してチャートだけ表示する「onlyChart」モードで描いてみる。

結果は、"barWidth": 5 にしたので少しbarが細くなってこんな感じ。


ccchart.js を全く変更せずに config 値を変えるだけで Obniz に描画できました。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/obniz@1.4.3/obniz.js" crossorigin="anonymous"></script>
  <script src="https://ccchart.org/js/ccchart.js" charset="utf-8"></script>

</head>
<body>

<h1>obniz ccchart</h1>

<canvas id=hoge></canvas>

<script>
let chartdata = {

    "config": {

      "type": "bar",

      "onlyChart": "yes",

      "barWidth": 5,

      //Canvas size
      "width": 128,
      "height": 64,

      //Axis X
      "axisXLen": 2,
      "axisXWidth": 1,
      "xColor":"#fff",

      //Axis Y
      "axisYLen":0,

      //Bar color
      "colorSet": ["#fff"],

      //attributes not used
      "useShadow":"no",
    },


    "data": [
       ["month",1,2,3,4,5,6,7,8,9,10,11,12],
       ["test",20,23,12,20,42,50,72,63,30,20,32,50]
   ]
}

// const canvas = document.getElementById("hoge")
// const ctx = canvas.getContext('2d');
const obniz = new Obniz("OBNIZ_ID_HERE");

//connect
obniz.onconnect = async function () {

    let a=ccchart.init('hoge',chartdata)
    obniz.display.draw(a.ctx);

}

</script>
</body>
</html>

コードはこんな感じ

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/obniz@1.4.3/obniz.js" crossorigin="anonymous"></script>
  <script src="https://ccchart.org/js/ccchart.js" charset="utf-8"></script>

</head>
<body>

<h1>obniz ccchart</h1>

<canvas id=hoge></canvas>

<script>
let chartdata = {

    "config": {

      "type": "pie",

      "onlyChart": "yes",

      //Canvas size
      "width": 128,
      "height": 64,

      //Bar color
      "colorSet": ["#fff"],

      //attributes not used
      "useShadow":"no",

      //attributes
      "useVal": "yes",
      "percentVal":"no",
      "pieDataIndex": 0,//データとして使う列index
      "pieHoleRadius": 12,//ドーナツ穴の半径
      "colNameFont": "100 14px 'Arial'",//ドーナツの中の項目名フォント (month)
      "valFont": "100 18px 'Arial'",//値のフォント
      "textColor": "#fff"
    },


    "data": [
       ["month",1,2,3,4,5,6,7,8,9,10,11,12],
       ["abc",80,23,12,20,42,50,72,63,30,20,32,50],
       ["def",20,33,15,10,52,60,32,68,45,10,12,60],

   ]
}

// const canvas = document.getElementById("hoge")
// const ctx = canvas.getContext('2d');
const obniz = new Obniz("OBNIZ_ID_HERE");

//connect
obniz.onconnect = async function () {

    let a=ccchart.init('hoge',chartdata)
    obniz.display.draw(a.ctx);

}

</script>
</body>
</html>

で、次はこれ
ccchart-v1.12.090にObniz のリアルタイムチャート描画を暫定実装してみた https://qiita.com/toshirot/items/01afe0352aac9bbb6797