C3.js触らせて頂きましたmm

こんにちは〜
クリスマスも絶賛出勤している井古田です。

クリスマスは今年もやってくる〜♪ みなさんきっと予定があるんでしょうね・・・

そんな中、今回は「C3.js」について取り上げたいと思います。


D3のラッパーライブラリで、主にチャートに特化したビジュアライゼーションライブラリです。

公式ホームページにいろんなサンプルチャートがあるので、ぜひ見てくださいね( ´ ▽ ` )ノ

使ったみたよ

広告サービスを運用していているのですが、年末だし、ちょろっと売上げだったり、粗利が1年間どんな感じだったのかなぁ〜って気になったりしませんか?右肩上がりなのか下がっているのか・・・笑
1年分のデータをCSVに出力して見ても、いまいち傾向って把握しにくいですよね。

そんな時、C3.jsを使えば簡単にチャートにすることが可能です!! すごい(^O^)

はじめに、以下のようなCSVを用意します。(ファイル名は「summary.csv」)

```
month,売上,粗利
2015-12-01,10000,1000
2015-11-01,9000,900
2015-10-01,8000,800
2015-09-01,7000,700
2015-08-01,6000,600
2015-07-01,5000,500
2015-06-01,4000,400
2015-05-01,3000,300
2015-04-01,2000,300
2015-03-01,1000,200
2015-02-01,500,100
2015-01-01,100,50
```

次に、githubからC3.jsをダウンロードします。

今回必要になるファイル

・c3.min.css
・c3.min.js

そして、以下のようなhtmlを用意してください


これで完了です。ブラウザで確認してみましょう!

年間売上


売上も粗利も右肩上がりですね! これで安心して年を越えられそうです(笑)
※もちろんデータはサンプルです。

Merry Christmas♪