Excelから関数型言語マスター5回目：Webにグラフ表示...をやってみた

元記事様: 

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

実行環境

・Mac OS v10.15.7(スペックがゴミすぎてOSのアップデートが不能💦)

・Elixir v1.13.2 ( Erlang/OTP 24)

・Phoenix v1.6.6

グラフ化する数値の追加

<%
result = Json.get( "https://qiita.com", "/api/v2/items?query=elixir" )
data = result
columns = [ "id", "title", "created_at" ,"likes_count" ]
%>

取得する外部APIの列項目を加えるだけ。本当にETCだなぁ。(Easy To Change、高速道路に乗るときに使うやつじゃない)

「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

Google Chartsを呼び出して、グラフの種類指定して、縦列横列の要素を指定している感じかな。クラスの型指定と表示名とか指定してあるような。何をしているか雰囲気は分かるから不思議。

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

で、for文でdataの範囲=前回表にして取得したデータ、のうち「いいね」数を取得。

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>

いつものCSV。グラフの棒線の太さと余白と色決める。

あっという間に、出来上がり、と。早いなぁ🥰

おまけ

記事のタイトルが一部非表示になっているので、グラフエリアを調整してタイトル全部表示させてみた。

疑問点なし。次行ってみよ〜。