|
|
| Line 3: |
Line 3: |
| | <html> | | <html> |
| | | | |
| − | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> | + | <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> |
| − | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script> | + | <script type="text/javascript" src="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script> |
| − | <script type="text/javascript" src="https://rawgit.com/g1eb/calendar-heatmap/master/dist/calendar-heatmap.min.js"></script> | + | <link rel="stylesheet" href="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" /> |
| | | | |
| − | <body>
| |
| | | | |
| − | <div class="clear"> <br/> </div>
| |
| | | | |
| − | <div class="column full_size">
| |
| | | | |
| − | <h1>DIARY</h1>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <script>
| |
| − | (function () {
| |
| − | // Initialize random data for the demo
| |
| − | var now = moment().endOf('day').toDate();
| |
| − | var time_ago = moment().startOf('day').subtract(10, 'year').toDate();
| |
| − | var example_data = d3.time.days(time_ago, now).map(function (dateElement, index) {
| |
| − | return {
| |
| − | date: dateElement,
| |
| − | details: Array.apply(null, new Array(Math.floor(Math.random() * 15))).map(function(e, i, arr) {
| |
| − | return {
| |
| − | 'name': 'Project ' + Math.round(Math.random() * 10),
| |
| − | 'date': function () {
| |
| − | var projectDate = new Date(dateElement.getTime());
| |
| − | projectDate.setHours(Math.floor(Math.random() * 24))
| |
| − | projectDate.setMinutes(Math.floor(Math.random() * 60));
| |
| − | return projectDate;
| |
| − | }(),
| |
| − | 'value': 3600 * ((arr.length - i) / 5) + Math.floor(Math.random() * 3600) * Math.round(Math.random() * (index / 365))
| |
| − | }
| |
| − | }),
| |
| − | init: function () {
| |
| − | this.total = this.details.reduce(function (prev, e) {
| |
| − | return prev + e.value;
| |
| − | }, 0);
| |
| − | return this;
| |
| − | }
| |
| − | }.init();
| |
| − | });
| |
| − |
| |
| − | // Set custom color for the calendar heatmap
| |
| − | var color = '#cd2327';
| |
| − |
| |
| − | // Set overview type (choices are year, month and day)
| |
| − | var overview = 'year';
| |
| − |
| |
| − | // Handler function
| |
| − | var print = function (val) {
| |
| − | console.log(val);
| |
| − | };
| |
| − |
| |
| − | // Initialize calendar heatmap
| |
| − | calendarHeatmap.init(example_data, color, overview, print);
| |
| − | })();
| |
| − | </script>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | </body>
| |
| | </html> | | </html> |
