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点.
- 11行目: 2カラム目の
id
を'Count'
に - 21行目:
options
のパラメータのtitle
をRareJob Lesson Count
に - 23行目:
options
のパラメータのbackgroundcolor
とcolor
も設定した- データなし部分の網掛けの色が濃すぎたので薄く
- 27行目:
options
のパラメータのcolorAxis
の,minValue
とcolors
を設定- カラーコンターの最小値と,コンターの上限/下限の色を指定
使い方
13-15行目に書かれてる下記のようなデータをどんどん追加すればいいだけ.要するに日付と値の組だね.
[ new Date(2021, 08, 15), 1]
僕の場合は RareJob のレッスン数をデータにしてるので,通常1日1回,2020年3月14日だけ1日に2回レッスンをしたみたい.なのでその日のデータだけ [ new Date(2020, 02, 14), 2]
になってる.あとはデータの入力がない日は網掛けで表示される.
