<h2>DragonFly BSD Performance</h2>
-
-<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
-<script type="text/javascript" src="d3.v2.min.js"></script>
-<style>
-.chart {
- width: 680px;
- height: 428px;
- background-image: url("chart_bg.png");
- background-repeat: no-repeat;
- background-position: right top;
-}
-
-/*
- * SVG Styles follow
- */
-path {
- stroke-width: 1;
- fill: none;
- stroke: #666;
-}
-
-path.df32 {
- stroke-width: 2.5;
- stroke: #ffcc00;
-}
-
-path.swapcache {
- stroke-width: 2.5;
- stroke: #ff3300;
-}
-
-line {
- stroke: black;
-}
-
-text {
- font-family: Arial;
- font-size: 9pt;
-}
-
-</style>
-<script>
-$(document).ready(function(){
-var chart_width = 600;
-var chart_height = 348;
-var chart_margin = 80; // Margin is at left and bottom only
-var chart_padding = 20; // padding is at top and right
-
-var perf_swapcache_data = [
- {title: "DragonFly BSD 3.2", values: [100.00, 99.72, 5.78, 1.49, 0.96, 0.84, 0.64]},
- {title: "With Swapcache", values: [99.48, 99.03, 78.30, 49.40, 37.95, 31.06, 27.17]}
-];
-var swapcache_x = ["50%", "75%", "100%", "125%", "150%", "175%", "200%"];
-
-var xscaler = d3.scale.linear()
- .domain([0, 6])
- .range([chart_margin, chart_width + chart_margin]);
-var yscaler = d3.scale.linear()
- .domain([100, 0])
- .range([chart_padding, chart_height]);
-
-var xaxis = d3.svg.axis()
- .scale(xscaler)
- .orient("bottom")
- .ticks(6);
-var yaxis = d3.svg.axis()
- .scale(yscaler)
- .orient("left")
- .ticks(4);
-
-var chart = d3.select("#swapcache_chart")
- .append("svg:svg")
- .attr("width", chart_width + chart_margin + chart_padding)
- .attr("height", chart_height + chart_margin + chart_padding);
-
-/*
- * The line function uses the scalers and kicks back x,y coordinates for
- * points.
- */
-var linefn = d3.svg.line()
- .x(function(d,i) {
- return (xscaler(i));
- })
- .y(function(d) {
- return (yscaler(d));
- });
-
-/*
- * Add a container for the lines
- */
-var chart_data = chart.append("svg:g")
- .attr("transform", "translate(0, 0)");
-
-/*
- * Add the data to chart
- */
-chart_data.append("svg:path")
- .attr("class", "df32")
- .attr("d", linefn(perf_swapcache_data[0].values));
-chart_data.append("svg:path")
- .attr("class", "swapcache")
- .attr("d", linefn(perf_swapcache_data[1].values));
-
-/*
- * Add the X axis
- */
-chart.append("svg:g")
- .attr("class", "x axis")
- .attr("transform", "translate(0, " + (chart_height + 1) + ")")
- .call(xaxis)
- .selectAll("text")
- .text(function(d) {
- return (swapcache_x[parseInt(d)]);
- });
-
-/*
- * Add the Y axis
- */
-chart.append("svg:g")
- .attr("class", "y axis")
- .attr("transform", "translate(" + (chart_margin) + ", 0)")
- .call(yaxis)
- .selectAll("text")
- .text(function(d) {
-console.log(d);
- return (d + "%");
- });
-
-/*
- * Add labels
- */
-chart.append("svg:text")
- .attr("class", "xlabel")
- .attr("x", 265)
- .attr("y", chart_height + chart_padding + 20)
- .text("Database size relative to main memory size");
-
-chart.append("svg:text")
- .attr("class", "ylabel")
- .attr("x", -50)
- .attr("y", 25)
- .attr("text-anchor", "end")
- .attr("transform", "rotate(-90)")
- .text("Percentage of performance relative to maximum");
-
-/*
- * Add key
- */
-var k = chart.append("svg:g")
- .attr("transform", "translate(450, 20)");
-
-k.append("svg:text")
- .attr("x", 110)
- .text(perf_swapcache_data[0].title);
-k.append("svg:path")
- .attr("class", "df32")
- .attr("d", "M0 -5 L100 -5");
-k.append("svg:text")
- .attr("x", 110)
- .attr("y", 20)
- .text(perf_swapcache_data[1].title);
-k.append("svg:path")
- .attr("class", "swapcache")
- .attr("d", "M0 15 L100 15");
-
-}); /* document.ready */
-</script>
-
-<div id="swapcache_chart" class="chart container">
-</div>
+[[!template id=performance-swapcache.tmpl]]