diet.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no">
  <title>rockdai.com</title>
  <script src="http://libs.useso.com/js/json2/20130526/json2.min.js"></script>
  <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
  <script src="./git_matrix.js"></script>
  <script src="./matrix_div.js"></script>

  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    #chart {
      position: relative;
      width: 100%;
      overflow-x: auto;
      min-height: 140px;
    }
    .rect:hover {
      border: 1px groove #000;
    }
  </style>
</head>

  <body>
    <div id="loading">
      <img src="http://rockdai.u.qiniudn.com/loading.$6839.gif" />
    </div>
    <div id="chart"></div>
    <div id="info"></div>
    <script>
      var infoNode = $('#info');
      var BASE_DATE = new Date('2014-07-01');
      var textList = ["没能坚持！！", "控制饮食", "控制饮食+稍许运动", "控制饮食+大量运动"];
      function decodeFromBase64(input) {
        input = input.replace(/\s/g, '');
        return atob(input);
      }
      function pad(n) {
        return n < 10 ? '0' + n : '' + n;
      }
      function formatDate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        return [year, pad(month), pad(day)].join('-');
      }
      function onClickEvent(evt, data) {
        if (!data || typeof data.id !== 'number') {
          return false;
        }
        var d = BASE_DATE.valueOf() + (data.id * 3600 * 24 * 1000);
        var ds = formatDate(new Date(d));
        infoNode.text(ds + ': ' + textList[data.value]);
      }

      var startDate = new Date("2014-07-01");
      var endDate = new Date();
      var gridSize = 14;
      var gitMatrix = new Chart.GitMatrix("chart", {
        "startDate": startDate,
        "endDate": endDate,
        "gridSize": gridSize,
        "textList": textList,
        "click": onClickEvent
      });

      var url = 'https://api.github.com/repos/rockdai/my_diet/contents/data.json';
      $.ajax({
        dataType: "json",
        url: url,
        headers: {
          'Accept': 'application/vnd.github.v3+json',
          'Content-Type': 'application/json;charset=UTF-8'
        },
        success: function (data) {
          $('#loading').hide();
          data = data || {};
          data = decodeFromBase64(data.content);
          data = JSON.parse(data);
          gitMatrix.loadData(data);
          gitMatrix.render();
        }
      });
    </script>
  </body>
</html>