[Node.js]20分でできる!GoogleChart表示

JavaScript

20分でできる!チャート表示

Node.js + Express + ejs + Google Chart API
これらを使ってグラフを描画する画面を作ってみましょう

実際やってみると割と簡単にできました!

以下のStepで進んでいきます

Step1. Node.jsのプロジェクト作成
Step2. npm install
Step3. GoogleChartのサイトからコードをコピー
Step4. 処理をちょこっと書き換える

ちなみに環境は Mac です
Windowsでも大きな違いは無いと思います

Step1. Node.jsのプロジェクト作成

パッケージ初期化

Nodeを使う時はまずこれですよね!

$ npm init

今回はサンプルなので、デフォルトのまま Enter 連発でOKっす
package.jsonが作成されたら次の作業っす

Step2. npm install

Expressをインストール

以下のコマンドを実行してExpressを使えるようにします

$ npm install --save express

Expressの公式サイト↓
https://expressjs.com/ja/

ejsをインストール

ejsはテンプレートエンジンと言われるものです

今回はこのテンプレートでチャート表示に必要な記述を固定して
表示対象のデータだけをテンプレートへ引き渡すようにします

これも以下のコマンドを実行して使えるようにしておきます

ejsの公式サイト↓
https://ejs.co/

Node起動

プロジェクトフォルダ直下に index.js を作成し
以下のコードを貼り付け&保存してください

const express = require('express');

const app = express();

app.get('/healthz', (req,res,next) => {
  return res.status(200).send({'status': 'OK'});
});

app.listen(3000, () => {
  console.log('start express ...');
})

terminal or コマンドプロンプトで起動します

$ node index.js
start express ...

動作確認

ブラウザで確認しましょう

localhost:3000/healthz へアクセスすると

{status: "OK"}

と表示されると思います
これが出てれば成功です

Ctrl + C で、一旦Nodeを停止させてください

ガンガンいきましょう!

Step3. GoogleChartのサイトからコードをコピー

本家からサンプル取得

こちらのGoogle公式サイトからサンプルを頂戴します
https://developers.google.com/chart/interactive/docs/gallery

今回はなんとなく Line Chart を使用します

Line Chartの詳細ページへ飛ぶと
サンプルコードが書かれていますので、これをかっさらってきます

  <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

Step1. で作成したプロジェクトフォルダに views フォルダを追加してください
さらに、 views 配下に charts.ejs というファイルを作成し
上記HTMLを貼り付け&保存してください

このHTMLを眺めてみると、function drawChart() でグラフを描画するようですね
また var data と定義されている変数の中身がグラフ化するデータで間違い無いでしょう

という事は、この data に表示させたい値を引き渡せばやりたいことができそうです

Step4. 処理をちょこっと書き換える

さて、これでほぼ準備ができました

あとは特定のパスにGETリクエストがきたら
GoogleChartを使ってグラフを表示するだけ!

やりたいことを整理します

  1. GETメソッドで /charts にリクエストがきたらチャートを表示
  2. 表示する情報はコピーしてきたサンプルと同じ

形にしていきましょう

index.jsを修正

ejsを使えるように、かつテンプレートへ引き渡す処理も書き加えます

const express = require('express');

const app = express();

// テンプレートエンジンの指定
app.set("view engine", "ejs");

app.get('/healthz', (req,res,next) => {
  return res.status(200).send({'status': 'OK'});
});

// Google Chart API へ引き渡すデータ
app.get('/charts', (req,res,next) => {
  let data = {
    items: [
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]
  };
  return res.render("./charts.ejs", data);
})

app.listen(3000, () => {
  console.log('start express ...');
})

変更したのはこの部分↓

// テンプレートエンジンの指定
app.set("view engine", "ejs");

...

// Google Chart API へ引き渡すデータ
app.get('/charts', (req,res,next) => {
  let data = {
    items: [
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]
  };
  return res.render("./charts.ejs", data);
})

テンプレートエンジンの指定 という箇所に関しては
おまじないだと思ってください

大事なのは /charts へGETメソッドでアクセスが来たら
data という変数に表示する情報を格納して ./charts.ejs へ引き渡す
という部分です

テンプレートを修正

先ほど作成した views/charts.ejs を以下のように修正します

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable(<%- JSON.stringify(items) %>);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

書き換えたのはここです↓

var data = google.visualization.arrayToDataTable(<%- JSON.stringify(items) %>);

<%- %> で括る事で、ejsに渡した情報を表示できます
(この形式だと引き渡したデータをエスケープしないようになります)

加えて、 JSON.stringify() は引き渡したJSONデータを文字列へ変換してくれます

細かい事は分解して理解しましょう
もっと詳細が聞きたい場合は問い合わせフォームからご連絡ください
この記事へのコメントでもOKです

動作確認

お待ちかねの動作確認です

termianl or コマンドプロンプトでNodeを立ち上げます

$ node index.js
start express ...

ブラウザで localhost:3000/charts へアクセスしてみましょう

チャートが表示できれば完成です!
お疲れ様でした!!

値を自分で変化させて遊ぶ

ここまでで、細かい事の理解はさておき
ざっくり流れは分かったのではないでしょうか

index.js で引き渡しているデータをDBから取得したものにすり替えたり
また別のAPIを使って外部から取得したデータを設定してみたりするのも面白いですね!

「いや、よくわからん!」という方は、わからなくて良いので
自分でデータを弄ってみましょう。
弄ってみた方が理解が進みますよ!