Elixir~表を外部APIから呼び出し、Google Chartsでグラフ化！ドン！~

ここまでのあらまし

piacereさんの Excelから関数型言語マスター5回目：Webにグラフ表示の前半部分までを復習して記事にしました。

そもそもの経緯として、この連載の3回目からsample_dbのPJを生成し直して復習したいのですが何をやってもうまくいかず、MacのTimeMachineバックアップから履修済みの5回目データをサルベージして、いま一度写経と理解を深めようという意図があります。

本題

前回の記事で外部APIデータを表にしたので、今回はGoogle Chartsを使い派手にグラフ化します。

実際のコードややり方はご本人の記事にあずけるとして、今回わたしはGoogle Chartsに付与する部分のコードだけを抜粋したいと思います。

<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>

かなり物量の多いコードで、Elixir的にここはおぼろげに掴めるな...とかここはグラフの大きさとかGUIに関わる部分の設定なんだろうな...ごめんなさい、はっきり言って高度すぎていまのわたしにはお手上げ寸前です。

iex -S mix phx.serverで最終的にlocalhost:4000に表示されるグラフがこちらです！
タイムリーなことに自分のものが上のほうに入っています。
ドラムシーケンサーのやつが7いいねくらいついていますね。

はっきり言って構文理解といったところでいうと手も足も出ないのが現状ですが、Elixirと各種外部APIの組み合わせによって一発でデータが可視化できる、ということを再確認できました。
これにVue.jsが関わってくるとどんな発展をみせるのか楽しみです。
うまずたゆまず、頑張ります。
Kento Mizuno