メインフレームでシステムを動かしてきた会社の多くがWEBシステムに切り替えを行なっているようだ。
メインフレームの出荷台数は５年で半分になっているらしい。
オープンシステムがもたらす数々のメリット
WEBであれば、世界中のどこからでもアクセスできる。
オープンソースが豊富にあり、システム構築費を抑えられる
もちろん一方でリスクもあり
セキュリティの知識が必要
ネットワークやインフラの知識が必要
リスクよりも大きなメリットで切り替わりが起こっているのだが、WEBシステムで業務系や解析系などを動かす際に求められる
BIツールにおいて、グラフ表示をサクッと行うことで、かなりの開発コストが削減されるので、非常に便利だったオープンソースの「ccchart」を紹介したい。
ccchart :
http://ccchart.com/
Download
ccchart本体をDLしてHTMLのheadタグで読み込んで使います。
※右クリックでDLしてください。（上記WEBサイトからもDLできます）
Download :
http://ccchart.com/js/ccchart.js
そしてHTMLソースの周辺階層
index.html
ccchart.js
Type
ccchartは１３パターンもの種類のグラフ表示が可能です。
一つのライブラリで切り替えられるので非常に便利ですね。
1. heatmap
2. candle
3. scatter
4. Pie
5. Stacked Parcent
6. Stacked Area
7. Area
8. Bezier
9. Amplitude
10.Stacked
11.Bezier Line
12.Line
13.Bar
Source
HTMLに記述してもいいし、外部JSファイルに記述してもいいですが、簡単なHTML記述タイプをサンプルにします。
グラフタイプは標準的な「Line」で表示してみます。
※本家サイトのDEMOのコピペです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>ccchart</title>
<script type="text/javascript" src="ccchart.js"></script>
</head>
<body>
<canvas id="chart"></canvas>
<script>
var line = {
"config": {
"title": "Line Chart",
"subTitle": "Canvasを使ったシンプルなラインチャートです",
"type": "line",
"lineWidth": 4,
"colorSet":
["red","#FF9114","#3CB000","#00A8A2","#0036C0","#C328FF","#FF34C0"],
"bgGradient": {
"direction":"vertical",
"from":"#687478",
"to":"#222222"
},
"useMarker": "css-ring",
"markerWidth": 12
},
"data": [
["年度",2007,2008,2009,2010,2011,2012,2013],
["紅茶",435,332,524,688,774,825,999],
["コーヒー",600,335,584,333,457,788,900],
["ジュース",60,435,456,352,567,678,1260],
["ウーロン",200,123,312,200,402,300,512]
]
};
ccchart.init('chart', line)
</script>
</body>
</html>
View
このページで表示テスト。
※手抜きして画像を表示してます。
実際、そんなに難しくないですね。
RealTime
ccchartはリアルタイムに描画を行う機能も設けられています。
サーバー再度での処理も必要になるので、別記事で説明したいと思います。
応用
NodeJSなどのweb-socketを使えば、リアルタイムにセンサーデータを表示できるページを作る事も可能です。
IDCフロンティアが行なったハッカソンで使用して、会社のブログで掲載したので、参照ください。
Raspberry Piとセンサーでヘルス情報の取得（心拍数編）
Link
下記参考にさせていただいたサイトです。
ccchartへWebSocketから流し込む
ccchart用プラグインの作り方
ccchartの使い方
ccchartでグラフを描画する
