| 21627 |
kshitij.so |
1 |
$(document).ready(function(){
|
|
|
2 |
|
|
|
3 |
/* ---------- Sparkline Charts ---------- */
|
|
|
4 |
//generate random number for charts
|
|
|
5 |
randNum = function(){
|
|
|
6 |
//return Math.floor(Math.random()*101);
|
|
|
7 |
return (Math.floor( Math.random()* (1+40-20) ) ) + 20;
|
|
|
8 |
}
|
|
|
9 |
|
|
|
10 |
var chartColours = ['#2FABE9', '#FA5833', '#b9e672', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
|
|
|
11 |
|
|
|
12 |
//sparklines (making loop with random data for all 7 sparkline)
|
|
|
13 |
i=1;
|
|
|
14 |
for (i=1; i<9; i++) {
|
|
|
15 |
var data = [[1, 3+randNum()], [2, 5+randNum()], [3, 8+randNum()], [4, 11+randNum()],[5, 14+randNum()],[6, 17+randNum()],[7, 20+randNum()], [8, 15+randNum()], [9, 18+randNum()], [10, 22+randNum()]];
|
|
|
16 |
placeholder = '.sparkLineStats' + i;
|
|
|
17 |
|
|
|
18 |
if (retina()) {
|
|
|
19 |
|
|
|
20 |
$(placeholder).sparkline(data, {
|
|
|
21 |
width: 200,//Width of the chart - Defaults to 'auto' - May be any valid css width - 1.5em, 20px, etc (using a number without a unit specifier won't do what you want) - This option does nothing for bar and tristate chars (see barWidth)
|
|
|
22 |
height: 60,//Height of the chart - Defaults to 'auto' (line height of the containing tag)
|
|
|
23 |
lineColor: '#2FABE9',//Used by line and discrete charts to specify the colour of the line drawn as a CSS values string
|
|
|
24 |
fillColor: '#f2f7f9',//Specify the colour used to fill the area under the graph as a CSS value. Set to false to disable fill
|
|
|
25 |
spotColor: '#467e8c',//The CSS colour of the final value marker. Set to false or an empty string to hide it
|
|
|
26 |
maxSpotColor: '#b9e672',//The CSS colour of the marker displayed for the maximum value. Set to false or an empty string to hide it
|
|
|
27 |
minSpotColor: '#FA5833',//The CSS colour of the marker displayed for the mimum value. Set to false or an empty string to hide it
|
|
|
28 |
spotRadius: 2,//Radius of all spot markers, In pixels (default: 1.5) - Integer
|
|
|
29 |
lineWidth: 1//In pixels (default: 1) - Integer
|
|
|
30 |
});
|
|
|
31 |
|
|
|
32 |
//only firefox sux in this case
|
|
|
33 |
if (jQuery.browser.mozilla) {
|
|
|
34 |
$(placeholder).css('MozTransform','scale(0.5,0.5)').css('margin-top','-10px');
|
|
|
35 |
$(placeholder).css('height','30px').css('width','100px').css('margin-left','-20px').css('margin-right','40px');
|
|
|
36 |
} else {
|
|
|
37 |
$(placeholder).css('zoom',0.5);
|
|
|
38 |
}
|
|
|
39 |
|
|
|
40 |
} else {
|
|
|
41 |
|
|
|
42 |
$(placeholder).sparkline(data, {
|
|
|
43 |
width: 100,//Width of the chart - Defaults to 'auto' - May be any valid css width - 1.5em, 20px, etc (using a number without a unit specifier won't do what you want) - This option does nothing for bar and tristate chars (see barWidth)
|
|
|
44 |
height: 30,//Height of the chart - Defaults to 'auto' (line height of the containing tag)
|
|
|
45 |
lineColor: '#2FABE9',//Used by line and discrete charts to specify the colour of the line drawn as a CSS values string
|
|
|
46 |
fillColor: '#f2f7f9',//Specify the colour used to fill the area under the graph as a CSS value. Set to false to disable fill
|
|
|
47 |
spotColor: '#467e8c',//The CSS colour of the final value marker. Set to false or an empty string to hide it
|
|
|
48 |
maxSpotColor: '#b9e672',//The CSS colour of the marker displayed for the maximum value. Set to false or an empty string to hide it
|
|
|
49 |
minSpotColor: '#FA5833',//The CSS colour of the marker displayed for the mimum value. Set to false or an empty string to hide it
|
|
|
50 |
spotRadius: 2,//Radius of all spot markers, In pixels (default: 1.5) - Integer
|
|
|
51 |
lineWidth: 1//In pixels (default: 1) - Integer
|
|
|
52 |
});
|
|
|
53 |
|
|
|
54 |
}
|
|
|
55 |
|
|
|
56 |
}
|
|
|
57 |
|
|
|
58 |
/* ---------- Init jQuery Knob - disbaled in IE8, IE7, IE6 ---------- */
|
|
|
59 |
if(jQuery.browser.version.substring(0, 2) == "8.") {
|
|
|
60 |
|
|
|
61 |
//disable jQuery Knob
|
|
|
62 |
|
|
|
63 |
} else {
|
|
|
64 |
|
|
|
65 |
$('.circleChart').each(function(){
|
|
|
66 |
|
|
|
67 |
var circleColor = $(this).parent().css('color');
|
|
|
68 |
|
|
|
69 |
$(this).knob({
|
|
|
70 |
'min':0,
|
|
|
71 |
'max':100,
|
|
|
72 |
'readOnly': true,
|
|
|
73 |
'width': 120,
|
|
|
74 |
'height': 120,
|
|
|
75 |
'fgColor': circleColor,
|
|
|
76 |
'dynamicDraw': true,
|
|
|
77 |
'thickness': 0.2,
|
|
|
78 |
'tickColorizeValues': true,
|
|
|
79 |
'skin':'tron'
|
|
|
80 |
});
|
|
|
81 |
|
|
|
82 |
});
|
|
|
83 |
|
|
|
84 |
}
|
|
|
85 |
|
|
|
86 |
/*------- Just Gage Init -------*/
|
|
|
87 |
g1=new JustGage({id:"g1",value:67,min:0,max:100,title:"Visitors",label:"per minute"});
|
|
|
88 |
g1a=new JustGage({id:"g1a",value:45,min:0,max:100,title:"Errors",label:"average"});
|
|
|
89 |
g2=new JustGage({id:"g2",value:15,min:0,max:100,title:"Timers",label:""});
|
|
|
90 |
g2a=new JustGage({id:"g2a",value:7,min:0,max:100,title:"Alerts",label:""});
|
|
|
91 |
g2b=new JustGage({id:"g2b",value:22,min:0,max:100,title:"Events",label:""});
|
|
|
92 |
|
|
|
93 |
setInterval(function(){
|
|
|
94 |
g1.refresh(getRandomInt(50,100));
|
|
|
95 |
g1a.refresh(getRandomInt(50,100));
|
|
|
96 |
g2.refresh(getRandomInt(0,50));
|
|
|
97 |
g2a.refresh(getRandomInt(0,50));
|
|
|
98 |
g2b.refresh(getRandomInt(0,50))
|
|
|
99 |
},2000
|
|
|
100 |
);
|
|
|
101 |
|
|
|
102 |
/*------- Easy Pie Chart Init -------*/
|
|
|
103 |
$('.percentage').easyPieChart();
|
|
|
104 |
$('.percentage-light').easyPieChart();
|
|
|
105 |
|
|
|
106 |
$('.updateEasyPieChart').on('click', function(e) {
|
|
|
107 |
e.preventDefault();
|
|
|
108 |
$('.percentage, .percentage-light').each(function() {
|
|
|
109 |
$(this).data('easyPieChart').update(Math.round(100*Math.random()));
|
|
|
110 |
});
|
|
|
111 |
});
|
|
|
112 |
|
|
|
113 |
});
|