knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

TypeScript + node/express 、chart.jsでグラフ表示

index:

概要:

前の TypeScript + node/express 関連で
前回の、csvインポートで sqliteに保存された測定値を
chart.js グラフ表示となります。

環境

TypeScript
node.js
npm
sqlite3
chart.js

参考のコード

github.com

画面

f:id:knaka0209:20190927193444p:plain

手順

・表の作成
https://github.com/kuc-arc-f/ts_express5_chart/blob/master/doc/mdats.sql

npm install

・tscコンパイル
npm run build
( 開発する場合 、npm run watch )

・express 起動
npm start

実装など

api、データ取得
https://github.com/kuc-arc-f/ts_express5_chart/blob/master/routes/api_mdats.ts

/******************************** 
* 
*********************************/
router.get('/index', function(req: Request, res: Response, next: NextFunction ) {
    let db = new sqlite3.Database( AppConst.dbfileName )
    let items:any[] = [];
    let sql = `
    SELECT id,hnum, lnum ,date(mdate, '+9 hours') as mdate
    FROM mdats order by mdate;
    `;
    db.serialize(function() {
        db.all(sql , function(err: any, rows:any[] ) {
            rows.forEach( function (item:any[] ) {
                items.push(item  );
//                console.log(item )
            });
            var param = {"docs": items };
            res.json(param);
        });
    });
    db.close();
});

・画面ejs
https://github.com/kuc-arc-f/ts_express5_chart/blob/master/dist/views/mdats/chart.ejs