Difference between revisions of "Template:Waterloo/Pages/cal-heatmap-test"
(26 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
<script src="https://2015.igem.org/wiki/index.php?title=Template:Waterloo/JS/d3&action=raw&ctype=text/javascript"></script> | <script src="https://2015.igem.org/wiki/index.php?title=Template:Waterloo/JS/d3&action=raw&ctype=text/javascript"></script> | ||
<script src="https://2015.igem.org/wiki/index.php?title=Template:Waterloo/JS/cal-heatmap&action=raw&ctype=text/javascript"></script> | <script src="https://2015.igem.org/wiki/index.php?title=Template:Waterloo/JS/cal-heatmap&action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2015.igem.org/wiki/index.php?title=Template:Waterloo/JS/days&action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2015.igem.org/wiki/index.php?title=Template:Waterloo/JS/notes&action=raw&ctype=text/javascript"></script> | ||
+ | <script> | ||
+ | var month = new Array(); | ||
+ | month[0] = "Jan"; | ||
+ | month[1] = "Feb"; | ||
+ | month[2] = "Mar"; | ||
+ | month[3] = "Apr"; | ||
+ | month[4] = "May"; | ||
+ | month[5] = "Jun"; | ||
+ | month[6] = "Jul"; | ||
+ | month[7] = "Aug"; | ||
+ | month[8] = "Sep"; | ||
+ | month[9] = "Oct"; | ||
+ | month[10] = "Nov"; | ||
+ | month[11] = "Dec"; | ||
+ | </script> | ||
<link rel="stylesheet" href="https://2015.igem.org/wiki/index.php?title=Template:Waterloo/CSS/cal-heatmap&action=raw&ctype=text/css"></link> | <link rel="stylesheet" href="https://2015.igem.org/wiki/index.php?title=Template:Waterloo/CSS/cal-heatmap&action=raw&ctype=text/css"></link> | ||
<div id="cal-heatmap"></div> | <div id="cal-heatmap"></div> | ||
+ | <div> | ||
+ | <h1 id="onClick-placeholder"></h1> | ||
+ | <ul id="notes-table"></ul> | ||
+ | </div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
var cal = new CalHeatMap(); | var cal = new CalHeatMap(); | ||
cal.init({ | cal.init({ | ||
start: new Date(2015, 4), | start: new Date(2015, 4), | ||
− | data:" | + | data:days, |
+ | dataType: "json", | ||
domain : "month", | domain : "month", | ||
subDomain : "day", | subDomain : "day", | ||
range : 5, | range : 5, | ||
− | + | cellSize: 32, | |
− | + | subDomainTextFormat: "%d", | |
− | + | displayLegend: false, | |
− | + | onClick: function(date, nb) { | |
− | + | $("#onClick-placeholder").html("<b>" + | |
− | + | date.toDateString() + "</b>" | |
− | + | ); | |
+ | var message = "" | ||
+ | var key = month[date.getMonth()]+(date.getDate()) | ||
+ | if (key in notes){ | ||
+ | $.each(notes[key], function( index, value ) { | ||
+ | message += "<li>"+value+"</li>"; | ||
+ | });} | ||
+ | $("#notes-table").html(message | ||
+ | ); | ||
+ | } | ||
}); | }); | ||
</script> | </script> | ||
</html> | </html> |
Latest revision as of 23:53, 13 September 2015