-
Notifications
You must be signed in to change notification settings - Fork 0
/
HeatMapv2.0.html
110 lines (97 loc) · 4.6 KB
/
HeatMapv2.0.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>HeatMap v2.0 Rough</title>
<script src= "stockrender-apprender.1.0.0.min.js"></script>
<script src="jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script src="widgets/scripts/jquery-1.11.1.min.js"></script>
<script src="widgets/widgets/jqxcore.js"></script>
<script src="widgets/widgets/jqxtooltip.js"></script>
<script src="widgets/widgets/jqxtreemap.js"></script>
<script src= "test main.js"></script>
<script src= "data.js"></script>
<script type="text/javascript" src="widgets/scripts/gettheme.js"></script>
<script src="jscolor-1.4.4/jscolor/jscolor.js"></script>
<link rel="stylesheet" href="widgets/widgets/styles/jqx.base.css" />
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#swag").hide();
$("#treemap").toggle();
$("#MarcinZegarmistrz").toggle()
sweg()
});
$("#show").click(function(){
$("#swag").show();
$("#treemap").hide();
$("#MarcinZegarmistrz").hide()
});
});
function sweg(){
alldivs = Array()
allgranddiv = Array()
golden = 0
$(function () {
var data = Data()
$('#treemap').jqxTreeMap({
width: 1500,
height: 750,
source: data,
colorRange: 50,
renderCallbacks: {
'*': function (element, value) {
if (value.data) {
element.jqxTooltip({
content: '<div><div style="font-weight: bold; max-width: 200px; font-family: verdana; font-size: 20px;">' + value.data.title + '</div><div style="width: 200px; font-family: verdana; font-size: 12px;">' + value.data.description + '</div></div>',
position: 'mouse',
autoHideDelay: 6000
});
} else if (value.data === undefined ) {
element.css({
backgroundColor: '#fff',
border: '1px solid #555'
});
}
}
}
});
});
alldivs = document.getElementsByTagName("div")
for (var zz = 0; zz < allGrandParents.length; zz++){
var uppers = allGrandParents[zz]
allGrandParents[zz] = uppers.toUpperCase()
}
for( ww= 0 ; ww<alldivs.length; ww++){
if( alldivs[ww].getElementsByTagName("span") != undefined && alldivs[ww].getElementsByTagName("span")[0] != undefined && alldivs[ww].getElementsByTagName("span")[0].innerHTML != undefined && alldivs[ww].id != "treemap" ){
if( alldivs[ww].getElementsByTagName("span")[0].innerHTML == allGrandParents[0] || alldivs[ww].getElementsByTagName("span")[0].innerHTML == allGrandParents[1] || alldivs[ww].getElementsByTagName("span")[0].innerHTML == allGrandParents[2] || alldivs[ww].getElementsByTagName("span")[0].innerHTML == allGrandParents[3] || alldivs[ww].getElementsByTagName("span")[0].innerHTML == allGrandParents[4] || alldivs[ww].getElementsByTagName("span")[0].innerHTML == allGrandParents[5] || alldivs[ww].getElementsByTagName("span")[0].innerHTML == allGrandParents[6] || alldivs[ww].getElementsByTagName("span")[0].innerHTML == allGrandParents[7]){
allgranddiv[golden]= alldivs[ww]
golden++
}
}
}
for(aa= 0; aa<allgranddiv.length; aa++){
allgranddiv[aa].getElementsByTagName("span")[0].onclick = function() {myFunction(this)}
allgranddiv[aa].getElementsByTagName("span")[0].style.color = "white"
allgranddiv[aa].getElementsByTagName("span")[0].style.backgroundColor = "black"
allgranddiv[aa].style.backgroundColor = "black"
}
}
</script>
<div id = "MarcinZegarmistrz" >
<button onclick="sweg()">Render Heat Map</button>
</div>
<button id= "show" > Settings </button>
<div id= "swag" style="display: none; width: 500px; height: 150px;border-style: solid;
border-color: grey;">
<label id = "lblColorMax">Color Max: </label>
<input class="color" id= "colormax" value="00FF00" ></input> <!-- onchange= "sweg()" -->
<label id = "lblColorMin">Color Min: </label>
<input class="color" id= "colormin" value="FF0000" ></input>
<button onclick="reset()">Reset</button>
<button id="hide">Back To Heat Map</button>
</div>
</head>
<body style="overflow: hidden;">
<div id="treemap"></div>
</body>
</html>