Created
January 25, 2016 22:49
-
-
Save kristian76/00a9ac89b9f8900e07ca to your computer and use it in GitHub Desktop.
SVG and project timeline. Pretty damn ugly, but working
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Dates man</title> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script data-main="main.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.min.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| requirejs({ | |
| paths: { | |
| jquery: 'https://code.jquery.com/jquery-2.2.0.min' | |
| } | |
| }); | |
| requirejs(['jquery'], function($) { | |
| var DATA = [ | |
| { | |
| id: 1, | |
| title: 'Do something', | |
| startdate: '2016-01-26', | |
| enddate: '2016-02-13' | |
| }, | |
| { | |
| id: 2, | |
| title: 'Do something', | |
| startdate: '2016-03-15', | |
| enddate: '2016-04-28' | |
| }, | |
| { | |
| id: 3, | |
| title: 'Do something', | |
| startdate: '2016-03-01', | |
| enddate: '2016-03-13' | |
| }, | |
| { | |
| id: 4, | |
| title: 'Do something', | |
| startdate: '2016-05-01', | |
| enddate: '2016-06-13' | |
| }, | |
| ]; | |
| var Project = function(data) { | |
| this.id = data.id || undefined; | |
| this.title = data.title || undefined; | |
| this.startdate = new Date(data.startdate) || undefined; | |
| this.enddate = new Date(data.enddate) || undefined; | |
| this.duration = Math.round(Math.abs( | |
| (this.startdate.getTime() - this.enddate.getTime()) | |
| /(24 * 60 * 60 * 1000) | |
| )); | |
| this.weeks = Math.round(this.duration / 7); | |
| } | |
| Date.prototype.getWeekNumber = function() { | |
| var d = new Date(+this); | |
| d.setHours(0, 0, 0); | |
| d.setDate(d.getDate() + 4 - (d.getDay() || 7)); | |
| return Math.ceil((((d-new Date(d.getFullYear(),0,1))/8.64e7)+1)/7); | |
| }; | |
| Date.prototype.diff = function(a, b) { | |
| return Math.round(Math.abs( | |
| (a.getTime() - b.getTime()) | |
| / (24 * 60 * 60 * 1000) | |
| )); | |
| }; | |
| var projects = []; | |
| $.each(DATA, function(indx, item) { | |
| projects.push(new Project(item)); | |
| }); | |
| var TimeLine = function(data) { | |
| this.dataSet = data || []; | |
| this.dateRange = this.findDateRange(); | |
| this.currentWeekNumber = new Date().getWeekNumber() - 1; | |
| this.currentDate = new Date(); | |
| } | |
| TimeLine.prototype.findDateRange = function() { | |
| var startDates = this.dataSet.sort(function(a, b) { | |
| return a.startdate.getTime() > b.startdate.getTime() ? 1 : -1; | |
| }); | |
| var endDates = this.dataSet.sort(function(a, b) { | |
| return a.enddate.getTime() > b.enddate.getTime() ? 1 : -1; | |
| }); | |
| return [startDates[0].startdate, endDates[endDates.length - 1].enddate]; | |
| } | |
| TimeLine.prototype.render = function() { | |
| var M = 5, | |
| H = 35, | |
| self = this, | |
| width = (new Date().diff(self.dateRange[0], self.dateRange[1]) * M), | |
| height = this.dataSet.length * H; | |
| var html = '<svg width="'+ width +'" height="'+ height +'">'; | |
| $.each(this.dataSet, function(indx, obj) { | |
| var left = Math.round(Math.abs( | |
| (self.dateRange[0].getTime() - obj.startdate.getTime()) | |
| / (24 * 60 * 60 * 1000) | |
| )) * M; | |
| html += "<rect rx=\"5\" ry=\"5\" width=\""+ obj.duration * M +"\" height=\""+ H +"\" x=\""+ left +"\" y=\""+ (indx * H) +"\"/>"; | |
| }); | |
| html += '</svg>'; | |
| return html; | |
| } | |
| var tl = new TimeLine(projects); | |
| $('#chart').html(tl.render()); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment