GitHub Contributions 風!カレンダーグラフの作り方

最終更新日

こういう形式のグラフって日本語で何ていうの?

作り方

Google Charts の Calendar Chart を使って書きます.データを 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:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Count' });
       dataTable.addRows([
          [ new Date(2021, 08, 03), 1],
          [ new Date(2021, 08, 09), 1],
          [ new Date(2021, 08, 15), 1]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "RareJob Lesson Count",
         height: 350,
         noDataPattern: {
           backgroundColor: '#f0f0f0',
           color: '#fff'
         },
        colorAxis: {
          minValue: 0,
          colors: ['#FFFFFF', '#14c4a5']
        }
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

サンプルコードをコピペしてるだけのコードなので何の付加価値もないかもしれない… 変更した点は以下の4点.

  1. 11行目: 2カラム目の id'Count'
  2. 21行目: options のパラメータの titleRareJob Lesson Count
  3. 23行目: options のパラメータの backgroundcolorcolor も設定した
    1. データなし部分の網掛けの色が濃すぎたので薄く
  4. 27行目: options のパラメータの colorAxis の,minValuecolors を設定
    1. カラーコンターの最小値と,コンターの上限/下限の色を指定

使い方

13-15行目に書かれてる下記のようなデータをどんどん追加すればいいだけ.要するに日付と値の組だね.

[ new Date(2021, 08, 15), 1]

僕の場合は RareJob のレッスン数をデータにしてるので,通常1日1回,2020年3月14日だけ1日に2回レッスンをしたみたい.なのでその日のデータだけ [ new Date(2020, 02, 14), 2] になってる.あとはデータの入力がない日は網掛けで表示される.

意外と簡単!

コメントを残す

%d