This final report follows on from the early ones (see here), and combines a stacked bar chart with a pie chart on the same page.
This time I’ve only shown the base html. It can be easily put into a Unix script as the others work with a little effort and then emailed to you on a daily basis. This would involve cat’ing the text to an output file with the ‘var data’ statements being prepared within SQLPLUS or UNIX commands. See the early posts.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Oracle 11g - Daily Charts</title>
<style>
div.padded {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.chart rect {
fill: steelblue;
}
.bar2 bar { fill: lightred; }
.chart text {
fill: red;
font: 10px sans-serif;
text-anchor: middle;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
//Next bit for grid lines
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
type="text/css">
.slice text {
font-size: 16pt;
font-family: Arial;
</style>
</head>
<body>
<table style="border-width: 4px; border-style: solid; border-color: red; ">
<tr border=0>
<td border=0 width=808 style="font-family:arial;color:red;font-size:20px;" align=center>Daily Monitoring Report</td></tr>
<tr>
<table style="border-width: 4px; border-style: solid; border-color: red; "><tr>
<td style="border-width: 1px; border-style: solid; border-color: black; " width=400 >
<div id="area1" class="padded">
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Stacked Bar Chart
var margin = {top: 50, right: 30, bottom: 150, left: 60},
width = 400 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var data = [
{name: "/", gbused: 0.23, gbfree: 0.02},
{name: "/usr", gbused: 2.37, gbfree: 0.07},
{name: "/var", gbused: 0.41, gbfree: 0.59},
{name: "/tmp", gbused: 0.01, gbfree: 1.99},
{name: "/home", gbused: 0.01, gbfree: 0.11},
{name: "/admin", gbused: 0, gbfree: 0.12},
{name: "/opt", gbused: 0.2, gbfree: 0.18},
{name: "/oracle", gbused: 30.72, gbfree: 19.03},
{name: "/usr/local/bin", gbused: 0.01, gbfree: 0.99},
{name: "/oracle/oradata_a", gbused: 93.03, gbfree: 11.97},
{name: "/oracle/oradata_b", gbused: 59.32, gbfree: 36.18},
{name: "/oracle/fast_recovery_area", gbused: 19.12, gbfree: 14.88},
{name: "/oracle/archive", gbused: 81.07, gbfree: 9.93},
];
// Note: This is produced by
// df -g | awk '{print "{name: \"" $1 "\", gbused: " $2 - $3 ", gbfree: " $3 "}," }'|grep -v proc | tail +2
// and then pasting the results in here. Alternative way is to ut and paste the rest of this into
// a shell script with this df statement running in situ. (df -g seems to be AIX only, -h for linux/solaris.
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
//var chart = d3.select(".chart")
var chart = d3.select("#area1")
.append("svg:svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(data.map(function(d) { return d.name; }));
y.domain([0, d3.max(data, function(d) { return d.gbused+d.gbfree; })]);
// Add the grid lines before everything else so they go underneath
chart.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
);
chart.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
);
// Add everything else
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-65)"
});
chart.append("g")
.attr("class", "y axis")
.call(yAxis);
chart.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.style("fill", function(d, i){return d>100?"red":"steelblue";})
.attr("x", function(d) { return x(d.name); })
.attr("y", function(d) { return y(d.gbused); })
.attr("height", function(d) { return height - y(d.gbused); })
.attr("width", x.rangeBand());
chart.selectAll(".bar2")
.data(data)
.enter().append("rect")
.attr("class", "bar2")
.style("fill", "pink")
.attr("x", function(d) { return x(d.name); })
.attr("y", function(d) { return y(d.gbfree + d.gbused); })
.attr("height", function(d) { return height - y(d.gbfree) ; })
.attr("width", x.rangeBand());
chart.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -40)
.attr("x", -(height / 2))
.attr("dy", ".71em")
.style("fill", "black")
.style("text-anchor", "end")
.text("Disk Space (Gb)");
chart.append("g")
.attr("class", "x axis")
.append("text")
.attr("y", height + 90)
.attr("x", width / 2)
.attr("dx", ".71em")
.style("font-size", "12px")
.style("fill", "black")
.style("text-anchor", "middle")
.text("Mount Point");
chart.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("fill", "black")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Server Disk - Used/Free Space");
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
</script>
</td><td style="border-width: 1px; border-style: solid; border-color: black; " >
<div id="area2">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
// Pie Chart
var canvasWidth = 400,
canvasHeight = 400,
outerRadius = 125,
color = d3.scale.category20();
var dataSet = [
{name:"ABD_TS", value:3},
{name:"SYSTEM", value:75},
{name:"SYSAUX", value:62},
{name:"UNDOTBS01", value:100},
{name:"USERS", value:53},
{name:"PERFSTAT", value:40},
];
var vis = d3.select("#area2")
.append("svg:svg")
.data([dataSet])
.attr("width", canvasWidth)
.attr("height", canvasHeight)
.append("svg:g") //make a group to hold our pie chart
.attr("transform", "translate(" + 1.5*outerRadius + "," + 1.5*outerRadius + ")")
var arc = d3.svg.arc()
.outerRadius(outerRadius);
var pie = d3.layout.pie()
.value(function(d) { return d.value; })
.sort( function(d) { return null; } );
var arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice");
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); } )
.attr("d", arc);
arcs.append("svg:text")
.attr("transform", function(d) {
d.outerRadius = outerRadius + 50;
d.innerRadius = outerRadius + 45;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.style("fill", "Purple")
.style("font", "bold 10px Courier")
.text(function(d, i) { return dataSet[i].name; });
arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; }).append("svg:text")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("transform", function(d) {
d.outerRadius = outerRadius;
d.innerRadius = outerRadius/2;
return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")";
})
.style("fill", "White")
.style("font", "bold 12px Courier")
.text(function(d) { return d.data.value; });
arcs.append("text")
.attr("x", 0 )
.attr("y", 0 - (canvasHeight / 2))
.attr("text-anchor", "middle")
.style("fill", "black")
.style("font", "16px sans-serif")
.style("text-decoration", "underline")
.text("Oracle Tablespaces");
function angle(d) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
return a > 90 ? a - 180 : a;
}
</script>
</div>
</td></tr></table></tr></table>
</body>
</html>
Happyjohn
No comments:
Post a Comment