-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathjquery.livegraph.js
243 lines (240 loc) · 7.36 KB
/
jquery.livegraph.js
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
/*!
* LiveGraph for jQuery v1.0.0
* http://github.com/lampieg/livegraph
*
* Copyright � 2013 lampieg ([email protected])
* Released under the MIT license
*/
(function( $ ){
var methods = {
init : function ( options ) {
//set default options
var settings = $.extend( {
'barWidth' : 50,
'barGapSize' : 5,
'height' : 400,
'data' : {demo1:{label:"Yes",value:2},demo2:{label:"No",value:1},demo3:{label:"Maybe",value:3}},
'animate' : true,
'animTime' : 2000,
'hideData' : true
}, options);
this.data('liveGraph', {
settings : settings
});
var actualdata, parsed = this.liveGraph('parsedata', settings.data);
if (parsed === false) {
console.log("jQuery.liveGraph Halted: Data Parsing Error");
return this;
} else {
actualdata = parsed;
}
if(!Math.roundTo) {
Math.roundTo = function(number, to) { return (Math.ceil(number/to))*to; };
}
if(!Array.prototype.max) {
Array.prototype.max = function() { return Math.max.apply(Math, this); };
}
this.data('liveGraph', {
settings : settings,
data : actualdata,
ref : this
});
this.liveGraph('make');
return this;
},
make : function () {
var liveGraph = this.data('liveGraph');
var settings = liveGraph.settings;
var data = liveGraph.data;
this.append("<div class=\"liveGraph\"><div class=\"bars\"></div></div>");
var vals = [], i = 0, x;
for ( x in data ) {
i++;
$('<div class=\"bar bar'+x+'\" bar=\"'+x+'\"><span class=\"barval\">'+data[x].value+'</span><p class=\"barlabel\">'+data[x].label+'</p></div>').appendTo((this).find('div.bars'));
vals.push(data[x].value);
}
liveGraph.numberofbars = i;
liveGraph.scale = vals.max();
if (liveGraph.scale == 0) {
liveGraph.scale = 1;
}
for ( x in data ) {
var height;
height = ((data[x].value/liveGraph.scale)*100)+'%';
if (liveGraph.settings.animate) {
liveGraph.ref.find('div.bars div.bar'+x+' span').css('height', 0);
liveGraph.ref.find('div.bars div.bar'+x+' span').animate({
height: height
}, liveGraph.settings.animTime);
} else {
liveGraph.ref.find('div.bars div.bar'+x+' span').css('height', height);
}
}
liveGraph.ref.find('div.liveGraph').css({
padding:"5px 5px 25px 5px",
height: liveGraph.settings.height-30+'px'
});
liveGraph.ref.find('div.liveGraph div.bars div.bar').css({
position: "relative",
height: liveGraph.settings.height-30+'px',
width: liveGraph.settings.barWidth+'px',
float: 'left',
margin: '0 '+liveGraph.settings.barGapSize+'px'
});
liveGraph.ref.find('div.liveGraph div.bars div.bar span').css({
position: 'absolute',
bottom: 0,
left: 0,
width: liveGraph.settings.barWidth+'px',
border: '1px #000 solid',
display: 'block',
"text-align": 'center',
overflow: 'hidden'
});
liveGraph.ref.find('div.liveGraph div.bars div.bar p').css({
position: 'absolute',
bottom: '-20px',
margin: 0,
left: 0,
width: liveGraph.settings.barWidth+'px',
display: 'block',
"text-align": 'center'
});
},
destroy : function () {
var liveGraph = this.data('liveGraph');
this.html("");
this.removeData('liveGraph');
},
update : function (data) {
var liveGraph = this.data('liveGraph');
var settings = liveGraph.settings, newdata = this.liveGraph('parsedata', data);
var newvals = {}, newlabels = {};
$(liveGraph.ref).find('div.bars div.bar').each(function() {
var bar = $(this).attr('bar'); //provide a reference to each bar
if (typeof newdata[bar] == "object") {
if (typeof newdata[bar].value == "number") {
newvals[bar] = newdata[bar].value;
liveGraph.data[bar].value = newdata[bar].value;
} else {
newvals[bar] = liveGraph.data[bar].value;
}
if (typeof newdata[bar].label == "string" || typeof newdata[bar].label == "number") {
newlabels[bar] = newdata[bar].label;
liveGraph.data[bar].label = newdata[bar].label;
} else {
newlabels[bar] = liveGraph.data[bar].label;
}
} else if (typeof newdata[bar] == "number") {
newvals[bar] = newdata[bar];
liveGraph.data[bar].value = newdata[bar];
newlabels[bar] = liveGraph.data[bar].label;
} else {
newvals[bar] = liveGraph.data[bar].value;
newlabels[bar] = liveGraph.data[bar].label;
}
});
var highest = 0;
for (val in newvals) {
if (highest < newvals[val]) { highest = newvals[val]; }
}
liveGraph.scale = highest;
if (liveGraph.scale == 0) {
liveGraph.scale = 1;
}
for (x in newvals) {
this.liveGraph('updateBarVal', x, newvals[x]);
}
for (x in newlabels) {
this.liveGraph('updateBarLabel', x, newlabels[x]);
}
},
updateBarVal : function(bar, val) {
var liveGraph = this.data('liveGraph');
var settings = liveGraph.settings;
if (typeof bar != "string") {
throw TypeError();
}
if (typeof val != "number") {
throw TypeError();
}
var height = ((val/liveGraph.scale)*100)+'%';
if (settings.animate) {
$(liveGraph.ref).find('div.bars div[bar="'+bar+'"] span').html(val).animate({
height: height
}, settings.animTime);
} else {
$(liveGraph.ref).find('div.bars div[bar="'+bar+'"] span').html(val).css('height', height);
}
return this;
},
updateBarLabel : function(bar, label) {
var liveGraph = this.data('liveGraph');
var settings = liveGraph.settings;
if (typeof bar != "string") {
throw TypeError();
}
if (typeof label != "number" && typeof label != "string") {
throw TypeError();
}
if ($(liveGraph.ref).find('div.bars div[bar="'+bar+'"] p').html() == label) {
return false;
}
if (settings.animate) {
$(liveGraph.ref).find('div.bars div[bar="'+bar+'"] p').fadeOut(settings.animTime/2, function() {
$(this).html(label);
$(this).fadeIn(settings.animTime/2);
});
} else {
$(liveGraph.ref).find('div.bars div[bar="'+bar+'"] p').html(label);
}
return this;
},
parsedata : function(inputdata) {
var settings = this.data('liveGraph').settings;
if (typeof inputdata == "object") {
return inputdata;
} else if (typeof inputdata == "string" && inputdata.substr(0,5) == "table") {
var table, data = {}, i = 1;
if (inputdata == "table") {
table = this;
} else {
table = $(inputdata);
}
if ((table.find('tbody tr')).length == 0) {
console.log("Warning: jQuery.liveGraph could not find data in table: "+inputdata);
return false;
}
table.find('tbody tr').reverse().each(function() {
var temp = {
label: $(this).find('td').first().html(),
value: parseFloat($(this).find('td').last().html())
};
var temp2 = Object();
temp2['tb'+i] = temp;
data = $.extend(temp2, data);
i++;
});
if (settings.hideData === true) {
table.hide();
}
return data;
} else {
console.log("Warning: jQuery.liveGraph data must either be a reference to a table or a JS object");
return false;
}
}
};
$.fn.liveGraph = function( method ) {
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === "object" || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( "Method " + method + " does not exist on jQuery.liveGraph" );
}
};
})( jQuery );
(function( $ ){
$.fn.reverse = [].reverse;
})( jQuery );