<?php // load config require_once 'config/config.php'; // load view require_once 'views/index.class.php'; // create a new page object $index = new index('default'); // set the title $index->title = "Demo Memory Usage"; // set the heading $index->heading = "Free Memory Available"; // insert the D3 Graph into the body $index->body = "<script>\n var margin = {top: 20, right: 30, bottom: 100, left: 80},\n width = 960 - margin.left - margin.right,\n height = 500 - margin.top - margin.bottom;\n\n var x = d3.scale.ordinal()\n .rangeRoundBands([0, width], .1);\n\n var y = d3.scale.linear()\n .range([height, 0]);\n\n var xAxis = d3.svg.axis()\n .scale(x)\n .orient(\"bottom\")\n\n var yAxis = d3.svg.axis()\n .scale(y)\n .orient(\"left\");\n\n var chart = d3.select(\".chart\")\n .attr(\"width\", width + margin.left + margin.right)\n .attr(\"height\", height + margin.top + margin.bottom)\n .append(\"g\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n\n // make data PHP output TSV\n d3.tsv(\"data.php\", type, function(error, data) {\n x.domain(data.map(function(d) { return d.TimeStamp; }));\n y.domain([0, d3.max(data, function(d) { return d.FreeMemory; })]);\n\n chart.append(\"g\")\n .attr(\"class\", \"x axis\")\n .attr(\"transform\", \"translate(0,\" + height + \")\")\n .call(xAxis)\n .selectAll(\"text\")\n .style(\"text-anchor\", \"end\")\n .attr(\"dx\", \"-.8em\")\n .attr(\"dy\", \".15em\")\n .attr(\"transform\", function(d) {\n return \"rotate(-65)\"\n });\n\n chart.append(\"text\")\n .attr(\"class\", \"x label\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"x\", width)\n .attr(\"y\", height + 90)\n .text(\"Snapshot Time\");\n\n chart.append(\"g\")\n .attr(\"class\", \"y axis\")\n .call(yAxis);\n\n chart.append(\"text\")\n .attr(\"class\", \"y label\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"y\", -65)\n .attr(\"dy\", \".75em\")\n .attr(\"transform\", \"rotate(-90)\")\n .text(\"Free Memory (in kB)\");\n\n chart.selectAll(\".bar\")\n .data(data)\n .enter().append(\"rect\")\n .attr(\"class\", \"bar\")\n .attr(\"x\", function(d) { return x(d.TimeStamp); })\n .attr(\"y\", function(d) { return y(d.FreeMemory); })\n .attr(\"height\", function(d) { return height - y(d.FreeMemory); })\n .attr(\"width\", x.rangeBand());\n });\n\n function type(d) {\n d.FreeMemory = +d.FreeMemory; // coerce to number\n return d;\n }\n </script>"; // show the page echo $index->showPage();