9/14の続き。3週間越しでやっとグラフができた。週に2時間くらいしか時間が取れないのでしゃーないが。
上のグラフは、LanguageTrainerの問題の回答状況、復習状況を示したもの。一度問題を解くと「1回解いた」に集計される。翌日に同じ問題が出るので復習すると「1日復習完了」に、さらに1週間後にまた復習すると「1週間復習完了」に、(略)、で、最終的に「1か月復習完了」に集計されたものを、長期記憶に入ったものと考える。完全に自分用。でも、もっと機能を増やしてまともに公開できるようになったら、皆さんにもモチベーション維持のために活用できるのではないかと思う。
PHPでDBを読んでJSONを作り、それを下流のJavaScriptに渡してグラフを描いてもらう、という設計にした。遅いmiraiserverでも3秒程度で表示される。せいぜい150行程度のコードで、キレイなグラフが描けた。flotr2は楽だ。
今回最もつまづいたところ
<head>
<script>
(function bars_stacked(container) {
//グラフをなんやかんや
})(document.getElementById("graph_individual"));
</script>
</head>
<body>
<div id="graph_individual"></div>
</body>
では、動かない。divのオブジェクトを作るよりも先にscriptの中身が動いてしまうらしく、オブジェクトがねぇよ、というエラーになる。
<head>
</head>
<body>
<div id="graph_individual"></div>
<script>
(function bars_stacked(container) {
//グラフをなんやかんや
})(document.getElementById("graph_individual"));
</script>
</body>
とせざるをえない。
PHPからJSONを受け取るには、PHPで変数に
$json_data = json_encode( $info );
のように変数に文字列をしまっておいて、JavaScript側では
var arr = JSON.parse('<?php echo $json_data ?>');
のようにして受け取ると、見事に処理が進む。このとき、必ずphpのタグをシングルクォーテーションで括っておかないと、文字列と認識されずエラーになってしまうので注意。
なお、一番右の「1か月復習完了」に入るまでに最低2か月かかる。気が長い話だが、2か月自分で使ってみて、相当効果があった。特に、伸び悩んで行き詰っていた中・韓国語に光が見えてきた。
