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
|
historicalBarChart = [
{ "type":"bar", "key": "memory", "yAxis": "1", "values": [{ "x":1388552400000 , "y":10},
{ "x":1391230800000 , "y":4}, { "x":1393650000000 , "y":4}, { "x":1396324800000 , "y":12},
{ "x":1398916800000 , "y":3.27}, { "x":1401595200000 , "y":6.07}, { "x":1404187200000 , "y":8.93},
{ "x":1406865600000 , "y":11.61}, { "x":1409544000000 , "y":18.66}, { "x":1412136000000 , "y":19.04},
{ "x":1414814400000 , "y":17.5}, { "x":1417410000000 , "y":15.73}, { "x":1420088400000 , "y":9.62333333333333},
{ "x":1422766800000 , "y":14.29}, { "x":1425186000000 , "y":16.1166666666667} ] } ];
var chart1,chart2,chart3,chart4;
nv.addGraph(function() {
chart1 = nv.models.multiBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 100})
.showLegend(true)
.reduceXTicks(false)
.forceY([0, 34.0])
.showControls(false)
.stacked(false)
.logScale(false)
.legendPos('top')
.color(d3.scale.category10().range());
chart1.xAxis
.tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000])
.staggerLabels(false)
.showMaxMin(false)
.rotateLabels(90)
.axisLabel('Timestamp')
.tickFormat(function(d) {
return d3.time.format('%b %y')(new Date(d)) });
chart1.yAxis
.logScale(false)
.axisLabel('')
.tickFormat(d3.format(',.1f'));
d3.select('#CPUchart svg')
.datum(historicalBarChart)
.transition().duration(1000)
.call(chart1);
nv.utils.windowResize(chart1.update);
return chart1;
});
nv.addGraph(function() {
chart2 = nv.models.multiBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 100})
.showLegend(true)
.reduceXTicks(false)
.forceY([0, 34.0])
.showControls(false)
.stacked(false)
.logScale(false)
.legendPos('top')
.color(d3.scale.category20b().range());
chart2.xAxis
.tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000])
.staggerLabels(false)
.showMaxMin(false)
.rotateLabels(90)
.axisLabel('Timestamp')
.tickFormat(function(d) {
return d3.time.format('%b %y')(new Date(d)) });
chart2.yAxis
.logScale(false)
.axisLabel('')
.tickFormat(d3.format(',.1f'));
d3.select('#Memorychart svg')
.datum(historicalBarChart)
.transition().duration(1000)
.call(chart2);
nv.utils.windowResize(chart2.update);
return chart2;
});
nv.addGraph(function() {
chart3 = nv.models.multiBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 100})
.showLegend(true)
.reduceXTicks(false)
.forceY([0, 34.0])
.showControls(false)
.stacked(false)
.logScale(false)
.legendPos('top')
.color(d3.scale.category20c().range());
chart3.xAxis
.tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000])
.staggerLabels(false)
.showMaxMin(false)
.rotateLabels(90)
.axisLabel('Timestamp')
.tickFormat(function(d) {
return d3.time.format('%b %y')(new Date(d)) });
chart3.yAxis
.logScale(false)
.axisLabel('')
.tickFormat(d3.format(',.1f'));
d3.select('#Diskchart svg')
.datum(historicalBarChart)
.transition().duration(1000)
.call(chart3);
nv.utils.windowResize(chart3.update);
return chart3;
});
nv.addGraph(function() {
chart4 = nv.models.multiBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 100})
.showLegend(true)
.reduceXTicks(false)
.forceY([0, 34.0])
.showControls(false)
.stacked(false)
.logScale(false)
.legendPos('top')
.color(d3.scale.category50().range());
chart4.xAxis
.tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000])
.staggerLabels(false)
.showMaxMin(false)
.rotateLabels(90)
.axisLabel('Timestamp')
.tickFormat(function(d) {
return d3.time.format('%b %y')(new Date(d)) });
chart4.yAxis
.logScale(false)
.axisLabel('')
.tickFormat(d3.format(',.1f'));
d3.select('#Networkchart svg')
.datum(historicalBarChart)
.transition().duration(1000)
.call(chart4);
nv.utils.windowResize(chart4.update);
return chart4;
});
function redraw() {
d3.select('#CPUchart svg')
.datum(historicalBarChart)
.transition().duration(500)
.call(chart1);
d3.select('#Memorychart svg')
.datum(historicalBarChart)
.transition().duration(500)
.call(chart2);
d3.select('#Diskchart svg')
.datum(historicalBarChart)
.transition().duration(1000)
.call(chart3);
d3.select('#Networkchart svg')
.datum(historicalBarChart)
.transition().duration(1000)
.call(chart4);
}
setInterval(function () {
redraw();
}, 1500);
if(historicalBarChart.length <= 0 ) {
document.getElementById("CPUchart").innerHTML = "<div id='noData'><b>No Data Available</b></div>";
document.getElementById("CPUchart").className="nodatadiv";
document.getElementById("Memorychart").innerHTML = "<div id='noData'><b>No Data Available</b></div>";
document.getElementById("Memorychart").className="nodatadiv";
document.getElementById("nodata").className="nodatainner";
}
|
