web/dashboard.js

   1 // You can set the following variables before loading this script:
   2 //
   3 // var netdataStopDygraph = 1;                  // do not use dygraph
   4 // var netdataStopSparkline = 1;                // do not use sparkline
   5 // var netdataStopPeity = 1;                    // do not use peity
   6 // var netdataStopGoogleCharts = 1;             // do not use google
   7 // var netdataStopMorris = 1;                   // do not use morris
   8 //
   9 // You can also set the default netdata server, using the following.
  10 // When this variable is not set, we assume the page is hosted on your
  11 // netdata server already.
  12 // var netdataServer = "http://yourhost:19999"; // set your NetData server
  13
  14 (function(window)
  15 {
  16         // fix IE bug with console
  17         if(!window.console){ window.console = {log: function(){} }; }
  18
  19         var NETDATA = window.NETDATA || {};
  20
  21         // ----------------------------------------------------------------------------------------------------------------
  22         // Detect the netdata server
  23
  24         // http://stackoverflow.com/questions/984510/what-is-my-script-src-url
  25         // http://stackoverflow.com/questions/6941533/get-protocol-domain-and-port-from-url
  26         NETDATA._scriptSource = function(scripts) {
  27                 var script = null, base = null;
  28
  29                 if(typeof document.currentScript != 'undefined') {
  30                         script = document.currentScript;
  31                 }
  32                 else {
  33                         var all_scripts = document.getElementsByTagName('script');
  34                         script = all_scripts[all_scripts.length - 1];
  35                 }
  36
  37                 if (script.getAttribute.length != 'undefined')
  38                         script = script.src;
  39                 else
  40                         script = script.getAttribute('src', -1);
  41
  42                 var link = document.createElement('a');
  43                 link.setAttribute('href', script);
  44
  45                 if(!link.protocol || !link.hostname) return null;
  46
  47                 base = link.protocol;
  48                 if(base) base += "//";
  49                 base += link.hostname;
  50
  51                 if(link.port) base += ":" + link.port;
  52                 base += "/";
  53
  54                 return base;
  55         };
  56
  57         if(typeof netdataServer != 'undefined')
  58                 NETDATA.serverDefault = netdataServer + "/";
  59         else
  60                 NETDATA.serverDefault = NETDATA._scriptSource();
  61
  62         NETDATA.jQuery       = NETDATA.serverDefault + 'lib/jquery-1.11.3.min.js';
  63         NETDATA.peity_js     = NETDATA.serverDefault + 'lib/jquery.peity.min.js';
  64         NETDATA.sparkline_js = NETDATA.serverDefault + 'lib/jquery.sparkline.min.js';
  65         NETDATA.dygraph_js   = NETDATA.serverDefault + 'lib/dygraph-combined.js';
  66         NETDATA.raphael_js   = NETDATA.serverDefault + 'lib/raphael-min.js';
  67         NETDATA.morris_js    = NETDATA.serverDefault + 'lib/morris.min.js';
  68         NETDATA.morris_css   = NETDATA.serverDefault + 'css/morris.css';
  69         NETDATA.google_js    = 'https://www.google.com/jsapi';
  70         NETDATA.colors  = [ '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6',
  71                                                 '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11',
  72                                                 '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC' ];
  73
  74         // ----------------------------------------------------------------------------------------------------------------
  75         // the defaults for all charts
  76
  77         NETDATA.chartDefaults = {
  78                 host: NETDATA.serverDefault,    // the server to get data from
  79                 width: '100%',                                  // the chart width
  80                 height: '100%',                                 // the chart height
  81                 library: 'dygraph',                             // the graphing library to use
  82                 method: 'average',                              // the grouping method
  83                 before: 0,                                              // panning
  84                 after: -600,                                    // panning
  85                 pixels_per_point: 1                             // the detail of the chart
  86         }
  87
  88         NETDATA.options = {
  89                 targets: null,
  90                 updated_dom: 1,
  91                 debug: 0,
  92                 last_paused: 0,
  93
  94                 current: {
  95                         pixels_per_point: 1,
  96                         idle_between_charts: 100,
  97                         idle_between_loops: 500,
  98                         fast_render_timeframe: 200 // render continously for these many ms
  99                 }
 100         }
 101
 102         if(NETDATA.options.debug) console.log('welcome to NETDATA');
 103
 104
 105         // ----------------------------------------------------------------------------------------------------------------
 106         // Error Handling
 107
 108         NETDATA.errorCodes = {
 109                 100: { message: "Cannot load chart library", alert: true },
 110                 101: { message: "Cannot load jQuery", alert: true },
 111                 402: { message: "Chart library not found", alert: false },
 112                 403: { message: "Chart library not enabled/is failed", alert: false },
 113                 404: { message: "Chart not found", alert: false }
 114         };
 115         NETDATA.errorLast = {
 116                 code: 0,
 117                 message: "",
 118                 datetime: 0
 119         };
 120
 121         NETDATA.error = function(code, msg) {
 122                 NETDATA.errorLast.code = code;
 123                 NETDATA.errorLast.message = msg;
 124                 NETDATA.errorLast.datetime = new Date().getTime();
 125
 126                 console.log("ERROR " + code + ": " + NETDATA.errorCodes[code].message + ": " + msg);
 127
 128                 if(NETDATA.errorCodes[code].alert)
 129                         alert("ERROR " + code + ": " + NETDATA.errorCodes[code].message + ": " + msg);
 130         }
 131
 132         NETDATA.errorReset = function() {
 133                 NETDATA.errorLast.code = 0;
 134                 NETDATA.errorLast.message = "You are doing fine!";
 135                 NETDATA.errorLast.datetime = 0;
 136         }
 137
 138         NETDATA.messageInABox = function(element, message) {
 139                 self = $(element);
 140
 141                 bgcolor = ""
 142                 if(NETDATA.options.debug)
 143                         bgcolor = " background-color: lightgrey;";
 144
 145                 element.innerHTML = '<div style="overflow: hidden;' + bgcolor + ' width: 100%; height: 100%;"><small>'
 146                         + message
 147                         + '</small></div>';
 148
 149                 self.data('created', false);
 150         }
 151
 152         // ----------------------------------------------------------------------------------------------------------------
 153         // Load a script without jquery
 154         // This is used to load jquery - after it is loaded, we use jquery
 155
 156         NETDATA._loadjQuery = function(callback) {
 157                 if(typeof jQuery == 'undefined') {
 158                         var script = document.createElement('script');
 159                         script.type = 'text/javascript';
 160                         script.async = true;
 161                         script.src = NETDATA.jQuery;
 162
 163                         // script.onabort = onError;
 164                         script.onerror = function(err, t) { NETDATA.error(101, NETDATA.jQuery); };
 165                         if(typeof callback == "function")
 166                                 script.onload = callback;
 167
 168                         var s = document.getElementsByTagName('script')[0];
 169                         s.parentNode.insertBefore(script, s);
 170                 }
 171                 else if(typeof callback == "function")
 172                         callback();
 173         }
 174
 175         NETDATA.generateChartDataURL = function() {
 176                 self = $(this);
 177
 178                 var chart = self.data('chart');
 179                 var host = self.data('host') || NETDATA.chartDefaults.host;
 180                 var width = self.width();
 181                 var height = self.height();
 182                 var method = self.data('method') || NETDATA.chartDefaults.method;
 183                 var after = self.data('after') || NETDATA.chartDefaults.after;
 184                 var before = self.data('before') || NETDATA.chartDefaults.before;
 185                 var library = self.data('chart-library') || NETDATA.chartDefaults.library;
 186                 var dimensions = self.data('dimensions') || null;
 187                 var pixels_per_point = self.data('pixels-per-point') || NETDATA.chartLibraries[library].pixels_per_point;
 188
 189                 // force an options provided detail
 190                 if(pixels_per_point < NETDATA.options.current.pixels_per_point)
 191                         pixels_per_point = NETDATA.options.current.pixels_per_point
 192
 193                 var points = self.data('points') || Math.round(width / pixels_per_point);
 194
 195                 // build the data URL
 196                 var url = host + chart.data_url;
 197                 url += "&format="  + NETDATA.chartLibraries[library].format;
 198                 url += "&points="  + points.toString();
 199                 url += "&options=" + NETDATA.chartLibraries[library].options;
 200                 url += "&group="   + method;
 201
 202                 if(after)
 203                         url += "&after="  + after.toString();
 204
 205                 if(before)
 206                         url += "&before=" + before.toString();
 207
 208                 if(dimensions)
 209                         url += "&dimensions=" + dimensions;
 210
 211                 self.data('calculated-width', width)
 212                         .data('calculated-height', height)
 213                         .data('calculated-points', points)
 214                         .data('calculated-url', url);
 215
 216                 if(NETDATA.options.debug) console.log('generateChartDataURL(): ' + url + ' WxH:' + width + 'x' + height + ' points: ' + points + ' library: ' + library);
 217                 return url;
 218         }
 219
 220         NETDATA.validateDomCharts = function(targets, index, callback) {
 221                 if(NETDATA.options.debug) console.log('validateDomCharts() working on ' + index);
 222
 223                 var target = targets.get(index);
 224                 if(target == null) {
 225                         if(NETDATA.options.debug) console.log('validateDomCharts(): all ' + (index - 1) + ' charts parsed.');
 226                         if(typeof callback == 'function') callback();
 227                 }
 228                 else {
 229                         var self = $(target);
 230                         if(!self.data('prepared')) {
 231                                 self.data('prepared', true)
 232                                         .data('updated', 0)
 233                                         .data('created', false)
 234                                         .data('enabled', false);
 235
 236                                 var id = self.data('netdata');
 237                                 var host = self.data('host') || NETDATA.chartDefaults.host;
 238                                 var library = self.data('chart-library') || NETDATA.chartDefaults.library;
 239
 240                                 if(NETDATA.options.debug) console.log('validateDomCharts() parsing ' + id + ' of type ' + library);
 241
 242                                 if(typeof NETDATA.chartLibraries[library] == 'undefined') {
 243                                         NETDATA.error(402, library);
 244                                         NETDATA.messageInABox(target, 'chart library "' + library + '" is not found');
 245                                         NETDATA.validateDomCharts(targets, ++index, callback);
 246                                 }
 247                                 else if(!NETDATA.chartLibraries[library].enabled) {
 248                                         NETDATA.error(403, library);
 249                                         NETDATA.messageInABox(target, 'chart library "' + library + '" is not enabled');
 250                                         NETDATA.validateDomCharts(targets, ++index, callback);
 251                                 }
 252                                 else if(!NETDATA.chartLibraries[library].initialized) {
 253                                         self.data('prepared', false);
 254                                         NETDATA.chartLibraries[library].initialize(function() {
 255                                                 NETDATA.validateDomCharts(targets, index, callback);
 256                                         });
 257                                 }
 258                                 else {
 259                                         var url = host + "/api/v1/chart?chart=" + id;
 260
 261                                         $.ajax( {
 262                                                 url:  url,
 263                                                 crossDomain: true
 264                                         })
 265                                         .done(function(chart) {
 266                                                 self.data('chart', chart)
 267                                                         .data('update-every', chart.update_every * 1000)
 268                                                         .data('enabled', true)
 269                                                         .data('host', host)
 270                                                         .data('chart-library', library);
 271                                         })
 272                                         .fail(function() {
 273                                                 NETDATA.error(404, url);
 274                                                 NETDATA.messageInABox(target, 'chart "' + id + '" not found on url "' + url + '"');
 275                                         })
 276                                         .always(function() {
 277                                                 NETDATA.validateDomCharts(targets, ++index, callback);
 278                                         });
 279                                 }
 280                         }
 281                         else {
 282                                 NETDATA.validateDomCharts(targets, ++index, callback);
 283                         }
 284                 }
 285         }
 286
 287         NETDATA.sizeDomCharts = function(targets, index, callback) {
 288                 // this is used to quickly size all charts to their size
 289
 290                 if(NETDATA.options.debug) console.log('sizeDomCharts() working on ' + index);
 291
 292                 var target = targets.get(index);
 293                 if(target == null) {
 294                         if(NETDATA.options.debug) console.log('sizeDomCharts(): all ' + (index - 1) + ' charts sized.');
 295                         if(typeof callback == 'function') callback();
 296                 }
 297                 else {
 298                         var self = $(target);
 299
 300                         var id = self.data('netdata');
 301                         var width = self.data('width') || NETDATA.chartDefaults.width;
 302                         var height = self.data('height') || NETDATA.chartDefaults.height;
 303
 304                         self.css('width', width)
 305                                 .css('height', height)
 306                                 .css('display', 'inline-block')
 307                                 .css('overflow', 'hidden');
 308
 309                         NETDATA.messageInABox(target, 'chart "' + id + '" is loading...');
 310                         NETDATA.sizeDomCharts(targets, ++index, callback);
 311                 }
 312         }
 313
 314         NETDATA.getDomCharts = function(callback) {
 315                 NETDATA.options.updated_dom = 0;
 316
 317                 NETDATA.options.targets = $('div[data-netdata]').filter(':visible')
 318                         .bind('create', function(event, data) {
 319                                 var self = $(this);
 320
 321                                 if(NETDATA.options.debug)
 322                                         NETDATA.chartLibraries[self.data('chart-library')].create(this, data);
 323                                 else {
 324                                         try {
 325                                                 NETDATA.chartLibraries[self.data('chart-library')].create(this, data);
 326                                         }
 327                                         catch(err) {
 328                                                 NETDATA.messageInABox(this, 'chart "' + self.data('netdata') + '" failed to be created as ' + self.data('chart-library'));
 329                                                 self.data('created', false);
 330                                         }
 331                                 }
 332                         })
 333                         .bind('update', function(event, data) {
 334                                 var self = $(this);
 335                                 if(NETDATA.options.debug)
 336                                         NETDATA.chartLibraries[self.data('chart-library')].update(this, data);
 337                                 else {
 338                                         try {
 339                                                 NETDATA.chartLibraries[self.data('chart-library')].update(this, data);
 340                                         }
 341                                         catch(err) {
 342                                                 NETDATA.messageInABox(this, 'chart "' + self.data('netdata') + '" failed to be updated as ' + self.data('chart-library'));
 343                                                 self.data('created', false);
 344                                         }
 345                                 }
 346                         });
 347
 348                 if(NETDATA.options.debug)
 349                         console.log('DOM updated - there are ' + NETDATA.options.targets.length + ' charts on page.');
 350
 351                 NETDATA.sizeDomCharts(NETDATA.options.targets, 0, function() {
 352                         NETDATA.validateDomCharts(NETDATA.options.targets, 0, callback);
 353                 });
 354         }
 355
 356         NETDATA.init = function() {
 357                 // this should be called only once
 358                 NETDATA.getDomCharts(function() {
 359                         NETDATA.chartRefresher(0);
 360                 });
 361         }
 362
 363         // ----------------------------------------------------------------------------------------------------------------
 364
 365         //var chart = function() {
 366         //}
 367
 368         //chart.prototype.color = function() {
 369         //      return 'red';
 370         //}
 371
 372         //var c = new chart();
 373         //c.color();
 374
 375         NETDATA.chartValuesDownloader = function(element, callback) {
 376                 var self = $(element);
 377                 var last = self.data('updated') || 0;
 378                 var every = self.data('update-every') || 1;
 379
 380                 // check if this chart has to be refreshed now
 381                 var now = new Date().getTime();
 382                 if(last + every > now) {
 383                         console.log(self.data('netdata') + ' too soon - skipping.');
 384                         if(typeof callback == 'function') callback();
 385                 }
 386                 else if(!self.visible(true)) {
 387                         console.log(self.data('netdata') + ' is NOT visible.');
 388                         if(typeof callback == 'function') callback();
 389                 }
 390                 else {
 391                         console.log(self.data('netdata') + ' is visible, downloading data...');
 392                         $.ajax( {
 393                                 url: NETDATA.generateChartDataURL.call(element), // self.data('chart-url'),
 394                                 crossDomain: true
 395                         })
 396                         .then(function(data) {
 397                                 var started = new Date().getTime();
 398
 399                                 if(self.data('created')) {
 400                                         console.log('updating ' + self.data('chart-library') + ' chart ' + self.data('netdata'));
 401                                         self.trigger('update', [data]);
 402                                         // NETDATA.chartLibraries[self.data('chart-library')].update(element, data);
 403                                 }
 404                                 else {
 405                                         console.log('creating ' + self.data('chart-library') + ' chart ' + self.data('netdata'));
 406                                         self.trigger('create', [data]);
 407                                         //NETDATA.chartLibraries[self.data('chart-library')].create(element, data);
 408                                         self.data('created', true);
 409                                 }
 410
 411                                 var ended = new Date().getTime();
 412                                 self.data('updated', ended);
 413
 414                                 var dt = ended - started;
 415
 416                                 self.data('refresh-dt', dt);
 417                                 var element_name = self.data('dt-element-name') || null;
 418                                 if(element_name) {
 419                                         var element = document.getElementById(element_name) || null;
 420                                         if(element) {
 421                                                 element.innerHTML = dt.toString();
 422                                         }
 423                                 }
 424                         })
 425                         .fail(function() {
 426                                 NETDATA.messageInABox(element, 'cannot download chart "' + self.data('netdata') + '" values from url "' + self.data('chart-url') + '"');
 427                         })
 428                         .always(function() {
 429                                 if(typeof callback == 'function') callback();
 430                         });
 431                 }
 432         };
 433
 434         NETDATA.chartRefresher = function(index) {
 435                 // if(NETDATA.options.debug) console.log('NETDATA.chartRefresher(<targets, ' + index + ')');
 436
 437                 now = new Date().getTime();
 438
 439                 if(NETDATA.options.updated_dom) {
 440                         NETDATA.getDomCharts(function() {
 441                                 NETDATA.chartRefresher(0);
 442                         });
 443                 }
 444                 else {
 445                         var target = NETDATA.options.targets.get(index);
 446                         if(target == null) {
 447                                 if(NETDATA.options.debug) console.log('waiting to restart main loop...');
 448                                 NETDATA.options.last_paused = now;
 449
 450                                 setTimeout(function() {
 451                                         NETDATA.chartRefresher(0);
 452                                 }, NETDATA.options.current.idle_between_loops);
 453                         }
 454                         else {
 455                                 var self = $(target);
 456                                 if(!self.data('enabled')) {
 457                                         NETDATA.chartRefresher(++index);
 458                                 }
 459                                 else {
 460                                         if(now - NETDATA.options.last_paused < NETDATA.options.current.fast_render_timeframe) {
 461                                                 if(NETDATA.options.debug) console.log('fast rendering...');
 462
 463                                                 NETDATA.chartValuesDownloader(target, function() {
 464                                                         NETDATA.chartRefresher(++index);
 465                                                 });
 466                                         }
 467                                         else {
 468                                                 if(NETDATA.options.debug) console.log('waiting for next refresh...');
 469                                                 NETDATA.options.last_paused = now;
 470
 471                                                 setTimeout(function() {
 472                                                         NETDATA.chartValuesDownloader(target, function() {
 473                                                                 NETDATA.chartRefresher(++index);
 474                                                         });
 475                                                 }, NETDATA.options.current.idle_between_charts);
 476                                         }
 477                                 }
 478                         }
 479                 }
 480         }
 481
 482         NETDATA.guid = function() {
 483                 function s4() {
 484                         return Math.floor((1 + Math.random()) * 0x10000)
 485                                         .toString(16)
 486                                         .substring(1);
 487                         }
 488
 489                         return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
 490         }
 491
 492         // ----------------------------------------------------------------------------------------------------------------
 493         // peity
 494
 495         NETDATA.peityInitialize = function(callback) {
 496                 if(typeof netdataStopPeity == 'undefined') {
 497                         $.getScript(NETDATA.peity_js)
 498                                 .done(function() {
 499                                         NETDATA.registerChartLibrary('peity', NETDATA.peity_js);
 500                                 })
 501                                 .fail(function() {
 502                                         NETDATA.error(100, NETDATA.peity_js);
 503                                 })
 504                                 .always(function() {
 505                                         if(typeof callback == "function")
 506                                                 callback();
 507                                 })
 508                 }
 509                 else {
 510                         NETDATA.chartLibraries.peity.enabled = false;
 511                         if(typeof callback == "function")
 512                                 callback();
 513                 }
 514         };
 515
 516         NETDATA.peityChartUpdate = function(element, data) {
 517                 var self = $(element);
 518                 var instance = self.data('peity-instance');
 519                 var ins = $(instance);
 520                 ins.html(data);
 521
 522                 // peity.change() does not accept options
 523                 // to pass width and height
 524                 //ins.change();
 525                 ins.peity('line', { width: self.data('calculated-width'), height: self.data('calculated-height') })
 526         }
 527
 528         NETDATA.peityChartCreate = function(element, data) {
 529                 var self = $(element);
 530
 531                 var uuid = NETDATA.guid();
 532                 element.innerHTML = '<div id="' + uuid + '">' + data + '</div>';
 533                 var instance = document.getElementById(uuid);
 534                 var ins = $(instance);
 535
 536                 ins.peity('line', { width: self.data('calculated-width'), height: self.data('calculated-height') })
 537
 538                 self.data('peity-uuid', uuid)
 539                         .data('peity-instance', instance)
 540                         .data('created', true);
 541         }
 542
 543         // ----------------------------------------------------------------------------------------------------------------
 544         // sparkline
 545
 546         NETDATA.sparklineInitialize = function(callback) {
 547                 if(typeof netdataStopSparkline == 'undefined') {
 548                         $.getScript(NETDATA.sparkline_js)
 549                                 .done(function() {
 550                                         NETDATA.registerChartLibrary('sparkline', NETDATA.sparkline_js);
 551                                 })
 552                                 .fail(function() {
 553                                         NETDATA.error(100, NETDATA.sparkline_js);
 554                                 })
 555                                 .always(function() {
 556                                         if(typeof callback == "function")
 557                                                 callback();
 558                                 })
 559                 }
 560                 else {
 561                         NETDATA.chartLibraries.sparkline.enabled = false;
 562                         if(typeof callback == "function")
 563                                 callback();
 564                 }
 565         };
 566
 567         NETDATA.sparklineChartUpdate = function(element, data) {
 568                 var self = $(element);
 569                 var options = self.data('sparkline-options');
 570                 options.width = self.data('calculated-width');
 571                 options.height = self.data('calculated-height');
 572                 self.sparkline(data, options);
 573         }
 574
 575         NETDATA.sparklineChartCreate = function(element, data) {
 576                 var self = $(element);
 577                 var chart = self.data('chart');
 578                 var type = self.data('sparkline-type') || 'line';
 579                 var lineColor = self.data('sparkline-lineColor') || undefined;
 580                 var fillColor = self.data('sparkline-fillColor') || (chart.chart_type == 'line')?'#FFF':undefined;
 581                 var chartRangeMin = self.data('sparkline-chartRangeMin') || undefined;
 582                 var chartRangeMax = self.data('sparkline-chartRangeMax') || undefined;
 583                 var composite = self.data('sparkline-composite') || undefined;
 584                 var enableTagOptions = self.data('sparkline-enableTagOptions') || undefined;
 585                 var tagOptionPrefix = self.data('sparkline-tagOptionPrefix') || undefined;
 586                 var tagValuesAttribute = self.data('sparkline-tagValuesAttribute') || undefined;
 587                 var disableHiddenCheck = self.data('sparkline-disableHiddenCheck') || undefined;
 588                 var defaultPixelsPerValue = self.data('sparkline-defaultPixelsPerValue') || undefined;
 589                 var spotColor = self.data('sparkline-spotColor') || undefined;
 590                 var minSpotColor = self.data('sparkline-minSpotColor') || undefined;
 591                 var maxSpotColor = self.data('sparkline-maxSpotColor') || undefined;
 592                 var spotRadius = self.data('sparkline-spotRadius') || undefined;
 593                 var valueSpots = self.data('sparkline-valueSpots') || undefined;
 594                 var highlightSpotColor = self.data('sparkline-highlightSpotColor') || undefined;
 595                 var highlightLineColor = self.data('sparkline-highlightLineColor') || undefined;
 596                 var lineWidth = self.data('sparkline-lineWidth') || undefined;
 597                 var normalRangeMin = self.data('sparkline-normalRangeMin') || undefined;
 598                 var normalRangeMax = self.data('sparkline-normalRangeMax') || undefined;
 599                 var drawNormalOnTop = self.data('sparkline-drawNormalOnTop') || undefined;
 600                 var xvalues = self.data('sparkline-xvalues') || undefined;
 601                 var chartRangeClip = self.data('sparkline-chartRangeClip') || undefined;
 602                 var xvalues = self.data('sparkline-xvalues') || undefined;
 603                 var chartRangeMinX = self.data('sparkline-chartRangeMinX') || undefined;
 604                 var chartRangeMaxX = self.data('sparkline-chartRangeMaxX') || undefined;
 605                 var disableInteraction = self.data('sparkline-disableInteraction') || false;
 606                 var disableTooltips = self.data('sparkline-disableTooltips') || false;
 607                 var disableHighlight = self.data('sparkline-disableHighlight') || false;
 608                 var highlightLighten = self.data('sparkline-highlightLighten') || 1.4;
 609                 var highlightColor = self.data('sparkline-highlightColor') || undefined;
 610                 var tooltipContainer = self.data('sparkline-tooltipContainer') || undefined;
 611                 var tooltipClassname = self.data('sparkline-tooltipClassname') || undefined;
 612                 var tooltipFormat = self.data('sparkline-tooltipFormat') || undefined;
 613                 var tooltipPrefix = self.data('sparkline-tooltipPrefix') || undefined;
 614                 var tooltipSuffix = self.data('sparkline-tooltipSuffix') || ' ' + chart.units;
 615                 var tooltipSkipNull = self.data('sparkline-tooltipSkipNull') || true;
 616                 var tooltipValueLookups = self.data('sparkline-tooltipValueLookups') || undefined;
 617                 var tooltipFormatFieldlist = self.data('sparkline-tooltipFormatFieldlist') || undefined;
 618                 var tooltipFormatFieldlistKey = self.data('sparkline-tooltipFormatFieldlistKey') || undefined;
 619                 var numberFormatter = self.data('sparkline-numberFormatter') || function(n){ return n.toFixed(2); };
 620                 var numberDigitGroupSep = self.data('sparkline-numberDigitGroupSep') || undefined;
 621                 var numberDecimalMark = self.data('sparkline-numberDecimalMark') || undefined;
 622                 var numberDigitGroupCount = self.data('sparkline-numberDigitGroupCount') || undefined;
 623                 var animatedZooms = self.data('sparkline-animatedZooms') || false;
 624
 625                 var options = {
 626                         type: type,
 627                         lineColor: lineColor,
 628                         fillColor: fillColor,
 629                         chartRangeMin: chartRangeMin,
 630                         chartRangeMax: chartRangeMax,
 631                         composite: composite,
 632                         enableTagOptions: enableTagOptions,
 633                         tagOptionPrefix: tagOptionPrefix,
 634                         tagValuesAttribute: tagValuesAttribute,
 635                         disableHiddenCheck: disableHiddenCheck,
 636                         defaultPixelsPerValue: defaultPixelsPerValue,
 637                         spotColor: spotColor,
 638                         minSpotColor: minSpotColor,
 639                         maxSpotColor: maxSpotColor,
 640                         spotRadius: spotRadius,
 641                         valueSpots: valueSpots,
 642                         highlightSpotColor: highlightSpotColor,
 643                         highlightLineColor: highlightLineColor,
 644                         lineWidth: lineWidth,
 645                         normalRangeMin: normalRangeMin,
 646                         normalRangeMax: normalRangeMax,
 647                         drawNormalOnTop: drawNormalOnTop,
 648                         xvalues: xvalues,
 649                         chartRangeClip: chartRangeClip,
 650                         chartRangeMinX: chartRangeMinX,
 651                         chartRangeMaxX: chartRangeMaxX,
 652                         disableInteraction: disableInteraction,
 653                         disableTooltips: disableTooltips,
 654                         disableHighlight: disableHighlight,
 655                         highlightLighten: highlightLighten,
 656                         highlightColor: highlightColor,
 657                         tooltipContainer: tooltipContainer,
 658                         tooltipClassname: tooltipClassname,
 659                         tooltipChartTitle: chart.title,
 660                         tooltipFormat: tooltipFormat,
 661                         tooltipPrefix: tooltipPrefix,
 662                         tooltipSuffix: tooltipSuffix,
 663                         tooltipSkipNull: tooltipSkipNull,
 664                         tooltipValueLookups: tooltipValueLookups,
 665                         tooltipFormatFieldlist: tooltipFormatFieldlist,
 666                         tooltipFormatFieldlistKey: tooltipFormatFieldlistKey,
 667                         numberFormatter: numberFormatter,
 668                         numberDigitGroupSep: numberDigitGroupSep,
 669                         numberDecimalMark: numberDecimalMark,
 670                         numberDigitGroupCount: numberDigitGroupCount,
 671                         animatedZooms: animatedZooms,
 672                         width: self.data('calculated-width'),
 673                         height: self.data('calculated-height')
 674                 };
 675
 676                 var uuid = NETDATA.guid();
 677                 element.innerHTML = '<div style="display: inline-block; position: relative;" id="' + uuid + '"></div>';
 678                 var div = document.getElementById(uuid);
 679
 680                 self.sparkline(data, options);
 681                 self.data('sparkline-options', options)
 682                 .data('uuid', uuid)
 683                 .data('created', true);
 684         };
 685
 686         // ----------------------------------------------------------------------------------------------------------------
 687         // dygraph
 688
 689         NETDATA.dygraphAllCharts = [];
 690         NETDATA.dygraphInitSync = function(callback) {
 691                 //$.getScript(NETDATA.serverDefault + 'dygraph-synchronizer.js')
 692                 //      .always(function() {
 693                                 if(typeof callback == "function")
 694                                         callback();
 695                 //      })
 696         }
 697
 698         NETDATA.dygraphSync = null;
 699         NETDATA.dygraphSyncAll = function() {
 700                 if(NETDATA.dygraphSync) {
 701                         NETDATA.dygraphSync.detach();
 702                         NETDATA.dygraphSync = null;
 703                 }
 704
 705                 NETDATA.dygraphSync = Dygraph.synchronize(NETDATA.dygraphAllCharts, {
 706                         selection: true,
 707                         zoom: false
 708                 });
 709         }
 710
 711         NETDATA.dygraphInitialize = function(callback) {
 712                 if(typeof netdataStopDygraph == 'undefined') {
 713                         $.getScript(NETDATA.dygraph_js)
 714                                 .done(function() {
 715                                         NETDATA.registerChartLibrary('dygraph', NETDATA.dygraph_js);
 716                                 })
 717                                 .fail(function() {
 718                                         NETDATA.error(100, NETDATA.dygraph_js);
 719                                 })
 720                                 .always(function() {
 721                                         NETDATA.dygraphInitSync(callback);
 722                                 })
 723                 }
 724                 else {
 725                         NETDATA.chartLibraries.dygraph.enabled = false;
 726                         if(typeof callback == "function")
 727                                 callback();
 728                 }
 729         };
 730
 731         NETDATA.dygraphChartUpdate = function(element, data) {
 732                 var self = $(element);
 733                 var dygraph = self.data('dygraph-instance');
 734
 735                 if(typeof data.update_every != 'undefined')
 736                         self.data('update-every', data.update_every * 1000);
 737
 738                 if(dygraph != null) {
 739                         console.log('updating dygraphs');
 740                         dygraph.updateOptions({
 741                                 file: data.data,
 742                                 labels: data.labels,
 743                                 labelsDivWidth: self.width() - 70
 744                         });
 745                 }
 746                 else
 747                         console.log('not updating dygraphs');
 748         };
 749
 750         NETDATA.dygraphChartCreate = function(element, data) {
 751                 var self = $(element);
 752                 var chart = self.data('chart');
 753                 var title = self.data('dygraph-title') || chart.title;
 754                 var titleHeight = self.data('dygraph-titleHeight') || 20;
 755                 var labelsDiv = self.data('dygraph-labelsDiv') || undefined;
 756                 var connectSeparatedPoints = self.data('dygraph-connectSeparatedPoints') || false;
 757                 var yLabelWidth = self.data('dygraph-yLabelWidth') || 12;
 758                 var stackedGraph = self.data('dygraph-stackedGraph') || (chart.chart_type == 'stacked')?true:false;
 759                 var stackedGraphNaNFill = self.data('dygraph-stackedGraphNaNFill') || 'none';
 760                 var hideOverlayOnMouseOut = self.data('dygraph-hideOverlayOnMouseOut') || true;
 761                 var fillGraph = self.data('dygraph-fillGraph') || (chart.chart_type == 'area')?true:false;
 762                 var drawPoints = self.data('dygraph-drawPoints') || false;
 763                 var labelsDivStyles = self.data('dygraph-labelsDivStyles') || { 'fontSize':'10px' };
 764                 // var labelsDivWidth = self.data('dygraph-labelsDivWidth') || 250;
 765                 var labelsDivWidth = self.width() - 70;
 766                 var labelsSeparateLines = self.data('dygraph-labelsSeparateLines') || false;
 767                 var labelsShowZeroValues = self.data('dygraph-labelsShowZeroValues') || true;
 768                 var legend = self.data('dygraph-legend') || 'onmouseover';
 769                 var showLabelsOnHighlight = self.data('dygraph-showLabelsOnHighlight') || true;
 770                 var gridLineColor = self.data('dygraph-gridLineColor') || '#EEE';
 771                 var axisLineColor = self.data('dygraph-axisLineColor') || '#EEE';
 772                 var maxNumberWidth = self.data('dygraph-maxNumberWidth') || 8;
 773                 var sigFigs = self.data('dygraph-sigFigs') || null;
 774                 var digitsAfterDecimal = self.data('dygraph-digitsAfterDecimal') || 2;
 775                 var axisLabelFontSize = self.data('dygraph-axisLabelFontSize') || 10;
 776                 var axisLineWidth = self.data('dygraph-axisLineWidth') || 0.3;
 777                 var drawAxis = self.data('dygraph-drawAxis') || true;
 778                 var strokeWidth = self.data('dygraph-strokeWidth') || 1.0;
 779                 var drawGapEdgePoints = self.data('dygraph-drawGapEdgePoints') || true;
 780                 var colors = self.data('dygraph-colors') || NETDATA.colors;
 781                 var pointSize = self.data('dygraph-pointSize') || 1;
 782                 var stepPlot = self.data('dygraph-stepPlot') || false;
 783                 var strokeBorderColor = self.data('dygraph-strokeBorderColor') || 'white';
 784                 var strokeBorderWidth = self.data('dygraph-strokeBorderWidth') || (chart.chart_type == 'stacked')?1.0:0.0;
 785                 var strokePattern = self.data('dygraph-strokePattern') || undefined;
 786                 var highlightCircleSize = self.data('dygraph-highlightCircleSize') || 3;
 787                 var highlightSeriesOpts = self.data('dygraph-highlightSeriesOpts') || { strokeWidth: 1.5 };
 788                 var highlightSeriesBackgroundAlpha = self.data('dygraph-highlightSeriesBackgroundAlpha') || (chart.chart_type == 'stacked')?0.7:0.5;
 789                 var pointClickCallback = self.data('dygraph-pointClickCallback') || undefined;
 790                 var showRangeSelector = self.data('dygraph-showRangeSelector') || false;
 791                 var showRoller = self.data('dygraph-showRoller') || false;
 792                 var valueFormatter = self.data('dygraph-valueFormatter') || undefined; //function(x){ return x.toFixed(2); };
 793                 var rightGap = self.data('dygraph-rightGap') || 5;
 794                 var drawGrid = self.data('dygraph-drawGrid') || true;
 795                 var drawXGrid = self.data('dygraph-drawXGrid') || undefined;
 796                 var drawYGrid = self.data('dygraph-drawYGrid') || undefined;
 797                 var gridLinePattern = self.data('dygraph-gridLinePattern') || null;
 798                 var gridLineWidth = self.data('dygraph-gridLineWidth') || 0.3;
 799
 800                 var options = {
 801                         title: title,
 802                         titleHeight: titleHeight,
 803                         ylabel: chart.units,
 804                         yLabelWidth: yLabelWidth,
 805                         connectSeparatedPoints: connectSeparatedPoints,
 806                         drawPoints: drawPoints,
 807                         fillGraph: fillGraph,
 808                         stackedGraph: stackedGraph,
 809                         stackedGraphNaNFill: stackedGraphNaNFill,
 810                         drawGrid: drawGrid,
 811                         drawXGrid: drawXGrid,
 812                         drawYGrid: drawYGrid,
 813                         gridLinePattern: gridLinePattern,
 814                         gridLineWidth: gridLineWidth,
 815                         gridLineColor: gridLineColor,
 816                         axisLineColor: axisLineColor,
 817                         axisLineWidth: axisLineWidth,
 818                         drawAxis: drawAxis,
 819                         hideOverlayOnMouseOut: hideOverlayOnMouseOut,
 820                         labelsDiv: labelsDiv,
 821                         labelsDivStyles: labelsDivStyles,
 822                         labelsDivWidth: labelsDivWidth,
 823                         labelsSeparateLines: labelsSeparateLines,
 824                         labelsShowZeroValues: labelsShowZeroValues,
 825                         labelsKMB: false,
 826                         labelsKMG2: false,
 827                         legend: legend,
 828                         showLabelsOnHighlight: showLabelsOnHighlight,
 829                         maxNumberWidth: maxNumberWidth,
 830                         sigFigs: sigFigs,
 831                         digitsAfterDecimal: digitsAfterDecimal,
 832                         axisLabelFontSize: axisLabelFontSize,
 833                         colors: colors,
 834                         strokeWidth: strokeWidth,
 835                         drawGapEdgePoints: drawGapEdgePoints,
 836                         pointSize: pointSize,
 837                         stepPlot: stepPlot,
 838                         strokeBorderColor: strokeBorderColor,
 839                         strokeBorderWidth: strokeBorderWidth,
 840                         strokePattern: strokePattern,
 841                         highlightCircleSize: highlightCircleSize,
 842                         highlightSeriesOpts: highlightSeriesOpts,
 843                         highlightSeriesBackgroundAlpha: highlightSeriesBackgroundAlpha,
 844                         pointClickCallback: pointClickCallback,
 845                         showRangeSelector: showRangeSelector,
 846                         showRoller: showRoller,
 847                         valueFormatter: valueFormatter,
 848                         rightGap: rightGap,
 849                         labels: data.labels,
 850                         axes: {
 851                                 x: {
 852                                         pixelsPerLabel: 50,
 853                                         ticker: Dygraph.dateTicker,
 854                                         axisLabelFormatter: function (d, gran) {
 855                                                 return Dygraph.zeropad(d.getHours()) + ":" + Dygraph.zeropad(d.getMinutes()) + ":" + Dygraph.zeropad(d.getSeconds());
 856                                         },
 857                                         valueFormatter :function (ms) {
 858                                                 var d = new Date(ms);
 859                                                 return Dygraph.zeropad(d.getHours()) + ":" + Dygraph.zeropad(d.getMinutes()) + ":" + Dygraph.zeropad(d.getSeconds());
 860                                         }
 861                                 },
 862                                 y: {
 863                                         pixelsPerLabel: 15
 864                                 }
 865                         }
 866                 };
 867
 868                 var uuid = NETDATA.guid();
 869                 self.html('<div id="' + uuid + '" style="width: 100%; height: 100%;"></div>');
 870
 871                 var dchart = new Dygraph(document.getElementById(uuid),
 872                         data.data, options);
 873
 874                 self.data('dygraph-instance', dchart)
 875                         .data('dygraph-options', options)
 876                         .data('uuid', uuid)
 877                         .data('created', true);
 878
 879                 //NETDATA.dygraphAllCharts.push(dchart);
 880                 //if(NETDATA.dygraphAllCharts.length > 1)
 881                 //      NETDATA.dygraphSyncAll();
 882         };
 883
 884         // ----------------------------------------------------------------------------------------------------------------
 885         // morris
 886
 887         NETDATA.morrisInitialize = function(callback) {
 888                 if(typeof netdataStopMorris == 'undefined') {
 889
 890                         // morris requires raphael
 891                         if(!NETDATA.chartLibraries.raphael.initialized) {
 892                                 if(NETDATA.chartLibraries.raphael.enabled) {
 893                                         NETDATA.raphaelInitialize(function() {
 894                                                 NETDATA.morrisInitialize(callback);
 895                                         });
 896                                 }
 897                                 else {
 898                                         NETDATA.chartLibraries.morris.enabled = false;
 899                                         if(typeof callback == "function")
 900                                                 callback();
 901                                 }
 902                         }
 903
 904                         var fileref = document.createElement("link");
 905                         fileref.setAttribute("rel", "stylesheet");
 906                         fileref.setAttribute("type", "text/css");
 907                         fileref.setAttribute("href", NETDATA.morris_css);
 908
 909                         if (typeof fileref != "undefined")
 910                                 document.getElementsByTagName("head")[0].appendChild(fileref);
 911
 912                         $.getScript(NETDATA.morris_js)
 913                                 .done(function() {
 914                                         NETDATA.registerChartLibrary('morris', NETDATA.morris_js);
 915                                 })
 916                                 .fail(function() {
 917                                         NETDATA.error(100, NETDATA.morris_js);
 918                                 })
 919                                 .always(function() {
 920                                         if(typeof callback == "function")
 921                                                 callback();
 922                                 })
 923                 }
 924                 else {
 925                         NETDATA.chartLibraries.morris.enabled = false;
 926                         if(typeof callback == "function")
 927                                 callback();
 928                 }
 929         };
 930
 931         NETDATA.morrisChartUpdate = function(element, data) {
 932                 var self = $(element);
 933                 var morris = self.data('morris-instance');
 934
 935                 if(typeof data.update_every != 'undefined')
 936                         self.data('update-every', data.update_every * 1000);
 937
 938                 if(morris != null) {
 939                         console.log('updating morris');
 940                         morris.setData(data.data);
 941                 }
 942                 else
 943                         console.log('not updating morris');
 944         };
 945
 946         NETDATA.morrisChartCreate = function(element, data) {
 947                 var self = $(element);
 948                 var chart = self.data('chart');
 949
 950                 var uuid = NETDATA.guid();
 951                 self.html('<div id="' + uuid + '" style="width: ' + self.data('calculated-width') + 'px; height: ' + self.data('calculated-height') + 'px;"></div>');
 952
 953                 // remove the 'time' element from the labels
 954                 data.labels.splice(0, 1);
 955
 956                 var options = {
 957                                 element: uuid,
 958                                 data: data.data,
 959                                 xkey: 'time',
 960                                 ykeys: data.labels,
 961                                 labels: data.labels,
 962                                 lineWidth: 2,
 963                                 pointSize: 2,
 964                                 smooth: true,
 965                                 hideHover: 'auto',
 966                                 parseTime: true,
 967                                 continuousLine: false,
 968                                 behaveLikeLine: false
 969                 };
 970
 971                 var morris;
 972                 if(chart.chart_type == 'line')
 973                         morris = new Morris.Line(options);
 974
 975                 else if(chart.chart_type == 'area') {
 976                         options.behaveLikeLine = true;
 977                         morris = new Morris.Area(options);
 978                 }
 979                 else // stacked
 980                         morris = new Morris.Area(options);
 981
 982                 self.data('morris-instance', morris)
 983                 .data('created', true);
 984         };
 985
 986         // ----------------------------------------------------------------------------------------------------------------
 987         // raphael
 988
 989         NETDATA.raphaelInitialize = function(callback) {
 990                 if(typeof netdataStopRaphael == 'undefined') {
 991                         $.getScript(NETDATA.raphael_js)
 992                                 .done(function() {
 993                                         NETDATA.registerChartLibrary('raphael', NETDATA.raphael_js);
 994                                 })
 995                                 .fail(function() {
 996                                         NETDATA.error(100, NETDATA.raphael_js);
 997                                 })
 998                                 .always(function() {
 999                                         if(typeof callback == "function")
1000                                                 callback();
1001                                 })
1002                 }
1003                 else {
1004                         NETDATA.chartLibraries.raphael.enabled = false;
1005                         if(typeof callback == "function")
1006                                 callback();
1007                 }
1008         };
1009
1010         NETDATA.raphaelChartUpdate = function(element, data) {
1011                 var self = $(element);
1012
1013                 self.raphael(data, {
1014                         width: self.data('calculated-width'),
1015                         height: self.data('calculated-height')
1016                 })
1017         };
1018
1019         NETDATA.raphaelChartCreate = function(element, data) {
1020                 var self = $(element);
1021
1022                 self.raphael(data, {
1023                         width: self.data('calculated-width'),
1024                         height: self.data('calculated-height')
1025                 })
1026                 .data('created', true);
1027         };
1028
1029         // ----------------------------------------------------------------------------------------------------------------
1030         // google charts
1031
1032         NETDATA.googleInitialize = function(callback) {
1033                 if(typeof netdataStopGoogleCharts == 'undefined') {
1034                         $.getScript(NETDATA.google_js)
1035                                 .done(function() {
1036                                         NETDATA.registerChartLibrary('google', NETDATA.google_js);
1037
1038                                         google.load('visualization', '1.1', {
1039                                                 'packages': ['corechart', 'controls'],
1040                                                 'callback': callback
1041                                         });
1042                                 })
1043                                 .fail(function() {
1044                                         NETDATA.error(100, NETDATA.google_js);
1045                                         if(typeof callback == "function")
1046                                                 callback();
1047                                 })
1048                 }
1049                 else {
1050                         NETDATA.chartLibraries.google.enabled = false;
1051                         if(typeof callback == "function")
1052                                 callback();
1053                 }
1054         };
1055
1056         NETDATA.googleChartUpdate = function(element, data) {
1057                 var self = $(element);
1058                 var gchart = self.data('google-instance');
1059                 var options = self.data('google-options');
1060
1061                 if(typeof data.update_every != 'undefined')
1062                         self.data('update-every', data.update_every * 1000);
1063
1064                 var datatable = new google.visualization.DataTable(data);
1065
1066                 gchart.draw(datatable, options);
1067         };
1068
1069         NETDATA.googleChartCreate = function(element, data) {
1070                 var self = $(element);
1071                 var chart = self.data('chart');
1072
1073                 var datatable = new google.visualization.DataTable(data);
1074                 var gchart;
1075
1076                 var options = {
1077                         // do not set width, height - the chart resizes itself
1078                         //width: self.data('calculated-width'),
1079                         //height: self.data('calculated-height'),
1080                         lineWidth: 1,
1081                         title: chart.title,
1082                         fontSize: 11,
1083                         hAxis: {
1084                         //      title: "Time of Day",
1085                         //      format:'HH:mm:ss',
1086                                 viewWindowMode: 'maximized',
1087                                 slantedText: false,
1088                                 format:'HH:mm:ss',
1089                                 textStyle: {
1090                                         fontSize: 9
1091                                 },
1092                                 gridlines: {
1093                                         color: '#EEE'
1094                                 }
1095                         },
1096                         vAxis: {
1097                                 title: chart.units,
1098                                 viewWindowMode: 'pretty',
1099                                 minValue: -0.1,
1100                                 maxValue: 0.1,
1101                                 direction: 1,
1102                                 textStyle: {
1103                                         fontSize: 9
1104                                 },
1105                                 gridlines: {
1106                                         color: '#EEE'
1107                                 }
1108                         },
1109                         chartArea: {
1110                                 width: '65%',
1111                                 height: '80%'
1112                         },
1113                         focusTarget: 'category',
1114                         annotation: {
1115                                 '1': {
1116                                         style: 'line'
1117                                 }
1118                         },
1119                         pointsVisible: 0,
1120                         titlePosition: 'out',
1121                         titleTextStyle: {
1122                                 fontSize: 11
1123                         },
1124                         tooltip: {
1125                                 isHtml: false,
1126                                 ignoreBounds: true,
1127                                 textStyle: {
1128                                         fontSize: 9
1129                                 }
1130                         },
1131                         curveType: 'function',
1132                         areaOpacity: 0.3,
1133                         isStacked: false
1134                 };
1135
1136                 var uuid = NETDATA.guid();
1137                 self.html('<div id="' + uuid + '" style="width: 100%; height: 100%;"></div>');
1138
1139                 switch(chart.chart_type) {
1140                         case "area":
1141                                 options.vAxis.viewWindowMode = 'maximized';
1142                                 gchart = new google.visualization.AreaChart(document.getElementById(uuid));
1143                                 break;
1144
1145                         case "stacked":
1146                                 options.isStacked = true;
1147                                 options.areaOpacity = 0.85;
1148                                 options.vAxis.viewWindowMode = 'maximized';
1149                                 options.vAxis.minValue = null;
1150                                 options.vAxis.maxValue = null;
1151                                 gchart = new google.visualization.AreaChart(document.getElementById(uuid));
1152                                 break;
1153
1154                         default:
1155                         case "line":
1156                                 options.lineWidth = 2;
1157                                 gchart = new google.visualization.LineChart(document.getElementById(uuid));
1158                                 break;
1159                 }
1160
1161                 gchart.draw(datatable, options);
1162
1163                 self.data('google-instance', gchart)
1164                         .data('google-options', options)
1165                         .data('uuid', uuid)
1166                         .data('created', true);
1167         };
1168
1169         // ----------------------------------------------------------------------------------------------------------------
1170         // Charts Libraries Registration
1171
1172         NETDATA.chartLibraries = {
1173                 "dygraph": {
1174                         initialize: NETDATA.dygraphInitialize,
1175                         create: NETDATA.dygraphChartCreate,
1176                         update: NETDATA.dygraphChartUpdate,
1177                         initialized: false,
1178                         enabled: true,
1179                         format: 'json',
1180                         options: 'ms|flip',
1181                         pixels_per_point: 2,
1182                         detects_dimensions_on_update: false
1183                 },
1184                 "sparkline": {
1185                         initialize: NETDATA.sparklineInitialize,
1186                         create: NETDATA.sparklineChartCreate,
1187                         update: NETDATA.sparklineChartUpdate,
1188                         initialized: false,
1189                         enabled: true,
1190                         format: 'array',
1191                         options: 'flip|min2max',
1192                         pixels_per_point: 2,
1193                         detects_dimensions_on_update: false
1194                 },
1195                 "peity": {
1196                         initialize: NETDATA.peityInitialize,
1197                         create: NETDATA.peityChartCreate,
1198                         update: NETDATA.peityChartUpdate,
1199                         initialized: false,
1200                         enabled: true,
1201                         format: 'ssvcomma',
1202                         options: 'null2zero|flip|min2max',
1203                         pixels_per_point: 2,
1204                         detects_dimensions_on_update: false
1205                 },
1206                 "morris": {
1207                         initialize: NETDATA.morrisInitialize,
1208                         create: NETDATA.morrisChartCreate,
1209                         update: NETDATA.morrisChartUpdate,
1210                         initialized: false,
1211                         enabled: true,
1212                         format: 'json',
1213                         options: 'objectrows|ms',
1214                         pixels_per_point: 10,
1215                         detects_dimensions_on_update: false
1216                 },
1217                 "google": {
1218                         initialize: NETDATA.googleInitialize,
1219                         create: NETDATA.googleChartCreate,
1220                         update: NETDATA.googleChartUpdate,
1221                         initialized: false,
1222                         enabled: true,
1223                         format: 'datatable',
1224                         options: '',
1225                         pixels_per_point: 2,
1226                         detects_dimensions_on_update: true
1227                 },
1228                 "raphael": {
1229                         initialize: NETDATA.raphaelInitialize,
1230                         create: NETDATA.raphaelChartCreate,
1231                         update: NETDATA.raphaelChartUpdate,
1232                         initialized: false,
1233                         enabled: true,
1234                         format: 'json',
1235                         options: '',
1236                         pixels_per_point: 1,
1237                         detects_dimensions_on_update: false
1238                 }
1239         };
1240
1241         NETDATA.registerChartLibrary = function(library, url) {
1242                 console.log("registering chart library: " + library);
1243
1244                 NETDATA.chartLibraries[library].url = url;
1245                 NETDATA.chartLibraries[library].initialized = true;
1246                 NETDATA.chartLibraries[library].enabled = true;
1247
1248                 console.log(NETDATA.chartLibraries);
1249         }
1250
1251         // ----------------------------------------------------------------------------------------------------------------
1252         // load all libraries and initialize
1253
1254         NETDATA.errorReset();
1255
1256         NETDATA._loadjQuery(function() {
1257                 $.getScript(NETDATA.serverDefault + 'lib/visible.js').then(function() {
1258                         NETDATA.init();
1259                 })
1260         });
1261
1262 })(window);