/**
* collection4 - collection.js
- * Copyright (C) 2010 Florian octo Forster
+ * Copyright (C) 2010-2013 Florian octo Forster
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* Boston, MA 02110-1301 USA
*
* Authors:
- * Florian octo Forster <ff at octo.it>
+ * Florian octo Forster <octo at collectd.org>
**/
var c4 =
{
- instances: []
+ instances: new Array (),
+ config:
+ {
+ width: 324,
+ height: 200
+ }
};
function value_to_string (value) /* {{{ */
return (ret);
} /* }}} function ident_describe */
-function def_draw_one (def, data, series_array) /* {{{ */
-{
- var chart_series = new Object ();
-
- chart_series.type = 'line';
- chart_series.pointInterval = data.interval * 1000.0;
- chart_series.pointStart = data.first_value_time * 1000.0;
- chart_series.data = data.data;
- chart_series.lineWidth = 1;
- chart_series.shadow = false;
- chart_series.marker = { enabled: false };
-
- if (def.legend)
- chart_series.name = def.legend;
- else if (def.ds_name)
- chart_series.name = def.ds_name;
-
- if (def.area)
- chart_series.type = 'area';
-
- if (def.stack)
- chart_series.stacking = 'normal';
-
- if ((def.color) && (def.color != 'random'))
- chart_series.color = def.color;
-
- series_array.push (chart_series);
-} /* }}} function def_draw_one */
-
-function def_draw (def, data_list, series_array) /* {{{ */
+/*
+ * Given one metric definition, returns the appropriate metric data from the
+ * graph data (data list). */
+function metric_def_get_data (metric_def, graph_data)
{
var i;
- for (i = 0; i < data_list.length; i++)
+ for (i = 0; i < graph_data.length; i++)
{
- if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
+ if ((metric_def.ds_name) && (metric_def.ds_name != graph_data[i].data_source))
continue;
- if (!ident_matches (def.select, data_list[i].file))
+ if (!ident_matches (metric_def.select, graph_data[i].file))
continue;
- def_draw_one (def, data_list[i], series_array);
+ return (graph_data[i]);
}
-} /* }}} function def_draw */
+ return;
+}
-function inst_get_chart_opts (inst, def) /* {{{ */
+function metric_def_to_rickshaw_series (metric_def, metric_data)
{
- var chart_opts = new Object ();
-
- chart_opts.chart =
- {
- renderTo: inst.container,
- zoomType: 'x'
+ var series = {
+ data: []
};
- chart_opts.xAxis =
- {
- type: 'datetime',
- maxZoom: 300, // five minutes
- title: { text: null },
- events:
- {
- setExtremes: function (event)
- {
- var begin = null;
- var end = null;
-
- if ((event.min) && (event.max))
- {
- begin = event.min / 1000.0;
- end = event.max / 1000.0;
- }
- inst_fetch_data (inst, begin, end);
- }
- }
- };
- chart_opts.yAxis =
- {
- labels:
- {
- formatter: function () { return (value_to_string (this.value)); }
- },
- startOnTick: false,
- endOnTick: false
- };
- chart_opts.legend =
- {
- labelFormatter: function ()
- {
- var series = this;
- var min = Number.MAX_VALUE;
- var max = Number.NEGATIVE_INFINITY;
- var num = 0;
- var sum = 0;
- var avg;
- var i;
+ var i;
- for (i = 0; i < this.data.length; i++)
- {
- var v;
+ if (metric_def.legend)
+ series.name = metric_def.legend;
- v = this.data[i].y;
- if (v == null)
- continue;
+ if (metric_def.color)
+ series.color = metric_def.color;
- if (min > v)
- min = v;
- if (max < v)
- max = v;
+ for (i = 0; i < metric_data.data.length; i++)
+ {
+ var x = metric_data.first_value_time + (i * metric_data.interval);
+ var y = metric_data.data[i];
- sum += v;
- num++;
- }
+ series.data.push ({'x': x, 'y': y});
+ }
- if (num == 0)
- {
- min = null;
- max = null;
- avg = null;
- }
- else
- {
- avg = sum / num;
- }
+ return (series);
+}
- return (this.name + " (" + value_to_string (min) + " min, "
- + value_to_string (avg) + " avg, "
- + value_to_string (max) + " max)");
- }
+function graph_def_to_rickshaw_config (root_element, graph_def, data_list)
+{
+ var graph_config = {
+ element: root_element,
+ renderer: 'line',
+ series: []
};
- chart_opts.series = new Array ();
+ var graph;
+ var i;
+
+ for (i = 0; i < graph_def.defs.length; i++)
+ {
+ var metric_def = graph_def.defs[i];
+ var metric_data = metric_def_get_data (metric_def, data_list);
+ var series;
- if (def.title)
- chart_opts.title = { text: def.title };
+ if (!metric_data)
+ continue;
- if (def.vertical_label)
- chart_opts.yAxis.title = { text: def.vertical_label };
+ series = metric_def_to_rickshaw_series (metric_def, metric_data);
+ if (series)
+ graph_config.series.push (series);
+ }
- return (chart_opts);
-} /* }}} function chart_opts_get */
+ return (graph_config);
+}
-function inst_draw (inst, def, data_list) /* {{{ */
+function graph_def_to_rickshaw_graph (root_element, graph_def, graph_data)
{
- var chart_opts;
- var i;
+ var graph_config = graph_def_to_rickshaw_config (root_element, graph_def, graph_data);
- if (!inst || !def || !data_list)
- return;
+ var graph = new Rickshaw.Graph (graph_config);
+ graph.render ();
- chart_opts = inst_get_chart_opts (inst, def);
+ var x_axis = new Rickshaw.Graph.Axis.Time({
+ graph: graph
+ });
+ x_axis.render ();
- for (i = def.defs.length - 1; i >= 0; i--)
- def_draw (def.defs[i], data_list, chart_opts.series);
+ var y_axis = new Rickshaw.Graph.Axis.Y({
+ graph: graph
+ });
+ y_axis.render ();
+}
+
+function inst_draw_rickshaw (inst, graph_def, graph_data)
+{
+ var root_element = document.getElementById (inst.container);
- inst.chart = new Highcharts.Chart (chart_opts);
-} /* }}} function inst_draw */
+ inst.chart = graph_def_to_rickshaw_graph (root_element, graph_def, graph_data);
+}
+
+function inst_draw (inst, graph_def, graph_data)
+{
+ inst_draw_rickshaw (inst, graph_def, graph_data);
+}
-function inst_redraw (inst, def, data_list) /* {{{ */
+function inst_redraw (inst, graph_def, graph_data) /* {{{ */
{
var series_array;
var i;
if (!inst.chart)
- return (inst_draw (inst, def, data_list));
-
- series_array = new Array ();
- for (i = def.defs.length - 1; i >= 0; i--)
- def_draw (def.defs[i], data_list, series_array);
-
- if (inst.chart.series.length != series_array.length)
- {
- alert ("inst.chart.series.length != series_array.length");
- return;
- }
-
- for (i = inst.chart.series.length - 1; i >= 0; i--)
- inst.chart.series[i].remove (/* redraw = */ false);
-
- for (i = 0; i < series_array.length; i++)
- inst.chart.addSeries (series_array[i], /* redraw = */ false);
-
- inst.chart.redraw ();
+ return (inst_draw (inst, graph_def, graph_data));
+ else
+ return; /* TODO: Insert new data into the graph */
} /* }}} function inst_redraw */
function inst_fetch_data (inst, begin, end) /* {{{ */
{
- var def;
+ var graph_def;
var params;
- def = inst_get_defs (inst);
- if (!def)
+ graph_def = inst_get_defs (inst);
+ if (!graph_def)
return;
params = instance_get_params (inst);
params.action = "instance_data_json";
params.begin = begin || inst.begin;
params.end = end || inst.end;
+ params.resolution = (params.end - params.begin) / c4.config.width;
$.getJSON ("collection.fcgi", params,
function (data)
{
- inst_redraw (inst, def, data);
+ inst_redraw (inst, graph_def, data);
}); /* getJSON */
} /* }}} inst_fetch_data */
return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
} /* }}} function zoom_earlier */
+function graph_recalc_width () /* {{{ */
+{
+ var tmp;
+
+ tmp = $("#layout-middle-center").width ();
+ if (!tmp)
+ return;
+
+ if (tmp < 324)
+ tmp = 324;
+
+ c4.config.width = tmp;
+ c4.config.height = Math.round (tmp / 1.61803398874989484820);
+ $(".graph-json").each (function ()
+ {
+ $(this).width (c4.config.width);
+ $(this).height (c4.config.height);
+ });
+} /* }}} function graph_recalc_width */
+
$(document).ready(function() {
/* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
$("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
+ "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
+ "</div>"
+ "<div class=\"graph-buttons navigation\">"
- + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">←</div>"
- + "<div class=\"graph-button\" onClick=\"zoom_out ('"+id+"');\">−</div>"
+ + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">\u2190</div>"
+ + "<div class=\"graph-button\" onClick=\"zoom_out ('"+id+"');\">\u2212</div>"
+ "<div class=\"graph-button\" onClick=\"zoom_in ('"+id+"');\">+</div>"
- + "<div class=\"graph-button\" onClick=\"zoom_later ('"+id+"');\">→</div>"
+ + "<div class=\"graph-button\" onClick=\"zoom_later ('"+id+"');\">\u2192</div>"
+ "</div>"
);
});
+ graph_recalc_width ();
+
var i;
for (i = 0; i < c4.instances.length; i++)
{
projects / collection4.git / blobdiff