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

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

でObniz の ディスプレイに ccchart でチャートを描けることがわかったので、
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ccchartで描けた。 <a href="https://t.co/HF4IpvngqY">pic.twitter.com/HF4IpvngqY</a></p>&mdash; 高橋登史朗 ( T blockchain T ) (@toshirot) <a href="https://twitter.com/toshirot/status/1005843786193240064?ref_src=twsrc%5Etfw">2018年6月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

結果は、"barWidth": 5 にしたので少しbarが細くなってこんな感じ。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://t.co/NIAedSx6LU">https://t.co/NIAedSx6LU</a><br><br>こうなります。 <a href="https://t.co/8tGLNStqs4">pic.twitter.com/8tGLNStqs4</a></p>&mdash; 高橋登史朗 ( T blockchain T ) (@toshirot) <a href="https://twitter.com/toshirot/status/1006177469588619264?ref_src=twsrc%5Etfw">2018年6月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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


```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": "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>
```

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">typeをbar barWidthをlineWidthに変えるだけでこうなります。 <a href="https://t.co/HAfqbxSVzD">pic.twitter.com/HAfqbxSVzD</a></p>&mdash; 高橋登史朗 ( T blockchain T ) (@toshirot) <a href="https://twitter.com/toshirot/status/1006181278322909184?ref_src=twsrc%5Etfw">2018年6月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">pieも2値の片方だけなら白で描ける。値が3個以上は白黒だから無理。 <a href="https://t.co/Rv2pMNu4Sp">pic.twitter.com/Rv2pMNu4Sp</a></p>&mdash; 高橋登史朗 ( T blockchain T ) (@toshirot) <a href="https://twitter.com/toshirot/status/1006200532732600320?ref_src=twsrc%5Etfw">2018年6月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

コードはこんな感じ

```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