98 lines
2.4 KiB
JavaScript
98 lines
2.4 KiB
JavaScript
var canvas = document.querySelector("canvas"),
|
|
context = canvas.getContext("2d");
|
|
|
|
// set the dimensions and margins of the graph
|
|
var margin = {top: 20, right: 20, bottom: 30, left: 50},
|
|
width = canvas.width - margin.left - margin.right,
|
|
height = canvas.height - margin.top - margin.bottom;
|
|
|
|
// parse the date / time
|
|
var parseTime = d3.timeParse("%Y-%m-%d");
|
|
|
|
// set the ranges
|
|
var x = d3.scaleTime().range([0, width]);
|
|
var y = d3.scaleLinear().range([height, 0]);
|
|
|
|
// define the line
|
|
var line = d3.line()
|
|
.x(function(d) { return x(parseTime(d[0])); })
|
|
.y(function(d) { return y(d[1]); })
|
|
.curve(d3.curveStep)
|
|
.context(context);
|
|
|
|
context.translate(margin.left, margin.top);
|
|
|
|
// Get the data
|
|
d3.json("/asn_history", {credentials: 'same-origin'}).then(function(data) {
|
|
x.domain(d3.extent(data, function(d) { return parseTime(d[0]); }));
|
|
y.domain(d3.extent(data, function(d) { return d[1]; }));
|
|
|
|
xAxis();
|
|
yAxis();
|
|
|
|
context.beginPath();
|
|
line(data);
|
|
context.lineWidth = 1.5;
|
|
context.strokeStyle = "steelblue";
|
|
context.stroke();
|
|
});
|
|
|
|
function xAxis() {
|
|
var tickCount = 10,
|
|
tickSize = .1,
|
|
ticks = x.ticks(tickCount),
|
|
tickFormat = x.tickFormat();
|
|
|
|
context.beginPath();
|
|
ticks.forEach(function(d) {
|
|
context.moveTo(x(d), height);
|
|
context.lineTo(x(d), height + tickSize);
|
|
});
|
|
context.strokeStyle = "black";
|
|
context.stroke();
|
|
|
|
context.textAlign = "center";
|
|
context.textBaseline = "top";
|
|
ticks.forEach(function(d) {
|
|
context.fillText(tickFormat(d), x(d), height + tickSize);
|
|
});
|
|
}
|
|
|
|
function yAxis() {
|
|
var tickCount = 20,
|
|
tickSize = 1,
|
|
tickPadding = 1,
|
|
ticks = y.ticks(tickCount),
|
|
tickFormat = y.tickFormat(tickCount);
|
|
|
|
context.beginPath();
|
|
ticks.forEach(function(d) {
|
|
context.moveTo(0, y(d));
|
|
context.lineTo(-6, y(d));
|
|
});
|
|
context.strokeStyle = "black";
|
|
context.stroke();
|
|
|
|
context.beginPath();
|
|
context.moveTo(-tickSize, 0);
|
|
context.lineTo(0.5, 0);
|
|
context.lineTo(0.5, height);
|
|
context.lineTo(-tickSize, height);
|
|
context.strokeStyle = "black";
|
|
context.stroke();
|
|
|
|
context.textAlign = "right";
|
|
context.textBaseline = "middle";
|
|
ticks.forEach(function(d) {
|
|
context.fillText(tickFormat(d), -tickSize - tickPadding, y(d));
|
|
});
|
|
|
|
context.save();
|
|
context.rotate(-Math.PI / 2);
|
|
context.textAlign = "right";
|
|
context.textBaseline = "top";
|
|
context.font = "bold 10px sans-serif";
|
|
context.fillText("Rank", -10, 10);
|
|
context.restore();
|
|
}
|