-<html>
+<!DOCTYPE html>
+<html lang="en">
<head>
<title>NetData Dashboard</title>
+
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+ <meta name="author" content="costa@tsaousis.gr">
+
<style type="text/css">
html{font-family:sans-serif;}
</style>
This is a template for building custom dashboards. To build a dashboard you just do this:
<pre>
-<html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+</head>
<body>
<div data-netdata="system.processes"
data-chart-library="dygraph"
<li>Depending on the width of the chart and <b>data-after</b> attribute, netdata will automatically refresh the chart when it needs to be updated. For example giving 600 pixels for width for -600 seconds of data, using a chart library that needs 3 pixels per point, will yeld in a chart updated once every 3 seconds.</li>
</ul>
- <table border="0" cellpadding="5" cellspacing="5">
- <tr>
- <th width="600">
- System Processes - Line Chart
- </th>
- <th width="600">
- System ipv4 - Area Chart
- </th>
- <th width="600">
- System CPU - Stacked Area Chart
- </th>
- </tr>
- <tr><td colspan="3"> </td></tr>
- <tr><th colspan="3"><hr>Peity Charts</th></tr>
- <tr><td colspan="3">
- Peity charts do not support 'NULL' values, so the charts cannot indicate that values are missing.
- Peity charts cannot have multiple dimensions on the charts - so netdata will use 'min2max' to show
- the total of all dimensions.
- </td></tr>
- <tr>
- <td width="600">
- <div data-netdata="system.processes"
- data-chart-library="peity"
- data-width="600"
- data-height="30"
- data-after="-600"
- data-dt-element-name="time11"
- </div>
- </td>
- <td width="600">
- <div data-netdata="system.ipv4"
- data-chart-library="peity"
- data-width="600"
- data-height="30"
- data-after="-600"
- data-dt-element-name="time12"
- </div>
- </td>
- <td width="600">
- <div data-netdata="system.cpu"
- data-chart-library="peity"
- data-width="600"
- data-height="30"
- data-after="-600"
- data-dt-element-name="time13"
- </div>
- </td>
- </tr>
- <tr>
- <td>rendered in <span id="time11">X</span> ms</td>
- <td>rendered in <span id="time12">X</span> ms</td>
- <td>rendered in <span id="time13">X</span> ms</td>
- </tr>
- <tr><td colspan="3"> </td></tr>
- <tr><th colspan="3"><hr>Sparkline Charts</th></tr>
- <tr><td colspan="3">
- Sparkline charts support 'NULL' values, so the charts can indicate that values are missing.
- Sparkline charts stretch the values to show the variations between values in more detail.
- They also have mouse-hover support.
- <br/>
- Sparklines are fantastic. You can inline charts in text. For example this
- <div data-netdata="system.cpu"
- data-chart-library="sparkline"
- data-width="60"
- data-height="20"
- data-after="-30"
- ></div> is my current cpu usage,
- <br/>
- while this
- <div data-netdata="netdata.net"
- data-dimensions="out"
- data-chart-library="sparkline"
- data-width="60"
- data-height="20"
- data-after="-30"
- ></div> is the bandwidth my netdata server is currently transmitting and this
-
- <div data-netdata="netdata.requests"
- data-chart-library="sparkline"
- data-width="360"
- data-height="20"
- data-after="-180"
- ></div> is the requests/sec it serves.
- </td></tr>
- <tr>
- <td width="600">
- <div data-netdata="system.processes"
- data-chart-library="sparkline"
- data-width="600"
- data-height="30"
- data-after="-600"
- data-dt-element-name="time21"
- ></div>
- </td>
- <td width="600">
- <div data-netdata="system.ipv4"
- data-chart-library="sparkline"
- data-width="600"
- data-height="30"
- data-after="-600"
- data-dt-element-name="time22"
- ></div>
- </td>
- <td width="600">
- <div data-netdata="system.cpu"
- data-chart-library="sparkline"
- data-width="600"
- data-height="30"
- data-after="-600"
- data-dt-element-name="time23"
- ></div>
- </td>
- </tr>
- <tr>
- <td>rendered in <span id="time21">X</span> ms</td>
- <td>rendered in <span id="time22">X</span> ms</td>
- <td>rendered in <span id="time23">X</span> ms</td>
- </tr>
- <tr><td colspan="3"> </td></tr>
- <tr><th colspan="3"><hr>Dygraph Charts</th></tr>
- <tr><td colspan="3">
- The fastest charting engine that can chart complete charts (not just sparklines).
- The charts are zoomable (drag their contents to zoom-in, double click to zoom-out).
- For the moment zooming is just on the presentation layer (the data do not become more detailed when you zoom).
- </td></tr>
- <tr>
- <td width="600">
- <div data-netdata="system.processes"
- data-chart-library="dygraph"
- data-width="600"
- data-height="200"
- data-after="-600"
- data-dt-element-name="time31"
- ></div>
- </td>
- <td width="600">
- <div data-netdata="system.ipv4"
- data-chart-library="dygraph"
- data-width="600"
- data-height="200"
- data-after="-600"
- data-dt-element-name="time32"
- ></div>
- </td>
- <td width="600">
- <div data-netdata="system.cpu"
- data-chart-library="dygraph"
- data-width="600"
- data-height="200"
- data-after="-600"
- data-dt-element-name="time33"
- ></div>
- </td>
- </tr>
- <tr>
- <td>rendered in <span id="time31">X</span> ms</td>
- <td>rendered in <span id="time32">X</span> ms</td>
- <td>rendered in <span id="time33">X</span> ms</td>
- </tr>
- <tr><td colspan="3"> </td></tr>
- <tr><th colspan="3"><hr>Google Charts</th></tr>
- <tr><td colspan="3">
- NetData was originaly developed with Google Charts.
- NetData is a complete Google Visualization API provider.
- </td></tr>
- <tr>
- <td width="600">
- <div data-netdata="system.processes"
- data-chart-library="google"
- data-width="600"
- data-height="200"
- data-after="-600"
- data-dt-element-name="time51"
- ></div>
- </td>
- <td width="600">
- <div data-netdata="system.ipv4"
- data-chart-library="google"
- data-width="600"
- data-height="200"
- data-after="-600"
- data-dt-element-name="time52"
- ></div>
- </td>
- <td width="600">
- <div data-netdata="system.cpu"
- data-chart-library="google"
- data-width="600"
- data-height="200"
- data-after="-600"
- data-dt-element-name="time53"
- ></div>
- </td>
- </tr>
- <tr>
- <td>rendered in <span id="time51">X</span> ms</td>
- <td>rendered in <span id="time52">X</span> ms</td>
- <td>rendered in <span id="time53">X</span> ms</td>
- </tr>
- <tr><td colspan="3"> </td></tr>
- <tr><th colspan="3"><hr>Morris Charts</th></tr>
- <tr><td colspan="3">
- Unfortunatelly, Morris Charts are veeeeeeeeeeeeeeeery slow! We force them to lower their detail to get acceptable results.
- And they have issues with negative numbers in area charts...
- </td></tr>
- <tr>
- <td width="600">
- <div data-netdata="system.processes"
- data-chart-library="morris"
- data-width="600"
- data-height="200"
- data-after="-600"
- data-dt-element-name="time41"
- ></div>
- </td>
- <td width="600">
- <div data-netdata="system.ipv4"
- data-chart-library="morris"
- data-width="600"
- data-height="200"
- data-after="-600"
- data-dt-element-name="time42"
- ></div>
- </td>
- <td width="600">
- <div data-netdata="system.cpu"
- data-chart-library="morris"
- data-width="600"
- data-height="200"
- data-after="-600"
- data-dt-element-name="time43"
- ></div>
- </td>
- </tr>
- <tr>
- <td>rendered in <span id="time41">X</span> ms</td>
- <td>rendered in <span id="time42">X</span> ms</td>
- <td>rendered in <span id="time43">X</span> ms</td>
- </tr>
- </table>
+
+<hr>
+<h1>Sparkline Charts</h1>
+Sparkline charts support 'NULL' values, so the charts can indicate that values are missing.
+Sparkline charts stretch the values to show the variations between values in more detail.
+They also have mouse-hover support.
+<br/>
+<b>Sparklines are fantastic</b>. You can inline charts in text. For example this
+ <div data-netdata="system.cpu"
+ data-chart-library="sparkline"
+ data-width="5%"
+ data-height="20"
+ data-after="-30"
+ ></div> is my current cpu usage (last 30 seconds),
+ while this
+ <div data-netdata="netdata.net"
+ data-dimensions="out"
+ data-chart-library="sparkline"
+ data-width="10%"
+ data-height="20"
+ data-after="-60"
+ ></div> is the bandwidth my netdata server is currently transmitting (last minute)
+ and this
+ <div data-netdata="netdata.requests"
+ data-chart-library="sparkline"
+ data-width="20%"
+ data-height="20"
+ data-after="-180"
+ ></div> is the requests/sec it serves (last 3 minutes).
+
+<br/>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.processes"
+ data-chart-library="sparkline"
+ data-width="100%"
+ data-height="30"
+ data-after="-600"
+ data-dt-element-name="time101"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time101">X</span> ms</small>
+</div>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.ipv4"
+ data-chart-library="sparkline"
+ data-width="100%"
+ data-height="30"
+ data-after="-600"
+ data-dt-element-name="time102"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time102">X</span> ms</small>
+</div>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.cpu"
+ data-chart-library="sparkline"
+ data-width="100%"
+ data-height="30"
+ data-after="-600"
+ data-dt-element-name="time103"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time103">X</span> ms</small>
+</div>
+
+
+
+<hr>
+<h1>Peity Charts</h1>
+Peity charts do not support 'NULL' values, so the charts cannot indicate that values are missing.
+Peity charts cannot have multiple dimensions on the charts - so netdata will use 'min2max' to show
+the total of all dimensions.
+<br/>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.processes"
+ data-chart-library="peity"
+ data-width="100%"
+ data-height="30"
+ data-after="-600"
+ data-dt-element-name="time001"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time001">X</span> ms</small>
+</div>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.ipv4"
+ data-chart-library="peity"
+ data-width="100%"
+ data-height="30"
+ data-after="-600"
+ data-dt-element-name="time002"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time002">X</span> ms</small>
+</div>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.cpu"
+ data-chart-library="peity"
+ data-width="100%"
+ data-height="30"
+ data-after="-600"
+ data-dt-element-name="time003"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time003">X</span> ms</small>
+</div>
+
+
+
+
+<hr>
+<h1>Dygraph Charts</h1>
+The fastest charting engine that can chart complete charts (not just sparklines).
+The charts are zoomable (drag their contents to zoom-in, double click to zoom-out).
+For the moment zooming is just on the presentation layer (the data do not become more detailed when you zoom).
+<br/>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.processes"
+ data-chart-library="dygraph"
+ data-width="100%"
+ data-height="200"
+ data-after="-600"
+ data-dt-element-name="time201"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time201">X</span> ms</small>
+</div>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.ipv4"
+ data-chart-library="dygraph"
+ data-width="100%"
+ data-height="200"
+ data-after="-600"
+ data-dt-element-name="time202"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time202">X</span> ms</small>
+</div>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.cpu"
+ data-chart-library="dygraph"
+ data-width="100%"
+ data-height="200"
+ data-after="-600"
+ data-dt-element-name="time203"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time203">X</span> ms</small>
+</div>
+
+
+
+
+<hr>
+<h1>Google Charts</h1>
+NetData was originaly developed with Google Charts.
+NetData is a complete Google Visualization API provider.
+<br/>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.processes"
+ data-chart-library="google"
+ data-width="100%"
+ data-height="200"
+ data-after="-600"
+ data-dt-element-name="time301"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time301">X</span> ms</small>
+</div>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.ipv4"
+ data-chart-library="google"
+ data-width="100%"
+ data-height="200"
+ data-after="-600"
+ data-dt-element-name="time302"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time302">X</span> ms</small>
+</div>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.cpu"
+ data-chart-library="google"
+ data-width="100%"
+ data-height="200"
+ data-after="-600"
+ data-dt-element-name="time303"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time303">X</span> ms</small>
+</div>
+
+
+
+
+
+
+<hr>
+<h1>Morris Charts</h1>
+Unfortunatelly, Morris Charts are veeeeeeeeeeeeeeeery slow! We force them to lower their detail to get acceptable results.
+<br/>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.processes"
+ data-chart-library="morris"
+ data-width="100%"
+ data-height="200"
+ data-after="-600"
+ data-dt-element-name="time401"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time401">X</span> ms</small>
+</div>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.ipv4"
+ data-chart-library="morris"
+ data-width="100%"
+ data-height="200"
+ data-after="-600"
+ data-dt-element-name="time402"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time402">X</span> ms</small>
+</div>
+<div style="width: 32%; display: inline-block;">
+ <div data-netdata="system.cpu"
+ data-chart-library="morris"
+ data-width="100%"
+ data-height="200"
+ data-after="-600"
+ data-dt-element-name="time403"
+ ></div>
+ <br/>
+ <small>rendered in <span id="time403">X</span> ms</small>
+</div>
+
+
+
+
</body>
</html>
(function(window)
{
+ // fix IE bug with console
+ if(!window.console){ window.console = {log: function(){} }; }
+
var NETDATA = window.NETDATA || {};
// ----------------------------------------------------------------------------------------------------------------
NETDATA.chartDefaults = {
host: NETDATA.serverDefault, // the server to get data from
- width: 100, // the chart width
- height: 20, // the chart height
- library: 'peity', // the graphing library to use
+ width: '100%', // the chart width
+ height: '100%', // the chart height
+ library: 'dygraph', // the graphing library to use
method: 'average', // the grouping method
before: 0, // panning
after: -600, // panning
- pixels_per_point: 1, // the detail of the chart
+ pixels_per_point: 1 // the detail of the chart
}
NETDATA.options = {
- targets: null,
+ targets: null,
updated_dom: 1,
debug: 1,
+ last_paused: 0,
current: {
pixels_per_point: 1,
- idle_between_charts: 50,
- idle_between_loops: 100,
- debug: 1
+ idle_between_charts: 100,
+ idle_between_loops: 500,
+ fast_render_timeframe: 200 // render continously for these many ms
}
}
100: { message: "Cannot load chart library", alert: true },
101: { message: "Cannot load jQuery", alert: true },
402: { message: "Chart library not found", alert: false },
- 404: { message: "Chart not found", alert: false },
+ 404: { message: "Chart not found", alert: false }
};
NETDATA.errorLast = {
code: 0,
message: "",
- datetime: 0,
+ datetime: 0
};
NETDATA.error = function(code, msg) {
NETDATA.errorLast.datetime = 0;
}
- NETDATA.chartContainer = function(element, width, height) {
+ NETDATA.messageInABox = function(element, message) {
self = $(element);
- self.css('width', width)
- .css('height', height)
- .css('display', 'inline-block')
- .css('overflow', 'hidden');
- }
- NETDATA.messageInABox = function(element, width, height, message) {
- NETDATA.chartContainer(element, width, height);
- element.innerHTML = '<div style="overflow: hidden; border: 0px; background-color: lightgrey; width: ' + width + '; height: ' + height + ';"><small>'
+ bgcolor = ""
+ if(NETDATA.options.debug)
+ bgcolor = " background-color: lightgrey;";
+
+ element.innerHTML = '<div style="overflow: hidden;' + bgcolor + ' width: 100%; height: 100%;"><small>'
+ message
+ '</small></div>';
+
+ self.data('created', false);
}
// ----------------------------------------------------------------------------------------------------------------
callback();
}
- NETDATA.generateChartDataURL = function(options) {
+ NETDATA.generateChartDataURL = function() {
+ self = $(this);
+
+ var chart = self.data('chart');
+ var host = self.data('host') || NETDATA.chartDefaults.host;
+ var width = self.width();
+ var height = self.height();
+ var method = self.data('method') || NETDATA.chartDefaults.method;
+ var after = self.data('after') || NETDATA.chartDefaults.after;
+ var before = self.data('before') || NETDATA.chartDefaults.before;
+ var library = self.data('chart-library') || NETDATA.chartDefaults.library;
+ var dimensions = self.data('dimensions') || null;
+ var pixels_per_point = self.data('pixels-per-point') || NETDATA.chartLibraries[library].pixels_per_point;
+
+ // force an options provided detail
+ if(pixels_per_point < NETDATA.options.current.pixels_per_point)
+ pixels_per_point = NETDATA.options.current.pixels_per_point
+
+ var points = self.data('points') || Math.round(width / pixels_per_point);
+
// build the data URL
- var url = options.host + options.url;
- url += "&points=";
- url += options.points.toString();
- url += "&group=";
- url += options.method;
- url += "&after=";
- url += options.after || "0";
- url += "&before=";
- url += options.before || "0";
- url += "&options=" + NETDATA.chartLibraries[options.library].options + '|';
- url += (options.non_zero)?"nonzero":"";
- url += "&format=" + NETDATA.chartLibraries[options.library].format;
-
- if(options.dimensions)
- url += "&dimensions=" + options.dimensions;
-
- if(NETDATA.options.debug) console.log('generateChartDataURL(' + options + ') = ' + url );
+ var url = host + chart.data_url;
+ url += "&format=" + NETDATA.chartLibraries[library].format;
+ url += "&points=" + points.toString();
+ url += "&options=" + NETDATA.chartLibraries[library].options;
+ url += "&group=" + method;
+
+ if(after)
+ url += "&after=" + after.toString();
+
+ if(before)
+ url += "&before=" + before.toString();
+
+ if(dimensions)
+ url += "&dimensions=" + dimensions;
+
+ self.data('calculated-width', width)
+ .data('calculated-height', height)
+ .data('calculated-points', points)
+ .data('calculated-url', url);
+
+ if(NETDATA.options.debug) console.log('generateChartDataURL(): ' + url + ' WxH:' + width + 'x' + height + ' points: ' + points + ' library: ' + library);
return url;
}
- NETDATA.parseDomCharts = function(targets, index, callback) {
- if(NETDATA.options.debug) console.log('parseDomCharts() working on ' + index);
+ NETDATA.validateDomCharts = function(targets, index, callback) {
+ if(NETDATA.options.debug) console.log('validateDomCharts() working on ' + index);
var target = targets.get(index);
if(target == null) {
- if(NETDATA.options.debug) console.log('parseDomCharts(): all ' + (index - 1) + ' charts parsed.');
+ if(NETDATA.options.debug) console.log('validateDomCharts(): all ' + (index - 1) + ' charts parsed.');
if(typeof callback == 'function') callback();
}
else {
var self = $(target);
if(!self.data('prepared')) {
- self.data('prepared', true);
+ self.data('prepared', true)
+ .data('updated', 0)
+ .data('created', false)
+ .data('enabled', false);
var id = self.data('netdata');
var host = self.data('host') || NETDATA.chartDefaults.host;
- var width = self.data('width') || NETDATA.chartDefaults.width;
- var height = self.data('height') || NETDATA.chartDefaults.height;
- var method = self.data('method') || NETDATA.chartDefaults.method;
- var after = self.data('after') || NETDATA.chartDefaults.after;
- var before = self.data('before') || NETDATA.chartDefaults.before;
var library = self.data('chart-library') || NETDATA.chartDefaults.library;
- var dimensions = self.data('dimensions') || null;
- NETDATA.chartContainer(target, width, height);
- if(NETDATA.options.debug) console.log('parseDomCharts() parsing ' + id + ' of type ' + library);
+ if(NETDATA.options.debug) console.log('validateDomCharts() parsing ' + id + ' of type ' + library);
if(typeof NETDATA.chartLibraries[library] == 'undefined') {
- self.data('created', false)
- .data('updated', 0)
- .data('enabled', false);
-
NETDATA.error(402, library);
- NETDATA.messageInABox(target, width, height, 'chart library "' + library + '" is not found');
-
- NETDATA.parseDomCharts(targets, ++index, callback);
+ NETDATA.messageInABox(target, 'chart library "' + library + '" is not found');
+ NETDATA.validateDomCharts(targets, ++index, callback);
}
else {
var url = host + "/api/v1/chart?chart=" + id;
crossDomain: true
})
.done(function(chart) {
- var pixels_per_point = self.data('point-width') || NETDATA.chartLibraries[library].pixels_per_point;
- var points = self.data('points') || Math.round(width / pixels_per_point);
-
- var url = NETDATA.generateChartDataURL({
- host: host,
- url: chart.data_url,
- dimensions: dimensions,
- library: library,
- method: method,
- before: before,
- points: points,
- after: after,
- non_zero: null
- });
-
- // done processing of this DIV
- // store the processing result, in
- // 'data' sections in the DIV
self.data('chart', chart)
- .data('chart-url', url)
.data('update-every', chart.update_every * 1000)
- .data('created', false)
- .data('updated', 0)
.data('enabled', true)
.data('host', host)
- .data('width', width)
- .data('height', height)
- .data('method', method)
- .data('after', after)
- .data('before', before)
- .data('chart-library', library)
- .data('dimensions', dimensions)
- ;
-
- NETDATA.messageInABox(target, width, height, 'chart "' + id + '" is loading...');
+ .data('chart-library', library);
})
.fail(function() {
- self.data('created', false)
- .data('enabled', false);
-
NETDATA.error(404, url);
- NETDATA.messageInABox(target, width, height, 'chart "' + id + '" not found on url "' + url + '"');
+ NETDATA.messageInABox(target, 'chart "' + id + '" not found on url "' + url + '"');
})
.always(function() {
- self.data('updated', 0);
- NETDATA.parseDomCharts(targets, ++index, callback);
+ NETDATA.validateDomCharts(targets, ++index, callback);
});
}
}
}
}
+ NETDATA.sizeDomCharts = function(targets, index, callback) {
+ // this is used to quickly size all charts to their size
+
+ if(NETDATA.options.debug) console.log('sizeDomCharts() working on ' + index);
+
+ var target = targets.get(index);
+ if(target == null) {
+ if(NETDATA.options.debug) console.log('sizeDomCharts(): all ' + (index - 1) + ' charts sized.');
+ if(typeof callback == 'function') callback();
+ }
+ else {
+ var self = $(target);
+
+ var id = self.data('netdata');
+ var width = self.data('width') || NETDATA.chartDefaults.width;
+ var height = self.data('height') || NETDATA.chartDefaults.height;
+
+ self.css('width', width)
+ .css('height', height)
+ .css('display', 'inline-block')
+ .css('overflow', 'hidden');
+
+ NETDATA.messageInABox(target, 'chart "' + id + '" is loading...');
+ NETDATA.sizeDomCharts(targets, ++index, callback);
+ }
+ }
+
NETDATA.domUpdated = function(callback) {
NETDATA.options.updated_dom = 0;
- NETDATA.options.targets = $('div[data-netdata]') // .filter(':visible')
+ NETDATA.options.targets = $('div[data-netdata]').filter(':visible')
.bind('create', function(event, data) {
var self = $(this);
- try {
+
+ if(NETDATA.options.debug)
NETDATA.chartLibraries[self.data('chart-library')].create(this, data);
- }
- catch(err) {
- NETDATA.messageInABox(this, self.data('width'), self.data('height'), 'chart "' + id + '" failed to be created as ' + self.data('chart-library'));
+ else {
+ try {
+ NETDATA.chartLibraries[self.data('chart-library')].create(this, data);
+ }
+ catch(err) {
+ NETDATA.messageInABox(this, 'chart "' + self.data('netdata') + '" failed to be created as ' + self.data('chart-library'));
+ self.data('created', false);
+ }
}
})
.bind('update', function(event, data) {
var self = $(this);
- try {
+ if(NETDATA.options.debug)
NETDATA.chartLibraries[self.data('chart-library')].update(this, data);
- }
- catch(err) {
- NETDATA.messageInABox(this, self.data('width'), self.data('height'), 'chart "' + id + '" failed to be updated as ' + self.data('chart-library'));
+ else {
+ try {
+ NETDATA.chartLibraries[self.data('chart-library')].update(this, data);
+ }
+ catch(err) {
+ NETDATA.messageInABox(this, 'chart "' + self.data('netdata') + '" failed to be updated as ' + self.data('chart-library'));
+ self.data('created', false);
+ }
}
});
if(NETDATA.options.debug)
console.log('DOM updated - there are ' + NETDATA.options.targets.length + ' charts on page.');
- NETDATA.parseDomCharts(NETDATA.options.targets, 0, callback);
+ NETDATA.sizeDomCharts(NETDATA.options.targets, 0, function() {
+ NETDATA.validateDomCharts(NETDATA.options.targets, 0, callback);
+ });
}
NETDATA.init = function() {
+ // this should be called only once
NETDATA.domUpdated(function() {
- // done processing all netdata DIVs in this page
- // call the refresh handler
-
- // FIXME
NETDATA.chartRefresher(0);
});
}
else {
console.log(self.data('netdata') + ' is visible, downloading data...');
$.ajax( {
- url: self.data('chart-url'),
+ url: NETDATA.generateChartDataURL.call(element), // self.data('chart-url'),
crossDomain: true
})
.then(function(data) {
}
})
.fail(function() {
- NETDATA.messageInABox(element, self.data('width'), self.data('height'), 'cannot download chart "' + self.data('netdata') + '" values from url "' + self.data('chart-url') + '"');
+ NETDATA.messageInABox(element, 'cannot download chart "' + self.data('netdata') + '" values from url "' + self.data('chart-url') + '"');
})
.always(function() {
if(typeof callback == 'function') callback();
NETDATA.chartRefresher = function(index) {
// if(NETDATA.options.debug) console.log('NETDATA.chartRefresher(<targets, ' + index + ')');
+ now = new Date().getTime();
+
if(NETDATA.options.updated_dom) {
NETDATA.domUpdated(function() {
NETDATA.chartRefresher(0);
else {
var target = NETDATA.options.targets.get(index);
if(target == null) {
- console.log('waiting to restart main loop...');
+ if(NETDATA.options.debug) console.log('waiting to restart main loop...');
+ NETDATA.options.last_paused = now;
- // finished, restart
setTimeout(function() {
NETDATA.chartRefresher(0);
}, NETDATA.options.current.idle_between_loops);
NETDATA.chartRefresher(++index);
}
else {
- setTimeout(function() {
+ if(now - NETDATA.options.last_paused < NETDATA.options.current.fast_render_timeframe) {
+ if(NETDATA.options.debug) console.log('fast rendering...');
+
NETDATA.chartValuesDownloader(target, function() {
NETDATA.chartRefresher(++index);
});
- }, NETDATA.options.current.idle_between_charts);
+ }
+ else {
+ if(NETDATA.options.debug) console.log('waiting for next refresh...');
+ NETDATA.options.last_paused = now;
+
+ setTimeout(function() {
+ NETDATA.chartValuesDownloader(target, function() {
+ NETDATA.chartRefresher(++index);
+ });
+ }, NETDATA.options.current.idle_between_charts);
+ }
}
}
}
NETDATA.peityChartUpdate = function(element, data) {
var self = $(element);
- var instance = self.html(data).not('[data-created]');
- instance.change();
+ var instance = self.data('peity-instance');
+ var ins = $(instance);
+ ins.html(data);
+
+ // peity.change() does not accept options
+ // to pass width and height
+ //ins.change();
+ ins.peity('line', { width: self.data('calculated-width'), height: self.data('calculated-height') })
}
NETDATA.peityChartCreate = function(element, data) {
var self = $(element);
- var width = self.data('width') || NETDATA.chartDefaults.width;
- var height = self.data('height') || NETDATA.chartDefaults.height;
- var instance = self.html(data).not('[data-created]');
- instance.peity('line', {
- width: width,
- height: height
- })
- .data('created', true);
+ if(!NETDATA.chartLibraries.peity.initialized) {
+ if(!NETDATA.chartLibraries.peity.enabled) {
+ NETDATA.messageInABox(element, 'peity is disabled.');
+ }
+ else {
+ NETDATA.messageInABox(element, 'peity is initializing...');
+
+ }
+ }
+
+ var uuid = NETDATA.guid();
+ element.innerHTML = '<div id="' + uuid + '">' + data + '</div>';
+ var instance = document.getElementById(uuid);
+ var ins = $(instance);
+
+ ins.peity('line', { width: self.data('calculated-width'), height: self.data('calculated-height') })
+
+ self.data('peity-uuid', uuid)
+ .data('peity-instance', instance)
+ .data('created', true);
}
// ----------------------------------------------------------------------------------------------------------------
NETDATA.sparklineChartUpdate = function(element, data) {
var self = $(element);
var options = self.data('sparkline-options');
+ options.width = self.data('calculated-width');
+ options.height = self.data('calculated-height');
self.sparkline(data, options);
}
NETDATA.sparklineChartCreate = function(element, data) {
var self = $(element);
var chart = self.data('chart');
- var width = self.data('width') || NETDATA.chartDefaults.width;
- var height = self.data('height') || NETDATA.chartDefaults.height;
var type = self.data('sparkline-type') || 'line';
var lineColor = self.data('sparkline-lineColor') || undefined;
var fillColor = self.data('sparkline-fillColor') || (chart.chart_type == 'line')?'#FFF':undefined;
numberDecimalMark: numberDecimalMark,
numberDigitGroupCount: numberDigitGroupCount,
animatedZooms: animatedZooms,
- width: width,
- height: height
+ width: self.data('calculated-width'),
+ height: self.data('calculated-height')
};
var uuid = NETDATA.guid();
if(dygraph != null) {
console.log('updating dygraphs');
- dygraph.updateOptions( { 'file': data.data, 'labels': data.labels } );
+ dygraph.updateOptions({
+ file: data.data,
+ labels: data.labels,
+ labelsDivWidth: self.width() - 70
+ });
}
else
console.log('not updating dygraphs');
NETDATA.dygraphChartCreate = function(element, data) {
var self = $(element);
- var width = self.data('width') || NETDATA.chartDefaults.width;
- var height = self.data('height') || NETDATA.chartDefaults.height;
var chart = self.data('chart');
var title = self.data('dygraph-title') || chart.title;
var titleHeight = self.data('dygraph-titleHeight') || 20;
var hideOverlayOnMouseOut = self.data('dygraph-hideOverlayOnMouseOut') || true;
var fillGraph = self.data('dygraph-fillGraph') || (chart.chart_type == 'area')?true:false;
var drawPoints = self.data('dygraph-drawPoints') || false;
- var labelsDivStyles = self.data('dygraph-labelsDivStyles') || { 'fontSize':'10' };
- var labelsDivWidth = self.data('dygraph-labelsDivWidth') || 250;
+ var labelsDivStyles = self.data('dygraph-labelsDivStyles') || { 'fontSize':'10px' };
+ // var labelsDivWidth = self.data('dygraph-labelsDivWidth') || 250;
+ var labelsDivWidth = self.width() - 70;
var labelsSeparateLines = self.data('dygraph-labelsSeparateLines') || false;
var labelsShowZeroValues = self.data('dygraph-labelsShowZeroValues') || true;
var legend = self.data('dygraph-legend') || 'onmouseover';
showRoller: showRoller,
valueFormatter: valueFormatter,
rightGap: rightGap,
- width: width,
- height: height,
labels: data.labels,
axes: {
x: {
}
},
y: {
- pixelsPerLabel: 15,
+ pixelsPerLabel: 15
}
}
};
var uuid = NETDATA.guid();
- self.html('<div id="' + uuid + '"></div>');
+ self.html('<div id="' + uuid + '" style="width: 100%; height: 100%;"></div>');
var dchart = new Dygraph(document.getElementById(uuid),
data.data, options);
self.data('dygraph-instance', dchart)
- .data('dygraph-options', options)
- .data('uuid', uuid)
- .data('created', true);
+ .data('dygraph-options', options)
+ .data('uuid', uuid)
+ .data('created', true);
//NETDATA.dygraphAllCharts.push(dchart);
//if(NETDATA.dygraphAllCharts.length > 1)
NETDATA.morrisChartUpdate = function(element, data) {
var self = $(element);
- var width = self.data('width') || NETDATA.chartDefaults.width;
- var height = self.data('height') || NETDATA.chartDefaults.height;
var morris = self.data('morris-instance');
if(typeof data.update_every != 'undefined')
NETDATA.morrisChartCreate = function(element, data) {
var self = $(element);
- var width = self.data('width') || NETDATA.chartDefaults.width;
- var height = self.data('height') || NETDATA.chartDefaults.height;
var chart = self.data('chart');
- self.html('<div id="morris-' + chart.id + '" style="width: ' + width + 'px; height: ' + height + 'px;"></div>');
+ var uuid = NETDATA.guid();
+ self.html('<div id="' + uuid + '" style="width: ' + self.data('calculated-width') + 'px; height: ' + self.data('calculated-height') + 'px;"></div>');
// remove the 'time' element from the labels
data.labels.splice(0, 1);
var options = {
- element: 'morris-' + chart.id,
+ element: uuid,
data: data.data,
xkey: 'time',
ykeys: data.labels,
hideHover: 'auto',
parseTime: true,
continuousLine: false,
- behaveLikeLine: false,
- width: width,
- height: height
+ behaveLikeLine: false
};
var morris;
NETDATA.raphaelChartUpdate = function(element, data) {
var self = $(element);
- var width = self.data('width') || NETDATA.chartDefaults.width;
- var height = self.data('height') || NETDATA.chartDefaults.height;
self.raphael(data, {
- width: width,
- height: height
+ width: self.data('calculated-width'),
+ height: self.data('calculated-height')
})
};
NETDATA.raphaelChartCreate = function(element, data) {
var self = $(element);
- var width = self.data('width') || NETDATA.chartDefaults.width;
- var height = self.data('height') || NETDATA.chartDefaults.height;
self.raphael(data, {
- width: width,
- height: height
+ width: self.data('calculated-width'),
+ height: self.data('calculated-height')
})
.data('created', true);
};
NETDATA.googleChartUpdate = function(element, data) {
var self = $(element);
- var width = self.data('width') || NETDATA.chartDefaults.width;
- var height = self.data('height') || NETDATA.chartDefaults.height;
var gchart = self.data('google-instance');
var options = self.data('google-options');
NETDATA.googleChartCreate = function(element, data) {
var self = $(element);
- var width = self.data('width') || NETDATA.chartDefaults.width;
- var height = self.data('height') || NETDATA.chartDefaults.height;
var chart = self.data('chart');
var datatable = new google.visualization.DataTable(data);
var gchart;
var options = {
- width: width,
- height: height,
+ // do not set width, height - the chart resizes itself
+ //width: self.data('calculated-width'),
+ //height: self.data('calculated-height'),
lineWidth: 1,
title: chart.title,
fontSize: 11,
isStacked: false
};
+ var uuid = NETDATA.guid();
+ self.html('<div id="' + uuid + '" style="width: 100%; height: 100%;"></div>');
+
switch(chart.chart_type) {
case "area":
options.vAxis.viewWindowMode = 'maximized';
- gchart = new google.visualization.AreaChart(element);
+ gchart = new google.visualization.AreaChart(document.getElementById(uuid));
break;
case "stacked":
options.vAxis.viewWindowMode = 'maximized';
options.vAxis.minValue = null;
options.vAxis.maxValue = null;
- gchart = new google.visualization.AreaChart(element);
+ gchart = new google.visualization.AreaChart(document.getElementById(uuid));
break;
default:
case "line":
options.lineWidth = 2;
- gchart = new google.visualization.LineChart(element);
+ gchart = new google.visualization.LineChart(document.getElementById(uuid));
break;
}
gchart.draw(datatable, options);
self.data('google-instance', gchart)
- .data('google-options', options)
- .data('created', true);
+ .data('google-options', options)
+ .data('uuid', uuid)
+ .data('created', true);
};
// ----------------------------------------------------------------------------------------------------------------
projects / netdata.git / commitdiff