はてなグラフみたいなもの

毎日いろんなデータを記録しています。体重とか睡眠時間とか、その他いろいろ。

はてなグラフがあったときは、そこに入力して、ときどきグラフを確認していました。

グラフといっても折れ線グラフですが、グラフを見るとどんな傾向かわかってきます。

体重なら過食ぎみの場合は太っていくとか。たぶんストレスかな、とか。

グーグルスプレッドシートなど使うのもいいですけど、個別にいちいち設定するのが面倒だったりします。

というわけで、項目設定　→　データ入力　→　折れ線グラフ表示のツールです。

Webアプリの動作

最初の画面です。

ログインして、マイページや広告を登録します。

登録方法などは、以下のブログを参照してください。

https://coconala.com/blogs/1890784/12815

「うたらぼグラフ」をクリックします。

左のメニューの「項目一覧」をクリックします。

登録ボタンをクリックします。

データを入力します。

登録ボタンをクリックします。

※登録されました。

※訂正、削除ボタンで、データの訂正・削除ができます。

データをもう1件入力します。

２件の項目一覧の表示画面です。

ちなみに、左のメニューの「一覧」をクリックしたときの画面です。

※項目の並び順は、左から右になっています。

※グラフ表示ボタンの左の項目は、並び順です。

並び順と公開フラグを変更します。

※睡眠を並び順１、公開するに変更しました。

※公開する項目は水色です。

ちなみに、左のメニューの「一覧」をクリックしたときの画面です。

※項目の並び順は、左から右になっています。

※グラフ表示ボタンの左の項目は、並び順です。

※公開する項目は水色です。

上記の状態で「指定日付行の追加」ボタンをクリックします。

※2020年6月23日のデータが追加されました。

睡眠と体重のデータを入力します。

通常は数値と小数点ですが、コロンと数値（たとえば5:23）の場合は、計算されて数値と小数点となります。

※データが変更されると、赤字となり、更新ボタンが赤くなります。

更新ボタンをクリックします。

※更新されたので、更新ボタンは押せなくなり、赤字は黒くなりました。

グラフ表示ボタンをクリックします。

ちなみに、60日分のデータを入力したときのグラフ表示です。

※7日平均、30日平均が表示されますので、プラスマイナスの傾向がわかります。

※グラフイメージ保存ボタンをクリックすると、png形式のイメージが保存できます。

※項目が「公開する」（水色の項目）の場合、HOMEでグラフ表示されます。

※公開する項目が複数ある場合は、直近にグラフ表示したものがHOMEで表示されます。

HOMEをクリックします。

※初期表示はHOMEをクリックした場合と同じです。

うたらぼの場合

うたらぼの場合は、URLの指定は以下のとおりです。

index.php?ad=utalab

※マイページの設定で画面表示が「PC版」の場合です。

※マイページの設定で画面表示が「スマホ版」の場合です。

上記のURLに「&NL=」を追加すると、グラフだけの表示となります。

index.php?ad=utalab&NL=

※PC版、スマホ版、同じです。

※このURLを利用することで、ブログで利用できます。（iframeタグ使用）

まとめ

グラフ表示やエクセルのような入力は、有料JavaScriptライブラリを使用しています。

wijmoといいますが、いろんな企業で使われているようです。

30日のトライアル版はあるようです。

見た目や使いやすさを追求するには、自分で開発するより、有料版でも購入したほうがいいでしょう。

今回はAJaxやJSONを使っています。

PHPだけだと、POSTして、画面生成して表示となりますが、AJaxを使うと部分的に表示変更ができます。

うまく使うと、使い勝手がよくなります。

というわけで、wijmoはいろいろできますので、これからもいろいろ使ってみます。

では、また！