Edited at

Excelから関数型言語マスター5回目:Webにグラフ表示

(この記事は、「Elixir or Phoenix Advent Calendar 2017」の23日目です)

昨日は、@takasehideki さんの「ElixirでIoT#4:Nervesって何者?ラズパイでLチカできんの!?」でした


fukuoka.ex代表のpiacereです

今回もご覧いただいて、ありがとうございます:bow:

この連載の、前回までの記事は、以下になります

 |> Excelから関数型言語マスター1回目:データ行の”並べ替え”と”絞り込み”

 |> Excelから関数型言語マスター2回目:列の”抽出”と”Web表示”

 |> Excelから関数型言語マスター3回目:WebにDBデータ表示

 |> Excelから関数型言語マスター4回目:Webに外部APIデータ表示

今回も、fukuoka.ex#8で披露した、マーケティングに強いCTOが語る技術未来とElixir:第2回「プログラミング未経験でもExcelできればElixirマスターできる ~ITのパラダイムシフトで従来の知識・経験が邪魔になる時~」に書かれていない領域について解説します

これまでの連載で作ってきた、DBデータのWeb表示や、外部APIデータのWeb表示から発展させ、テーブルや文字では無く、データをグラフで表示してみます




:stars::stars::stars::stars::stars: お知らせ :stars::stars::stars::stars::stars:

「fukuoka.ex#11:DB/データサイエンスにコネクトするElixir」を6/22(金)19時に開催します

特別ゲストは、Erlang/Elixirの両面で世界的に有名な「力武 健次さん」と、北九州の飯塚市で「e-ZUKA Tech Night」を6年間主催し続けるハウインターナショナルの「谷口 耕平さん」のお二人と、実に豪華なイベントです:wink:

私は、「1家に1台、パーソナルなデータ分析AIを全員が持つ2020年を作る」というタイトルで、Elixirによる、ブラウザUI上からサクっとデータ分析プラットフォームを披露するLTをお届けします:stuck_out_tongue_winking_eye:

image.png


グラフ化する数値の追加

前回の外部APIデータ表示では、Qiitaから取得したコラムのID/タイトル/作成日時が表示できました

image.png

ここに、コラムが何回、「いいね」されたかを示す「likes_count」を列追加します

「columns = [~]」に、「likes_count」を追加するだけです(非常にカンタンですね)


lib/sample_db_web/templates/page/index.html.eex

<%

result = Json.get( "https://qiita.com", "/api/v2/items?query=elixir" )
data = result
columns = [ "id", "title", "created_at", "likes_count" ]
%>
<table border="1">
<tr>
<%= for column <- columns do %>
<th><%= column %></td>
<% end %>
</tr>
<%= for record <- data do %>
<tr>
<%= for column <- columns do %>
<td><%= record[ column ] %></td>
<% end %>
</tr>
<% end %>
</table>

「いいね」数が追加されました

image.png

では、この数値をグラフ化してみます


「Google Charts」によるグラフ表示

「Google Charts」という、Googleが出している、グラフ描画JavaScriptライブラリを使って、各コラム毎の「いいね」数をグラフ化します

なお今回は、横方向の棒グラフしか説明しませんが、使えるチャートの種類が、沢山あるので、色々な使い道があります

image.png


Google Chartsで外部APIデータをグラフ表示する

では、Qiitaコラムの「いいね」数をグラフ化してみましょう

なお、冒頭の外部APIデータ取得と、後半のテーブル表示は、一切変えておらず、その間の<script>~</script>と<div>~</div>に、Google Chartsでのグラフ表示JavaScript部分を追加したのみです


lib/sample_db_web/templates/page/index.html.eex

<%

result = Json.get( "https://qiita.com", "/api/v2/items?query=elixir" )
data = result
columns = [ "id", "title", "created_at", "likes_count" ]
%>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load( "visualization", "1", { packages:[ "corechart" ] } );
google.setOnLoadCallback
(
function()
{
var data = new google.visualization.DataTable();
data.addColumn( 'string', 'コラム名' );
data.addColumn( 'number', 'いいね数' );
data.addRows
( [
<%= for record <- data do %>
[ '<%= record[ "title" ] %>', <%= record[ "likes_count" ] %> ],
<% end %>
] );
var options =
{
title: 'Qiitaコラム「いいね」数',
width: 1000,
height: 600,
chartArea: { width: '30%' },
legend: { position: "none" },
};
var chart = new google.visualization.BarChart( document.getElementById( 'likes' ) );
chart.draw( data, options );
}
);
</script>
<div id="likes" style="margin: 0px; padding: 0px; border: 10px #0000ff;"></div>

<table border="1">
<tr>
<%= for column <- columns do %>
<th><%= column %></td>
<% end %>
</tr>
<%= for record <- data do %>
<tr>
<%= for column <- columns do %>
<td><%= record[ column ] %></td>
<% end %>
</tr>
<% end %>
</table>


多少、長めのコードなので、グラフにデータを流し込む部分にポイントを絞って解説しておきます

data.addRows([~])に指定するグラフ用データ群に、forにより、各コラムの「title」と「likes_count」を流し込みます


lib/sample_db_web/templates/page/index.html.eex


<script type="text/javascript">

data.addRows
( [
<%= for record <- data do %>
[ '<%= record[ "title" ] %>', <%= record[ "likes_count" ] %> ],
<% end %>
] );


この部分が、表示時のHTMLに展開されると、以下のような感じになります


lib/sample_db_web/templates/page/index.html.eex


<script type="text/javascript">

data.addRows
( [
[ 'ElixirでIoT#4:Nervesって何者?ラズパイでLチカできんの!?', 7 ],
[ 'rustとscalaとkotilnの勉強 環境構築', 1 ],
[ 'Elixirから簡単にRustを呼び出せるRustler #1 準備編', 13 ],
[ 'Qiitaの様なサービス作成中 ユーザー認証 連載(2)', 3 ],
[ 'herokuでphoenixをmysqlで動かす', 2 ],

] );


Web上では、このようなグラフ表示になります

image.png


終わり

とてもカンタンに、Elixirからグラフ表示できることが、お分かりいただけたでしょうか?

今回は、外部APIデータのグラフ表示でしたが、Elixirにおいて、DBも外部APIと全く変わらない扱い方ができることは、前回に解説した通りですので、DBデータのグラフ表示も、やはりカンタンです

そして、データさえ揃っていれば、この連載でお伝えした内容に多少の手を加えるだけで、以下のようなデータサイエンスプロダクトが、開発できてしまうのです

image.png

関数型言語であるElixirで、Web+DB/APIとグラフ表示を行うことが、いかにお手軽で、パワフルに表現が可能かを感じていただけたら幸いです

次回は、更にフロント側の表現力を上げていく、「Vue.jsとPhoenix APIの連携」を行います

あと、Advent Calendarの方、明日は、@tuchiro さんの「ElixirでSI開発入門 #5 Ectoで自由にSQLを書いて実行する」です

:coffee: :coffee: :coffee: ここで一息、CofeeBreak :coffee: :coffee: :coffee:

オブジェクト指向から関数型言語に移った方は、この連載をやっていくうちに、「なんで、こんなにカンタンなはずの関数型言語の習得に今まで難航してたんだろう?」と感じたのでは無いでしょうか?

その疑問にお答えするコラムも番外編として書いてみました

:coffee: :coffee: :coffee: ここで一息、CofeeBreak :coffee: :coffee: :coffee:


p.s.「いいね」よろしくお願いします

ページ左上の image.pngimage.png のクリックを、どうぞよろしくお願いします:bow:

ここの数字が増えると、書き手としては「ウケている」という感覚が得られ、連載を更に進化させていくモチベーションになりますので、もっとElixirネタを見たいというあなた、私達と一緒に盛り上げてください!:tada: