【Node.js】20分でできる!GoogleChart表示

Node.js

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はテンプレートエンジンと言われるものです。

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

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

$ npm install --save 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を使って外部から取得したデータを設定してみたりするのも面白いですね!

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