実現したいこと

体調グラフ機能, ボタンのON/OFFでカラムの表示/非表示を切り替える

メンターから, Ajaxは学習コストが高いのでjQueryでやった方が早くできるとアドバイスを頂いた。

各カラムのボタンのtoggleによって, 対応するdatasetを追加したり、削除したりできるようにしたい。

どう実装するのか?

この記事についているデモの通りに実装していく。

How to add a dataset toggle to Chart.js?

大まかな流れは、

• ToggleするリンクをHTML作成し, class名をカラム名 + enabledとする
• JavascriptでenableCheck関数を作成
  • 各カラムのクラス名にenabledが付いているかを判定
  • trueなら変数にグラフのdatasetを代入, falseならnilを代入
• jQueryの.readyでenableCheckを実行
• リンクをクリック時にグラフを削除し, enableCheckを再度実行した上でグラフ描画を行う

結果

datasetとlabelなどの値は一旦固定にして, Toiggle機能のみ実装した。

次回はRailsで全カラムのデータをブラウザにレスポンスできるようにする。

その他の作業

jQuery 要素を表示/非表示にする(toggle) を参考にボタンのtoggleを試しに作成する

プロを目指す人のためのRuby入門

• 11章 デバッグ技法