여기까지의 모습

piacere씨의 Excel에서 함수형 언어 마스터 5번째: 웹에 그래프 표시 의 전반 부분까지를 복습해 기사로 했습니다.

원래의 경위로서, 이 연재의 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가 관여해 오면 어떤 발전을 보일지 기대됩니다.
으쓱, 최선을 다하겠습니다.
켄토 미즈노