sysvitals/web/static/js/stats.js

window.addEvent('domready', function() {
	'use strict';

	new Request.JSON({
		'url': 'http://localhost:8892/v1/1/data/1?start=2014-04-17&end=2014-04-18',
		'onSuccess': graph_stats,
	}).get();

	function graph_stats(data) {
		Object.each(data, function(fields, date) {
			if (fields == null)
				return;
			Object.each(fields, function(subfields, field) {
				if (field == 'disk')
					return;
				graph_stat(field, subfields);
			});
		});
	}

	var colors = {
		'cpu': {
			'idle': '#3aa',
			'user': '#33a',
			'system': '#aa3',
		},
		'mem': {
			'used': '#a33',
			'buffers': '#3aa',
			'cached': '#33a',
		},
		'net': {
			'bytes_recv': '#33a',
			'bytes_sent': '#3a3',
		},
	};
	function graph_stat(field, data) {
		var series = [];
		Object.each(data, function(array, k) {
			array = array.map(function(val, i) {
				return {'x': i, 'y': val};
			})
			var serie = {
				'name': field + '.' + k,
				'data': array,
				'color': colors[field][k] || '#111',
			};
			series.push(serie);
		});
		var graph_div = new Element('div');
		var legend_div = new Element('div');
		var graph = new Rickshaw.Graph({
			'element': graph_div,
			'width': 500,
			'height': 200,
			'renderer': 'area',
			'stroke': true,
			'series': series,
		});
		var legend = new Rickshaw.Graph.Legend({
			'graph': graph,
			'element': legend_div,
		});
		graph.render();
		$('graphs').adopt(graph_div, legend_div, new Element('br'));
	}
});