Basic graph implementation

global.js

@@ -452,6 +452,63 @@ function displayUser(response)
 	profilePic.style = "display: initial;";
 }
 
+// Draw timeseries data with the given canvas in the given color and fill
+// series is an array of objects, with each object containing the color/fill settings and an array of data points
+function drawSeries(series, canvas)
+{
+	// Compute scale and totals
+	var xMin = series[0].points[0][0];
+	var xMax = series[0].points[series[0].points.length - 1][0];
+	var yMax = 0;
+	for (var i = 0; i < series.length; i++) {
+		xMin = Math.min(xMin, series[i].points[0][0]);
+		xMax = Math.max(xMax, series[i].points[series[i].points.length - 1][0]);
+		series[i].max = 0, series[i].avg = 0;
+		for (var j = 0; j < series[i].points.length; j++) {
+			series[i].max = Math.max(series[i].max, series[i].points[j][1]);
+			series[i].avg += series[i].points[j][1];
+		}
+		series[i].avg /= series[i].points.length;
+		yMax = Math.max(yMax, series[i].max);
+	}
+	xMax -= xMin;
+
+	// Setup drawing context
+	var ctx = canvas.getContext("2d");
+	ctx.lineWidth = 1;
+
+	// Clear the canvas
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+	for (var i = 0; i < series.length; i++) {
+		ctx.fillStyle = series[i].color;
+		ctx.strokeStyle = series[i].color;
+
+		// Draw data
+		ctx.beginPath();
+		ctx.moveTo((series[i].points[0][0] - xMin) / xMax * canvas.width, canvas.height - (series[i].points[0][1] / yMax * canvas.height));
+		for (var j = 1; j < series[i].points.length; j++)
+			ctx.lineTo((series[i].points[j][0] - xMin) / xMax * canvas.width, canvas.height - (series[i].points[j][1] / yMax * canvas.height));
+		if (series[i].fill) {
+			ctx.lineTo((series[i].points[series[i].points.length-1][0] - xMin) / xMax * canvas.width, canvas.height);
+			ctx.lineTo((series[i].points[0][0] - xMin) / xMax * canvas.width, canvas.height);
+			ctx.closePath();
+			ctx.fill();
+		} else {
+			ctx.stroke();
+		}
+	}
+
+	// Draw axis lines
+	ctx.strokeStyle = "black";
+	ctx.lineWidth = 2.5;
+	ctx.beginPath();
+	ctx.moveTo(0, 0);
+	ctx.lineTo(0, canvas.height);
+	ctx.lineTo(canvas.width, canvas.height);
+	ctx.stroke();
+}
+
 // Return an MD5 hash of the given string
 function md5(str, binary)
 {
@@ -793,4 +850,4 @@ function translateKernel(slug, element)
 	apiGet("/linode/kernels/" + slug, callback, null);
 }
 
-export { settings, elements, regionNames, apiDelete, apiGet, apiPost, apiPut, md5, migrateETA, oauthPost, oauthScopes, objPut, parseParams, setupHeader, eventTitles, timeString, translateKernel };
+export { settings, elements, regionNames, apiDelete, apiGet, apiPost, apiPut, drawSeries, md5, migrateETA, oauthPost, oauthScopes, objPut, parseParams, setupHeader, eventTitles, timeString, translateKernel };