Edited at

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

More than 1 year has passed since last update.

昨日

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