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': { 'bit/s_in': '#33a', 'bit/s_out': '#3a3', }, }; function graph_stat(field, subfields) { var series = []; Object.each(subfields, function(dates, subfield) { if (subfield == 'num_cpus') return; 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')); } });