Javascriptでグラフ描画

dc.jsを使って、音楽再生履歴のグラフ描画を書き直すという挑戦、昨日は完成しなかったが、今日は完成とまではいかないまでも、形はできた。データに対するグラフの出力、というところまではたどりつくことができた。

このサイトが最終的には非常に参考になった。

また、dc.jsについての基本的な使い方については、こちらで勉強させてもらった。艦これのデータがサンプルというのも楽しかったw

私の場合は、データはRDBに入っていて、集計と抽出はSQLで完了している。それを（現状は）PHPで出力して、Javascript（dc.js）でグラフの描画だけをする、という使い方になっている。まだ、このサーバには反映していないが、色、書式などのバランス、そして、サイト全体のCSSの見直しと合わせて入れ替え、ということにしようかと思っている。

一番ハマったのは、このライブラリ、Javascriptでデータを処理して、idを指定したDIV要素（空）にグラフを出力する。

これ、順番が重要なのである。文法的に間違いを無くしても、デバッグが完了しても、これが間違えていると、グラフが出力されない。データが正しくても。

DIV要素（出力先）を先に書いておき、その次に、Javascriptを書いて、グラフの出力を指示しなければならない。グラフの出力を指示するコードの次の行以降にDIV要素があると描画されない。ここにハマった。これだけは私の経験として書いておく。