sysvitals/web/static/js/stats.js

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

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

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

	var colors = {
		'cpu': {
			'idle': '#3aa',
			'user': '#33a',
			'system': '#aa3',
			'iowait': '#a33',
		},
		'mem': {
			'free': '#3a3',
			'used': '#a33',
			'buffers': '#3aa',
			'cached': '#33a',
		},
		'net': {
			'kbit/s_in': '#33a',
			'kbit/s_out': '#3a3',
		},
	};
	function graph_stat(field, subfields) {
		var series = [];
		Object.each(subfields, function(dates, subfield) {
			var array = [];
			Object.each(dates, function(day_array, k) {
				if (day_array == null)
					return;
				array = array.append(day_array.map(function(val, i) {
					return {'x': i, 'y': val};
				}));
			});
			series.push({
				'name': field + '.' + subfield,
				'data': array,
				'color': colors[field][subfield] || '#111',
			});
		});
		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,
		});
		new Rickshaw.Graph.Legend({
			'graph': graph,
			'element': legend_div,
		});
		new Rickshaw.Graph.HoverDetail({
			'graph': graph,
		});
		new Rickshaw.Graph.Axis.Time({
			'graph': graph,
			'timeUnit': new Rickshaw.Fixtures.Time().unit('minute'),
		});
		new Rickshaw.Graph.Axis.Y({
			'graph': graph,
			'tickFormat': Rickshaw.Fixtures.Number.formatKMBT,
		});
		graph.render();
		$('graphs').adopt(graph_div, legend_div, new Element('br'));
	}
});