質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

0回答

909閲覧

expressを使って温度グラフを作成したい。グラフの表示を日毎や月毎に変更でき、次の月、前の月、などボタンを押して表示を変更したい。

ccchogeee

総合スコア11

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2021/11/15 04:02

編集2021/11/15 07:10

ざっくりとした質問で大変申し訳ありません。
参考にできるサイトやアドバイスをいただければ幸いです。

やりたいこと

express、chart.jsを使って温度グラフを表示するwebアプリを作ろうとしています。
目標はiPhoneのヘルスケアアプリのようなものです。

  1. 最初アクセスすると、最新の日にちの温度グラフが表示されます。
  2. 「←」の矢印を押すと、前の日のグラフが表示されます。
  3. 「→」の矢印を押すと、次の日のグラフが表示されます。
  4. 表示方法を「日」「月」「年」ごとなども選んで、表示を変更したいです。

現状

いまのところ、localhost:3000/selectにアクセスして、
最新の日にちの温度グラフを表示するところができていますが、
前の日や次の日への変更、年月日の表示方法の変更など、
どのような動きをさせて、どのように値を渡せばいいのか検討がつきません。

localhost:3000/select
で最新グラフが表示されるようになっているのですが、
localhost:3000/select?page=20211113
localhost:3000/select?page=20211114
localhost:3000/select?page=202109
のように値を渡しながらページを変更していければいいのかなと考えています。

値の渡し方、ページの表示の仕方などで、
参考にできるサイトやアドバイス、ヒントなどあれば教えていただきたいです。
よろしくお願いします。


app.js(/selectの部分を抜粋)
最新の日付を取得し、その日付の温度グラフを表示できます

javascript

1app.get('/select', async (req, res) => { 2 try{ 3 const c = await connection; 4 //データ内の最新の日付を持ってくる 5 const [now] = await c.query( 6 'SELECT DATE_FORMAT(date, \'%Y%m%d\') AS latestDate FROM data where date=(select max(date) from data);', 7 ); 8 const latestDate = now[0].latestDate; 9 //最新日付を持つデータを全て持ってくる 10 const [items] = await c.query( 11 'SELECT date, temperature FROM data and DATE_FORMAT(date, \'%Y%m%d\') = \"' + latestDate + '\"ORDER BY date ASC;', 12 ); 13 14 //最新のデータを取得して表示する 15 const [latests] = await c.query( 16 'SELECT * FROM data where date=(select max(date) from data);', 17 ); 18 res.render('index.ejs', {items, latests}); 19 }catch (e) { 20 console.log("SQLクエリの発行に失敗"); 21 console.error(e); 22 res.send('サーバーでの動作が失敗。'); 23 }finally { 24 } 25 26});

index.ejs(<script>を抜粋)

Javascript

1 2function testButton(){ 3 console.log("ボタンをおした"); 4 console.log(window.location.search); 5 const params = new URLSearchParams(window.location.search); 6 const currentPage = Number(params.get('page')); 7 const nextPage = currentPage + 1; 8 window.location.href = "/select?page=" + nextPage;

↑これで、ボタンを押すと、page=1の値がインクリメントされていくのがわかりました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問