Пример #1
0
<?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();