Skip to content

Instantly share code, notes, and snippets.

@pochi

pochi/graph.html

Created May 30, 2013 23:41
Show Gist options
  • Save pochi/5682101 to your computer and use it in GitHub Desktop.
Save pochi/5682101 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
graph.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.3.0"></script>
<style type="text/css">
svg {
font-family: "Helvetica Neue", Helvetica;
}
.area {
fill: lightsteelblue;
stroke-width: 0;
}
.line {
fill: none;
stroke: #000;
stroke-width: 2px;
}
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.browser text {
text-anchor: end;
}
</style>
</head>
<body>
<div id="dstat_log" name="dstat_file" style="height: 100px; width: 300px; border: 1px dotted silver;">DstatのCSVログをここに置いてね</div>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<div id="dstat_graph"></div>
<script>
// これいれないとjQueryがdataTransferなんてしらないっていいよる
jQuery.event.props.push("dataTransfer");
$(function() {
var Graph = function(command, header, data) {
this.command = command;
this.header = header;
this.data = data;
this.F = function(name){
var params=Array.prototype.slice.call(arguments,1);
return function(d){
if(typeof params[0] ==='function') { return params[0](d[name]) }
else if( typeof params[0] ==='string'){ return (new Function( 'return (' + d[name] + params[0] + ')' )()) }
else if( typeof name === 'object' ){ return name }
else { return d[name]};
}
};
this.COMMAND = function() {
return COMMAND;
};
this.toString = function() {
if(this.selector !== undefined)
console.log("selector: " + this.selector);
console.log("command: " + this.command);
console.log("header: " + this.header);
console.log("data size:" + this.data.length.toString());
};
this.setSelector = function(selector) {
this.selector = selector;
};
this.createSvg = function() {
return d3.select(this.selector)
.append("svg")
.attr("class","chart")
.attr("width", Graph.WIDTH)
.attr("height", Graph.HEIGHT)
.append("g")
.attr("transform", "translate(50,50)");
};
this.createXaxis = function() {
var x = d3.time.scale().range([0, Graph.WIDTH]);
return d3.svg.axis().scale(x).orient("bottom");
};
this.draw = function() {
// Validation
if (this.command === undefined)
console.log("Set command data");
if (this.header === undefined)
console.log("Set header data");
if (this.data === undefined)
console.log("Set data");
if (this.selector === undefined)
console.log("Set selector");
console.log("Start drawing...");
var svg = this.createSvg();
var cpu_columns = {usr: 1, sys:2, idl: 3};
var x = d3.time.scale().range([0, Graph.WIDTH]);
var x_axis = d3.svg.axis().scale(x).orient("bottom").ticks(10);
var y = d3.scale.linear().range([Graph.HEIGHT-100,0]);
var formatPercent = d3.format(".0%");
var y_axis = d3.svg.axis().scale(y).orient("left").tickFormat(formatPercent);
var color = d3.scale.category20();
var format = d3.time.format("%d-%m %I:%M:%S").parse;
var stack = d3.layout.stack()
.values(function(d) {return d.values;});
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(Graph.HEIGHT-100)
.y1(function(d) { return y(d.y) });
//.y1(function(d) { return y(d.y1); })
//.y2(function(d) { return y(d.y2); });
var current_data = this.data;
current_data.forEach(function(d) {
d.date = format(d[0]);
d.y = d[1];
});
color.domain(["usr","sys","idl"]);
var cpus = stack(color.domain().map(function(name){
return {
name: name,
values: current_data.map(function(d){
return {date: d.date, y: ((1*d[cpu_columns[name]])/100) };
})
};
}));
console.log(cpus);
x.domain(d3.extent(current_data, function(d) { return d.date; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (Graph.HEIGHT - 100)+ ")")
.call(x_axis);
svg.append("g")
.attr("class", "y axis")
.call(y_axis);
/*
svg.selectAll(".chart")
.append("path")
.datum(current_data)
.attr("class","area")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d) { return color(d.name); });
*/
console.log(cpus);
svg.append("path")
.data(cpus)
.attr("class", "area")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d,i) { return color(i); });
svg.append("text")
.data(cpus)
.attr("x", -6)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
};
};
// クラス定数
Graph.COMMAND_POSITION = 3;
Graph.HEADER_POSITION = 6;
Graph.DATA_POSITION = 7;
Graph.WIDTH = 500;
Graph.HEIGHT = 300;
// File Loader Events
var handleFileSelect = function(event) {
event.stopPropagation();
event.preventDefault();
var files = event.dataTransfer.files;
var file = files[0];
readFile(file);
};
var handleFileSelectWithInputFile = function(event) {
var files = event.target.files; // FileList object
var file = files[0];
readFile(file);
};
var readFile = function(file) {
$("#list").append('<li><strong>' + escape(file.name) + '</strong> (' + file.type + ') - ' + file.size + ' bytes, last modified: ' + file.lastModifiedDate.toLocaleDateString() + '</li>');
if(file.type === 'text/csv') {
console.log("This is csv file");
} else {
$("#list").append("<div name='error' style='color: red;'>このファイルはCSVファイルじゃないため解析対象となりません</div>");
return false;
}
var reader = new FileReader();
reader.onload = function(event) {
drawGraph(event.target.result);
};
reader.readAsText(file);
};
var drawGraph = function(csv_data) {
var data = d3.csv.parseRows(csv_data);
var rows = new Array();
for(var i=Graph.DATA_POSITION;i<data.length;i++)
rows.push(data[i]);
var graph = new Graph(data[Graph.COMMAND_POSITION],data[Graph.HEADER_POSITION],rows);
graph.setSelector("#dstat_graph");
graph.toString();
graph.draw();
};
var handleDragOver = function (event) {
event.stopPropagation();
event.preventDefault();
event.dataTransfer.dropEffect = "copy";
};
var drop_zone = $("#dstat_log");
drop_zone.bind("dragover", handleDragOver);
drop_zone.bind("drop", handleFileSelect);
var input_file = $("#files");
input_file.bind("change", handleFileSelectWithInputFile);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment