web/dashboard.js

   1 // You can set the following variables before loading this script:
   2 //
   3 // var netdataNoDygraphs = true;                // do not use dygraph
   4 // var netdataNoSparklines = true;              // do not use sparkline
   5 // var netdataNoPeitys = true;                  // do not use peity
   6 // var netdataNoGoogleCharts = true;    // do not use google
   7 // var netdataNoMorris = true;                  // do not use morris
   8 // var netdataNoEasyPieChart = true;    // do not use easy pie chart
   9 // var netdataNoGauge = true;                   // do not use gauge.js
  10 // var netdataNoD3 = true;                              // do not use D3
  11 // var netdataNoC3 = true;                              // do not use C3
  12 // var netdataNoBootstrap = true;               // do not load bootstrap
  13 // var netdataDontStart = true;                 // do not start the thread to process the charts
  14 // var netdataErrorCallback = null;             // Callback function that will be invoked upon error
  15 // var netdataNoRegistry = true;                // Don't update the registry for this access
  16 // var netdataRegistryCallback = null;  // Callback function that will be invoked with one param,
  17 //                                         the URLs from the registry
  18 // var netdataShowHelp = true;                  // enable/disable help
  19 //
  20 // You can also set the default netdata server, using the following.
  21 // When this variable is not set, we assume the page is hosted on your
  22 // netdata server already.
  23 // var netdataServer = "http://yourhost:19999"; // set your NetData server
  24
  25 //(function(window, document, undefined) {
  26
  27         // ------------------------------------------------------------------------
  28         // compatibility fixes
  29
  30         // fix IE issue with console
  31         if(!window.console) { window.console = { log: function(){} }; }
  32
  33         // if string.endsWith is not defined, define it
  34         if(typeof String.prototype.endsWith !== 'function') {
  35                 String.prototype.endsWith = function(s) {
  36                         if(s.length > this.length) return false;
  37                         return this.slice(-s.length) === s;
  38                 };
  39         }
  40
  41         // if string.startsWith is not defined, define it
  42         if(typeof String.prototype.startsWith !== 'function') {
  43                 String.prototype.startsWith = function(s) {
  44                         if(s.length > this.length) return false;
  45                         return this.slice(s.length) === s;
  46                 };
  47         }
  48
  49         // global namespace
  50         var NETDATA = window.NETDATA || {};
  51
  52         // ----------------------------------------------------------------------------------------------------------------
  53         // Detect the netdata server
  54
  55         // http://stackoverflow.com/questions/984510/what-is-my-script-src-url
  56         // http://stackoverflow.com/questions/6941533/get-protocol-domain-and-port-from-url
  57         NETDATA._scriptSource = function() {
  58                 var script = null;
  59
  60                 if(typeof document.currentScript !== 'undefined') {
  61                         script = document.currentScript;
  62                 }
  63                 else {
  64                         var all_scripts = document.getElementsByTagName('script');
  65                         script = all_scripts[all_scripts.length - 1];
  66                 }
  67
  68                 if (typeof script.getAttribute.length !== 'undefined')
  69                         script = script.src;
  70                 else
  71                         script = script.getAttribute('src', -1);
  72
  73                 return script;
  74         };
  75
  76         if(typeof netdataServer !== 'undefined')
  77                 NETDATA.serverDefault = netdataServer;
  78         else {
  79                 var s = NETDATA._scriptSource();
  80                 if(s) NETDATA.serverDefault = s.replace(/\/dashboard.js(\?.*)*$/g, "");
  81                 else {
  82                         console.log('WARNING: Cannot detect the URL of the netdata server.');
  83                         NETDATA.serverDefault = null;
  84                 }
  85         }
  86
  87         if(NETDATA.serverDefault === null)
  88                 NETDATA.serverDefault = '';
  89         else if(NETDATA.serverDefault.slice(-1) !== '/')
  90                 NETDATA.serverDefault += '/';
  91
  92         // default URLs for all the external files we need
  93         // make them RELATIVE so that the whole thing can also be
  94         // installed under a web server
  95         NETDATA.jQuery                  = NETDATA.serverDefault + 'lib/jquery-1.12.0.min.js';
  96         NETDATA.peity_js                = NETDATA.serverDefault + 'lib/jquery.peity.min.js';
  97         NETDATA.sparkline_js            = NETDATA.serverDefault + 'lib/jquery.sparkline.min.js';
  98         NETDATA.easypiechart_js         = NETDATA.serverDefault + 'lib/jquery.easypiechart.min.js';
  99         NETDATA.gauge_js                        = NETDATA.serverDefault + 'lib/gauge.min.js';
 100         NETDATA.dygraph_js              = NETDATA.serverDefault + 'lib/dygraph-combined.js';
 101         NETDATA.dygraph_smooth_js   = NETDATA.serverDefault + 'lib/dygraph-smooth-plotter.js';
 102         NETDATA.raphael_js              = NETDATA.serverDefault + 'lib/raphael-min.js';
 103         NETDATA.morris_js               = NETDATA.serverDefault + 'lib/morris.min.js';
 104         NETDATA.d3_js                           = NETDATA.serverDefault + 'lib/d3.min.js';
 105         NETDATA.c3_js                           = NETDATA.serverDefault + 'lib/c3.min.js';
 106         NETDATA.c3_css                          = NETDATA.serverDefault + 'css/c3.min.css';
 107         NETDATA.morris_css              = NETDATA.serverDefault + 'css/morris.css';
 108         NETDATA.google_js               = 'https://www.google.com/jsapi';
 109
 110         NETDATA.themes = {
 111                 white: {
 112                         bootstrap_css: NETDATA.serverDefault + 'css/bootstrap.min.css',
 113                         dashboard_css: NETDATA.serverDefault + 'dashboard.css',
 114                         background: '#FFFFFF',
 115                         foreground: '#000000',
 116                         grid: '#DDDDDD',
 117                         axis: '#CCCCCC',
 118                         colors: [       '#3366CC', '#DC3912',   '#109618', '#FF9900',   '#990099', '#DD4477',
 119                                                 '#3B3EAC', '#66AA00',   '#0099C6', '#B82E2E',   '#AAAA11', '#5574A6',
 120                                                 '#994499', '#22AA99',   '#6633CC', '#E67300',   '#316395', '#8B0707',
 121                                                 '#329262', '#3B3EAC' ],
 122                         easypiechart_track: '#f0f0f0',
 123                         easypiechart_scale: '#dfe0e0',
 124                         gauge_pointer: '#C0C0C0',
 125                         gauge_stroke: '#F0F0F0',
 126                         gauge_gradient: false
 127                 },
 128                 slate: {
 129                         bootstrap_css: NETDATA.serverDefault + 'css/bootstrap.slate.min.css',
 130                         dashboard_css: NETDATA.serverDefault + 'dashboard.slate.css',
 131                         background: '#272b30',
 132                         foreground: '#C8C8C8',
 133                         grid: '#373b40',
 134                         axis: '#373b40',
 135 /*                      colors: [       '#55bb33', '#ff2222',   '#0099C6', '#faa11b',   '#adbce0', '#DDDD00',
 136                                                 '#4178ba', '#f58122',   '#a5cc39', '#f58667',   '#f5ef89', '#cf93c0',
 137                                                 '#a5d18a', '#b8539d',   '#3954a3', '#c8a9cf',   '#c7de8a', '#fad20a',
 138                                                 '#a6a479', '#a66da8' ],
 139 */
 140                         colors: [       '#66AA00', '#FE3912',   '#3366CC', '#D66300',   '#0099C6', '#DDDD00',
 141                                                 '#5054e6', '#EE9911',   '#BB44CC', '#e45757',   '#ef0aef', '#CC7700',
 142                                                 '#22AA99', '#109618',   '#905bfd', '#f54882',   '#4381bf', '#ff3737',
 143                                                 '#329262', '#3B3EFF' ],
 144                         easypiechart_track: '#373b40',
 145                         easypiechart_scale: '#373b40',
 146                         gauge_pointer: '#474b50',
 147                         gauge_stroke: '#373b40',
 148                         gauge_gradient: false
 149                 }
 150         };
 151
 152         if(typeof netdataTheme !== 'undefined' && typeof NETDATA.themes[netdataTheme] !== 'undefined')
 153                 NETDATA.themes.current = NETDATA.themes[netdataTheme];
 154         else
 155                 NETDATA.themes.current = NETDATA.themes.white;
 156
 157         if(typeof netdataShowHelp === 'undefined')
 158                 netdataShowHelp = true;
 159
 160         NETDATA.colors = NETDATA.themes.current.colors;
 161
 162         // these are the colors Google Charts are using
 163         // we have them here to attempt emulate their look and feel on the other chart libraries
 164         // http://there4.io/2012/05/02/google-chart-color-list/
 165         //NETDATA.colors                = [ '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6',
 166         //                                              '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11',
 167         //                                              '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC' ];
 168
 169         // an alternative set
 170         // http://www.mulinblog.com/a-color-palette-optimized-for-data-visualization/
 171         //                         (blue)     (red)      (orange)   (green)    (pink)     (brown)    (purple)   (yellow)   (gray)
 172         //NETDATA.colors                = [ '#5DA5DA', '#F15854', '#FAA43A', '#60BD68', '#F17CB0', '#B2912F', '#B276B2', '#DECF3F', '#4D4D4D' ];
 173
 174         // ----------------------------------------------------------------------------------------------------------------
 175         // the defaults for all charts
 176
 177         // if the user does not specify any of these, the following will be used
 178
 179         NETDATA.chartDefaults = {
 180                 host: NETDATA.serverDefault,    // the server to get data from
 181                 width: '100%',                                  // the chart width - can be null
 182                 height: '100%',                                 // the chart height - can be null
 183                 min_width: null,                                // the chart minimum width - can be null
 184                 library: 'dygraph',                             // the graphing library to use
 185                 method: 'average',                              // the grouping method
 186                 before: 0,                                              // panning
 187                 after: -600,                                    // panning
 188                 pixels_per_point: 1,                    // the detail of the chart
 189                 fill_luminance: 0.8                             // luminance of colors in solit areas
 190         };
 191
 192         // ----------------------------------------------------------------------------------------------------------------
 193         // global options
 194
 195         NETDATA.options = {
 196                 pauseCallback: null,                    // a callback when we are really paused
 197
 198                 pause: false,                                   // when enabled we don't auto-refresh the charts
 199
 200                 targets: null,                                  // an array of all the state objects that are
 201                                                                                 // currently active (independently of their
 202                                                                                 // viewport visibility)
 203
 204                 updated_dom: true,                              // when true, the DOM has been updated with
 205                                                                                 // new elements we have to check.
 206
 207                 auto_refresher_fast_weight: 0,  // this is the current time in ms, spent
 208                                                                                 // rendering charts continiously.
 209                                                                                 // used with .current.fast_render_timeframe
 210
 211                 page_is_visible: true,                  // when true, this page is visible
 212
 213                 auto_refresher_stop_until: 0,   // timestamp in ms - used internaly, to stop the
 214                                                                                 // auto-refresher for some time (when a chart is
 215                                                                                 // performing pan or zoom, we need to stop refreshing
 216                                                                                 // all other charts, to have the maximum speed for
 217                                                                                 // rendering the chart that is panned or zoomed).
 218                                                                                 // Used with .current.global_pan_sync_time
 219
 220                 last_resized: new Date().getTime(), // the timestamp of the last resize request
 221
 222                 last_page_scroll: 0,                    // the timestamp the last time the page was scrolled
 223
 224                 // the current profile
 225                 // we may have many...
 226                 current: {
 227                         pixels_per_point: 1,            // the minimum pixels per point for all charts
 228                                                                                 // increase this to speed javascript up
 229                                                                                 // each chart library has its own limit too
 230                                                                                 // the max of this and the chart library is used
 231                                                                                 // the final is calculated every time, so a change
 232                                                                                 // here will have immediate effect on the next chart
 233                                                                                 // update
 234
 235                         idle_between_charts: 100,       // ms - how much time to wait between chart updates
 236
 237                         fast_render_timeframe: 200, // ms - render continously until this time of continious
 238                                                                                 // rendering has been reached
 239                                                                                 // this setting is used to make it render e.g. 10
 240                                                                                 // charts at once, sleep idle_between_charts time
 241                                                                                 // and continue for another 10 charts.
 242
 243                         idle_between_loops: 500,        // ms - if all charts have been updated, wait this
 244                                                                                 // time before starting again.
 245
 246                         idle_parallel_loops: 100,       // ms - the time between parallel refresher updates
 247
 248                         idle_lost_focus: 500,           // ms - when the window does not have focus, check
 249                                                                                 // if focus has been regained, every this time
 250
 251                         global_pan_sync_time: 1000,     // ms - when you pan or zoon a chart, the background
 252                                                                                 // autorefreshing of charts is paused for this amount
 253                                                                                 // of time
 254
 255                         sync_selection_delay: 1500,     // ms - when you pan or zoom a chart, wait this amount
 256                                                                                 // of time before setting up synchronized selections
 257                                                                                 // on hover.
 258
 259                         sync_selection: true,           // enable or disable selection sync
 260
 261                         pan_and_zoom_delay: 50,         // when panning or zooming, how ofter to update the chart
 262
 263                         sync_pan_and_zoom: true,        // enable or disable pan and zoom sync
 264
 265                         pan_and_zoom_data_padding: true, // fetch more data for the master chart when panning or zooming
 266
 267                         update_only_visible: true,      // enable or disable visibility management
 268
 269                         parallel_refresher: true,       // enable parallel refresh of charts
 270
 271                         concurrent_refreshes: true,     // when parallel_refresher is enabled, sync also the charts
 272
 273                         destroy_on_hide: false,         // destroy charts when they are not visible
 274
 275                         show_help: netdataShowHelp,     // when enabled the charts will show some help
 276                         show_help_delay_show_ms: 500,
 277                         show_help_delay_hide_ms: 0,
 278
 279                         eliminate_zero_dimensions: true, // do not show dimensions with just zeros
 280
 281                         stop_updates_when_focus_is_lost: true, // boolean - shall we stop auto-refreshes when document does not have user focus
 282                         stop_updates_while_resizing: 1000,      // ms - time to stop auto-refreshes while resizing the charts
 283
 284                         double_click_speed: 500,        // ms - time between clicks / taps to detect double click/tap
 285
 286                         smooth_plot: true,                      // enable smooth plot, where possible
 287
 288                         charts_selection_animation_delay: 50, // delay to animate charts when syncing selection
 289
 290                         color_fill_opacity_line: 1.0,
 291                         color_fill_opacity_area: 0.2,
 292                         color_fill_opacity_stacked: 0.8,
 293
 294                         pan_and_zoom_factor: 0.25,              // the increment when panning and zooming with the toolbox
 295                         pan_and_zoom_factor_multiplier_control: 2.0,
 296                         pan_and_zoom_factor_multiplier_shift: 3.0,
 297                         pan_and_zoom_factor_multiplier_alt: 4.0,
 298
 299                         setOptionCallback: function() { ; }
 300                 },
 301
 302                 debug: {
 303                         show_boxes:             false,
 304                         main_loop:                      false,
 305                         focus:                          false,
 306                         visibility:             false,
 307                         chart_data_url:         false,
 308                         chart_errors:           false, // FIXME
 309                         chart_timing:           false,
 310                         chart_calls:            false,
 311                         libraries:                      false,
 312                         dygraph:                        false
 313                 }
 314         };
 315
 316         NETDATA.statistics = {
 317                 refreshes_total: 0,
 318                 refreshes_active: 0,
 319                 refreshes_active_max: 0
 320         };
 321
 322
 323         // ----------------------------------------------------------------------------------------------------------------
 324         // local storage options
 325
 326         NETDATA.localStorage = {
 327                 default: {},
 328                 current: {},
 329                 callback: {} // only used for resetting back to defaults
 330         };
 331
 332         NETDATA.localStorageGet = function(key, def, callback) {
 333                 var ret = def;
 334
 335                 if(typeof NETDATA.localStorage.default[key.toString()] === 'undefined') {
 336                         NETDATA.localStorage.default[key.toString()] = def;
 337                         NETDATA.localStorage.callback[key.toString()] = callback;
 338                 }
 339
 340                 if(typeof Storage !== "undefined" && typeof localStorage === 'object') {
 341                         try {
 342                                 // console.log('localStorage: loading "' + key.toString() + '"');
 343                                 ret = localStorage.getItem(key.toString());
 344                                 // console.log('netdata loaded: ' + key.toString() + ' = ' + ret.toString());
 345                                 if(ret === null || ret === 'undefined') {
 346                                         // console.log('localStorage: cannot load it, saving "' + key.toString() + '" with value "' + JSON.stringify(def) + '"');
 347                                         localStorage.setItem(key.toString(), JSON.stringify(def));
 348                                         ret = def;
 349                                 }
 350                                 else {
 351                                         // console.log('localStorage: got "' + key.toString() + '" with value "' + ret + '"');
 352                                         ret = JSON.parse(ret);
 353                                         // console.log('localStorage: loaded "' + key.toString() + '" as value ' + ret + ' of type ' + typeof(ret));
 354                                 }
 355                         }
 356                         catch(error) {
 357                                 console.log('localStorage: failed to read "' + key.toString() + '", using default: "' + def.toString() + '"');
 358                                 ret = def;
 359                         }
 360                 }
 361
 362                 if(typeof ret === 'undefined' || ret === 'undefined') {
 363                         console.log('localStorage: LOADED UNDEFINED "' + key.toString() + '" as value ' + ret + ' of type ' + typeof(ret));
 364                         ret = def;
 365                 }
 366
 367                 NETDATA.localStorage.current[key.toString()] = ret;
 368                 return ret;
 369         };
 370
 371         NETDATA.localStorageSet = function(key, value, callback) {
 372                 if(typeof value === 'undefined' || value === 'undefined') {
 373                         console.log('localStorage: ATTEMPT TO SET UNDEFINED "' + key.toString() + '" as value ' + value + ' of type ' + typeof(value));
 374                 }
 375
 376                 if(typeof NETDATA.localStorage.default[key.toString()] === 'undefined') {
 377                         NETDATA.localStorage.default[key.toString()] = value;
 378                         NETDATA.localStorage.current[key.toString()] = value;
 379                         NETDATA.localStorage.callback[key.toString()] = callback;
 380                 }
 381
 382                 if(typeof Storage !== "undefined" && typeof localStorage === 'object') {
 383                         // console.log('localStorage: saving "' + key.toString() + '" with value "' + JSON.stringify(value) + '"');
 384                         try {
 385                                 localStorage.setItem(key.toString(), JSON.stringify(value));
 386                         }
 387                         catch(e) {
 388                                 console.log('localStorage: failed to save "' + key.toString() + '" with value: "' + value.toString() + '"');
 389                         }
 390                 }
 391
 392                 NETDATA.localStorage.current[key.toString()] = value;
 393                 return value;
 394         };
 395
 396         NETDATA.localStorageGetRecursive = function(obj, prefix, callback) {
 397                 for(var i in obj) {
 398                         if(typeof obj[i] === 'object') {
 399                                 //console.log('object ' + prefix + '.' + i.toString());
 400                                 NETDATA.localStorageGetRecursive(obj[i], prefix + '.' + i.toString(), callback);
 401                                 continue;
 402                         }
 403
 404                         obj[i] = NETDATA.localStorageGet(prefix + '.' + i.toString(), obj[i], callback);
 405                 }
 406         };
 407
 408         NETDATA.setOption = function(key, value) {
 409                 if(key.toString() === 'setOptionCallback') {
 410                         if(typeof NETDATA.options.current.setOptionCallback === 'function') {
 411                                 NETDATA.options.current[key.toString()] = value;
 412                                 NETDATA.options.current.setOptionCallback();
 413                         }
 414                 }
 415                 else if(NETDATA.options.current[key.toString()] !== value) {
 416                         var name = 'options.' + key.toString();
 417
 418                         if(typeof NETDATA.localStorage.default[name.toString()] === 'undefined')
 419                                 console.log('localStorage: setOption() on unsaved option: "' + name.toString() + '", value: ' + value);
 420
 421                         //console.log(NETDATA.localStorage);
 422                         //console.log('setOption: setting "' + key.toString() + '" to "' + value + '" of type ' + typeof(value) + ' original type ' + typeof(NETDATA.options.current[key.toString()]));
 423                         //console.log(NETDATA.options);
 424                         NETDATA.options.current[key.toString()] = NETDATA.localStorageSet(name.toString(), value, null);
 425
 426                         if(typeof NETDATA.options.current.setOptionCallback === 'function')
 427                                 NETDATA.options.current.setOptionCallback();
 428                 }
 429
 430                 return true;
 431         };
 432
 433         NETDATA.getOption = function(key) {
 434                 return NETDATA.options.current[key.toString()];
 435         };
 436
 437         // read settings from local storage
 438         NETDATA.localStorageGetRecursive(NETDATA.options.current, 'options', null);
 439
 440         // always start with this option enabled.
 441         NETDATA.setOption('stop_updates_when_focus_is_lost', true);
 442
 443         NETDATA.resetOptions = function() {
 444                 for(var i in NETDATA.localStorage.default) {
 445                         var a = i.split('.');
 446
 447                         if(a[0] === 'options') {
 448                                 if(a[1] === 'setOptionCallback') continue;
 449                                 if(typeof NETDATA.localStorage.default[i] === 'undefined') continue;
 450                                 if(NETDATA.options.current[i] === NETDATA.localStorage.default[i]) continue;
 451
 452                                 NETDATA.setOption(a[1], NETDATA.localStorage.default[i]);
 453                         }
 454                         else if(a[0] === 'chart_heights') {
 455                                 if(typeof NETDATA.localStorage.callback[i] === 'function' && typeof NETDATA.localStorage.default[i] !== 'undefined') {
 456                                         NETDATA.localStorage.callback[i](NETDATA.localStorage.default[i]);
 457                                 }
 458                         }
 459                 }
 460         }
 461
 462         // ----------------------------------------------------------------------------------------------------------------
 463
 464         if(NETDATA.options.debug.main_loop === true)
 465                 console.log('welcome to NETDATA');
 466
 467         NETDATA.onresize = function() {
 468                 NETDATA.options.last_resized = new Date().getTime();
 469                 NETDATA.onscroll();
 470         };
 471
 472         NETDATA.onscroll = function() {
 473                 // console.log('onscroll');
 474
 475                 NETDATA.options.last_page_scroll = new Date().getTime();
 476                 if(NETDATA.options.targets === null) return;
 477
 478                 // when the user scrolls he sees that we have
 479                 // hidden all the not-visible charts
 480                 // using this little function we try to switch
 481                 // the charts back to visible quickly
 482                 var targets = NETDATA.options.targets;
 483                 var len = targets.length;
 484                 while(len--) targets[len].isVisible();
 485         };
 486
 487         window.onresize = NETDATA.onresize;
 488         window.onscroll = NETDATA.onscroll;
 489
 490         // ----------------------------------------------------------------------------------------------------------------
 491         // Error Handling
 492
 493         NETDATA.errorCodes = {
 494                 100: { message: "Cannot load chart library", alert: true },
 495                 101: { message: "Cannot load jQuery", alert: true },
 496                 402: { message: "Chart library not found", alert: false },
 497                 403: { message: "Chart library not enabled/is failed", alert: false },
 498                 404: { message: "Chart not found", alert: false },
 499                 405: { message: "Cannot download charts index from server", alert: true },
 500                 406: { message: "Invalid charts index downloaded from server", alert: true },
 501                 407: { message: "Cannot HELLO netdata server", alert: false },
 502                 408: { message: "Netdata servers sent invalid response to HELLO", alert: false },
 503                 409: { message: "Cannot ACCESS netdata registry", alert: false },
 504                 410: { message: "Netdata registry ACCESS failed", alert: false },
 505                 411: { message: "Netdata registry server send invalid response to DELETE ", alert: false },
 506                 412: { message: "Netdata registry DELETE failed", alert: false },
 507                 413: { message: "Netdata registry server send invalid response to SWITCH ", alert: false },
 508                 414: { message: "Netdata registry SWITCH failed", alert: false }
 509         };
 510         NETDATA.errorLast = {
 511                 code: 0,
 512                 message: "",
 513                 datetime: 0
 514         };
 515
 516         NETDATA.error = function(code, msg) {
 517                 NETDATA.errorLast.code = code;
 518                 NETDATA.errorLast.message = msg;
 519                 NETDATA.errorLast.datetime = new Date().getTime();
 520
 521                 console.log("ERROR " + code + ": " + NETDATA.errorCodes[code].message + ": " + msg);
 522
 523                 var ret = true;
 524                 if(typeof netdataErrorCallback === 'function') {
 525                    ret = netdataErrorCallback('system', code, msg);
 526                 }
 527
 528                 if(ret && NETDATA.errorCodes[code].alert)
 529                         alert("ERROR " + code + ": " + NETDATA.errorCodes[code].message + ": " + msg);
 530         };
 531
 532         NETDATA.errorReset = function() {
 533                 NETDATA.errorLast.code = 0;
 534                 NETDATA.errorLast.message = "You are doing fine!";
 535                 NETDATA.errorLast.datetime = 0;
 536         };
 537
 538         // ----------------------------------------------------------------------------------------------------------------
 539         // Chart Registry
 540
 541         // When multiple charts need the same chart, we avoid downloading it
 542         // multiple times (and having it in browser memory multiple time)
 543         // by using this registry.
 544
 545         // Every time we download a chart definition, we save it here with .add()
 546         // Then we try to get it back with .get(). If that fails, we download it.
 547
 548         NETDATA.chartRegistry = {
 549                 charts: {},
 550
 551                 fixid: function(id) {
 552                         return id.replace(/:/g, "_").replace(/\//g, "_");
 553                 },
 554
 555                 add: function(host, id, data) {
 556                         host = this.fixid(host);
 557                         id   = this.fixid(id);
 558
 559                         if(typeof this.charts[host] === 'undefined')
 560                                 this.charts[host] = {};
 561
 562                         //console.log('added ' + host + '/' + id);
 563                         this.charts[host][id] = data;
 564                 },
 565
 566                 get: function(host, id) {
 567                         host = this.fixid(host);
 568                         id   = this.fixid(id);
 569
 570                         if(typeof this.charts[host] === 'undefined')
 571                                 return null;
 572
 573                         if(typeof this.charts[host][id] === 'undefined')
 574                                 return null;
 575
 576                         //console.log('cached ' + host + '/' + id);
 577                         return this.charts[host][id];
 578                 },
 579
 580                 downloadAll: function(host, callback) {
 581                         while(host.slice(-1) === '/')
 582                                 host = host.substring(0, host.length - 1);
 583
 584                         var self = this;
 585
 586                         $.ajax({
 587                                 url: host + '/api/v1/charts',
 588                                 async: true,
 589                                 cache: false,
 590                                 xhrFields: { withCredentials: true } // required for the cookie
 591                         })
 592                         .done(function(data) {
 593                                 if(data !== null) {
 594                                         var h = NETDATA.chartRegistry.fixid(host);
 595                                         self.charts[h] = data.charts;
 596                                 }
 597                                 else NETDATA.error(406, host + '/api/v1/charts');
 598
 599                                 if(typeof callback === 'function')
 600                                         callback(data);
 601                         })
 602                         .fail(function() {
 603                                 NETDATA.error(405, host + '/api/v1/charts');
 604
 605                                 if(typeof callback === 'function')
 606                                         callback(null);
 607                         });
 608                 }
 609         };
 610
 611         // ----------------------------------------------------------------------------------------------------------------
 612         // Global Pan and Zoom on charts
 613
 614         // Using this structure are synchronize all the charts, so that
 615         // when you pan or zoom one, all others are automatically refreshed
 616         // to the same timespan.
 617
 618         NETDATA.globalPanAndZoom = {
 619                 seq: 0,                                 // timestamp ms
 620                                                                 // every time a chart is panned or zoomed
 621                                                                 // we set the timestamp here
 622                                                                 // then we use it as a sequence number
 623                                                                 // to find if other charts are syncronized
 624                                                                 // to this timerange
 625
 626                 master: null,                   // the master chart (state), to which all others
 627                                                                 // are synchronized
 628
 629                 force_before_ms: null,  // the timespan to sync all other charts
 630                 force_after_ms: null,
 631
 632                 callback: null,
 633
 634                 // set a new master
 635                 setMaster: function(state, after, before) {
 636                         if(NETDATA.options.current.sync_pan_and_zoom === false)
 637                                 return;
 638
 639                         if(this.master !== null && this.master !== state)
 640                                 this.master.resetChart(true, true);
 641
 642                         var now = new Date().getTime();
 643                         this.master = state;
 644                         this.seq = now;
 645                         this.force_after_ms = after;
 646                         this.force_before_ms = before;
 647                         NETDATA.options.auto_refresher_stop_until = now + NETDATA.options.current.global_pan_sync_time;
 648
 649                         if(typeof this.callback === 'function')
 650                                 this.callback(true, after, before);
 651                 },
 652
 653                 // clear the master
 654                 clearMaster: function() {
 655                         if(this.master !== null) {
 656                                 var st = this.master;
 657                                 this.master = null;
 658                                 st.resetChart();
 659                         }
 660
 661                         this.master = null;
 662                         this.seq = 0;
 663                         this.force_after_ms = null;
 664                         this.force_before_ms = null;
 665                         NETDATA.options.auto_refresher_stop_until = 0;
 666
 667                         if(typeof this.callback === 'function')
 668                                 this.callback(false, 0, 0);
 669                 },
 670
 671                 // is the given state the master of the global
 672                 // pan and zoom sync?
 673                 isMaster: function(state) {
 674                         if(this.master === state) return true;
 675                         return false;
 676                 },
 677
 678                 // are we currently have a global pan and zoom sync?
 679                 isActive: function() {
 680                         if(this.master !== null && this.force_before_ms !== null && this.force_after_ms !== null && this.seq !== 0) return true;
 681                         return false;
 682                 },
 683
 684                 // check if a chart, other than the master
 685                 // needs to be refreshed, due to the global pan and zoom
 686                 shouldBeAutoRefreshed: function(state) {
 687                         if(this.master === null || this.seq === 0)
 688                                 return false;
 689
 690                         //if(state.needsRecreation())
 691                         //      return true;
 692
 693                         if(state.tm.pan_and_zoom_seq === this.seq)
 694                                 return false;
 695
 696                         return true;
 697                 }
 698         };
 699
 700         // ----------------------------------------------------------------------------------------------------------------
 701         // dimensions selection
 702
 703         // FIXME
 704         // move color assignment to dimensions, here
 705
 706         dimensionStatus = function(parent, label, name_div, value_div, color) {
 707                 this.enabled = false;
 708                 this.parent = parent;
 709                 this.label = label;
 710                 this.name_div = null;
 711                 this.value_div = null;
 712                 this.color = NETDATA.themes.current.foreground;
 713
 714                 if(parent.selected_count > parent.unselected_count)
 715                         this.selected = true;
 716                 else
 717                         this.selected = false;
 718
 719                 this.setOptions(name_div, value_div, color);
 720         };
 721
 722         dimensionStatus.prototype.invalidate = function() {
 723                 this.name_div = null;
 724                 this.value_div = null;
 725                 this.enabled = false;
 726         };
 727
 728         dimensionStatus.prototype.setOptions = function(name_div, value_div, color) {
 729                 this.color = color;
 730
 731                 if(this.name_div != name_div) {
 732                         this.name_div = name_div;
 733                         this.name_div.title = this.label;
 734                         this.name_div.style.color = this.color;
 735                         if(this.selected === false)
 736                                 this.name_div.className = 'netdata-legend-name not-selected';
 737                         else
 738                                 this.name_div.className = 'netdata-legend-name selected';
 739                 }
 740
 741                 if(this.value_div != value_div) {
 742                         this.value_div = value_div;
 743                         this.value_div.title = this.label;
 744                         this.value_div.style.color = this.color;
 745                         if(this.selected === false)
 746                                 this.value_div.className = 'netdata-legend-value not-selected';
 747                         else
 748                                 this.value_div.className = 'netdata-legend-value selected';
 749                 }
 750
 751                 this.enabled = true;
 752                 this.setHandler();
 753         };
 754
 755         dimensionStatus.prototype.setHandler = function() {
 756                 if(this.enabled === false) return;
 757
 758                 var ds = this;
 759
 760                 // this.name_div.onmousedown = this.value_div.onmousedown = function(e) {
 761                 this.name_div.onclick = this.value_div.onclick = function(e) {
 762                         e.preventDefault();
 763                         if(ds.isSelected()) {
 764                                 // this is selected
 765                                 if(e.shiftKey === true || e.ctrlKey === true) {
 766                                         // control or shift key is pressed -> unselect this (except is none will remain selected, in which case select all)
 767                                         ds.unselect();
 768
 769                                         if(ds.parent.countSelected() === 0)
 770                                                 ds.parent.selectAll();
 771                                 }
 772                                 else {
 773                                         // no key is pressed -> select only this (except if it is the only selected already, in which case select all)
 774                                         if(ds.parent.countSelected() === 1) {
 775                                                 ds.parent.selectAll();
 776                                         }
 777                                         else {
 778                                                 ds.parent.selectNone();
 779                                                 ds.select();
 780                                         }
 781                                 }
 782                         }
 783                         else {
 784                                 // this is not selected
 785                                 if(e.shiftKey === true || e.ctrlKey === true) {
 786                                         // control or shift key is pressed -> select this too
 787                                         ds.select();
 788                                 }
 789                                 else {
 790                                         // no key is pressed -> select only this
 791                                         ds.parent.selectNone();
 792                                         ds.select();
 793                                 }
 794                         }
 795
 796                         ds.parent.state.redrawChart();
 797                 }
 798         };
 799
 800         dimensionStatus.prototype.select = function() {
 801                 if(this.enabled === false) return;
 802
 803                 this.name_div.className = 'netdata-legend-name selected';
 804                 this.value_div.className = 'netdata-legend-value selected';
 805                 this.selected = true;
 806         };
 807
 808         dimensionStatus.prototype.unselect = function() {
 809                 if(this.enabled === false) return;
 810
 811                 this.name_div.className = 'netdata-legend-name not-selected';
 812                 this.value_div.className = 'netdata-legend-value hidden';
 813                 this.selected = false;
 814         };
 815
 816         dimensionStatus.prototype.isSelected = function() {
 817                 return(this.enabled === true && this.selected === true);
 818         };
 819
 820         // ----------------------------------------------------------------------------------------------------------------
 821
 822         dimensionsVisibility = function(state) {
 823                 this.state = state;
 824                 this.len = 0;
 825                 this.dimensions = {};
 826                 this.selected_count = 0;
 827                 this.unselected_count = 0;
 828         };
 829
 830         dimensionsVisibility.prototype.dimensionAdd = function(label, name_div, value_div, color) {
 831                 if(typeof this.dimensions[label] === 'undefined') {
 832                         this.len++;
 833                         this.dimensions[label] = new dimensionStatus(this, label, name_div, value_div, color);
 834                 }
 835                 else
 836                         this.dimensions[label].setOptions(name_div, value_div, color);
 837
 838                 return this.dimensions[label];
 839         };
 840
 841         dimensionsVisibility.prototype.dimensionGet = function(label) {
 842                 return this.dimensions[label];
 843         };
 844
 845         dimensionsVisibility.prototype.invalidateAll = function() {
 846                 for(var d in this.dimensions)
 847                         this.dimensions[d].invalidate();
 848         };
 849
 850         dimensionsVisibility.prototype.selectAll = function() {
 851                 for(var d in this.dimensions)
 852                         this.dimensions[d].select();
 853         };
 854
 855         dimensionsVisibility.prototype.countSelected = function() {
 856                 var i = 0;
 857                 for(var d in this.dimensions)
 858                         if(this.dimensions[d].isSelected()) i++;
 859
 860                 return i;
 861         };
 862
 863         dimensionsVisibility.prototype.selectNone = function() {
 864                 for(var d in this.dimensions)
 865                         this.dimensions[d].unselect();
 866         };
 867
 868         dimensionsVisibility.prototype.selected2BooleanArray = function(array) {
 869                 var ret = new Array();
 870                 this.selected_count = 0;
 871                 this.unselected_count = 0;
 872
 873                 for(var i = 0, len = array.length; i < len ; i++) {
 874                         var ds = this.dimensions[array[i]];
 875                         if(typeof ds === 'undefined') {
 876                                 // console.log(array[i] + ' is not found');
 877                                 ret.push(false);
 878                                 continue;
 879                         }
 880
 881                         if(ds.isSelected()) {
 882                                 ret.push(true);
 883                                 this.selected_count++;
 884                         }
 885                         else {
 886                                 ret.push(false);
 887                                 this.unselected_count++;
 888                         }
 889                 }
 890
 891                 if(this.selected_count === 0 && this.unselected_count !== 0) {
 892                         this.selectAll();
 893                         return this.selected2BooleanArray(array);
 894                 }
 895
 896                 return ret;
 897         };
 898
 899
 900         // ----------------------------------------------------------------------------------------------------------------
 901         // global selection sync
 902
 903         NETDATA.globalSelectionSync = {
 904                 state: null,
 905                 dont_sync_before: 0,
 906                 last_t: 0,
 907                 slaves: [],
 908
 909                 stop: function() {
 910                         if(this.state !== null)
 911                                 this.state.globalSelectionSyncStop();
 912                 },
 913
 914                 delay: function() {
 915                         if(this.state !== null) {
 916                                 this.state.globalSelectionSyncDelay();
 917                         }
 918                 }
 919         };
 920
 921         // ----------------------------------------------------------------------------------------------------------------
 922         // Our state object, where all per-chart values are stored
 923
 924         chartState = function(element) {
 925                 var self = $(element);
 926                 this.element = element;
 927
 928                 // IMPORTANT:
 929                 // all private functions should use 'that', instead of 'this'
 930                 var that = this;
 931
 932                 /* error() - private
 933                  * show an error instead of the chart
 934                  */
 935                 var error = function(msg) {
 936                         var ret = true;
 937
 938                         if(typeof netdataErrorCallback === 'function') {
 939                                 ret = netdataErrorCallback('chart', that.id, msg);
 940                         }
 941
 942                         if(ret) {
 943                                 that.element.innerHTML = that.id + ': ' + msg;
 944                                 that.enabled = false;
 945                                 that.current = that.pan;
 946                         }
 947                 };
 948
 949                 // GUID - a unique identifier for the chart
 950                 this.uuid = NETDATA.guid();
 951
 952                 // string - the name of chart
 953                 this.id = self.data('netdata');
 954
 955                 // string - the key for localStorage settings
 956                 this.settings_id = self.data('id') || null;
 957
 958                 // the user given dimensions of the element
 959                 this.width = self.data('width') || NETDATA.chartDefaults.width;
 960                 this.height = self.data('height') || NETDATA.chartDefaults.height;
 961
 962                 if(this.settings_id !== null) {
 963                         this.height = NETDATA.localStorageGet('chart_heights.' + this.settings_id, this.height, function(height) {
 964                                 // this is the callback that will be called
 965                                 // if and when the user resets all localStorage variables
 966                                 // to their defaults
 967
 968                                 resizeChartToHeight(height);
 969                         });
 970                 }
 971
 972                 // string - the netdata server URL, without any path
 973                 this.host = self.data('host') || NETDATA.chartDefaults.host;
 974
 975                 // make sure the host does not end with /
 976                 // all netdata API requests use absolute paths
 977                 while(this.host.slice(-1) === '/')
 978                         this.host = this.host.substring(0, this.host.length - 1);
 979
 980                 // string - the grouping method requested by the user
 981                 this.method = self.data('method') || NETDATA.chartDefaults.method;
 982
 983                 // the time-range requested by the user
 984                 this.after = self.data('after') || NETDATA.chartDefaults.after;
 985                 this.before = self.data('before') || NETDATA.chartDefaults.before;
 986
 987                 // the pixels per point requested by the user
 988                 this.pixels_per_point = self.data('pixels-per-point') || 1;
 989                 this.points = self.data('points') || null;
 990
 991                 // the dimensions requested by the user
 992                 this.dimensions = self.data('dimensions') || null;
 993
 994                 // the chart library requested by the user
 995                 this.library_name = self.data('chart-library') || NETDATA.chartDefaults.library;
 996
 997                 // object - the chart library used
 998                 this.library = null;
 999
1000                 // color management
1001                 this.colors = null;
1002                 this.colors_assigned = {};
1003                 this.colors_available = null;
1004
1005                 // the element already created by the user
1006                 this.element_message = null;
1007
1008                 // the element with the chart
1009                 this.element_chart = null;
1010
1011                 // the element with the legend of the chart (if created by us)
1012                 this.element_legend = null;
1013                 this.element_legend_childs = {
1014                         hidden: null,
1015                         title_date: null,
1016                         title_time: null,
1017                         title_units: null,
1018                         nano: null,
1019                         nano_options: null,
1020                         series: null
1021                 };
1022
1023                 this.chart_url = null;                                          // string - the url to download chart info
1024                 this.chart = null;                                                      // object - the chart as downloaded from the server
1025
1026                 this.title = self.data('title') || null;        // the title of the chart
1027                 this.units = self.data('units') || null;        // the units of the chart dimensions
1028                 this.append_options = self.data('append-options') || null;      // the units of the chart dimensions
1029
1030                 this.running = false;                                           // boolean - true when the chart is being refreshed now
1031                 this.validated = false;                                         // boolean - has the chart been validated?
1032                 this.enabled = true;                                            // boolean - is the chart enabled for refresh?
1033                 this.paused = false;                                            // boolean - is the chart paused for any reason?
1034                 this.selected = false;                                          // boolean - is the chart shown a selection?
1035                 this.debug = false;                                                     // boolean - console.log() debug info about this chart
1036
1037                 this.netdata_first = 0;                                         // milliseconds - the first timestamp in netdata
1038                 this.netdata_last = 0;                                          // milliseconds - the last timestamp in netdata
1039                 this.requested_after = null;                            // milliseconds - the timestamp of the request after param
1040                 this.requested_before = null;                           // milliseconds - the timestamp of the request before param
1041                 this.requested_padding = null;
1042                 this.view_after = 0;
1043                 this.view_before = 0;
1044
1045                 this.auto = {
1046                         name: 'auto',
1047                         autorefresh: true,
1048                         force_update_at: 0, // the timestamp to force the update at
1049                         force_before_ms: null,
1050                         force_after_ms: null
1051                 };
1052                 this.pan = {
1053                         name: 'pan',
1054                         autorefresh: false,
1055                         force_update_at: 0, // the timestamp to force the update at
1056                         force_before_ms: null,
1057                         force_after_ms: null
1058                 };
1059                 this.zoom = {
1060                         name: 'zoom',
1061                         autorefresh: false,
1062                         force_update_at: 0, // the timestamp to force the update at
1063                         force_before_ms: null,
1064                         force_after_ms: null
1065                 };
1066
1067                 // this is a pointer to one of the sub-classes below
1068                 // auto, pan, zoom
1069                 this.current = this.auto;
1070
1071                 // check the requested library is available
1072                 // we don't initialize it here - it will be initialized when
1073                 // this chart will be first used
1074                 if(typeof NETDATA.chartLibraries[that.library_name] === 'undefined') {
1075                         NETDATA.error(402, that.library_name);
1076                         error('chart library "' + that.library_name + '" is not found');
1077                         return;
1078                 }
1079                 else if(NETDATA.chartLibraries[that.library_name].enabled === false) {
1080                         NETDATA.error(403, that.library_name);
1081                         error('chart library "' + that.library_name + '" is not enabled');
1082                         return;
1083                 }
1084                 else
1085                         that.library = NETDATA.chartLibraries[that.library_name];
1086
1087                 // milliseconds - the time the last refresh took
1088                 this.refresh_dt_ms = 0;
1089
1090                 // if we need to report the rendering speed
1091                 // find the element that needs to be updated
1092                 var refresh_dt_element_name = self.data('dt-element-name') || null;     // string - the element to print refresh_dt_ms
1093
1094                 if(refresh_dt_element_name !== null)
1095                         this.refresh_dt_element = document.getElementById(refresh_dt_element_name) || null;
1096                 else
1097                         this.refresh_dt_element = null;
1098
1099                 this.dimensions_visibility = new dimensionsVisibility(this);
1100
1101                 this._updating = false;
1102
1103                 // ============================================================================================================
1104                 // PRIVATE FUNCTIONS
1105
1106                 var createDOM = function() {
1107                         if(that.enabled === false) return;
1108
1109                         if(that.element_message !== null) that.element_message.innerHTML = '';
1110                         if(that.element_legend !== null) that.element_legend.innerHTML = '';
1111                         if(that.element_chart !== null) that.element_chart.innerHTML = '';
1112
1113                         that.element.innerHTML = '';
1114
1115                         that.element_message = document.createElement('div');
1116                         that.element_message.className = ' netdata-message hidden';
1117                         that.element.appendChild(that.element_message);
1118
1119                         that.element_chart = document.createElement('div');
1120                         that.element_chart.id = that.library_name + '-' + that.uuid + '-chart';
1121                         that.element.appendChild(that.element_chart);
1122
1123                         if(that.hasLegend() === true) {
1124                                 that.element.className = "netdata-container-with-legend";
1125                                 that.element_chart.className = 'netdata-chart-with-legend-right netdata-' + that.library_name + '-chart-with-legend-right';
1126
1127                                 that.element_legend = document.createElement('div');
1128                                 that.element_legend.className = 'netdata-chart-legend netdata-' + that.library_name + '-legend';
1129                                 that.element.appendChild(that.element_legend);
1130                         }
1131                         else {
1132                                 that.element.className = "netdata-container";
1133                                 that.element_chart.className = ' netdata-chart netdata-' + that.library_name + '-chart';
1134
1135                                 that.element_legend = null;
1136                         }
1137                         that.element_legend_childs.series = null;
1138
1139                         if(typeof(that.width) === 'string')
1140                                 $(that.element).css('width', that.width);
1141                         else if(typeof(that.width) === 'number')
1142                                 $(that.element).css('width', that.width + 'px');
1143
1144                         if(typeof(that.library.aspect_ratio) === 'undefined') {
1145                                 if(typeof(that.height) === 'string')
1146                                         $(that.element).css('height', that.height);
1147                                 else if(typeof(that.height) === 'number')
1148                                         $(that.element).css('height', that.height + 'px');
1149                         }
1150                         else {
1151                                 var w = that.element.offsetWidth;
1152                                 if(w === null || w === 0) {
1153                                         // the div is hidden
1154                                         // this will resize the chart when next viewed
1155                                         that.tm.last_resized = 0;
1156                                 }
1157                                 else
1158                                         $(that.element).css('height', (that.element.offsetWidth * that.library.aspect_ratio / 100).toString() + 'px');
1159                         }
1160
1161                         if(NETDATA.chartDefaults.min_width !== null)
1162                                 $(that.element).css('min-width', NETDATA.chartDefaults.min_width);
1163
1164                         that.tm.last_dom_created = new Date().getTime();
1165
1166                         showLoading();
1167                 };
1168
1169                 /* init() private
1170                  * initialize state variables
1171                  * destroy all (possibly) created state elements
1172                  * create the basic DOM for a chart
1173                  */
1174                 var init = function() {
1175                         if(that.enabled === false) return;
1176
1177                         that.paused = false;
1178                         that.selected = false;
1179
1180                         that.chart_created = false;                     // boolean - is the library.create() been called?
1181                         that.updates_counter = 0;                       // numeric - the number of refreshes made so far
1182                         that.updates_since_last_unhide = 0;     // numeric - the number of refreshes made since the last time the chart was unhidden
1183                         that.updates_since_last_creation = 0; // numeric - the number of refreshes made since the last time the chart was created
1184
1185                         that.tm = {
1186                                 last_initialized: 0,            // milliseconds - the timestamp it was last initialized
1187                                 last_dom_created: 0,            // milliseconds - the timestamp its DOM was last created
1188                                 last_mode_switch: 0,            // milliseconds - the timestamp it switched modes
1189
1190                                 last_info_downloaded: 0,        // milliseconds - the timestamp we downloaded the chart
1191                                 last_updated: 0,                        // the timestamp the chart last updated with data
1192                                 pan_and_zoom_seq: 0,            // the sequence number of the global synchronization
1193                                                                                         // between chart.
1194                                                                                         // Used with NETDATA.globalPanAndZoom.seq
1195                                 last_visible_check: 0,          // the time we last checked if it is visible
1196                                 last_resized: 0,                        // the time the chart was resized
1197                                 last_hidden: 0,                         // the time the chart was hidden
1198                                 last_unhidden: 0,                       // the time the chart was unhidden
1199                                 last_autorefreshed: 0           // the time the chart was last refreshed
1200                         };
1201
1202                         that.data = null;                               // the last data as downloaded from the netdata server
1203                         that.data_url = 'invalid://';   // string - the last url used to update the chart
1204                         that.data_points = 0;                   // number - the number of points returned from netdata
1205                         that.data_after = 0;                    // milliseconds - the first timestamp of the data
1206                         that.data_before = 0;                   // milliseconds - the last timestamp of the data
1207                         that.data_update_every = 0;             // milliseconds - the frequency to update the data
1208
1209                         that.tm.last_initialized = new Date().getTime();
1210                         createDOM();
1211
1212                         that.setMode('auto');
1213                 };
1214
1215                 var maxMessageFontSize = function() {
1216                         // normally we want a font size, as tall as the element
1217                         var h = that.element_message.clientHeight;
1218
1219                         // but give it some air, 20% let's say, or 5 pixels min
1220                         var lost = Math.max(h * 0.2, 5);
1221                         h -= lost;
1222
1223                         // center the text, vertically
1224                         var paddingTop = (lost - 5) / 2;
1225
1226                         // but check the width too
1227                         // it should fit 10 characters in it
1228                         var w = that.element_message.clientWidth / 10;
1229                         if(h > w) {
1230                                 paddingTop += (h - w) / 2;
1231                                 h = w;
1232                         }
1233
1234                         // and don't make it too huge
1235                         // 5% of the screen size is good
1236                         if(h > screen.height / 20) {
1237                                 paddingTop += (h - (screen.height / 20)) / 2;
1238                                 h = screen.height / 20;
1239                         }
1240
1241                         // set it
1242                         that.element_message.style.fontSize = h.toString() + 'px';
1243                         that.element_message.style.paddingTop = paddingTop.toString() + 'px';
1244                 };
1245
1246                 var showMessage = function(msg) {
1247                         that.element_message.className = 'netdata-message';
1248                         that.element_message.innerHTML = msg;
1249                         that.element_message.style.fontSize = 'x-small';
1250                         that.element_message.style.paddingTop = '0px';
1251                         that.___messageHidden___ = undefined;
1252                 };
1253
1254                 var showMessageIcon = function(icon) {
1255                         that.element_message.innerHTML = icon;
1256                         that.element_message.className = 'netdata-message icon';
1257                         maxMessageFontSize();
1258                         that.___messageHidden___ = undefined;
1259                 };
1260
1261                 var hideMessage = function() {
1262                         if(typeof that.___messageHidden___ === 'undefined') {
1263                                 that.___messageHidden___ = true;
1264                                 that.element_message.className = 'netdata-message hidden';
1265                         }
1266                 };
1267
1268                 var showRendering = function() {
1269                         var icon;
1270                         if(that.chart !== null) {
1271                                 if(that.chart.chart_type === 'line')
1272                                         icon = '<i class="fa fa-line-chart"></i>';
1273                                 else
1274                                         icon = '<i class="fa fa-area-chart"></i>';
1275                         }
1276                         else
1277                                 icon = '<i class="fa fa-area-chart"></i>';
1278
1279                         showMessageIcon(icon + ' netdata');
1280                 };
1281
1282                 var showLoading = function() {
1283                         if(that.chart_created === false) {
1284                                 showMessageIcon('<i class="fa fa-refresh"></i> netdata');
1285                                 return true;
1286                         }
1287                         return false;
1288                 };
1289
1290                 var isHidden = function() {
1291                         if(typeof that.___chartIsHidden___ !== 'undefined')
1292                                 return true;
1293
1294                         return false;
1295                 };
1296
1297                 // hide the chart, when it is not visible - called from isVisible()
1298                 var hideChart = function() {
1299                         // hide it, if it is not already hidden
1300                         if(isHidden() === true) return;
1301
1302                         if(that.chart_created === true) {
1303                                 if(NETDATA.options.current.destroy_on_hide === true) {
1304                                         // we should destroy it
1305                                         init();
1306                                 }
1307                                 else {
1308                                         showRendering();
1309                                         that.element_chart.style.display = 'none';
1310                                         if(that.element_legend !== null) that.element_legend.style.display = 'none';
1311                                         that.tm.last_hidden = new Date().getTime();
1312
1313                                         // de-allocate data
1314                                         // This works, but I not sure there are no corner cases somewhere
1315                                         // so it is commented - if the user has memory issues he can
1316                                         // set Destroy on Hide for all charts
1317                                         // that.data = null;
1318                                 }
1319                         }
1320
1321                         that.___chartIsHidden___ = true;
1322                 };
1323
1324                 // unhide the chart, when it is visible - called from isVisible()
1325                 var unhideChart = function() {
1326                         if(isHidden() === false) return;
1327
1328                         that.___chartIsHidden___ = undefined;
1329                         that.updates_since_last_unhide = 0;
1330
1331                         if(that.chart_created === false) {
1332                                 // we need to re-initialize it, to show our background
1333                                 // logo in bootstrap tabs, until the chart loads
1334                                 init();
1335                         }
1336                         else {
1337                                 that.tm.last_unhidden = new Date().getTime();
1338                                 that.element_chart.style.display = '';
1339                                 if(that.element_legend !== null) that.element_legend.style.display = '';
1340                                 resizeChart();
1341                                 hideMessage();
1342                         }
1343                 };
1344
1345                 var canBeRendered = function() {
1346                         if(isHidden() === true || that.isVisible(true) === false)
1347                                 return false;
1348
1349                         return true;
1350                 };
1351
1352                 // https://github.com/petkaantonov/bluebird/wiki/Optimization-killers
1353                 var callChartLibraryUpdateSafely = function(data) {
1354                         var status;
1355
1356                         if(canBeRendered() === false)
1357                                 return false;
1358
1359                         if(NETDATA.options.debug.chart_errors === true)
1360                                 status = that.library.update(that, data);
1361                         else {
1362                                 try {
1363                                         status = that.library.update(that, data);
1364                                 }
1365                                 catch(err) {
1366                                         status = false;
1367                                 }
1368                         }
1369
1370                         if(status === false) {
1371                                 error('chart failed to be updated as ' + that.library_name);
1372                                 return false;
1373                         }
1374
1375                         return true;
1376                 };
1377
1378                 // https://github.com/petkaantonov/bluebird/wiki/Optimization-killers
1379                 var callChartLibraryCreateSafely = function(data) {
1380                         var status;
1381
1382                         if(canBeRendered() === false)
1383                                 return false;
1384
1385                         if(NETDATA.options.debug.chart_errors === true)
1386                                 status = that.library.create(that, data);
1387                         else {
1388                                 try {
1389                                         status = that.library.create(that, data);
1390                                 }
1391                                 catch(err) {
1392                                         status = false;
1393                                 }
1394                         }
1395
1396                         if(status === false) {
1397                                 error('chart failed to be created as ' + that.library_name);
1398                                 return false;
1399                         }
1400
1401                         that.chart_created = true;
1402                         that.updates_since_last_creation = 0;
1403                         return true;
1404                 };
1405
1406                 // ----------------------------------------------------------------------------------------------------------------
1407                 // Chart Resize
1408
1409                 // resizeChart() - private
1410                 // to be called just before the chart library to make sure that
1411                 // a properly sized dom is available
1412                 var resizeChart = function() {
1413                         if(that.isVisible() === true && that.tm.last_resized < NETDATA.options.last_resized) {
1414                                 if(that.chart_created === false) return;
1415
1416                                 if(that.needsRecreation()) {
1417                                         init();
1418                                 }
1419                                 else if(typeof that.library.resize === 'function') {
1420                                         that.library.resize(that);
1421
1422                                         if(that.element_legend_childs.nano !== null && that.element_legend_childs.nano_options !== null)
1423                                                 $(that.element_legend_childs.nano).nanoScroller();
1424
1425                                         maxMessageFontSize();
1426                                 }
1427
1428                                 that.tm.last_resized = new Date().getTime();
1429                         }
1430                 };
1431
1432                 // this is the actual chart resize algorithm
1433                 // it will:
1434                 // - resize the entire container
1435                 // - update the internal states
1436                 // - resize the chart as the div changes height
1437                 // - update the scrollbar of the legend
1438                 var resizeChartToHeight = function(h) {
1439                         // console.log(h);
1440                         that.element.style.height = h;
1441
1442                         if(that.settings_id !== null)
1443                                 NETDATA.localStorageSet('chart_heights.' + that.settings_id, h);
1444
1445                         var now = new Date().getTime();
1446                         NETDATA.options.last_page_scroll = now;
1447                         NETDATA.options.auto_refresher_stop_until = now + NETDATA.options.current.stop_updates_while_resizing;
1448
1449                         // force a resize
1450                         that.tm.last_resized = 0;
1451                         resizeChart();
1452                 };
1453
1454                 this.resizeHandler = function(e) {
1455                         e.preventDefault();
1456
1457                         if(typeof this.event_resize === 'undefined'
1458                                 || this.event_resize.chart_original_w === 'undefined'
1459                                 || this.event_resize.chart_original_h === 'undefined')
1460                                 this.event_resize = {
1461                                         chart_original_w: this.element.clientWidth,
1462                                         chart_original_h: this.element.clientHeight,
1463                                         last: 0
1464                                 };
1465
1466                         if(e.type === 'touchstart') {
1467                                 this.event_resize.mouse_start_x = e.touches.item(0).pageX;
1468                                 this.event_resize.mouse_start_y = e.touches.item(0).pageY;
1469                         }
1470                         else {
1471                                 this.event_resize.mouse_start_x = e.clientX;
1472                                 this.event_resize.mouse_start_y = e.clientY;
1473                         }
1474
1475                         this.event_resize.chart_start_w = this.element.clientWidth;
1476                         this.event_resize.chart_start_h = this.element.clientHeight;
1477                         this.event_resize.chart_last_w = this.element.clientWidth;
1478                         this.event_resize.chart_last_h = this.element.clientHeight;
1479
1480                         var now = new Date().getTime();
1481                         if(now - this.event_resize.last <= NETDATA.options.current.double_click_speed) {
1482                                 // double click / double tap event
1483
1484                                 // the optimal height of the chart
1485                                 // showing the entire legend
1486                                 var optimal = this.event_resize.chart_last_h
1487                                                 + this.element_legend_childs.content.scrollHeight
1488                                                 - this.element_legend_childs.content.clientHeight;
1489
1490                                 // if we are not optimal, be optimal
1491                                 if(this.event_resize.chart_last_h != optimal)
1492                                         resizeChartToHeight(optimal.toString() + 'px');
1493
1494                                 // else if we do not have the original height
1495                                 // reset to the original height
1496                                 else if(this.event_resize.chart_last_h != this.event_resize.chart_original_h)
1497                                         resizeChartToHeight(this.event_resize.chart_original_h.toString() + 'px');
1498                         }
1499                         else {
1500                                 this.event_resize.last = now;
1501
1502                                 // process movement event
1503                                 document.onmousemove =
1504                                 document.ontouchmove =
1505                                 this.element_legend_childs.resize_handler.onmousemove =
1506                                 this.element_legend_childs.resize_handler.ontouchmove =
1507                                         function(e) {
1508                                                 var y = null;
1509
1510                                                 switch(e.type) {
1511                                                         case 'mousemove': y = e.clientY; break;
1512                                                         case 'touchmove': y = e.touches.item(e.touches - 1).pageY; break;
1513                                                 }
1514
1515                                                 if(y !== null) {
1516                                                         var     newH = that.event_resize.chart_start_h + y - that.event_resize.mouse_start_y;
1517
1518                                                         if(newH >= 70 && newH !== that.event_resize.chart_last_h) {
1519                                                                 resizeChartToHeight(newH.toString() + 'px');
1520                                                                 that.event_resize.chart_last_h = newH;
1521                                                         }
1522                                                 }
1523                                         };
1524
1525                                 // process end event
1526                                 document.onmouseup =
1527                                 document.ontouchend =
1528                                 this.element_legend_childs.resize_handler.onmouseup =
1529                                 this.element_legend_childs.resize_handler.ontouchend =
1530                                         function(e) {
1531                                                 // remove all the hooks
1532                                                 document.onmouseup =
1533                                                 document.onmousemove =
1534                                                 document.ontouchmove =
1535                                                 document.ontouchend =
1536                                                 that.element_legend_childs.resize_handler.onmousemove =
1537                                                 that.element_legend_childs.resize_handler.ontouchmove =
1538                                                 that.element_legend_childs.resize_handler.onmouseout =
1539                                                 that.element_legend_childs.resize_handler.onmouseup =
1540                                                 that.element_legend_childs.resize_handler.ontouchend =
1541                                                         null;
1542
1543                                                 // allow auto-refreshes
1544                                                 NETDATA.options.auto_refresher_stop_until = 0;
1545                                         };
1546                         }
1547                 };
1548
1549
1550                 var noDataToShow = function() {
1551                         showMessageIcon('<i class="fa fa-warning"></i> empty');
1552                         that.legendUpdateDOM();
1553                         that.tm.last_autorefreshed = new Date().getTime();
1554                         // that.data_update_every = 30 * 1000;
1555                         //that.element_chart.style.display = 'none';
1556                         //if(that.element_legend !== null) that.element_legend.style.display = 'none';
1557                         //that.___chartIsHidden___ = true;
1558                 };
1559
1560                 // ============================================================================================================
1561                 // PUBLIC FUNCTIONS
1562
1563                 this.error = function(msg) {
1564                         error(msg);
1565                 };
1566
1567                 this.setMode = function(m) {
1568                         if(this.current !== null && this.current.name === m) return;
1569
1570                         if(m === 'auto')
1571                                 this.current = this.auto;
1572                         else if(m === 'pan')
1573                                 this.current = this.pan;
1574                         else if(m === 'zoom')
1575                                 this.current = this.zoom;
1576                         else
1577                                 this.current = this.auto;
1578
1579                         this.current.force_update_at = 0;
1580                         this.current.force_before_ms = null;
1581                         this.current.force_after_ms = null;
1582
1583                         this.tm.last_mode_switch = new Date().getTime();
1584                 };
1585
1586                 // ----------------------------------------------------------------------------------------------------------------
1587                 // global selection sync
1588
1589                 // prevent to global selection sync for some time
1590                 this.globalSelectionSyncDelay = function(ms) {
1591                         if(NETDATA.options.current.sync_selection === false)
1592                                 return;
1593
1594                         if(typeof ms === 'number')
1595                                 NETDATA.globalSelectionSync.dont_sync_before = new Date().getTime() + ms;
1596                         else
1597                                 NETDATA.globalSelectionSync.dont_sync_before = new Date().getTime() + NETDATA.options.current.sync_selection_delay;
1598                 };
1599
1600                 // can we globally apply selection sync?
1601                 this.globalSelectionSyncAbility = function() {
1602                         if(NETDATA.options.current.sync_selection === false)
1603                                 return false;
1604
1605                         if(NETDATA.globalSelectionSync.dont_sync_before > new Date().getTime())
1606                                 return false;
1607
1608                         return true;
1609                 };
1610
1611                 this.globalSelectionSyncIsMaster = function() {
1612                         if(NETDATA.globalSelectionSync.state === this)
1613                                 return true;
1614                         else
1615                                 return false;
1616                 };
1617
1618                 // this chart is the master of the global selection sync
1619                 this.globalSelectionSyncBeMaster = function() {
1620                         // am I the master?
1621                         if(this.globalSelectionSyncIsMaster()) {
1622                                 if(this.debug === true)
1623                                         this.log('sync: I am the master already.');
1624
1625                                 return;
1626                         }
1627
1628                         if(NETDATA.globalSelectionSync.state) {
1629                                 if(this.debug === true)
1630                                         this.log('sync: I am not the sync master. Resetting global sync.');
1631
1632                                 this.globalSelectionSyncStop();
1633                         }
1634
1635                         // become the master
1636                         if(this.debug === true)
1637                                 this.log('sync: becoming sync master.');
1638
1639                         this.selected = true;
1640                         NETDATA.globalSelectionSync.state = this;
1641
1642                         // find the all slaves
1643                         var targets = NETDATA.options.targets;
1644                         var len = targets.length;
1645                         while(len--) {
1646                                 st = targets[len];
1647
1648                                 if(st === this) {
1649                                         if(this.debug === true)
1650                                                 st.log('sync: not adding me to sync');
1651                                 }
1652                                 else if(st.globalSelectionSyncIsEligible()) {
1653                                         if(this.debug === true)
1654                                                 st.log('sync: adding to sync as slave');
1655
1656                                         st.globalSelectionSyncBeSlave();
1657                                 }
1658                         }
1659
1660                         // this.globalSelectionSyncDelay(100);
1661                 };
1662
1663                 // can the chart participate to the global selection sync as a slave?
1664                 this.globalSelectionSyncIsEligible = function() {
1665                         if(this.enabled === true
1666                                 && this.library !== null
1667                                 && typeof this.library.setSelection === 'function'
1668                                 && this.isVisible() === true
1669                                 && this.chart_created === true)
1670                                 return true;
1671
1672                         return false;
1673                 };
1674
1675                 // this chart becomes a slave of the global selection sync
1676                 this.globalSelectionSyncBeSlave = function() {
1677                         if(NETDATA.globalSelectionSync.state !== this)
1678                                 NETDATA.globalSelectionSync.slaves.push(this);
1679                 };
1680
1681                 // sync all the visible charts to the given time
1682                 // this is to be called from the chart libraries
1683                 this.globalSelectionSync = function(t) {
1684                         if(this.globalSelectionSyncAbility() === false) {
1685                                 if(this.debug === true)
1686                                         this.log('sync: cannot sync (yet?).');
1687
1688                                 return;
1689                         }
1690
1691                         if(this.globalSelectionSyncIsMaster() === false) {
1692                                 if(this.debug === true)
1693                                         this.log('sync: trying to be sync master.');
1694
1695                                 this.globalSelectionSyncBeMaster();
1696
1697                                 if(this.globalSelectionSyncAbility() === false) {
1698                                         if(this.debug === true)
1699                                                 this.log('sync: cannot sync (yet?).');
1700
1701                                         return;
1702                                 }
1703                         }
1704
1705                         NETDATA.globalSelectionSync.last_t = t;
1706                         $.each(NETDATA.globalSelectionSync.slaves, function(i, st) {
1707                                 st.setSelection(t);
1708                         });
1709                 };
1710
1711                 // stop syncing all charts to the given time
1712                 this.globalSelectionSyncStop = function() {
1713                         if(NETDATA.globalSelectionSync.slaves.length) {
1714                                 if(this.debug === true)
1715                                         this.log('sync: cleaning up...');
1716
1717                                 $.each(NETDATA.globalSelectionSync.slaves, function(i, st) {
1718                                         if(st === that) {
1719                                                 if(that.debug === true)
1720                                                         st.log('sync: not adding me to sync stop');
1721                                         }
1722                                         else {
1723                                                 if(that.debug === true)
1724                                                         st.log('sync: removed slave from sync');
1725
1726                                                 st.clearSelection();
1727                                         }
1728                                 });
1729
1730                                 NETDATA.globalSelectionSync.last_t = 0;
1731                                 NETDATA.globalSelectionSync.slaves = [];
1732                                 NETDATA.globalSelectionSync.state = null;
1733                         }
1734
1735                         this.clearSelection();
1736                 };
1737
1738                 this.setSelection = function(t) {
1739                         if(typeof this.library.setSelection === 'function') {
1740                                 if(this.library.setSelection(this, t) === true)
1741                                         this.selected = true;
1742                                 else
1743                                         this.selected = false;
1744                         }
1745                         else this.selected = true;
1746
1747                         if(this.selected === true && this.debug === true)
1748                                 this.log('selection set to ' + t.toString());
1749
1750                         return this.selected;
1751                 };
1752
1753                 this.clearSelection = function() {
1754                         if(this.selected === true) {
1755                                 if(typeof this.library.clearSelection === 'function') {
1756                                         if(this.library.clearSelection(this) === true)
1757                                                 this.selected = false;
1758                                         else
1759                                                 this.selected = true;
1760                                 }
1761                                 else this.selected = false;
1762
1763                                 if(this.selected === false && this.debug === true)
1764                                         this.log('selection cleared');
1765
1766                                 this.legendReset();
1767                         }
1768
1769                         return this.selected;
1770                 };
1771
1772                 // find if a timestamp (ms) is shown in the current chart
1773                 this.timeIsVisible = function(t) {
1774                         if(t >= this.data_after && t <= this.data_before)
1775                                 return true;
1776                         return false;
1777                 };
1778
1779                 this.calculateRowForTime = function(t) {
1780                         if(this.timeIsVisible(t) === false) return -1;
1781                         return Math.floor((t - this.data_after) / this.data_update_every);
1782                 };
1783
1784                 // ----------------------------------------------------------------------------------------------------------------
1785
1786                 // console logging
1787                 this.log = function(msg) {
1788                         console.log(this.id + ' (' + this.library_name + ' ' + this.uuid + '): ' + msg);
1789                 };
1790
1791                 this.pauseChart = function() {
1792                         if(this.paused === false) {
1793                                 if(this.debug === true)
1794                                         this.log('pauseChart()');
1795
1796                                 this.paused = true;
1797                         }
1798                 };
1799
1800                 this.unpauseChart = function() {
1801                         if(this.paused === true) {
1802                                 if(this.debug === true)
1803                                         this.log('unpauseChart()');
1804
1805                                 this.paused = false;
1806                         }
1807                 };
1808
1809                 this.resetChart = function(dont_clear_master, dont_update) {
1810                         if(this.debug === true)
1811                                 this.log('resetChart(' + dont_clear_master + ', ' + dont_update + ') called');
1812
1813                         if(typeof dont_clear_master === 'undefined')
1814                                 dont_clear_master = false;
1815
1816                         if(typeof dont_update === 'undefined')
1817                                 dont_update = false;
1818
1819                         if(dont_clear_master !== true && NETDATA.globalPanAndZoom.isMaster(this) === true) {
1820                                 if(this.debug === true)
1821                                         this.log('resetChart() diverting to clearMaster().');
1822                                 // this will call us back with master === true
1823                                 NETDATA.globalPanAndZoom.clearMaster();
1824                                 return;
1825                         }
1826
1827                         this.clearSelection();
1828
1829                         this.tm.pan_and_zoom_seq = 0;
1830
1831                         this.setMode('auto');
1832                         this.current.force_update_at = 0;
1833                         this.current.force_before_ms = null;
1834                         this.current.force_after_ms = null;
1835                         this.tm.last_autorefreshed = 0;
1836                         this.paused = false;
1837                         this.selected = false;
1838                         this.enabled = true;
1839                         // this.debug = false;
1840
1841                         // do not update the chart here
1842                         // or the chart will flip-flop when it is the master
1843                         // of a selection sync and another chart becomes
1844                         // the new master
1845
1846                         if(dont_update !== true && this.isVisible() === true) {
1847                                 this.updateChart();
1848                         }
1849                 };
1850
1851                 this.updateChartPanOrZoom = function(after, before) {
1852                         var logme = 'updateChartPanOrZoom(' + after + ', ' + before + '): ';
1853                         var ret = true;
1854
1855                         if(this.debug === true)
1856                                 this.log(logme);
1857
1858                         if(before < after) {
1859                                 if(this.debug === true)
1860                                         this.log(logme + 'flipped parameters, rejecting it.');
1861
1862                                 return false;
1863                         }
1864
1865                         if(typeof this.fixed_min_duration === 'undefined')
1866                                 this.fixed_min_duration = Math.round((this.chartWidth() / 30) * this.chart.update_every * 1000);
1867
1868                         var min_duration = this.fixed_min_duration;
1869                         var current_duration = Math.round(this.view_before - this.view_after);
1870
1871                         // round the numbers
1872                         after = Math.round(after);
1873                         before = Math.round(before);
1874
1875                         // align them to update_every
1876                         // stretching them further away
1877                         after -= after % this.data_update_every;
1878                         before += this.data_update_every - (before % this.data_update_every);
1879
1880                         // the final wanted duration
1881                         var wanted_duration = before - after;
1882
1883                         // to allow panning, accept just a point below our minimum
1884                         if((current_duration - this.data_update_every) < min_duration)
1885                                 min_duration = current_duration - this.data_update_every;
1886
1887                         // we do it, but we adjust to minimum size and return false
1888                         // when the wanted size is below the current and the minimum
1889                         // and we zoom
1890                         if(wanted_duration < current_duration && wanted_duration < min_duration) {
1891                                 if(this.debug === true)
1892                                         this.log(logme + 'too small: min_duration: ' + (min_duration / 1000).toString() + ', wanted: ' + (wanted_duration / 1000).toString());
1893
1894                                 min_duration = this.fixed_min_duration;
1895
1896                                 var dt = (min_duration - wanted_duration) / 2;
1897                                 before += dt;
1898                                 after -= dt;
1899                                 wanted_duration = before - after;
1900                                 ret = false;
1901                         }
1902
1903                         var tolerance = this.data_update_every * 2;
1904                         var movement = Math.abs(before - this.view_before);
1905
1906                         if(Math.abs(current_duration - wanted_duration) <= tolerance && movement <= tolerance && ret === true) {
1907                                 if(this.debug === true)
1908                                         this.log(logme + 'REJECTING UPDATE: current/min duration: ' + (current_duration / 1000).toString() + '/' + (this.fixed_min_duration / 1000).toString() + ', wanted duration: ' + (wanted_duration / 1000).toString() + ', duration diff: ' + (Math.round(Math.abs(current_duration - wanted_duration) / 1000)).toString() + ', movement: ' + (movement / 1000).toString() + ', tolerance: ' + (tolerance / 1000).toString() + ', returning: ' + false);
1909                                 return false;
1910                         }
1911
1912                         if(this.current.name === 'auto') {
1913                                 this.log(logme + 'caller called me with mode: ' + this.current.name);
1914                                 this.setMode('pan');
1915                         }
1916
1917                         if(this.debug === true)
1918                                 this.log(logme + 'ACCEPTING UPDATE: current/min duration: ' + (current_duration / 1000).toString() + '/' + (this.fixed_min_duration / 1000).toString() + ', wanted duration: ' + (wanted_duration / 1000).toString() + ', duration diff: ' + (Math.round(Math.abs(current_duration - wanted_duration) / 1000)).toString() + ', movement: ' + (movement / 1000).toString() + ', tolerance: ' + (tolerance / 1000).toString() + ', returning: ' + ret);
1919
1920                         this.current.force_update_at = new Date().getTime() + NETDATA.options.current.pan_and_zoom_delay;
1921                         this.current.force_after_ms = after;
1922                         this.current.force_before_ms = before;
1923                         NETDATA.globalPanAndZoom.setMaster(this, after, before);
1924                         return ret;
1925                 };
1926
1927                 this.legendFormatValue = function(value) {
1928                         if(value === null || value === 'undefined') return '-';
1929                         if(typeof value !== 'number') return value;
1930
1931                         var abs = Math.abs(value);
1932                         if(abs >= 1000) return (Math.round(value)).toLocaleString();
1933                         if(abs >= 100 ) return (Math.round(value * 10) / 10).toLocaleString();
1934                         if(abs >= 1   ) return (Math.round(value * 100) / 100).toLocaleString();
1935                         if(abs >= 0.1 ) return (Math.round(value * 1000) / 1000).toLocaleString();
1936                         return (Math.round(value * 10000) / 10000).toLocaleString();
1937                 };
1938
1939                 this.legendSetLabelValue = function(label, value) {
1940                         var series = this.element_legend_childs.series[label];
1941                         if(typeof series === 'undefined') return;
1942                         if(series.value === null && series.user === null) return;
1943
1944                         // if the value has not changed, skip DOM update
1945                         //if(series.last === value) return;
1946
1947                         var s, r;
1948                         if(typeof value === 'number') {
1949                                 var v = Math.abs(value);
1950                                 s = r = this.legendFormatValue(value);
1951
1952                                 if(typeof series.last === 'number') {
1953                                         if(v > series.last) s += '<i class="fa fa-angle-up" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
1954                                         else if(v < series.last) s += '<i class="fa fa-angle-down" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
1955                                         else s += '<i class="fa fa-angle-left" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
1956                                 }
1957                                 else s += '<i class="fa fa-angle-right" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
1958                                 series.last = v;
1959                         }
1960                         else {
1961                                 s = r = value;
1962                                 series.last = value;
1963                         }
1964
1965                         if(series.value !== null) series.value.innerHTML = s;
1966                         if(series.user !== null) series.user.innerHTML = r;
1967                 };
1968
1969                 this.legendSetDate = function(ms) {
1970                         if(typeof ms !== 'number') {
1971                                 this.legendShowUndefined();
1972                                 return;
1973                         }
1974
1975                         var d = new Date(ms);
1976
1977                         if(this.element_legend_childs.title_date)
1978                                 this.element_legend_childs.title_date.innerHTML = d.toLocaleDateString();
1979
1980                         if(this.element_legend_childs.title_time)
1981                                 this.element_legend_childs.title_time.innerHTML = d.toLocaleTimeString();
1982
1983                         if(this.element_legend_childs.title_units)
1984                                 this.element_legend_childs.title_units.innerHTML = this.units;
1985                 };
1986
1987                 this.legendShowUndefined = function() {
1988                         if(this.element_legend_childs.title_date)
1989                                 this.element_legend_childs.title_date.innerHTML = '&nbsp;';
1990
1991                         if(this.element_legend_childs.title_time)
1992                                 this.element_legend_childs.title_time.innerHTML = this.chart.name;
1993
1994                         if(this.element_legend_childs.title_units)
1995                                 this.element_legend_childs.title_units.innerHTML = '&nbsp;';
1996
1997                         if(this.data && this.element_legend_childs.series !== null) {
1998                                 var labels = this.data.dimension_names;
1999                                 var i = labels.length;
2000                                 while(i--) {
2001                                         var label = labels[i];
2002
2003                                         if(typeof label === 'undefined') continue;
2004                                         if(typeof this.element_legend_childs.series[label] === 'undefined') continue;
2005                                         this.legendSetLabelValue(label, null);
2006                                 }
2007                         }
2008                 };
2009
2010                 this.legendShowLatestValues = function() {
2011                         if(this.chart === null) return;
2012                         if(this.selected) return;
2013
2014                         if(this.data === null || this.element_legend_childs.series === null) {
2015                                 this.legendShowUndefined();
2016                                 return;
2017                         }
2018
2019                         var show_undefined = true;
2020                         if(Math.abs(this.netdata_last - this.view_before) <= this.data_update_every)
2021                                 show_undefined = false;
2022
2023                         if(show_undefined) {
2024                                 this.legendShowUndefined();
2025                                 return;
2026                         }
2027
2028                         this.legendSetDate(this.view_before);
2029
2030                         var labels = this.data.dimension_names;
2031                         var i = labels.length;
2032                         while(i--) {
2033                                 var label = labels[i];
2034
2035                                 if(typeof label === 'undefined') continue;
2036                                 if(typeof this.element_legend_childs.series[label] === 'undefined') continue;
2037
2038                                 if(show_undefined)
2039                                         this.legendSetLabelValue(label, null);
2040                                 else
2041                                         this.legendSetLabelValue(label, this.data.view_latest_values[i]);
2042                         }
2043                 };
2044
2045                 this.legendReset = function() {
2046                         this.legendShowLatestValues();
2047                 };
2048
2049                 // this should be called just ONCE per dimension per chart
2050                 this._chartDimensionColor = function(label) {
2051                         if(this.colors === null) this.chartColors();
2052
2053                         if(typeof this.colors_assigned[label] === 'undefined') {
2054                                 if(this.colors_available.length === 0) {
2055                                         for(var i = 0, len = NETDATA.themes.current.colors.length; i < len ; i++)
2056                                                 this.colors_available.push(NETDATA.themes.current.colors[i]);
2057                                 }
2058
2059                                 this.colors_assigned[label] = this.colors_available.shift();
2060
2061                                 if(this.debug === true)
2062                                         this.log('label "' + label + '" got color "' + this.colors_assigned[label]);
2063                         }
2064                         else {
2065                                 if(this.debug === true)
2066                                         this.log('label "' + label + '" already has color "' + this.colors_assigned[label] + '"');
2067                         }
2068
2069                         this.colors.push(this.colors_assigned[label]);
2070                         return this.colors_assigned[label];
2071                 };
2072
2073                 this.chartColors = function() {
2074                         if(this.colors !== null) return this.colors;
2075
2076                         this.colors = new Array();
2077                         this.colors_available = new Array();
2078                         var i, len;
2079
2080                         var c = $(this.element).data('colors');
2081                         // this.log('read colors: ' + c);
2082                         if(typeof c !== 'undefined' && c !== null && c.length > 0) {
2083                                 if(typeof c !== 'string') {
2084                                         this.log('invalid color given: ' + c + ' (give a space separated list of colors)');
2085                                 }
2086                                 else {
2087                                         c = c.split(' ');
2088                                         var added = 0;
2089
2090                                         while(added < 20) {
2091                                                 for(i = 0, len = c.length; i < len ; i++) {
2092                                                         added++;
2093                                                         this.colors_available.push(c[i]);
2094                                                         // this.log('adding color: ' + c[i]);
2095                                                 }
2096                                         }
2097                                 }
2098                         }
2099
2100                         // push all the standard colors too
2101                         for(i = 0, len = NETDATA.themes.current.colors.length; i < len ; i++)
2102                                 this.colors_available.push(NETDATA.themes.current.colors[i]);
2103
2104                         return this.colors;
2105                 };
2106
2107                 this.legendUpdateDOM = function() {
2108                         var needed = false;
2109
2110                         // check that the legend DOM is up to date for the downloaded dimensions
2111                         if(typeof this.element_legend_childs.series !== 'object' || this.element_legend_childs.series === null) {
2112                                 // this.log('the legend does not have any series - requesting legend update');
2113                                 needed = true;
2114                         }
2115                         else if(this.data === null) {
2116                                 // this.log('the chart does not have any data - requesting legend update');
2117                                 needed = true;
2118                         }
2119                         else if(typeof this.element_legend_childs.series.labels_key === 'undefined') {
2120                                 needed = true;
2121                         }
2122                         else {
2123                                 var labels = this.data.dimension_names.toString();
2124                                 if(labels !== this.element_legend_childs.series.labels_key) {
2125                                         needed = true;
2126
2127                                         if(this.debug === true)
2128                                                 this.log('NEW LABELS: "' + labels + '" NOT EQUAL OLD LABELS: "' + this.element_legend_childs.series.labels_key + '"');
2129                                 }
2130                         }
2131
2132                         if(needed === false) {
2133                                 // make sure colors available
2134                                 this.chartColors();
2135
2136                                 // do we have to update the current values?
2137                                 // we do this, only when the visible chart is current
2138                                 if(Math.abs(this.netdata_last - this.view_before) <= this.data_update_every) {
2139                                         if(this.debug === true)
2140                                                 this.log('chart is in latest position... updating values on legend...');
2141
2142                                         //var labels = this.data.dimension_names;
2143                                         //var i = labels.length;
2144                                         //while(i--)
2145                                         //      this.legendSetLabelValue(labels[i], this.data.latest_values[i]);
2146                                 }
2147                                 return;
2148                         }
2149                         if(this.colors === null) {
2150                                 // this is the first time we update the chart
2151                                 // let's assign colors to all dimensions
2152                                 if(this.library.track_colors() === true)
2153                                         for(var dim in this.chart.dimensions)
2154                                                 this._chartDimensionColor(this.chart.dimensions[dim].name);
2155                         }
2156                         // we will re-generate the colors for the chart
2157                         // based on the selected dimensions
2158                         this.colors = null;
2159
2160                         if(this.debug === true)
2161                                 this.log('updating Legend DOM');
2162
2163                         // mark all dimensions as invalid
2164                         this.dimensions_visibility.invalidateAll();
2165
2166                         var genLabel = function(state, parent, dim, name, count) {
2167                                 var color = state._chartDimensionColor(name);
2168
2169                                 var user_element = null;
2170                                 var user_id = self.data('show-value-of-' + dim + '-at') || null;
2171                                 if(user_id !== null) {
2172                                         user_element = document.getElementById(user_id) || null;
2173                                         if(user_element === null)
2174                                                 state.log('Cannot find element with id: ' + user_id);
2175                                 }
2176
2177                                 state.element_legend_childs.series[name] = {
2178                                         name: document.createElement('span'),
2179                                         value: document.createElement('span'),
2180                                         user: user_element,
2181                                         last: null
2182                                 };
2183
2184                                 var label = state.element_legend_childs.series[name];
2185
2186                                 // create the dimension visibility tracking for this label
2187                                 state.dimensions_visibility.dimensionAdd(name, label.name, label.value, color);
2188
2189                                 var rgb = NETDATA.colorHex2Rgb(color);
2190                                 label.name.innerHTML = '<table class="netdata-legend-name-table-'
2191                                         + state.chart.chart_type
2192                                         + '" style="background-color: '
2193                                         + 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + NETDATA.options.current['color_fill_opacity_' + state.chart.chart_type] + ')'
2194                                         + '"><tr class="netdata-legend-name-tr"><td class="netdata-legend-name-td"></td></tr></table>'
2195
2196                                 var text = document.createTextNode(' ' + name);
2197                                 label.name.appendChild(text);
2198
2199                                 if(count > 0)
2200                                         parent.appendChild(document.createElement('br'));
2201
2202                                 parent.appendChild(label.name);
2203                                 parent.appendChild(label.value);
2204                         };
2205
2206                         var content = document.createElement('div');
2207
2208                         if(this.hasLegend()) {
2209                                 this.element_legend_childs = {
2210                                         content: content,
2211                                         resize_handler: document.createElement('div'),
2212                                         toolbox: document.createElement('div'),
2213                                         toolbox_left: document.createElement('div'),
2214                                         toolbox_right: document.createElement('div'),
2215                                         toolbox_reset: document.createElement('div'),
2216                                         toolbox_zoomin: document.createElement('div'),
2217                                         toolbox_zoomout: document.createElement('div'),
2218                                         toolbox_volume: document.createElement('div'),
2219                                         title_date: document.createElement('span'),
2220                                         title_time: document.createElement('span'),
2221                                         title_units: document.createElement('span'),
2222                                         nano: document.createElement('div'),
2223                                         nano_options: {
2224                                                 paneClass: 'netdata-legend-series-pane',
2225                                                 sliderClass: 'netdata-legend-series-slider',
2226                                                 contentClass: 'netdata-legend-series-content',
2227                                                 enabledClass: '__enabled',
2228                                                 flashedClass: '__flashed',
2229                                                 activeClass: '__active',
2230                                                 tabIndex: -1,
2231                                                 alwaysVisible: true,
2232                                                 sliderMinHeight: 10
2233                                         },
2234                                         series: {}
2235                                 };
2236
2237                                 this.element_legend.innerHTML = '';
2238
2239                                 if(this.library.toolboxPanAndZoom !== null) {
2240
2241                                         function get_pan_and_zoom_step(event) {
2242                                                 if (event.ctrlKey)
2243                                                         return NETDATA.options.current.pan_and_zoom_factor * NETDATA.options.current.pan_and_zoom_factor_multiplier_control;
2244
2245                                                 else if (event.shiftKey)
2246                                                         return NETDATA.options.current.pan_and_zoom_factor * NETDATA.options.current.pan_and_zoom_factor_multiplier_shift;
2247
2248                                                 else if (event.altKey)
2249                                                         return NETDATA.options.current.pan_and_zoom_factor * NETDATA.options.current.pan_and_zoom_factor_multiplier_alt;
2250
2251                                                 else
2252                                                         return NETDATA.options.current.pan_and_zoom_factor;
2253                                         }
2254
2255                                         this.element_legend_childs.toolbox.className += ' netdata-legend-toolbox';
2256                                         this.element.appendChild(this.element_legend_childs.toolbox);
2257
2258                                         this.element_legend_childs.toolbox_left.className += ' netdata-legend-toolbox-button';
2259                                         this.element_legend_childs.toolbox_left.innerHTML = '<i class="fa fa-backward"></i>';
2260                                         this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_left);
2261                                         this.element_legend_childs.toolbox_left.onclick = function(e) {
2262                                                 e.preventDefault();
2263
2264                                                 var step = (that.view_before - that.view_after) * get_pan_and_zoom_step(e);
2265                                                 var before = that.view_before - step;
2266                                                 var after = that.view_after - step;
2267                                                 if(after >= that.netdata_first)
2268                                                         that.library.toolboxPanAndZoom(that, after, before);
2269                                         };
2270                                         if(NETDATA.options.current.show_help === true)
2271                                                 $(this.element_legend_childs.toolbox_left).popover({
2272                                                 container: "body",
2273                                                 animation: false,
2274                                                 html: true,
2275                                                 trigger: 'hover',
2276                                                 placement: 'bottom',
2277                                                 delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2278                                                 title: 'Pan Left',
2279                                                 content: 'Pan the chart to the left. You can also <b>drag it</b> with your mouse or your finger (on touch devices).<br/><small>Help, can be disabled from the settings.</small>'
2280                                         });
2281
2282
2283                                         this.element_legend_childs.toolbox_reset.className += ' netdata-legend-toolbox-button';
2284                                         this.element_legend_childs.toolbox_reset.innerHTML = '<i class="fa fa-play"></i>';
2285                                         this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_reset);
2286                                         this.element_legend_childs.toolbox_reset.onclick = function(e) {
2287                                                 e.preventDefault();
2288                                                 NETDATA.resetAllCharts(that);
2289                                         };
2290                                         if(NETDATA.options.current.show_help === true)
2291                                                 $(this.element_legend_childs.toolbox_reset).popover({
2292                                                 container: "body",
2293                                                 animation: false,
2294                                                 html: true,
2295                                                 trigger: 'hover',
2296                                                 placement: 'bottom',
2297                                                 delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2298                                                 title: 'Chart Reset',
2299                                                 content: 'Reset all the charts to their default auto-refreshing state. You can also <b>double click</b> the chart contents with your mouse or your finger (on touch devices).<br/><small>Help, can be disabled from the settings.</small>'
2300                                         });
2301
2302                                         this.element_legend_childs.toolbox_right.className += ' netdata-legend-toolbox-button';
2303                                         this.element_legend_childs.toolbox_right.innerHTML = '<i class="fa fa-forward"></i>';
2304                                         this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_right);
2305                                         this.element_legend_childs.toolbox_right.onclick = function(e) {
2306                                                 e.preventDefault();
2307                                                 var step = (that.view_before - that.view_after) * get_pan_and_zoom_step(e);
2308                                                 var before = that.view_before + step;
2309                                                 var after = that.view_after + step;
2310                                                 if(before <= that.netdata_last)
2311                                                         that.library.toolboxPanAndZoom(that, after, before);
2312                                         };
2313                                         if(NETDATA.options.current.show_help === true)
2314                                                 $(this.element_legend_childs.toolbox_right).popover({
2315                                                 container: "body",
2316                                                 animation: false,
2317                                                 html: true,
2318                                                 trigger: 'hover',
2319                                                 placement: 'bottom',
2320                                                 delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2321                                                 title: 'Pan Right',
2322                                                 content: 'Pan the chart to the right. You can also <b>drag it</b> with your mouse or your finger (on touch devices).<br/><small>Help, can be disabled from the settings.</small>'
2323                                         });
2324
2325
2326                                         this.element_legend_childs.toolbox_zoomin.className += ' netdata-legend-toolbox-button';
2327                                         this.element_legend_childs.toolbox_zoomin.innerHTML = '<i class="fa fa-plus"></i>';
2328                                         this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomin);
2329                                         this.element_legend_childs.toolbox_zoomin.onclick = function(e) {
2330                                                 e.preventDefault();
2331                                                 var dt = ((that.view_before - that.view_after) * (get_pan_and_zoom_step(e) * 0.8) / 2);
2332                                                 var before = that.view_before - dt;
2333                                                 var after = that.view_after + dt;
2334                                                 that.library.toolboxPanAndZoom(that, after, before);
2335                                         };
2336                                         if(NETDATA.options.current.show_help === true)
2337                                                 $(this.element_legend_childs.toolbox_zoomin).popover({
2338                                                 container: "body",
2339                                                 animation: false,
2340                                                 html: true,
2341                                                 trigger: 'hover',
2342                                                 placement: 'bottom',
2343                                                 delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2344                                                 title: 'Chart Zoom In',
2345                                                 content: 'Zoom in the chart. You can also press SHIFT and select an area of the chart to zoom in. On Chrome and Opera, you can press the SHIFT or the ALT keys and then use the mouse wheel to zoom in or out.<br/><small>Help, can be disabled from the settings.</small>'
2346                                         });
2347
2348                                         this.element_legend_childs.toolbox_zoomout.className += ' netdata-legend-toolbox-button';
2349                                         this.element_legend_childs.toolbox_zoomout.innerHTML = '<i class="fa fa-minus"></i>';
2350                                         this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomout);
2351                                         this.element_legend_childs.toolbox_zoomout.onclick = function(e) {
2352                                                 e.preventDefault();
2353                                                 var dt = (((that.view_before - that.view_after) / (1.0 - (get_pan_and_zoom_step(e) * 0.8)) - (that.view_before - that.view_after)) / 2);
2354                                                 var before = that.view_before + dt;
2355                                                 var after = that.view_after - dt;
2356
2357                                                 that.library.toolboxPanAndZoom(that, after, before);
2358                                         };
2359                                         if(NETDATA.options.current.show_help === true)
2360                                                 $(this.element_legend_childs.toolbox_zoomout).popover({
2361                                                 container: "body",
2362                                                 animation: false,
2363                                                 html: true,
2364                                                 trigger: 'hover',
2365                                                 placement: 'bottom',
2366                                                 delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2367                                                 title: 'Chart Zoom Out',
2368                                                 content: 'Zoom out the chart. On Chrome and Opera, you can also press the SHIFT or the ALT keys and then use the mouse wheel to zoom in or out.<br/><small>Help, can be disabled from the settings.</small>'
2369                                         });
2370
2371                                         //this.element_legend_childs.toolbox_volume.className += ' netdata-legend-toolbox-button';
2372                                         //this.element_legend_childs.toolbox_volume.innerHTML = '<i class="fa fa-sort-amount-desc"></i>';
2373                                         //this.element_legend_childs.toolbox_volume.title = 'Visible Volume';
2374                                         //this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_volume);
2375                                         //this.element_legend_childs.toolbox_volume.onclick = function(e) {
2376                                                 //e.preventDefault();
2377                                                 //alert('clicked toolbox_volume on ' + that.id);
2378                                         //}
2379                                 }
2380                                 else {
2381                                         this.element_legend_childs.toolbox = null;
2382                                         this.element_legend_childs.toolbox_left = null;
2383                                         this.element_legend_childs.toolbox_reset = null;
2384                                         this.element_legend_childs.toolbox_right = null;
2385                                         this.element_legend_childs.toolbox_zoomin = null;
2386                                         this.element_legend_childs.toolbox_zoomout = null;
2387                                         this.element_legend_childs.toolbox_volume = null;
2388                                 }
2389
2390                                 this.element_legend_childs.resize_handler.className += " netdata-legend-resize-handler";
2391                                 this.element_legend_childs.resize_handler.innerHTML = '<i class="fa fa-chevron-up"></i><i class="fa fa-chevron-down"></i>';
2392                                 this.element.appendChild(this.element_legend_childs.resize_handler);
2393                                 if(NETDATA.options.current.show_help === true)
2394                                         $(this.element_legend_childs.resize_handler).popover({
2395                                         container: "body",
2396                                         animation: false,
2397                                         html: true,
2398                                         trigger: 'hover',
2399                                         placement: 'bottom',
2400                                         delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2401                                         title: 'Chart Resize',
2402                                         content: 'Drag this point with your mouse or your finger (on touch devices), to resize the chart vertically. You can also <b>double click it</b> or <b>double tap it</b> to reset between 2 states: the default and the one that fits all the values.<br/><small>Help, can be disabled from the settings.</small>'
2403                                 });
2404
2405                                 // mousedown event
2406                                 this.element_legend_childs.resize_handler.onmousedown =
2407                                         function(e) {
2408                                                 that.resizeHandler(e);
2409                                         };
2410
2411                                 // touchstart event
2412                                 this.element_legend_childs.resize_handler.addEventListener('touchstart', function(e) {
2413                                         that.resizeHandler(e);
2414                                 }, false);
2415
2416                                 this.element_legend_childs.title_date.className += " netdata-legend-title-date";
2417                                 this.element_legend.appendChild(this.element_legend_childs.title_date);
2418
2419                                 this.element_legend.appendChild(document.createElement('br'));
2420
2421                                 this.element_legend_childs.title_time.className += " netdata-legend-title-time";
2422                                 this.element_legend.appendChild(this.element_legend_childs.title_time);
2423
2424                                 this.element_legend.appendChild(document.createElement('br'));
2425
2426                                 this.element_legend_childs.title_units.className += " netdata-legend-title-units";
2427                                 this.element_legend.appendChild(this.element_legend_childs.title_units);
2428
2429                                 this.element_legend.appendChild(document.createElement('br'));
2430
2431                                 this.element_legend_childs.nano.className = 'netdata-legend-series';
2432                                 this.element_legend.appendChild(this.element_legend_childs.nano);
2433
2434                                 content.className = 'netdata-legend-series-content';
2435                                 this.element_legend_childs.nano.appendChild(content);
2436
2437                                 if(NETDATA.options.current.show_help === true)
2438                                         $(content).popover({
2439                                         container: "body",
2440                                         animation: false,
2441                                         html: true,
2442                                         trigger: 'hover',
2443                                         placement: 'bottom',
2444                                         title: 'Chart Legend',
2445                                         delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2446                                         content: 'You can click or tap on the values or the labels to select dimentions. By pressing SHIFT or CONTROL, you can enable or disable multiple dimensions.<br/><small>Help, can be disabled from the settings.</small>'
2447                                 });
2448                         }
2449                         else {
2450                                 this.element_legend_childs = {
2451                                         content: content,
2452                                         resize_handler: null,
2453                                         toolbox: null,
2454                                         toolbox_left: null,
2455                                         toolbox_right: null,
2456                                         toolbox_reset: null,
2457                                         toolbox_zoomin: null,
2458                                         toolbox_zoomout: null,
2459                                         toolbox_volume: null,
2460                                         title_date: null,
2461                                         title_time: null,
2462                                         title_units: null,
2463                                         nano: null,
2464                                         nano_options: null,
2465                                         series: {}
2466                                 };
2467                         }
2468
2469                         if(this.data) {
2470                                 this.element_legend_childs.series.labels_key = this.data.dimension_names.toString();
2471                                 if(this.debug === true)
2472                                         this.log('labels from data: "' + this.element_legend_childs.series.labels_key + '"');
2473
2474                                 for(var i = 0, len = this.data.dimension_names.length; i < len ;i++) {
2475                                         genLabel(this, content, this.data.dimension_ids[i], this.data.dimension_names[i], i);
2476                                 }
2477                         }
2478                         else {
2479                                 var tmp = new Array();
2480                                 for(var dim in this.chart.dimensions) {
2481                                         tmp.push(this.chart.dimensions[dim].name);
2482                                         genLabel(this, content, dim, this.chart.dimensions[dim].name, i);
2483                                 }
2484                                 this.element_legend_childs.series.labels_key = tmp.toString();
2485                                 if(this.debug === true)
2486                                         this.log('labels from chart: "' + this.element_legend_childs.series.labels_key + '"');
2487                         }
2488
2489                         // create a hidden div to be used for hidding
2490                         // the original legend of the chart library
2491                         var el = document.createElement('div');
2492                         if(this.element_legend !== null)
2493                                 this.element_legend.appendChild(el);
2494                         el.style.display = 'none';
2495
2496                         this.element_legend_childs.hidden = document.createElement('div');
2497                         el.appendChild(this.element_legend_childs.hidden);
2498
2499                         if(this.element_legend_childs.nano !== null && this.element_legend_childs.nano_options !== null)
2500                                 $(this.element_legend_childs.nano).nanoScroller(this.element_legend_childs.nano_options);
2501
2502                         this.legendShowLatestValues();
2503                 };
2504
2505                 this.hasLegend = function() {
2506                         if(typeof this.___hasLegendCache___ !== 'undefined')
2507                                 return this.___hasLegendCache___;
2508
2509                         var leg = false;
2510                         if(this.library && this.library.legend(this) === 'right-side') {
2511                                 var legend = $(this.element).data('legend') || 'yes';
2512                                 if(legend === 'yes') leg = true;
2513                         }
2514
2515                         this.___hasLegendCache___ = leg;
2516                         return leg;
2517                 };
2518
2519                 this.legendWidth = function() {
2520                         return (this.hasLegend())?140:0;
2521                 };
2522
2523                 this.legendHeight = function() {
2524                         return $(this.element).height();
2525                 };
2526
2527                 this.chartWidth = function() {
2528                         return $(this.element).width() - this.legendWidth();
2529                 };
2530
2531                 this.chartHeight = function() {
2532                         return $(this.element).height();
2533                 };
2534
2535                 this.chartPixelsPerPoint = function() {
2536                         // force an options provided detail
2537                         var px = this.pixels_per_point;
2538
2539                         if(this.library && px < this.library.pixels_per_point(this))
2540                                 px = this.library.pixels_per_point(this);
2541
2542                         if(px < NETDATA.options.current.pixels_per_point)
2543                                 px = NETDATA.options.current.pixels_per_point;
2544
2545                         return px;
2546                 };
2547
2548                 this.needsRecreation = function() {
2549                         return (
2550                                         this.chart_created === true
2551                                         && this.library
2552                                         && this.library.autoresize() === false
2553                                         && this.tm.last_resized < NETDATA.options.last_resized
2554                                 );
2555                 };
2556
2557                 this.chartURL = function() {
2558                         var after, before, points_multiplier = 1;
2559                         if(NETDATA.globalPanAndZoom.isActive() && NETDATA.globalPanAndZoom.isMaster(this) === false) {
2560                                 this.tm.pan_and_zoom_seq = NETDATA.globalPanAndZoom.seq;
2561
2562                                 after = Math.round(NETDATA.globalPanAndZoom.force_after_ms / 1000);
2563                                 before = Math.round(NETDATA.globalPanAndZoom.force_before_ms / 1000);
2564                                 this.view_after = after * 1000;
2565                                 this.view_before = before * 1000;
2566
2567                                 this.requested_padding = null;
2568                                 points_multiplier = 1;
2569                         }
2570                         else if(this.current.force_before_ms !== null && this.current.force_after_ms !== null) {
2571                                 this.tm.pan_and_zoom_seq = 0;
2572
2573                                 before = Math.round(this.current.force_before_ms / 1000);
2574                                 after  = Math.round(this.current.force_after_ms / 1000);
2575                                 this.view_after = after * 1000;
2576                                 this.view_before = before * 1000;
2577
2578                                 if(NETDATA.options.current.pan_and_zoom_data_padding === true) {
2579                                         this.requested_padding = Math.round((before - after) / 2);
2580                                         after -= this.requested_padding;
2581                                         before += this.requested_padding;
2582                                         this.requested_padding *= 1000;
2583                                         points_multiplier = 2;
2584                                 }
2585
2586                                 this.current.force_before_ms = null;
2587                                 this.current.force_after_ms = null;
2588                         }
2589                         else {
2590                                 this.tm.pan_and_zoom_seq = 0;
2591
2592                                 before = this.before;
2593                                 after  = this.after;
2594                                 this.view_after = after * 1000;
2595                                 this.view_before = before * 1000;
2596
2597                                 this.requested_padding = null;
2598                                 points_multiplier = 1;
2599                         }
2600
2601                         this.requested_after = after * 1000;
2602                         this.requested_before = before * 1000;
2603
2604                         this.data_points = this.points || Math.round(this.chartWidth() / this.chartPixelsPerPoint());
2605
2606                         // build the data URL
2607                         this.data_url = this.host + this.chart.data_url;
2608                         this.data_url += "&format="  + this.library.format();
2609                         this.data_url += "&points="  + (this.data_points * points_multiplier).toString();
2610                         this.data_url += "&group="   + this.method;
2611                         this.data_url += "&options=" + this.library.options(this);
2612                         this.data_url += '|jsonwrap';
2613
2614                         if(NETDATA.options.current.eliminate_zero_dimensions === true)
2615                                 this.data_url += '|nonzero';
2616
2617                         if(this.append_options !== null)
2618                                 this.data_url += '|' + this.append_options.toString();
2619
2620                         if(after)
2621                                 this.data_url += "&after="  + after.toString();
2622
2623                         if(before)
2624                                 this.data_url += "&before=" + before.toString();
2625
2626                         if(this.dimensions)
2627                                 this.data_url += "&dimensions=" + this.dimensions;
2628
2629                         if(NETDATA.options.debug.chart_data_url === true || this.debug === true)
2630                                 this.log('chartURL(): ' + this.data_url + ' WxH:' + this.chartWidth() + 'x' + this.chartHeight() + ' points: ' + this.data_points + ' library: ' + this.library_name);
2631                 };
2632
2633                 this.redrawChart = function() {
2634                         if(this.data !== null)
2635                                 this.updateChartWithData(this.data);
2636                 };
2637
2638                 this.updateChartWithData = function(data) {
2639                         if(this.debug === true)
2640                                 this.log('updateChartWithData() called.');
2641
2642                         // this may force the chart to be re-created
2643                         resizeChart();
2644
2645                         this.data = data;
2646                         this.updates_counter++;
2647                         this.updates_since_last_unhide++;
2648                         this.updates_since_last_creation++;
2649
2650                         var started = new Date().getTime();
2651
2652                         // if the result is JSON, find the latest update-every
2653                         this.data_update_every = data.view_update_every * 1000;
2654                         this.data_after = data.after * 1000;
2655                         this.data_before = data.before * 1000;
2656                         this.netdata_first = data.first_entry * 1000;
2657                         this.netdata_last = data.last_entry * 1000;
2658                         this.data_points = data.points;
2659                         data.state = this;
2660
2661                         if(NETDATA.options.current.pan_and_zoom_data_padding === true && this.requested_padding !== null) {
2662                                 if(this.view_after < this.data_after) {
2663                                         // console.log('adusting view_after from ' + this.view_after + ' to ' + this.data_after);
2664                                         this.view_after = this.data_after;
2665                                 }
2666
2667                                 if(this.view_before > this.data_before) {
2668                                         // console.log('adusting view_before from ' + this.view_before + ' to ' + this.data_before);
2669                                         this.view_before = this.data_before;
2670                                 }
2671                         }
2672                         else {
2673                                 this.view_after = this.data_after;
2674                                 this.view_before = this.data_before;
2675                         }
2676
2677                         if(this.debug === true) {
2678                                 this.log('UPDATE No ' + this.updates_counter + ' COMPLETED');
2679
2680                                 if(this.current.force_after_ms)
2681                                         this.log('STATUS: forced    : ' + (this.current.force_after_ms / 1000).toString() + ' - ' + (this.current.force_before_ms / 1000).toString());
2682                                 else
2683                                         this.log('STATUS: forced    : unset');
2684
2685                                 this.log('STATUS: requested : ' + (this.requested_after / 1000).toString() + ' - ' + (this.requested_before / 1000).toString());
2686                                 this.log('STATUS: downloaded: ' + (this.data_after / 1000).toString() + ' - ' + (this.data_before / 1000).toString());
2687                                 this.log('STATUS: rendered  : ' + (this.view_after / 1000).toString() + ' - ' + (this.view_before / 1000).toString());
2688                                 this.log('STATUS: points    : ' + (this.data_points).toString());
2689                         }
2690
2691                         if(this.data_points === 0) {
2692                                 noDataToShow();
2693                                 return;
2694                         }
2695
2696                         if(this.updates_since_last_creation >= this.library.max_updates_to_recreate()) {
2697                                 if(this.debug === true)
2698                                         this.log('max updates of ' + this.updates_since_last_creation.toString() + ' reached. Forcing re-generation.');
2699
2700                                 this.chart_created = false;
2701                         }
2702
2703                         // check and update the legend
2704                         this.legendUpdateDOM();
2705
2706                         if(this.chart_created === true
2707                                 && typeof this.library.update === 'function') {
2708
2709                                 if(this.debug === true)
2710                                         this.log('updating chart...');
2711
2712                                 if(callChartLibraryUpdateSafely(data) === false)
2713                                         return;
2714                         }
2715                         else {
2716                                 if(this.debug === true)
2717                                         this.log('creating chart...');
2718
2719                                 if(callChartLibraryCreateSafely(data) === false)
2720                                         return;
2721                         }
2722                         hideMessage();
2723                         this.legendShowLatestValues();
2724                         if(this.selected === true)
2725                                 NETDATA.globalSelectionSync.stop();
2726
2727                         // update the performance counters
2728                         var now = new Date().getTime();
2729                         this.tm.last_updated = now;
2730
2731                         // don't update last_autorefreshed if this chart is
2732                         // forced to be updated with global PanAndZoom
2733                         if(NETDATA.globalPanAndZoom.isActive())
2734                                 this.tm.last_autorefreshed = 0;
2735                         else {
2736                                 if(NETDATA.options.current.parallel_refresher === true && NETDATA.options.current.concurrent_refreshes === true)
2737                                         this.tm.last_autorefreshed = now - (now % this.data_update_every);
2738                                 else
2739                                         this.tm.last_autorefreshed = now;
2740                         }
2741
2742                         this.refresh_dt_ms = now - started;
2743                         NETDATA.options.auto_refresher_fast_weight += this.refresh_dt_ms;
2744
2745                         if(this.refresh_dt_element !== null)
2746                                 this.refresh_dt_element.innerHTML = this.refresh_dt_ms.toString();
2747                 };
2748
2749                 this.updateChart = function(callback) {
2750                         if(this.debug === true)
2751                                 this.log('updateChart() called.');
2752
2753                         if(this._updating === true) {
2754                                 if(this.debug === true)
2755                                         this.log('I am already updating...');
2756
2757                                 if(typeof callback === 'function') callback();
2758                                 return false;
2759                         }
2760
2761                         // due to late initialization of charts and libraries
2762                         // we need to check this too
2763                         if(this.enabled === false) {
2764                                 if(this.debug === true)
2765                                         this.log('I am not enabled');
2766
2767                                 if(typeof callback === 'function') callback();
2768                                 return false;
2769                         }
2770
2771                         if(canBeRendered() === false) {
2772                                 if(typeof callback === 'function') callback();
2773                                 return false;
2774                         }
2775
2776                         if(this.chart === null) {
2777                                 this.getChart(function() { that.updateChart(callback); });
2778                                 return false;
2779                         }
2780
2781                         if(this.library.initialized === false) {
2782                                 if(this.library.enabled === true) {
2783                                         this.library.initialize(function() { that.updateChart(callback); });
2784                                         return false;
2785                                 }
2786                                 else {
2787                                         error('chart library "' + this.library_name + '" is not available.');
2788                                         if(typeof callback === 'function') callback();
2789                                         return false;
2790                                 }
2791                         }
2792
2793                         this.clearSelection();
2794                         this.chartURL();
2795
2796                         if(this.debug === true)
2797                                 this.log('updating from ' + this.data_url);
2798
2799                         NETDATA.statistics.refreshes_total++;
2800                         NETDATA.statistics.refreshes_active++;
2801
2802                         if(NETDATA.statistics.refreshes_active > NETDATA.statistics.refreshes_active_max)
2803                                 NETDATA.statistics.refreshes_active_max = NETDATA.statistics.refreshes_active;
2804
2805                         this._updating = true;
2806
2807                         this.xhr = $.ajax( {
2808                                 url: this.data_url,
2809                                 cache: false,
2810                                 async: true,
2811                                 xhrFields: { withCredentials: true } // required for the cookie
2812                         })
2813                         .success(function(data) {
2814                                 if(that.debug === true)
2815                                         that.log('data received. updating chart.');
2816
2817                                 that.updateChartWithData(data);
2818                         })
2819                         .fail(function() {
2820                                 error('data download failed for url: ' + that.data_url);
2821                         })
2822                         .always(function() {
2823                                 NETDATA.statistics.refreshes_active--;
2824                                 that._updating = false;
2825                                 if(typeof callback === 'function') callback();
2826                         });
2827
2828                         return true;
2829                 };
2830
2831                 this.isVisible = function(nocache) {
2832                         if(typeof nocache === 'undefined')
2833                                 nocache = false;
2834
2835                         // this.log('last_visible_check: ' + this.tm.last_visible_check + ', last_page_scroll: ' + NETDATA.options.last_page_scroll);
2836
2837                         // caching - we do not evaluate the charts visibility
2838                         // if the page has not been scrolled since the last check
2839                         if(nocache === false && this.tm.last_visible_check > NETDATA.options.last_page_scroll)
2840                                 return this.___isVisible___;
2841
2842                         this.tm.last_visible_check = new Date().getTime();
2843
2844                         var wh = window.innerHeight;
2845                         var x = this.element.getBoundingClientRect();
2846                         var ret = 0;
2847                         var tolerance = 0;
2848
2849                         if(x.width === 0 || x.height === 0) {
2850                                 hideChart();
2851                                 this.___isVisible___ = false;
2852                                 return this.___isVisible___;
2853                         }
2854
2855                         if(x.top < 0 && -x.top > x.height) {
2856                                 // the chart is entirely above
2857                                 ret = -x.top - x.height;
2858                         }
2859                         else if(x.top > wh) {
2860                                 // the chart is entirely below
2861                                 ret = x.top - wh;
2862                         }
2863
2864                         if(ret > tolerance) {
2865                                 // the chart is too far
2866
2867                                 hideChart();
2868                                 this.___isVisible___ = false;
2869                                 return this.___isVisible___;
2870                         }
2871                         else {
2872                                 // the chart is inside or very close
2873
2874                                 unhideChart();
2875                                 this.___isVisible___ = true;
2876                                 return this.___isVisible___;
2877                         }
2878                 };
2879
2880                 this.isAutoRefreshable = function() {
2881                         return (this.current.autorefresh);
2882                 };
2883
2884                 this.canBeAutoRefreshed = function() {
2885                         var now = new Date().getTime();
2886
2887                         if(this.running === true) {
2888                                 if(this.debug === true)
2889                                         this.log('I am already running');
2890
2891                                 return false;
2892                         }
2893
2894                         if(this.enabled === false) {
2895                                 if(this.debug === true)
2896                                         this.log('I am not enabled');
2897
2898                                 return false;
2899                         }
2900
2901                         if(this.library === null || this.library.enabled === false) {
2902                                 error('charting library "' + this.library_name + '" is not available');
2903                                 if(this.debug === true)
2904                                         this.log('My chart library ' + this.library_name + ' is not available');
2905
2906                                 return false;
2907                         }
2908
2909                         if(this.isVisible() === false) {
2910                                 if(NETDATA.options.debug.visibility === true || this.debug === true)
2911                                         this.log('I am not visible');
2912
2913                                 return false;
2914                         }
2915
2916                         if(this.current.force_update_at !== 0 && this.current.force_update_at < now) {
2917                                 if(this.debug === true)
2918                                         this.log('timed force update detected - allowing this update');
2919
2920                                 this.current.force_update_at = 0;
2921                                 return true;
2922                         }
2923
2924                         if(this.isAutoRefreshable() === true) {
2925                                 // allow the first update, even if the page is not visible
2926                                 if(this.updates_counter && this.updates_since_last_unhide && NETDATA.options.page_is_visible === false) {
2927                                         if(NETDATA.options.debug.focus === true || this.debug === true)
2928                                                 this.log('canBeAutoRefreshed(): page does not have focus');
2929
2930                                         return false;
2931                                 }
2932
2933                                 if(this.needsRecreation() === true) {
2934                                         if(this.debug === true)
2935                                                 this.log('canBeAutoRefreshed(): needs re-creation.');
2936
2937                                         return true;
2938                                 }
2939
2940                                 // options valid only for autoRefresh()
2941                                 if(NETDATA.options.auto_refresher_stop_until === 0 || NETDATA.options.auto_refresher_stop_until < now) {
2942                                         if(NETDATA.globalPanAndZoom.isActive()) {
2943                                                 if(NETDATA.globalPanAndZoom.shouldBeAutoRefreshed(this)) {
2944                                                         if(this.debug === true)
2945                                                                 this.log('canBeAutoRefreshed(): global panning: I need an update.');
2946
2947                                                         return true;
2948                                                 }
2949                                                 else {
2950                                                         if(this.debug === true)
2951                                                                 this.log('canBeAutoRefreshed(): global panning: I am already up to date.');
2952
2953                                                         return false;
2954                                                 }
2955                                         }
2956
2957                                         if(this.selected === true) {
2958                                                 if(this.debug === true)
2959                                                         this.log('canBeAutoRefreshed(): I have a selection in place.');
2960
2961                                                 return false;
2962                                         }
2963
2964                                         if(this.paused === true) {
2965                                                 if(this.debug === true)
2966                                                         this.log('canBeAutoRefreshed(): I am paused.');
2967
2968                                                 return false;
2969                                         }
2970
2971                                         if(now - this.tm.last_autorefreshed >= this.data_update_every) {
2972                                                 if(this.debug === true)
2973                                                         this.log('canBeAutoRefreshed(): It is time to update me.');
2974
2975                                                 return true;
2976                                         }
2977                                 }
2978                         }
2979
2980                         return false;
2981                 };
2982
2983                 this.autoRefresh = function(callback) {
2984                         if(this.canBeAutoRefreshed() === true && this.running === false) {
2985                                 var state = this;
2986
2987                                 state.running = true;
2988                                 state.updateChart(function() {
2989                                         state.running = false;
2990
2991                                         if(typeof callback !== 'undefined')
2992                                                 callback();
2993                                 });
2994                         }
2995                         else {
2996                                 if(typeof callback !== 'undefined')
2997                                         callback();
2998                         }
2999                 };
3000
3001                 this._defaultsFromDownloadedChart = function(chart) {
3002                         this.chart = chart;
3003                         this.chart_url = chart.url;
3004                         this.data_update_every = chart.update_every * 1000;
3005                         this.data_points = Math.round(this.chartWidth() / this.chartPixelsPerPoint());
3006                         this.tm.last_info_downloaded = new Date().getTime();
3007
3008                         if(this.title === null)
3009                                 this.title = chart.title;
3010
3011                         if(this.units === null)
3012                                 this.units = chart.units;
3013                 };
3014
3015                 // fetch the chart description from the netdata server
3016                 this.getChart = function(callback) {
3017                         this.chart = NETDATA.chartRegistry.get(this.host, this.id);
3018                         if(this.chart) {
3019                                 this._defaultsFromDownloadedChart(this.chart);
3020                                 if(typeof callback === 'function') callback();
3021                         }
3022                         else {
3023                                 this.chart_url = "/api/v1/chart?chart=" + this.id;
3024
3025                                 if(this.debug === true)
3026                                         this.log('downloading ' + this.chart_url);
3027
3028                                 $.ajax( {
3029                                         url:  this.host + this.chart_url,
3030                                         cache: false,
3031                                         async: true,
3032                                         xhrFields: { withCredentials: true } // required for the cookie
3033                                 })
3034                                 .done(function(chart) {
3035                                         chart.url = that.chart_url;
3036                                         that._defaultsFromDownloadedChart(chart);
3037                                         NETDATA.chartRegistry.add(that.host, that.id, chart);
3038                                 })
3039                                 .fail(function() {
3040                                         NETDATA.error(404, that.chart_url);
3041                                         error('chart not found on url "' + that.chart_url + '"');
3042                                 })
3043                                 .always(function() {
3044                                         if(typeof callback === 'function') callback();
3045                                 });
3046                         }
3047                 };
3048
3049                 // ============================================================================================================
3050                 // INITIALIZATION
3051
3052                 init();
3053         };
3054
3055         NETDATA.resetAllCharts = function(state) {
3056                 // first clear the global selection sync
3057                 // to make sure no chart is in selected state
3058                 state.globalSelectionSyncStop();
3059
3060                 // there are 2 possibilities here
3061                 // a. state is the global Pan and Zoom master
3062                 // b. state is not the global Pan and Zoom master
3063                 var master = true;
3064                 if(NETDATA.globalPanAndZoom.isMaster(state) === false)
3065                         master = false;
3066
3067                 // clear the global Pan and Zoom
3068                 // this will also refresh the master
3069                 // and unblock any charts currently mirroring the master
3070                 NETDATA.globalPanAndZoom.clearMaster();
3071
3072                 // if we were not the master, reset our status too
3073                 // this is required because most probably the mouse
3074                 // is over this chart, blocking it from auto-refreshing
3075                 if(master === false && (state.paused === true || state.selected === true))
3076                         state.resetChart();
3077         };
3078
3079         // get or create a chart state, given a DOM element
3080         NETDATA.chartState = function(element) {
3081                 var state = $(element).data('netdata-state-object') || null;
3082                 if(state === null) {
3083                         state = new chartState(element);
3084                         $(element).data('netdata-state-object', state);
3085                 }
3086                 return state;
3087         };
3088
3089         // ----------------------------------------------------------------------------------------------------------------
3090         // Library functions
3091
3092         // Load a script without jquery
3093         // This is used to load jquery - after it is loaded, we use jquery
3094         NETDATA._loadjQuery = function(callback) {
3095                 if(typeof jQuery === 'undefined') {
3096                         if(NETDATA.options.debug.main_loop === true)
3097                                 console.log('loading ' + NETDATA.jQuery);
3098
3099                         var script = document.createElement('script');
3100                         script.type = 'text/javascript';
3101                         script.async = true;
3102                         script.src = NETDATA.jQuery;
3103
3104                         // script.onabort = onError;
3105                         script.onerror = function(err, t) { NETDATA.error(101, NETDATA.jQuery); };
3106                         if(typeof callback === "function")
3107                                 script.onload = callback;
3108
3109                         var s = document.getElementsByTagName('script')[0];
3110                         s.parentNode.insertBefore(script, s);
3111                 }
3112                 else if(typeof callback === "function")
3113                         callback();
3114         };
3115
3116         NETDATA._loadCSS = function(filename) {
3117                 // don't use jQuery here
3118                 // styles are loaded before jQuery
3119                 // to eliminate showing an unstyled page to the user
3120
3121                 var fileref = document.createElement("link");
3122                 fileref.setAttribute("rel", "stylesheet");
3123                 fileref.setAttribute("type", "text/css");
3124                 fileref.setAttribute("href", filename);
3125
3126                 if (typeof fileref !== 'undefined')
3127                         document.getElementsByTagName("head")[0].appendChild(fileref);
3128         };
3129
3130         NETDATA.colorHex2Rgb = function(hex) {
3131                 // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
3132                 var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
3133                         hex = hex.replace(shorthandRegex, function(m, r, g, b) {
3134                         return r + r + g + g + b + b;
3135                 });
3136
3137                 var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
3138                 return result ? {
3139                         r: parseInt(result[1], 16),
3140                         g: parseInt(result[2], 16),
3141                         b: parseInt(result[3], 16)
3142                 } : null;
3143         };
3144
3145         NETDATA.colorLuminance = function(hex, lum) {
3146                 // validate hex string
3147                 hex = String(hex).replace(/[^0-9a-f]/gi, '');
3148                 if (hex.length < 6)
3149                         hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
3150
3151                 lum = lum || 0;
3152
3153                 // convert to decimal and change luminosity
3154                 var rgb = "#", c, i;
3155                 for (i = 0; i < 3; i++) {
3156                         c = parseInt(hex.substr(i*2,2), 16);
3157                         c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
3158                         rgb += ("00"+c).substr(c.length);
3159                 }
3160
3161                 return rgb;
3162         };
3163
3164         NETDATA.guid = function() {
3165                 function s4() {
3166                         return Math.floor((1 + Math.random()) * 0x10000)
3167                                         .toString(16)
3168                                         .substring(1);
3169                         }
3170
3171                         return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
3172         };
3173
3174         NETDATA.zeropad = function(x) {
3175                 if(x > -10 && x < 10) return '0' + x.toString();
3176                 else return x.toString();
3177         };
3178
3179         // user function to signal us the DOM has been
3180         // updated.
3181         NETDATA.updatedDom = function() {
3182                 NETDATA.options.updated_dom = true;
3183         };
3184
3185         NETDATA.ready = function(callback) {
3186                 NETDATA.options.pauseCallback = callback;
3187         };
3188
3189         NETDATA.pause = function(callback) {
3190                 if(NETDATA.options.pause === true)
3191                         callback();
3192                 else
3193                         NETDATA.options.pauseCallback = callback;
3194         };
3195
3196         NETDATA.unpause = function() {
3197                 NETDATA.options.pauseCallback = null;
3198                 NETDATA.options.updated_dom = true;
3199                 NETDATA.options.pause = false;
3200         };
3201
3202         // ----------------------------------------------------------------------------------------------------------------
3203
3204         // this is purely sequencial charts refresher
3205         // it is meant to be autonomous
3206         NETDATA.chartRefresherNoParallel = function(index) {
3207                 if(NETDATA.options.debug.mail_loop === true)
3208                         console.log('NETDATA.chartRefresherNoParallel(' + index + ')');
3209
3210                 if(NETDATA.options.updated_dom === true) {
3211                         // the dom has been updated
3212                         // get the dom parts again
3213                         NETDATA.parseDom(NETDATA.chartRefresher);
3214                         return;
3215                 }
3216                 if(index >= NETDATA.options.targets.length) {
3217                         if(NETDATA.options.debug.main_loop === true)
3218                                 console.log('waiting to restart main loop...');
3219
3220                         NETDATA.options.auto_refresher_fast_weight = 0;
3221
3222                         setTimeout(function() {
3223                                 NETDATA.chartRefresher();
3224                         }, NETDATA.options.current.idle_between_loops);
3225                 }
3226                 else {
3227                         var state = NETDATA.options.targets[index];
3228
3229                         if(NETDATA.options.auto_refresher_fast_weight < NETDATA.options.current.fast_render_timeframe) {
3230                                 if(NETDATA.options.debug.main_loop === true)
3231                                         console.log('fast rendering...');
3232
3233                                 state.autoRefresh(function() {
3234                                         NETDATA.chartRefresherNoParallel(++index);
3235                                 });
3236                         }
3237                         else {
3238                                 if(NETDATA.options.debug.main_loop === true) console.log('waiting for next refresh...');
3239                                 NETDATA.options.auto_refresher_fast_weight = 0;
3240
3241                                 setTimeout(function() {
3242                                         state.autoRefresh(function() {
3243                                                 NETDATA.chartRefresherNoParallel(++index);
3244                                         });
3245                                 }, NETDATA.options.current.idle_between_charts);
3246                         }
3247                 }
3248         };
3249
3250         // this is part of the parallel refresher
3251         // its cause is to refresh sequencially all the charts
3252         // that depend on chart library initialization
3253         // it will call the parallel refresher back
3254         // as soon as it sees a chart that its chart library
3255         // is initialized
3256         NETDATA.chartRefresher_uninitialized = function() {
3257                 if(NETDATA.options.updated_dom === true) {
3258                         // the dom has been updated
3259                         // get the dom parts again
3260                         NETDATA.parseDom(NETDATA.chartRefresher);
3261                         return;
3262                 }
3263
3264                 if(NETDATA.options.sequencial.length === 0)
3265                         NETDATA.chartRefresher();
3266                 else {
3267                         var state = NETDATA.options.sequencial.pop();
3268                         if(state.library.initialized === true)
3269                                 NETDATA.chartRefresher();
3270                         else
3271                                 state.autoRefresh(NETDATA.chartRefresher_uninitialized);
3272                 }
3273         };
3274
3275         NETDATA.chartRefresherWaitTime = function() {
3276                 return NETDATA.options.current.idle_parallel_loops;
3277         };
3278
3279         // the default refresher
3280         // it will create 2 sets of charts:
3281         // - the ones that can be refreshed in parallel
3282         // - the ones that depend on something else
3283         // the first set will be executed in parallel
3284         // the second will be given to NETDATA.chartRefresher_uninitialized()
3285         NETDATA.chartRefresher = function() {
3286                 if(NETDATA.options.pause === true) {
3287                         // console.log('auto-refresher is paused');
3288                         setTimeout(NETDATA.chartRefresher,
3289                                 NETDATA.chartRefresherWaitTime());
3290                         return;
3291                 }
3292
3293                 if(typeof NETDATA.options.pauseCallback === 'function') {
3294                         // console.log('auto-refresher is calling pauseCallback');
3295                         NETDATA.options.pause = true;
3296                         NETDATA.options.pauseCallback();
3297                         NETDATA.chartRefresher();
3298                         return;
3299                 }
3300
3301                 if(NETDATA.options.current.parallel_refresher === false) {
3302                         NETDATA.chartRefresherNoParallel(0);
3303                         return;
3304                 }
3305
3306                 if(NETDATA.options.updated_dom === true) {
3307                         // the dom has been updated
3308                         // get the dom parts again
3309                         NETDATA.parseDom(NETDATA.chartRefresher);
3310                         return;
3311                 }
3312
3313                 var parallel = new Array();
3314                 var targets = NETDATA.options.targets;
3315                 var len = targets.length;
3316                 var state;
3317                 while(len--) {
3318                         state = targets[len];
3319                         if(state.isVisible() === false || state.running === true)
3320                                 continue;
3321
3322                         if(state.library.initialized === false) {
3323                                 if(state.library.enabled === true) {
3324                                         state.library.initialize(NETDATA.chartRefresher);
3325                                         return;
3326                                 }
3327                                 else {
3328                                         state.error('chart library "' + state.library_name + '" is not enabled.');
3329                                 }
3330                         }
3331
3332                         parallel.unshift(state);
3333                 }
3334
3335                 if(parallel.length > 0) {
3336                         // this will execute the jobs in parallel
3337                         $(parallel).each(function() {
3338                                 this.autoRefresh();
3339                         })
3340                 }
3341
3342                 // run the next refresh iteration
3343                 setTimeout(NETDATA.chartRefresher,
3344                         NETDATA.chartRefresherWaitTime());
3345         };
3346
3347         NETDATA.parseDom = function(callback) {
3348                 NETDATA.options.last_page_scroll = new Date().getTime();
3349                 NETDATA.options.updated_dom = false;
3350
3351                 var targets = $('div[data-netdata]'); //.filter(':visible');
3352
3353                 if(NETDATA.options.debug.main_loop === true)
3354                         console.log('DOM updated - there are ' + targets.length + ' charts on page.');
3355
3356                 NETDATA.options.targets = new Array();
3357                 var len = targets.length;
3358                 while(len--) {
3359                         // the initialization will take care of sizing
3360                         // and the "loading..." message
3361                         NETDATA.options.targets.push(NETDATA.chartState(targets[len]));
3362                 }
3363
3364                 if(typeof callback === 'function') callback();
3365         };
3366
3367         // this is the main function - where everything starts
3368         NETDATA.start = function() {
3369                 // this should be called only once
3370
3371                 NETDATA.options.page_is_visible = true;
3372
3373                 $(window).blur(function() {
3374                         if(NETDATA.options.current.stop_updates_when_focus_is_lost === true) {
3375                                 NETDATA.options.page_is_visible = false;
3376                                 if(NETDATA.options.debug.focus === true)
3377                                         console.log('Lost Focus!');
3378                         }
3379                 });
3380
3381                 $(window).focus(function() {
3382                         if(NETDATA.options.current.stop_updates_when_focus_is_lost === true) {
3383                                 NETDATA.options.page_is_visible = true;
3384                                 if(NETDATA.options.debug.focus === true)
3385                                         console.log('Focus restored!');
3386                         }
3387                 });
3388
3389                 if(typeof document.hasFocus === 'function' && !document.hasFocus()) {
3390                         if(NETDATA.options.current.stop_updates_when_focus_is_lost === true) {
3391                                 NETDATA.options.page_is_visible = false;
3392                                 if(NETDATA.options.debug.focus === true)
3393                                         console.log('Document has no focus!');
3394                         }
3395                 }
3396
3397                 // bootstrap tab switching
3398                 $('a[data-toggle="tab"]').on('shown.bs.tab', NETDATA.onscroll);
3399
3400                 // bootstrap modal switching
3401                 $('.modal').on('hidden.bs.modal', NETDATA.onscroll);
3402                 $('.modal').on('shown.bs.modal', NETDATA.onscroll);
3403
3404                 // bootstrap collapse switching
3405                 $('.collapse').on('hidden.bs.collapse', NETDATA.onscroll);
3406                 $('.collapse').on('shown.bs.collapse', NETDATA.onscroll);
3407
3408                 NETDATA.parseDom(NETDATA.chartRefresher);
3409
3410                 // Registry initialization
3411                 setTimeout(NETDATA.registry.init, 1000);
3412         };
3413
3414         // ----------------------------------------------------------------------------------------------------------------
3415         // peity
3416
3417         NETDATA.peityInitialize = function(callback) {
3418                 if(typeof netdataNoPeitys === 'undefined' || !netdataNoPeitys) {
3419                         $.ajax({
3420                                 url: NETDATA.peity_js,
3421                                 cache: true,
3422                                 dataType: "script",
3423                                 xhrFields: { withCredentials: true } // required for the cookie
3424                         })
3425                         .done(function() {
3426                                 NETDATA.registerChartLibrary('peity', NETDATA.peity_js);
3427                         })
3428                         .fail(function() {
3429                                 NETDATA.chartLibraries.peity.enabled = false;
3430                                 NETDATA.error(100, NETDATA.peity_js);
3431                         })
3432                         .always(function() {
3433                                 if(typeof callback === "function")
3434                                         callback();
3435                         });
3436                 }
3437                 else {
3438                         NETDATA.chartLibraries.peity.enabled = false;
3439                         if(typeof callback === "function")
3440                                 callback();
3441                 }
3442         };
3443
3444         NETDATA.peityChartUpdate = function(state, data) {
3445                 state.peity_instance.innerHTML = data.result;
3446
3447                 if(state.peity_options.stroke !== state.chartColors()[0]) {
3448                         state.peity_options.stroke = state.chartColors()[0];
3449                         if(state.chart.chart_type === 'line')
3450                                 state.peity_options.fill = NETDATA.themes.current.background;
3451                         else
3452                                 state.peity_options.fill = NETDATA.colorLuminance(state.chartColors()[0], NETDATA.chartDefaults.fill_luminance);
3453                 }
3454
3455                 $(state.peity_instance).peity('line', state.peity_options);
3456                 return true;
3457         };
3458
3459         NETDATA.peityChartCreate = function(state, data) {
3460                 state.peity_instance = document.createElement('div');
3461                 state.element_chart.appendChild(state.peity_instance);
3462
3463                 var self = $(state.element);
3464                 state.peity_options = {
3465                         stroke: NETDATA.themes.current.foreground,
3466                         strokeWidth: self.data('peity-strokewidth') || 1,
3467                         width: state.chartWidth(),
3468                         height: state.chartHeight(),
3469                         fill: NETDATA.themes.current.foreground
3470                 };
3471
3472                 NETDATA.peityChartUpdate(state, data);
3473                 return true;
3474         };
3475
3476         // ----------------------------------------------------------------------------------------------------------------
3477         // sparkline
3478
3479         NETDATA.sparklineInitialize = function(callback) {
3480                 if(typeof netdataNoSparklines === 'undefined' || !netdataNoSparklines) {
3481                         $.ajax({
3482                                 url: NETDATA.sparkline_js,
3483                                 cache: true,
3484                                 dataType: "script",
3485                                 xhrFields: { withCredentials: true } // required for the cookie
3486                         })
3487                         .done(function() {
3488                                 NETDATA.registerChartLibrary('sparkline', NETDATA.sparkline_js);
3489                         })
3490                         .fail(function() {
3491                                 NETDATA.chartLibraries.sparkline.enabled = false;
3492                                 NETDATA.error(100, NETDATA.sparkline_js);
3493                         })
3494                         .always(function() {
3495                                 if(typeof callback === "function")
3496                                         callback();
3497                         });
3498                 }
3499                 else {
3500                         NETDATA.chartLibraries.sparkline.enabled = false;
3501                         if(typeof callback === "function")
3502                                 callback();
3503                 }
3504         };
3505
3506         NETDATA.sparklineChartUpdate = function(state, data) {
3507                 state.sparkline_options.width = state.chartWidth();
3508                 state.sparkline_options.height = state.chartHeight();
3509
3510                 $(state.element_chart).sparkline(data.result, state.sparkline_options);
3511                 return true;
3512         };
3513
3514         NETDATA.sparklineChartCreate = function(state, data) {
3515                 var self = $(state.element);
3516                 var type = self.data('sparkline-type') || 'line';
3517                 var lineColor = self.data('sparkline-linecolor') || state.chartColors()[0];
3518                 var fillColor = self.data('sparkline-fillcolor') || (state.chart.chart_type === 'line')?NETDATA.themes.current.background:NETDATA.colorLuminance(lineColor, NETDATA.chartDefaults.fill_luminance);
3519                 var chartRangeMin = self.data('sparkline-chartrangemin') || undefined;
3520                 var chartRangeMax = self.data('sparkline-chartrangemax') || undefined;
3521                 var composite = self.data('sparkline-composite') || undefined;
3522                 var enableTagOptions = self.data('sparkline-enabletagoptions') || undefined;
3523                 var tagOptionPrefix = self.data('sparkline-tagoptionprefix') || undefined;
3524                 var tagValuesAttribute = self.data('sparkline-tagvaluesattribute') || undefined;
3525                 var disableHiddenCheck = self.data('sparkline-disablehiddencheck') || undefined;
3526                 var defaultPixelsPerValue = self.data('sparkline-defaultpixelspervalue') || undefined;
3527                 var spotColor = self.data('sparkline-spotcolor') || undefined;
3528                 var minSpotColor = self.data('sparkline-minspotcolor') || undefined;
3529                 var maxSpotColor = self.data('sparkline-maxspotcolor') || undefined;
3530                 var spotRadius = self.data('sparkline-spotradius') || undefined;
3531                 var valueSpots = self.data('sparkline-valuespots') || undefined;
3532                 var highlightSpotColor = self.data('sparkline-highlightspotcolor') || undefined;
3533                 var highlightLineColor = self.data('sparkline-highlightlinecolor') || undefined;
3534                 var lineWidth = self.data('sparkline-linewidth') || undefined;
3535                 var normalRangeMin = self.data('sparkline-normalrangemin') || undefined;
3536                 var normalRangeMax = self.data('sparkline-normalrangemax') || undefined;
3537                 var drawNormalOnTop = self.data('sparkline-drawnormalontop') || undefined;
3538                 var xvalues = self.data('sparkline-xvalues') || undefined;
3539                 var chartRangeClip = self.data('sparkline-chartrangeclip') || undefined;
3540                 var chartRangeMinX = self.data('sparkline-chartrangeminx') || undefined;
3541                 var chartRangeMaxX = self.data('sparkline-chartrangemaxx') || undefined;
3542                 var disableInteraction = self.data('sparkline-disableinteraction') || false;
3543                 var disableTooltips = self.data('sparkline-disabletooltips') || false;
3544                 var disableHighlight = self.data('sparkline-disablehighlight') || false;
3545                 var highlightLighten = self.data('sparkline-highlightlighten') || 1.4;
3546                 var highlightColor = self.data('sparkline-highlightcolor') || undefined;
3547                 var tooltipContainer = self.data('sparkline-tooltipcontainer') || undefined;
3548                 var tooltipClassname = self.data('sparkline-tooltipclassname') || undefined;
3549                 var tooltipFormat = self.data('sparkline-tooltipformat') || undefined;
3550                 var tooltipPrefix = self.data('sparkline-tooltipprefix') || undefined;
3551                 var tooltipSuffix = self.data('sparkline-tooltipsuffix') || ' ' + state.units;
3552                 var tooltipSkipNull = self.data('sparkline-tooltipskipnull') || true;
3553                 var tooltipValueLookups = self.data('sparkline-tooltipvaluelookups') || undefined;
3554                 var tooltipFormatFieldlist = self.data('sparkline-tooltipformatfieldlist') || undefined;
3555                 var tooltipFormatFieldlistKey = self.data('sparkline-tooltipformatfieldlistkey') || undefined;
3556                 var numberFormatter = self.data('sparkline-numberformatter') || function(n){ return n.toFixed(2); };
3557                 var numberDigitGroupSep = self.data('sparkline-numberdigitgroupsep') || undefined;
3558                 var numberDecimalMark = self.data('sparkline-numberdecimalmark') || undefined;
3559                 var numberDigitGroupCount = self.data('sparkline-numberdigitgroupcount') || undefined;
3560                 var animatedZooms = self.data('sparkline-animatedzooms') || false;
3561
3562                 if(spotColor === 'disable') spotColor='';
3563                 if(minSpotColor === 'disable') minSpotColor='';
3564                 if(maxSpotColor === 'disable') maxSpotColor='';
3565
3566                 state.sparkline_options = {
3567                         type: type,
3568                         lineColor: lineColor,
3569                         fillColor: fillColor,
3570                         chartRangeMin: chartRangeMin,
3571                         chartRangeMax: chartRangeMax,
3572                         composite: composite,
3573                         enableTagOptions: enableTagOptions,
3574                         tagOptionPrefix: tagOptionPrefix,
3575                         tagValuesAttribute: tagValuesAttribute,
3576                         disableHiddenCheck: disableHiddenCheck,
3577                         defaultPixelsPerValue: defaultPixelsPerValue,
3578                         spotColor: spotColor,
3579                         minSpotColor: minSpotColor,
3580                         maxSpotColor: maxSpotColor,
3581                         spotRadius: spotRadius,
3582                         valueSpots: valueSpots,
3583                         highlightSpotColor: highlightSpotColor,
3584                         highlightLineColor: highlightLineColor,
3585                         lineWidth: lineWidth,
3586                         normalRangeMin: normalRangeMin,
3587                         normalRangeMax: normalRangeMax,
3588                         drawNormalOnTop: drawNormalOnTop,
3589                         xvalues: xvalues,
3590                         chartRangeClip: chartRangeClip,
3591                         chartRangeMinX: chartRangeMinX,
3592                         chartRangeMaxX: chartRangeMaxX,
3593                         disableInteraction: disableInteraction,
3594                         disableTooltips: disableTooltips,
3595                         disableHighlight: disableHighlight,
3596                         highlightLighten: highlightLighten,
3597                         highlightColor: highlightColor,
3598                         tooltipContainer: tooltipContainer,
3599                         tooltipClassname: tooltipClassname,
3600                         tooltipChartTitle: state.title,
3601                         tooltipFormat: tooltipFormat,
3602                         tooltipPrefix: tooltipPrefix,
3603                         tooltipSuffix: tooltipSuffix,
3604                         tooltipSkipNull: tooltipSkipNull,
3605                         tooltipValueLookups: tooltipValueLookups,
3606                         tooltipFormatFieldlist: tooltipFormatFieldlist,
3607                         tooltipFormatFieldlistKey: tooltipFormatFieldlistKey,
3608                         numberFormatter: numberFormatter,
3609                         numberDigitGroupSep: numberDigitGroupSep,
3610                         numberDecimalMark: numberDecimalMark,
3611                         numberDigitGroupCount: numberDigitGroupCount,
3612                         animatedZooms: animatedZooms,
3613                         width: state.chartWidth(),
3614                         height: state.chartHeight()
3615                 };
3616
3617                 $(state.element_chart).sparkline(data.result, state.sparkline_options);
3618                 return true;
3619         };
3620
3621         // ----------------------------------------------------------------------------------------------------------------
3622         // dygraph
3623
3624         NETDATA.dygraph = {
3625                 smooth: false
3626         };
3627
3628         NETDATA.dygraphToolboxPanAndZoom = function(state, after, before) {
3629                 if(after < state.netdata_first)
3630                         after = state.netdata_first;
3631
3632                 if(before > state.netdata_last)
3633                         before = state.netdata_last;
3634
3635                 state.setMode('zoom');
3636                 state.globalSelectionSyncStop();
3637                 state.globalSelectionSyncDelay();
3638                 state.dygraph_user_action = true;
3639                 state.dygraph_force_zoom = true;
3640                 state.updateChartPanOrZoom(after, before);
3641                 NETDATA.globalPanAndZoom.setMaster(state, after, before);
3642         };
3643
3644         NETDATA.dygraphSetSelection = function(state, t) {
3645                 if(typeof state.dygraph_instance !== 'undefined') {
3646                         var r = state.calculateRowForTime(t);
3647                         if(r !== -1)
3648                                 state.dygraph_instance.setSelection(r);
3649                         else {
3650                                 state.dygraph_instance.clearSelection();
3651                                 state.legendShowUndefined();
3652                         }
3653                 }
3654
3655                 return true;
3656         };
3657
3658         NETDATA.dygraphClearSelection = function(state, t) {
3659                 if(typeof state.dygraph_instance !== 'undefined') {
3660                         state.dygraph_instance.clearSelection();
3661                 }
3662                 return true;
3663         };
3664
3665         NETDATA.dygraphSmoothInitialize = function(callback) {
3666                 $.ajax({
3667                         url: NETDATA.dygraph_smooth_js,
3668                         cache: true,
3669                         dataType: "script",
3670                         xhrFields: { withCredentials: true } // required for the cookie
3671                 })
3672                 .done(function() {
3673                         NETDATA.dygraph.smooth = true;
3674                         smoothPlotter.smoothing = 0.3;
3675                 })
3676                 .fail(function() {
3677                         NETDATA.dygraph.smooth = false;
3678                 })
3679                 .always(function() {
3680                         if(typeof callback === "function")
3681                                 callback();
3682                 });
3683         };
3684
3685         NETDATA.dygraphInitialize = function(callback) {
3686                 if(typeof netdataNoDygraphs === 'undefined' || !netdataNoDygraphs) {
3687                         $.ajax({
3688                                 url: NETDATA.dygraph_js,
3689                                 cache: true,
3690                                 dataType: "script",
3691                                 xhrFields: { withCredentials: true } // required for the cookie
3692                         })
3693                         .done(function() {
3694                                 NETDATA.registerChartLibrary('dygraph', NETDATA.dygraph_js);
3695                         })
3696                         .fail(function() {
3697                                 NETDATA.chartLibraries.dygraph.enabled = false;
3698                                 NETDATA.error(100, NETDATA.dygraph_js);
3699                         })
3700                         .always(function() {
3701                                 if(NETDATA.chartLibraries.dygraph.enabled === true && NETDATA.options.current.smooth_plot === true)
3702                                         NETDATA.dygraphSmoothInitialize(callback);
3703                                 else if(typeof callback === "function")
3704                                         callback();
3705                         });
3706                 }
3707                 else {
3708                         NETDATA.chartLibraries.dygraph.enabled = false;
3709                         if(typeof callback === "function")
3710                                 callback();
3711                 }
3712         };
3713
3714         NETDATA.dygraphChartUpdate = function(state, data) {
3715                 var dygraph = state.dygraph_instance;
3716
3717                 if(typeof dygraph === 'undefined')
3718                         return NETDATA.dygraphChartCreate(state, data);
3719
3720                 // when the chart is not visible, and hidden
3721                 // if there is a window resize, dygraph detects
3722                 // its element size as 0x0.
3723                 // this will make it re-appear properly
3724
3725                 if(state.tm.last_unhidden > state.dygraph_last_rendered)
3726                         dygraph.resize();
3727
3728                 var options = {
3729                                 file: data.result.data,
3730                                 colors: state.chartColors(),
3731                                 labels: data.result.labels,
3732                                 labelsDivWidth: state.chartWidth() - 70,
3733                                 visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names)
3734                 };
3735
3736                 if(state.dygraph_force_zoom === true) {
3737                         if(NETDATA.options.debug.dygraph === true || state.debug === true)
3738                                 state.log('dygraphChartUpdate() forced zoom update');
3739
3740                         options.dateWindow = (state.requested_padding !== null)?[ state.view_after, state.view_before ]:null;
3741                         options.valueRange = state.dygraph_options.valueRange;
3742                         options.isZoomedIgnoreProgrammaticZoom = true;
3743                         state.dygraph_force_zoom = false;
3744                 }
3745                 else if(state.current.name !== 'auto') {
3746                         if(NETDATA.options.debug.dygraph === true || state.debug === true)
3747                                 state.log('dygraphChartUpdate() loose update');
3748
3749                         options.valueRange = state.dygraph_options.valueRange;
3750                 }
3751                 else {
3752                         if(NETDATA.options.debug.dygraph === true || state.debug === true)
3753                                 state.log('dygraphChartUpdate() strict update');
3754
3755                         options.dateWindow = (state.requested_padding !== null)?[ state.view_after, state.view_before ]:null;
3756                         options.valueRange = state.dygraph_options.valueRange;
3757                         options.isZoomedIgnoreProgrammaticZoom = true;
3758                 }
3759
3760                 if(state.dygraph_smooth_eligible === true) {
3761                         if((NETDATA.options.current.smooth_plot === true && state.dygraph_options.plotter !== smoothPlotter)
3762                                 || (NETDATA.options.current.smooth_plot === false && state.dygraph_options.plotter === smoothPlotter)) {
3763                                 NETDATA.dygraphChartCreate(state, data);
3764                                 return;
3765                         }
3766                 }
3767
3768                 dygraph.updateOptions(options);
3769
3770                 state.dygraph_last_rendered = new Date().getTime();
3771                 return true;
3772         };
3773
3774         NETDATA.dygraphChartCreate = function(state, data) {
3775                 if(NETDATA.options.debug.dygraph === true || state.debug === true)
3776                         state.log('dygraphChartCreate()');
3777
3778                 var self = $(state.element);
3779
3780                 var chart_type = state.chart.chart_type;
3781                 if(chart_type === 'stacked' && data.dimensions === 1) chart_type = 'area';
3782                 chart_type = self.data('dygraph-type') || chart_type;
3783
3784                 var smooth = (chart_type === 'line' && !NETDATA.chartLibraries.dygraph.isSparkline(state))?true:false;
3785                 smooth = self.data('dygraph-smooth') || smooth;
3786
3787                 if(NETDATA.dygraph.smooth === false)
3788                         smooth = false;
3789
3790                 var strokeWidth = (chart_type === 'stacked')?0.1:((smooth)?1.5:0.7)
3791                 var highlightCircleSize = (NETDATA.chartLibraries.dygraph.isSparkline(state))?3:4;
3792
3793                 state.dygraph_options = {
3794                         colors: self.data('dygraph-colors') || state.chartColors(),
3795
3796                         // leave a few pixels empty on the right of the chart
3797                         rightGap: self.data('dygraph-rightgap') || 5,
3798                         showRangeSelector: self.data('dygraph-showrangeselector') || false,
3799                         showRoller: self.data('dygraph-showroller') || false,
3800
3801                         title: self.data('dygraph-title') || state.title,
3802                         titleHeight: self.data('dygraph-titleheight') || 19,
3803
3804                         legend: self.data('dygraph-legend') || 'always', // 'onmouseover',
3805                         labels: data.result.labels,
3806                         labelsDiv: self.data('dygraph-labelsdiv') || state.element_legend_childs.hidden,
3807                         labelsDivStyles: self.data('dygraph-labelsdivstyles') || { 'fontSize':'1px' },
3808                         labelsDivWidth: self.data('dygraph-labelsdivwidth') || state.chartWidth() - 70,
3809                         labelsSeparateLines: self.data('dygraph-labelsseparatelines') || true,
3810                         labelsShowZeroValues: self.data('dygraph-labelsshowzerovalues') || true,
3811                         labelsKMB: false,
3812                         labelsKMG2: false,
3813                         showLabelsOnHighlight: self.data('dygraph-showlabelsonhighlight') || true,
3814                         hideOverlayOnMouseOut: self.data('dygraph-hideoverlayonmouseout') || true,
3815
3816                         includeZero: self.data('dygraph-includezero') || false,
3817                         xRangePad: self.data('dygraph-xrangepad') || 0,
3818                         yRangePad: self.data('dygraph-yrangepad') || 1,
3819
3820                         valueRange: self.data('dygraph-valuerange') || null,
3821
3822                         ylabel: state.units,
3823                         yLabelWidth: self.data('dygraph-ylabelwidth') || 12,
3824
3825                         // the function to plot the chart
3826                         plotter: null,
3827
3828                         // The width of the lines connecting data points. This can be used to increase the contrast or some graphs.
3829                         strokeWidth: self.data('dygraph-strokewidth') || strokeWidth,
3830                         strokePattern: self.data('dygraph-strokepattern') || undefined,
3831
3832                         // The size of the dot to draw on each point in pixels (see drawPoints). A dot is always drawn when a point is "isolated",
3833                         // i.e. there is a missing point on either side of it. This also controls the size of those dots.
3834                         drawPoints: self.data('dygraph-drawpoints') || false,
3835
3836                         // Draw points at the edges of gaps in the data. This improves visibility of small data segments or other data irregularities.
3837                         drawGapEdgePoints: self.data('dygraph-drawgapedgepoints') || true,
3838
3839                         connectSeparatedPoints: self.data('dygraph-connectseparatedpoints') || false,
3840                         pointSize: self.data('dygraph-pointsize') || 1,
3841
3842                         // enabling this makes the chart with little square lines
3843                         stepPlot: self.data('dygraph-stepplot') || false,
3844
3845                         // Draw a border around graph lines to make crossing lines more easily distinguishable. Useful for graphs with many lines.
3846                         strokeBorderColor: self.data('dygraph-strokebordercolor') || NETDATA.themes.current.background,
3847                         strokeBorderWidth: self.data('dygraph-strokeborderwidth') || (chart_type === 'stacked')?0.0:0.0,
3848
3849                         fillGraph: self.data('dygraph-fillgraph') || (chart_type === 'area' || chart_type === 'stacked')?true:false,
3850                         fillAlpha: self.data('dygraph-fillalpha') || (chart_type === 'stacked')?NETDATA.options.current.color_fill_opacity_stacked:NETDATA.options.current.color_fill_opacity_area,
3851                         stackedGraph: self.data('dygraph-stackedgraph') || (chart_type === 'stacked')?true:false,
3852                         stackedGraphNaNFill: self.data('dygraph-stackedgraphnanfill') || 'none',
3853
3854                         drawAxis: self.data('dygraph-drawaxis') || true,
3855                         axisLabelFontSize: self.data('dygraph-axislabelfontsize') || 10,
3856                         axisLineColor: self.data('dygraph-axislinecolor') || NETDATA.themes.current.axis,
3857                         axisLineWidth: self.data('dygraph-axislinewidth') || 0.3,
3858
3859                         drawGrid: self.data('dygraph-drawgrid') || true,
3860                         drawXGrid: self.data('dygraph-drawxgrid') || undefined,
3861                         drawYGrid: self.data('dygraph-drawygrid') || undefined,
3862                         gridLinePattern: self.data('dygraph-gridlinepattern') || null,
3863                         gridLineWidth: self.data('dygraph-gridlinewidth') || 0.3,
3864                         gridLineColor: self.data('dygraph-gridlinecolor') || NETDATA.themes.current.grid,
3865
3866                         maxNumberWidth: self.data('dygraph-maxnumberwidth') || 8,
3867                         sigFigs: self.data('dygraph-sigfigs') || null,
3868                         digitsAfterDecimal: self.data('dygraph-digitsafterdecimal') || 2,
3869                         valueFormatter: self.data('dygraph-valueformatter') || function(x){ return x.toFixed(2); },
3870
3871                         highlightCircleSize: self.data('dygraph-highlightcirclesize') || highlightCircleSize,
3872                         highlightSeriesOpts: self.data('dygraph-highlightseriesopts') || null, // TOO SLOW: { strokeWidth: 1.5 },
3873                         highlightSeriesBackgroundAlpha: self.data('dygraph-highlightseriesbackgroundalpha') || null, // TOO SLOW: (chart_type === 'stacked')?0.7:0.5,
3874
3875                         pointClickCallback: self.data('dygraph-pointclickcallback') || undefined,
3876                         visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names),
3877                         axes: {
3878                                 x: {
3879                                         pixelsPerLabel: 50,
3880                                         ticker: Dygraph.dateTicker,
3881                                         axisLabelFormatter: function (d, gran) {
3882                                                 return NETDATA.zeropad(d.getHours()) + ":" + NETDATA.zeropad(d.getMinutes()) + ":" + NETDATA.zeropad(d.getSeconds());
3883                                         },
3884                                         valueFormatter: function (ms) {
3885                                                 var d = new Date(ms);
3886                                                 return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
3887                                                 // return NETDATA.zeropad(d.getHours()) + ":" + NETDATA.zeropad(d.getMinutes()) + ":" + NETDATA.zeropad(d.getSeconds());
3888                                         }
3889                                 },
3890                                 y: {
3891                                         pixelsPerLabel: 15,
3892                                         valueFormatter: function (x) {
3893                                                 // we format legends with the state object
3894                                                 // no need to do anything here
3895                                                 // return (Math.round(x*100) / 100).toLocaleString();
3896                                                 // return state.legendFormatValue(x);
3897                                                 return x;
3898                                         }
3899                                 }
3900                         },
3901                         legendFormatter: function(data) {
3902                                 var elements = state.element_legend_childs;
3903
3904                                 // if the hidden div is not there
3905                                 // we are not managing the legend
3906                                 if(elements.hidden === null) return;
3907
3908                                 if (typeof data.x !== 'undefined') {
3909                                         state.legendSetDate(data.x);
3910                                         var i = data.series.length;
3911                                         while(i--) {
3912                                                 var series = data.series[i];
3913                                                 if(!series.isVisible) continue;
3914                                                 state.legendSetLabelValue(series.label, series.y);
3915                                         }
3916                                 }
3917
3918                                 return '';
3919                         },
3920                         drawCallback: function(dygraph, is_initial) {
3921                                 if(state.current.name !== 'auto' && state.dygraph_user_action === true) {
3922                                         state.dygraph_user_action = false;
3923
3924                                         var x_range = dygraph.xAxisRange();
3925                                         var after = Math.round(x_range[0]);
3926                                         var before = Math.round(x_range[1]);
3927
3928                                         if(NETDATA.options.debug.dygraph === true)
3929                                                 state.log('dygraphDrawCallback(dygraph, ' + is_initial + '): ' + (after / 1000).toString() + ' - ' + (before / 1000).toString());
3930
3931                                         if(before <= state.netdata_last && after >= state.netdata_first)
3932                                                 state.updateChartPanOrZoom(after, before);
3933                                 }
3934                         },
3935                         zoomCallback: function(minDate, maxDate, yRanges) {
3936                                 if(NETDATA.options.debug.dygraph === true)
3937                                         state.log('dygraphZoomCallback()');
3938
3939                                 state.globalSelectionSyncStop();
3940                                 state.globalSelectionSyncDelay();
3941                                 state.setMode('zoom');
3942
3943                                 // refresh it to the greatest possible zoom level
3944                                 state.dygraph_user_action = true;
3945                                 state.dygraph_force_zoom = true;
3946                                 state.updateChartPanOrZoom(minDate, maxDate);
3947                         },
3948                         highlightCallback: function(event, x, points, row, seriesName) {
3949                                 if(NETDATA.options.debug.dygraph === true || state.debug === true)
3950                                         state.log('dygraphHighlightCallback()');
3951
3952                                 state.pauseChart();
3953
3954                                 // there is a bug in dygraph when the chart is zoomed enough
3955                                 // the time it thinks is selected is wrong
3956                                 // here we calculate the time t based on the row number selected
3957                                 // which is ok
3958                                 var t = state.data_after + row * state.data_update_every;
3959                                 // console.log('row = ' + row + ', x = ' + x + ', t = ' + t + ' ' + ((t === x)?'SAME':(Math.abs(x-t)<=state.data_update_every)?'SIMILAR':'DIFFERENT') + ', rows in db: ' + state.data_points + ' visible(x) = ' + state.timeIsVisible(x) + ' visible(t) = ' + state.timeIsVisible(t) + ' r(x) = ' + state.calculateRowForTime(x) + ' r(t) = ' + state.calculateRowForTime(t) + ' range: ' + state.data_after + ' - ' + state.data_before + ' real: ' + state.data.after + ' - ' + state.data.before + ' every: ' + state.data_update_every);
3960
3961                                 state.globalSelectionSync(x);
3962
3963                                 // fix legend zIndex using the internal structures of dygraph legend module
3964                                 // this works, but it is a hack!
3965                                 // state.dygraph_instance.plugins_[0].plugin.legend_div_.style.zIndex = 10000;
3966                         },
3967                         unhighlightCallback: function(event) {
3968                                 if(NETDATA.options.debug.dygraph === true || state.debug === true)
3969                                         state.log('dygraphUnhighlightCallback()');
3970
3971                                 state.unpauseChart();
3972                                 state.globalSelectionSyncStop();
3973                         },
3974                         interactionModel : {
3975                                 mousedown: function(event, dygraph, context) {
3976                                         if(NETDATA.options.debug.dygraph === true || state.debug === true)
3977                                                 state.log('interactionModel.mousedown()');
3978
3979                                         state.dygraph_user_action = true;
3980                                         state.globalSelectionSyncStop();
3981
3982                                         if(NETDATA.options.debug.dygraph === true)
3983                                                 state.log('dygraphMouseDown()');
3984
3985                                         // Right-click should not initiate a zoom.
3986                                         if(event.button && event.button === 2) return;
3987
3988                                         context.initializeMouseDown(event, dygraph, context);
3989
3990                                         if(event.button && event.button === 1) {
3991                                                 if (event.altKey || event.shiftKey) {
3992                                                         state.setMode('pan');
3993                                                         state.globalSelectionSyncDelay();
3994                                                         Dygraph.startPan(event, dygraph, context);
3995                                                 }
3996                                                 else {
3997                                                         state.setMode('zoom');
3998                                                         state.globalSelectionSyncDelay();
3999                                                         Dygraph.startZoom(event, dygraph, context);
4000                                                 }
4001                                         }
4002                                         else {
4003                                                 if (event.altKey || event.shiftKey) {
4004                                                         state.setMode('zoom');
4005                                                         state.globalSelectionSyncDelay();
4006                                                         Dygraph.startZoom(event, dygraph, context);
4007                                                 }
4008                                                 else {
4009                                                         state.setMode('pan');
4010                                                         state.globalSelectionSyncDelay();
4011                                                         Dygraph.startPan(event, dygraph, context);
4012                                                 }
4013                                         }
4014                                 },
4015                                 mousemove: function(event, dygraph, context) {
4016                                         if(NETDATA.options.debug.dygraph === true || state.debug === true)
4017                                                 state.log('interactionModel.mousemove()');
4018
4019                                         if(context.isPanning) {
4020                                                 state.dygraph_user_action = true;
4021                                                 state.globalSelectionSyncStop();
4022                                                 state.globalSelectionSyncDelay();
4023                                                 state.setMode('pan');
4024                                                 Dygraph.movePan(event, dygraph, context);
4025                                         }
4026                                         else if(context.isZooming) {
4027                                                 state.dygraph_user_action = true;
4028                                                 state.globalSelectionSyncStop();
4029                                                 state.globalSelectionSyncDelay();
4030                                                 state.setMode('zoom');
4031                                                 Dygraph.moveZoom(event, dygraph, context);
4032                                         }
4033                                 },
4034                                 mouseup: function(event, dygraph, context) {
4035                                         if(NETDATA.options.debug.dygraph === true || state.debug === true)
4036                                                 state.log('interactionModel.mouseup()');
4037
4038                                         if (context.isPanning) {
4039                                                 state.dygraph_user_action = true;
4040                                                 state.globalSelectionSyncDelay();
4041                                                 Dygraph.endPan(event, dygraph, context);
4042                                         }
4043                                         else if (context.isZooming) {
4044                                                 state.dygraph_user_action = true;
4045                                                 state.globalSelectionSyncDelay();
4046                                                 Dygraph.endZoom(event, dygraph, context);
4047                                         }
4048                                 },
4049                                 click: function(event, dygraph, context) {
4050                                         if(NETDATA.options.debug.dygraph === true || state.debug === true)
4051                                                 state.log('interactionModel.click()');
4052
4053                                         event.preventDefault();
4054                                 },
4055                                 dblclick: function(event, dygraph, context) {
4056                                         if(NETDATA.options.debug.dygraph === true || state.debug === true)
4057                                                 state.log('interactionModel.dblclick()');
4058                                         NETDATA.resetAllCharts(state);
4059                                 },
4060                                 mousewheel: function(event, dygraph, context) {
4061                                         if(NETDATA.options.debug.dygraph === true || state.debug === true)
4062                                                 state.log('interactionModel.mousewheel()');
4063
4064                                         // Take the offset of a mouse event on the dygraph canvas and
4065                                         // convert it to a pair of percentages from the bottom left.
4066                                         // (Not top left, bottom is where the lower value is.)
4067                                         function offsetToPercentage(g, offsetX, offsetY) {
4068                                                 // This is calculating the pixel offset of the leftmost date.
4069                                                 var xOffset = g.toDomCoords(g.xAxisRange()[0], null)[0];
4070                                                 var yar0 = g.yAxisRange(0);
4071
4072                                                 // This is calculating the pixel of the higest value. (Top pixel)
4073                                                 var yOffset = g.toDomCoords(null, yar0[1])[1];
4074
4075                                                 // x y w and h are relative to the corner of the drawing area,
4076                                                 // so that the upper corner of the drawing area is (0, 0).
4077                                                 var x = offsetX - xOffset;
4078                                                 var y = offsetY - yOffset;
4079
4080                                                 // This is computing the rightmost pixel, effectively defining the
4081                                                 // width.
4082                                                 var w = g.toDomCoords(g.xAxisRange()[1], null)[0] - xOffset;
4083
4084                                                 // This is computing the lowest pixel, effectively defining the height.
4085                                                 var h = g.toDomCoords(null, yar0[0])[1] - yOffset;
4086
4087                                                 // Percentage from the left.
4088                                                 var xPct = w === 0 ? 0 : (x / w);
4089                                                 // Percentage from the top.
4090                                                 var yPct = h === 0 ? 0 : (y / h);
4091
4092                                                 // The (1-) part below changes it from "% distance down from the top"
4093                                                 // to "% distance up from the bottom".
4094                                                 return [xPct, (1-yPct)];
4095                                         }
4096
4097                                         // Adjusts [x, y] toward each other by zoomInPercentage%
4098                                         // Split it so the left/bottom axis gets xBias/yBias of that change and
4099                                         // tight/top gets (1-xBias)/(1-yBias) of that change.
4100                                         //
4101                                         // If a bias is missing it splits it down the middle.
4102                                         function zoomRange(g, zoomInPercentage, xBias, yBias) {
4103                                                 xBias = xBias || 0.5;
4104                                                 yBias = yBias || 0.5;
4105
4106                                                 function adjustAxis(axis, zoomInPercentage, bias) {
4107                                                         var delta = axis[1] - axis[0];
4108                                                         var increment = delta * zoomInPercentage;
4109                                                         var foo = [increment * bias, increment * (1-bias)];
4110
4111                                                         return [ axis[0] + foo[0], axis[1] - foo[1] ];
4112                                                 }
4113
4114                                                 var yAxes = g.yAxisRanges();
4115                                                 var newYAxes = [];
4116                                                 for (var i = 0; i < yAxes.length; i++) {
4117                                                         newYAxes[i] = adjustAxis(yAxes[i], zoomInPercentage, yBias);
4118                                                 }
4119
4120                                                 return adjustAxis(g.xAxisRange(), zoomInPercentage, xBias);
4121                                         }
4122
4123                                         if(event.altKey || event.shiftKey) {
4124                                                 state.dygraph_user_action = true;
4125
4126                                                 state.globalSelectionSyncStop();
4127                                                 state.globalSelectionSyncDelay();
4128
4129                                                 // http://dygraphs.com/gallery/interaction-api.js
4130                                                 var normal = (event.detail) ? event.detail * -1 : event.wheelDelta / 40;
4131                                                 var percentage = normal / 50;
4132
4133                                                 if (!(event.offsetX && event.offsetY)){
4134                                                         event.offsetX = event.layerX - event.target.offsetLeft;
4135                                                         event.offsetY = event.layerY - event.target.offsetTop;
4136                                                 }
4137
4138                                                 var percentages = offsetToPercentage(dygraph, event.offsetX, event.offsetY);
4139                                                 var xPct = percentages[0];
4140                                                 var yPct = percentages[1];
4141
4142                                                 var new_x_range = zoomRange(dygraph, percentage, xPct, yPct);
4143
4144                                                 var after = new_x_range[0];
4145                                                 var before = new_x_range[1];
4146
4147                                                 var first = state.netdata_first + state.data_update_every;
4148                                                 var last = state.netdata_last + state.data_update_every;
4149
4150                                                 if(before > last) {
4151                                                         after -= (before - last);
4152                                                         before = last;
4153                                                 }
4154                                                 if(after < first) {
4155                                                         after = first;
4156                                                 }
4157
4158                                                 state.setMode('zoom');
4159                                                 if(state.updateChartPanOrZoom(after, before) === true)
4160                                                         dygraph.updateOptions({ dateWindow: [ after, before ] });
4161
4162                                                 event.preventDefault();
4163                                         }
4164                                 },
4165                                 touchstart: function(event, dygraph, context) {
4166                                         if(NETDATA.options.debug.dygraph === true || state.debug === true)
4167                                                 state.log('interactionModel.touchstart()');
4168
4169                                         state.dygraph_user_action = true;
4170                                         state.setMode('zoom');
4171                                         state.pauseChart();
4172
4173                                         Dygraph.defaultInteractionModel.touchstart(event, dygraph, context);
4174
4175                                         // we overwrite the touch directions at the end, to overwrite
4176                                         // the internal default of dygraphs
4177                                         context.touchDirections = { x: true, y: false };
4178
4179                                         state.dygraph_last_touch_start = new Date().getTime();
4180                                         state.dygraph_last_touch_move = 0;
4181
4182                                         if(typeof event.touches[0].pageX === 'number')
4183                                                 state.dygraph_last_touch_page_x = event.touches[0].pageX;
4184                                         else
4185                                                 state.dygraph_last_touch_page_x = 0;
4186                                 },
4187                                 touchmove: function(event, dygraph, context) {
4188                                         if(NETDATA.options.debug.dygraph === true || state.debug === true)
4189                                                 state.log('interactionModel.touchmove()');
4190
4191                                         state.dygraph_user_action = true;
4192                                         Dygraph.defaultInteractionModel.touchmove(event, dygraph, context);
4193
4194                                         state.dygraph_last_touch_move = new Date().getTime();
4195                                 },
4196                                 touchend: function(event, dygraph, context) {
4197                                         if(NETDATA.options.debug.dygraph === true || state.debug === true)
4198                                                 state.log('interactionModel.touchend()');
4199
4200                                         state.dygraph_user_action = true;
4201                                         Dygraph.defaultInteractionModel.touchend(event, dygraph, context);
4202
4203                                         // if it didn't move, it is a selection
4204                                         if(state.dygraph_last_touch_move === 0 && state.dygraph_last_touch_page_x !== 0) {
4205                                                 // internal api of dygraphs
4206                                                 var pct = (state.dygraph_last_touch_page_x - (dygraph.plotter_.area.x + state.element.getBoundingClientRect().left)) / dygraph.plotter_.area.w;
4207                                                 var t = Math.round(state.data_after + (state.data_before - state.data_after) * pct);
4208                                                 if(NETDATA.dygraphSetSelection(state, t) === true)
4209                                                         state.globalSelectionSync(t);
4210                                         }
4211
4212                                         // if it was double tap within double click time, reset the charts
4213                                         var now = new Date().getTime();
4214                                         if(typeof state.dygraph_last_touch_end !== 'undefined') {
4215                                                 if(state.dygraph_last_touch_move === 0) {
4216                                                         var dt = now - state.dygraph_last_touch_end;
4217                                                         if(dt <= NETDATA.options.current.double_click_speed)
4218                                                                 NETDATA.resetAllCharts(state);
4219                                                 }
4220                                         }
4221
4222                                         // remember the timestamp of the last touch end
4223                                         state.dygraph_last_touch_end = now;
4224                                 }
4225                         }
4226                 };
4227
4228                 if(NETDATA.chartLibraries.dygraph.isSparkline(state)) {
4229                         state.dygraph_options.drawGrid = false;
4230                         state.dygraph_options.drawAxis = false;
4231                         state.dygraph_options.title = undefined;
4232                         state.dygraph_options.units = undefined;
4233                         state.dygraph_options.ylabel = undefined;
4234                         state.dygraph_options.yLabelWidth = 0;
4235                         state.dygraph_options.labelsDivWidth = 120;
4236                         state.dygraph_options.labelsDivStyles.width = '120px';
4237                         state.dygraph_options.labelsSeparateLines = true;
4238                         state.dygraph_options.rightGap = 0;
4239                         state.dygraph_options.yRangePad = 1;
4240                 }
4241
4242                 if(smooth === true) {
4243                         state.dygraph_smooth_eligible = true;
4244
4245                         if(NETDATA.options.current.smooth_plot === true)
4246                                 state.dygraph_options.plotter = smoothPlotter;
4247                 }
4248                 else state.dygraph_smooth_eligible = false;
4249
4250                 state.dygraph_instance = new Dygraph(state.element_chart,
4251                         data.result.data, state.dygraph_options);
4252
4253                 state.dygraph_force_zoom = false;
4254                 state.dygraph_user_action = false;
4255                 state.dygraph_last_rendered = new Date().getTime();
4256                 return true;
4257         };
4258
4259         // ----------------------------------------------------------------------------------------------------------------
4260         // morris
4261
4262         NETDATA.morrisInitialize = function(callback) {
4263                 if(typeof netdataNoMorris === 'undefined' || !netdataNoMorris) {
4264
4265                         // morris requires raphael
4266                         if(!NETDATA.chartLibraries.raphael.initialized) {
4267                                 if(NETDATA.chartLibraries.raphael.enabled) {
4268                                         NETDATA.raphaelInitialize(function() {
4269                                                 NETDATA.morrisInitialize(callback);
4270                                         });
4271                                 }
4272                                 else {
4273                                         NETDATA.chartLibraries.morris.enabled = false;
4274                                         if(typeof callback === "function")
4275                                                 callback();
4276                                 }
4277                         }
4278                         else {
4279                                 NETDATA._loadCSS(NETDATA.morris_css);
4280
4281                                 $.ajax({
4282                                         url: NETDATA.morris_js,
4283                                         cache: true,
4284                                         dataType: "script",
4285                                         xhrFields: { withCredentials: true } // required for the cookie
4286                                 })
4287                                 .done(function() {
4288                                         NETDATA.registerChartLibrary('morris', NETDATA.morris_js);
4289                                 })
4290                                 .fail(function() {
4291                                         NETDATA.chartLibraries.morris.enabled = false;
4292                                         NETDATA.error(100, NETDATA.morris_js);
4293                                 })
4294                                 .always(function() {
4295                                         if(typeof callback === "function")
4296                                                 callback();
4297                                 });
4298                         }
4299                 }
4300                 else {
4301                         NETDATA.chartLibraries.morris.enabled = false;
4302                         if(typeof callback === "function")
4303                                 callback();
4304                 }
4305         };
4306
4307         NETDATA.morrisChartUpdate = function(state, data) {
4308                 state.morris_instance.setData(data.result.data);
4309                 return true;
4310         };
4311
4312         NETDATA.morrisChartCreate = function(state, data) {
4313
4314                 state.morris_options = {
4315                                 element: state.element_chart.id,
4316                                 data: data.result.data,
4317                                 xkey: 'time',
4318                                 ykeys: data.dimension_names,
4319                                 labels: data.dimension_names,
4320                                 lineWidth: 2,
4321                                 pointSize: 3,
4322                                 smooth: true,
4323                                 hideHover: 'auto',
4324                                 parseTime: true,
4325                                 continuousLine: false,
4326                                 behaveLikeLine: false
4327                 };
4328
4329                 if(state.chart.chart_type === 'line')
4330                         state.morris_instance = new Morris.Line(state.morris_options);
4331
4332                 else if(state.chart.chart_type === 'area') {
4333                         state.morris_options.behaveLikeLine = true;
4334                         state.morris_instance = new Morris.Area(state.morris_options);
4335                 }
4336                 else // stacked
4337                         state.morris_instance = new Morris.Area(state.morris_options);
4338
4339                 return true;
4340         };
4341
4342         // ----------------------------------------------------------------------------------------------------------------
4343         // raphael
4344
4345         NETDATA.raphaelInitialize = function(callback) {
4346                 if(typeof netdataStopRaphael === 'undefined' || !netdataStopRaphael) {
4347                         $.ajax({
4348                                 url: NETDATA.raphael_js,
4349                                 cache: true,
4350                                 dataType: "script",
4351                                 xhrFields: { withCredentials: true } // required for the cookie
4352                         })
4353                         .done(function() {
4354                                 NETDATA.registerChartLibrary('raphael', NETDATA.raphael_js);
4355                         })
4356                         .fail(function() {
4357                                 NETDATA.chartLibraries.raphael.enabled = false;
4358                                 NETDATA.error(100, NETDATA.raphael_js);
4359                         })
4360                         .always(function() {
4361                                 if(typeof callback === "function")
4362                                         callback();
4363                         });
4364                 }
4365                 else {
4366                         NETDATA.chartLibraries.raphael.enabled = false;
4367                         if(typeof callback === "function")
4368                                 callback();
4369                 }
4370         };
4371
4372         NETDATA.raphaelChartUpdate = function(state, data) {
4373                 $(state.element_chart).raphael(data.result, {
4374                         width: state.chartWidth(),
4375                         height: state.chartHeight()
4376                 });
4377
4378                 return false;
4379         };
4380
4381         NETDATA.raphaelChartCreate = function(state, data) {
4382                 $(state.element_chart).raphael(data.result, {
4383                         width: state.chartWidth(),
4384                         height: state.chartHeight()
4385                 });
4386
4387                 return false;
4388         };
4389
4390         // ----------------------------------------------------------------------------------------------------------------
4391         // C3
4392
4393         NETDATA.c3Initialize = function(callback) {
4394                 if(typeof netdataNoC3 === 'undefined' || !netdataNoC3) {
4395
4396                         // C3 requires D3
4397                         if(!NETDATA.chartLibraries.d3.initialized) {
4398                                 if(NETDATA.chartLibraries.d3.enabled) {
4399                                         NETDATA.d3Initialize(function() {
4400                                                 NETDATA.c3Initialize(callback);
4401                                         });
4402                                 }
4403                                 else {
4404                                         NETDATA.chartLibraries.c3.enabled = false;
4405                                         if(typeof callback === "function")
4406                                                 callback();
4407                                 }
4408                         }
4409                         else {
4410                                 NETDATA._loadCSS(NETDATA.c3_css);
4411
4412                                 $.ajax({
4413                                         url: NETDATA.c3_js,
4414                                         cache: true,
4415                                         dataType: "script",
4416                                         xhrFields: { withCredentials: true } // required for the cookie
4417                                 })
4418                                 .done(function() {
4419                                         NETDATA.registerChartLibrary('c3', NETDATA.c3_js);
4420                                 })
4421                                 .fail(function() {
4422                                         NETDATA.chartLibraries.c3.enabled = false;
4423                                         NETDATA.error(100, NETDATA.c3_js);
4424                                 })
4425                                 .always(function() {
4426                                         if(typeof callback === "function")
4427                                                 callback();
4428                                 });
4429                         }
4430                 }
4431                 else {
4432                         NETDATA.chartLibraries.c3.enabled = false;
4433                         if(typeof callback === "function")
4434                                 callback();
4435                 }
4436         };
4437
4438         NETDATA.c3ChartUpdate = function(state, data) {
4439                 state.c3_instance.destroy();
4440                 return NETDATA.c3ChartCreate(state, data);
4441
4442                 //state.c3_instance.load({
4443                 //      rows: data.result,
4444                 //      unload: true
4445                 //});
4446
4447                 //return true;
4448         };
4449
4450         NETDATA.c3ChartCreate = function(state, data) {
4451
4452                 state.element_chart.id = 'c3-' + state.uuid;
4453                 // console.log('id = ' + state.element_chart.id);
4454
4455                 state.c3_instance = c3.generate({
4456                         bindto: '#' + state.element_chart.id,
4457                         size: {
4458                                 width: state.chartWidth(),
4459                                 height: state.chartHeight()
4460                         },
4461                         color: {
4462                                 pattern: state.chartColors()
4463                         },
4464                         data: {
4465                                 x: 'time',
4466                                 rows: data.result,
4467                                 type: (state.chart.chart_type === 'line')?'spline':'area-spline'
4468                         },
4469                         axis: {
4470                                 x: {
4471                                         type: 'timeseries',
4472                                         tick: {
4473                                                 format: function(x) {
4474                                                         return NETDATA.zeropad(x.getHours()) + ":" + NETDATA.zeropad(x.getMinutes()) + ":" + NETDATA.zeropad(x.getSeconds());
4475                                                 }
4476                                         }
4477                                 }
4478                         },
4479                         grid: {
4480                                 x: {
4481                                         show: true
4482                                 },
4483                                 y: {
4484                                         show: true
4485                                 }
4486                         },
4487                         point: {
4488                                 show: false
4489                         },
4490                         line: {
4491                                 connectNull: false
4492                         },
4493                         transition: {
4494                                 duration: 0
4495                         },
4496                         interaction: {
4497                                 enabled: true
4498                         }
4499                 });
4500
4501                 // console.log(state.c3_instance);
4502
4503                 return true;
4504         };
4505
4506         // ----------------------------------------------------------------------------------------------------------------
4507         // D3
4508
4509         NETDATA.d3Initialize = function(callback) {
4510                 if(typeof netdataStopD3 === 'undefined' || !netdataStopD3) {
4511                         $.ajax({
4512                                 url: NETDATA.d3_js,
4513                                 cache: true,
4514                                 dataType: "script",
4515                                 xhrFields: { withCredentials: true } // required for the cookie
4516                         })
4517                         .done(function() {
4518                                 NETDATA.registerChartLibrary('d3', NETDATA.d3_js);
4519                         })
4520                         .fail(function() {
4521                                 NETDATA.chartLibraries.d3.enabled = false;
4522                                 NETDATA.error(100, NETDATA.d3_js);
4523                         })
4524                         .always(function() {
4525                                 if(typeof callback === "function")
4526                                         callback();
4527                         });
4528                 }
4529                 else {
4530                         NETDATA.chartLibraries.d3.enabled = false;
4531                         if(typeof callback === "function")
4532                                 callback();
4533                 }
4534         };
4535
4536         NETDATA.d3ChartUpdate = function(state, data) {
4537                 return false;
4538         };
4539
4540         NETDATA.d3ChartCreate = function(state, data) {
4541                 return false;
4542         };
4543
4544         // ----------------------------------------------------------------------------------------------------------------
4545         // google charts
4546
4547         NETDATA.googleInitialize = function(callback) {
4548                 if(typeof netdataNoGoogleCharts === 'undefined' || !netdataNoGoogleCharts) {
4549                         $.ajax({
4550                                 url: NETDATA.google_js,
4551                                 cache: true,
4552                                 dataType: "script",
4553                                 xhrFields: { withCredentials: true } // required for the cookie
4554                         })
4555                         .done(function() {
4556                                 NETDATA.registerChartLibrary('google', NETDATA.google_js);
4557                                 google.load('visualization', '1.1', {
4558                                         'packages': ['corechart', 'controls'],
4559                                         'callback': callback
4560                                 });
4561                         })
4562                         .fail(function() {
4563                                 NETDATA.chartLibraries.google.enabled = false;
4564                                 NETDATA.error(100, NETDATA.google_js);
4565                                 if(typeof callback === "function")
4566                                         callback();
4567                         });
4568                 }
4569                 else {
4570                         NETDATA.chartLibraries.google.enabled = false;
4571                         if(typeof callback === "function")
4572                                 callback();
4573                 }
4574         };
4575
4576         NETDATA.googleChartUpdate = function(state, data) {
4577                 var datatable = new google.visualization.DataTable(data.result);
4578                 state.google_instance.draw(datatable, state.google_options);
4579                 return true;
4580         };
4581
4582         NETDATA.googleChartCreate = function(state, data) {
4583                 var datatable = new google.visualization.DataTable(data.result);
4584
4585                 state.google_options = {
4586                         colors: state.chartColors(),
4587
4588                         // do not set width, height - the chart resizes itself
4589                         //width: state.chartWidth(),
4590                         //height: state.chartHeight(),
4591                         lineWidth: 1,
4592                         title: state.title,
4593                         fontSize: 11,
4594                         hAxis: {
4595                         //      title: "Time of Day",
4596                         //      format:'HH:mm:ss',
4597                                 viewWindowMode: 'maximized',
4598                                 slantedText: false,
4599                                 format:'HH:mm:ss',
4600                                 textStyle: {
4601                                         fontSize: 9
4602                                 },
4603                                 gridlines: {
4604                                         color: '#EEE'
4605                                 }
4606                         },
4607                         vAxis: {
4608                                 title: state.units,
4609                                 viewWindowMode: 'pretty',
4610                                 minValue: -0.1,
4611                                 maxValue: 0.1,
4612                                 direction: 1,
4613                                 textStyle: {
4614                                         fontSize: 9
4615                                 },
4616                                 gridlines: {
4617                                         color: '#EEE'
4618                                 }
4619                         },
4620                         chartArea: {
4621                                 width: '65%',
4622                                 height: '80%'
4623                         },
4624                         focusTarget: 'category',
4625                         annotation: {
4626                                 '1': {
4627                                         style: 'line'
4628                                 }
4629                         },
4630                         pointsVisible: 0,
4631                         titlePosition: 'out',
4632                         titleTextStyle: {
4633                                 fontSize: 11
4634                         },
4635                         tooltip: {
4636                                 isHtml: false,
4637                                 ignoreBounds: true,
4638                                 textStyle: {
4639                                         fontSize: 9
4640                                 }
4641                         },
4642                         curveType: 'function',
4643                         areaOpacity: 0.3,
4644                         isStacked: false
4645                 };
4646
4647                 switch(state.chart.chart_type) {
4648                         case "area":
4649                                 state.google_options.vAxis.viewWindowMode = 'maximized';
4650                                 state.google_options.areaOpacity = NETDATA.options.current.color_fill_opacity_area;
4651                                 state.google_instance = new google.visualization.AreaChart(state.element_chart);
4652                                 break;
4653
4654                         case "stacked":
4655                                 state.google_options.isStacked = true;
4656                                 state.google_options.areaOpacity = NETDATA.options.current.color_fill_opacity_stacked;
4657                                 state.google_options.vAxis.viewWindowMode = 'maximized';
4658                                 state.google_options.vAxis.minValue = null;
4659                                 state.google_options.vAxis.maxValue = null;
4660                                 state.google_instance = new google.visualization.AreaChart(state.element_chart);
4661                                 break;
4662
4663                         default:
4664                         case "line":
4665                                 state.google_options.lineWidth = 2;
4666                                 state.google_instance = new google.visualization.LineChart(state.element_chart);
4667                                 break;
4668                 }
4669
4670                 state.google_instance.draw(datatable, state.google_options);
4671                 return true;
4672         };
4673
4674         // ----------------------------------------------------------------------------------------------------------------
4675
4676         NETDATA.percentFromValueMax = function(value, max) {
4677                 if(value === null) value = 0;
4678                 if(max < value) max = value;
4679
4680                 var pcent = 0;
4681                 if(max !== 0) {
4682                         pcent = Math.round(value * 100 / max);
4683                         if(pcent === 0 && value > 0) pcent = 1;
4684                 }
4685
4686                 return pcent;
4687         };
4688
4689         // ----------------------------------------------------------------------------------------------------------------
4690         // easy-pie-chart
4691
4692         NETDATA.easypiechartInitialize = function(callback) {
4693                 if(typeof netdataNoEasyPieChart === 'undefined' || !netdataNoEasyPieChart) {
4694                         $.ajax({
4695                                 url: NETDATA.easypiechart_js,
4696                                 cache: true,
4697                                 dataType: "script",
4698                                 xhrFields: { withCredentials: true } // required for the cookie
4699                         })
4700                                 .done(function() {
4701                                         NETDATA.registerChartLibrary('easypiechart', NETDATA.easypiechart_js);
4702                                 })
4703                                 .fail(function() {
4704                                         NETDATA.chartLibraries.easypiechart.enabled = false;
4705                                         NETDATA.error(100, NETDATA.easypiechart_js);
4706                                 })
4707                                 .always(function() {
4708                                         if(typeof callback === "function")
4709                                                 callback();
4710                                 })
4711                 }
4712                 else {
4713                         NETDATA.chartLibraries.easypiechart.enabled = false;
4714                         if(typeof callback === "function")
4715                                 callback();
4716                 }
4717         };
4718
4719         NETDATA.easypiechartClearSelection = function(state) {
4720                 if(typeof state.easyPieChartEvent !== 'undefined') {
4721                         if(state.easyPieChartEvent.timer !== null)
4722                                 clearTimeout(state.easyPieChartEvent.timer);
4723
4724                         state.easyPieChartEvent.timer = null;
4725                 }
4726
4727                 if(state.isAutoRefreshable() === true && state.data !== null) {
4728                         NETDATA.easypiechartChartUpdate(state, state.data);
4729                 }
4730                 else {
4731                         state.easyPieChartLabel.innerHTML = state.legendFormatValue(null);
4732                         state.easyPieChart_instance.update(0);
4733                 }
4734                 state.easyPieChart_instance.enableAnimation();
4735
4736                 return true;
4737         };
4738
4739         NETDATA.easypiechartSetSelection = function(state, t) {
4740                 if(state.timeIsVisible(t) !== true)
4741                         return NETDATA.easypiechartClearSelection(state);
4742
4743                 var slot = state.calculateRowForTime(t);
4744                 if(slot < 0 || slot >= state.data.result.length)
4745                         return NETDATA.easypiechartClearSelection(state);
4746
4747                 if(typeof state.easyPieChartEvent === 'undefined') {
4748                         state.easyPieChartEvent = {
4749                                 timer: null,
4750                                 value: 0,
4751                                 pcent: 0
4752                         };
4753                 }
4754
4755                 var value = state.data.result[state.data.result.length - 1 - slot];
4756                 var max = (state.easyPieChartMax === null)?state.data.max:state.easyPieChartMax;
4757                 var pcent = NETDATA.percentFromValueMax(value, max);
4758
4759                 state.easyPieChartEvent.value = value;
4760                 state.easyPieChartEvent.pcent = pcent;
4761                 state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
4762
4763                 if(state.easyPieChartEvent.timer === null) {
4764                         state.easyPieChart_instance.disableAnimation();
4765
4766                         state.easyPieChartEvent.timer = setTimeout(function() {
4767                                 state.easyPieChartEvent.timer = null;
4768                                 state.easyPieChart_instance.update(state.easyPieChartEvent.pcent);
4769                         }, NETDATA.options.current.charts_selection_animation_delay);
4770                 }
4771
4772                 return true;
4773         };
4774
4775         NETDATA.easypiechartChartUpdate = function(state, data) {
4776                 var value, max, pcent;
4777
4778                 if(NETDATA.globalPanAndZoom.isActive() === true || state.isAutoRefreshable() === false) {
4779                         value = null;
4780                         max = 0;
4781                         pcent = 0;
4782                 }
4783                 else {
4784                         value = data.result[0];
4785                         max = (state.easyPieChartMax === null)?data.max:state.easyPieChartMax;
4786                         pcent = NETDATA.percentFromValueMax(value, max);
4787                 }
4788
4789                 state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
4790                 state.easyPieChart_instance.update(pcent);
4791                 return true;
4792         };
4793
4794         NETDATA.easypiechartChartCreate = function(state, data) {
4795                 var self = $(state.element);
4796                 var chart = $(state.element_chart);
4797
4798                 var value = data.result[0];
4799                 var max = self.data('easypiechart-max-value') || null;
4800                 var adjust = self.data('easypiechart-adjust') || null;
4801
4802                 if(max === null) {
4803                         max = data.max;
4804                         state.easyPieChartMax = null;
4805                 }
4806                 else
4807                         state.easyPieChartMax = max;
4808
4809                 var pcent = NETDATA.percentFromValueMax(value, max);
4810
4811                 chart.data('data-percent', pcent);
4812
4813                 var size;
4814                 switch(adjust) {
4815                         case 'width': size = state.chartHeight(); break;
4816                         case 'min': size = Math.min(state.chartWidth(), state.chartHeight()); break;
4817                         case 'max': size = Math.max(state.chartWidth(), state.chartHeight()); break;
4818                         case 'height':
4819                         default: size = state.chartWidth(); break;
4820                 }
4821                 state.element.style.width = size + 'px';
4822                 state.element.style.height = size + 'px';
4823
4824                 var stroke = Math.floor(size / 22);
4825                 if(stroke < 3) stroke = 2;
4826
4827                 var valuefontsize = Math.floor((size * 2 / 3) / 5);
4828                 var valuetop = Math.round((size - valuefontsize - (size / 40)) / 2);
4829                 state.easyPieChartLabel = document.createElement('span');
4830                 state.easyPieChartLabel.className = 'easyPieChartLabel';
4831                 state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
4832                 state.easyPieChartLabel.style.fontSize = valuefontsize + 'px';
4833                 state.easyPieChartLabel.style.top = valuetop.toString() + 'px';
4834                 state.element_chart.appendChild(state.easyPieChartLabel);
4835
4836                 var titlefontsize = Math.round(valuefontsize * 1.6 / 3);
4837                 var titletop = Math.round(valuetop - (titlefontsize * 2) - (size / 40));
4838                 state.easyPieChartTitle = document.createElement('span');
4839                 state.easyPieChartTitle.className = 'easyPieChartTitle';
4840                 state.easyPieChartTitle.innerHTML = state.title;
4841                 state.easyPieChartTitle.style.fontSize = titlefontsize + 'px';
4842                 state.easyPieChartTitle.style.lineHeight = titlefontsize + 'px';
4843                 state.easyPieChartTitle.style.top = titletop.toString() + 'px';
4844                 state.element_chart.appendChild(state.easyPieChartTitle);
4845
4846                 var unitfontsize = Math.round(titlefontsize * 0.9);
4847                 var unittop = Math.round(valuetop + (valuefontsize + unitfontsize) + (size / 40));
4848                 state.easyPieChartUnits = document.createElement('span');
4849                 state.easyPieChartUnits.className = 'easyPieChartUnits';
4850                 state.easyPieChartUnits.innerHTML = state.units;
4851                 state.easyPieChartUnits.style.fontSize = unitfontsize + 'px';
4852                 state.easyPieChartUnits.style.top = unittop.toString() + 'px';
4853                 state.element_chart.appendChild(state.easyPieChartUnits);
4854
4855                 chart.easyPieChart({
4856                         barColor: self.data('easypiechart-barcolor') || state.chartColors()[0], //'#ef1e25',
4857                         trackColor: self.data('easypiechart-trackcolor') || NETDATA.themes.current.easypiechart_track,
4858                         scaleColor: self.data('easypiechart-scalecolor') || NETDATA.themes.current.easypiechart_scale,
4859                         scaleLength: self.data('easypiechart-scalelength') || 5,
4860                         lineCap: self.data('easypiechart-linecap') || 'round',
4861                         lineWidth: self.data('easypiechart-linewidth') || stroke,
4862                         trackWidth: self.data('easypiechart-trackwidth') || undefined,
4863                         size: self.data('easypiechart-size') || size,
4864                         rotate: self.data('easypiechart-rotate') || 0,
4865                         animate: self.data('easypiechart-rotate') || {duration: 500, enabled: true},
4866                         easing: self.data('easypiechart-easing') || undefined
4867                 });
4868
4869                 // when we just re-create the chart
4870                 // do not animate the first update
4871                 var animate = true;
4872                 if(typeof state.easyPieChart_instance !== 'undefined')
4873                         animate = false;
4874
4875                 state.easyPieChart_instance = chart.data('easyPieChart');
4876                 if(animate === false) state.easyPieChart_instance.disableAnimation();
4877                 state.easyPieChart_instance.update(pcent);
4878                 if(animate === false) state.easyPieChart_instance.enableAnimation();
4879                 return true;
4880         };
4881
4882         // ----------------------------------------------------------------------------------------------------------------
4883         // gauge.js
4884
4885         NETDATA.gaugeInitialize = function(callback) {
4886                 if(typeof netdataNoGauge === 'undefined' || !netdataNoGauge) {
4887                         $.ajax({
4888                                 url: NETDATA.gauge_js,
4889                                 cache: true,
4890                                 dataType: "script",
4891                                 xhrFields: { withCredentials: true } // required for the cookie
4892                         })
4893                                 .done(function() {
4894                                         NETDATA.registerChartLibrary('gauge', NETDATA.gauge_js);
4895                                 })
4896                                 .fail(function() {
4897                                         NETDATA.chartLibraries.gauge.enabled = false;
4898                                         NETDATA.error(100, NETDATA.gauge_js);
4899                                 })
4900                                 .always(function() {
4901                                         if(typeof callback === "function")
4902                                                 callback();
4903                                 })
4904                 }
4905                 else {
4906                         NETDATA.chartLibraries.gauge.enabled = false;
4907                         if(typeof callback === "function")
4908                                 callback();
4909                 }
4910         };
4911
4912         NETDATA.gaugeAnimation = function(state, status) {
4913                 var speed = 32;
4914
4915                 if(typeof status === 'boolean' && status === false)
4916                         speed = 1000000000;
4917                 else if(typeof status === 'number')
4918                         speed = status;
4919
4920                 state.gauge_instance.animationSpeed = speed;
4921                 state.___gaugeOld__.speed = speed;
4922         };
4923
4924         NETDATA.gaugeSet = function(state, value, min, max) {
4925                 if(typeof value !== 'number') value = 0;
4926                 if(typeof min !== 'number') min = 0;
4927                 if(typeof max !== 'number') max = 0;
4928                 if(value > max) max = value;
4929                 if(value < min) min = value;
4930                 if(min > max) {
4931                         var t = min;
4932                         min = max;
4933                         max = t;
4934                 }
4935                 else if(min == max)
4936                         max = min + 1;
4937
4938                 // gauge.js has an issue if the needle
4939                 // is smaller than min or larger than max
4940                 // when we set the new values
4941                 // the needle will go crazy
4942
4943                 // to prevent it, we always feed it
4944                 // with a percentage, so that the needle
4945                 // is always between min and max
4946                 var pcent = (value - min) * 100 / (max - min);
4947
4948                 // these should never happen
4949                 if(pcent < 0) pcent = 0;
4950                 if(pcent > 100) pcent = 100;
4951
4952                 state.gauge_instance.set(pcent);
4953
4954                 state.___gaugeOld__.value = value;
4955                 state.___gaugeOld__.min = min;
4956                 state.___gaugeOld__.max = max;
4957         };
4958
4959         NETDATA.gaugeSetLabels = function(state, value, min, max) {
4960                 if(state.___gaugeOld__.valueLabel !== value) {
4961                         state.___gaugeOld__.valueLabel = value;
4962                         state.gaugeChartLabel.innerHTML = state.legendFormatValue(value);
4963                 }
4964                 if(state.___gaugeOld__.minLabel !== min) {
4965                         state.___gaugeOld__.minLabel = min;
4966                         state.gaugeChartMin.innerHTML = state.legendFormatValue(min);
4967                 }
4968                 if(state.___gaugeOld__.maxLabel !== max) {
4969                         state.___gaugeOld__.maxLabel = max;
4970                         state.gaugeChartMax.innerHTML = state.legendFormatValue(max);
4971                 }
4972         };
4973
4974         NETDATA.gaugeClearSelection = function(state) {
4975                 if(typeof state.gaugeEvent !== 'undefined') {
4976                         if(state.gaugeEvent.timer !== null)
4977                                 clearTimeout(state.gaugeEvent.timer);
4978
4979                         state.gaugeEvent.timer = null;
4980                 }
4981
4982                 if(state.isAutoRefreshable() === true && state.data !== null) {
4983                         NETDATA.gaugeChartUpdate(state, state.data);
4984                 }
4985                 else {
4986                         NETDATA.gaugeAnimation(state, false);
4987                         NETDATA.gaugeSet(state, null, null, null);
4988                         NETDATA.gaugeSetLabels(state, null, null, null);
4989                 }
4990
4991                 NETDATA.gaugeAnimation(state, true);
4992                 return true;
4993         };
4994
4995         NETDATA.gaugeSetSelection = function(state, t) {
4996                 if(state.timeIsVisible(t) !== true)
4997                         return NETDATA.gaugeClearSelection(state);
4998
4999                 var slot = state.calculateRowForTime(t);
5000                 if(slot < 0 || slot >= state.data.result.length)
5001                         return NETDATA.gaugeClearSelection(state);
5002
5003                 if(typeof state.gaugeEvent === 'undefined') {
5004                         state.gaugeEvent = {
5005                                 timer: null,
5006                                 value: 0,
5007                                 min: 0,
5008                                 max: 0
5009                         };
5010                 }
5011
5012                 var value = state.data.result[state.data.result.length - 1 - slot];
5013                 var max = (state.gaugeMax === null)?state.data.max:state.gaugeMax;
5014                 var min = 0;
5015
5016                 state.gaugeEvent.value = value;
5017                 state.gaugeEvent.max = max;
5018                 state.gaugeEvent.min = min;
5019                 NETDATA.gaugeSetLabels(state, value, min, max);
5020
5021                 if(state.gaugeEvent.timer === null) {
5022                         NETDATA.gaugeAnimation(state, false);
5023
5024                         state.gaugeEvent.timer = setTimeout(function() {
5025                                 state.gaugeEvent.timer = null;
5026                                 NETDATA.gaugeSet(state, state.gaugeEvent.value, state.gaugeEvent.min, state.gaugeEvent.max);
5027                         }, NETDATA.options.current.charts_selection_animation_delay);
5028                 }
5029
5030                 return true;
5031         };
5032
5033         NETDATA.gaugeChartUpdate = function(state, data) {
5034                 var value, min, max;
5035
5036                 if(NETDATA.globalPanAndZoom.isActive() === true || state.isAutoRefreshable() === false) {
5037                         value = 0;
5038                         min = 0;
5039                         max = 1;
5040                         NETDATA.gaugeSetLabels(state, null, null, null);
5041                 }
5042                 else {
5043                         value = data.result[0];
5044                         min = 0;
5045                         max = (state.gaugeMax === null)?data.max:state.gaugeMax;
5046                         if(value > max) max = value;
5047                         NETDATA.gaugeSetLabels(state, value, min, max);
5048                 }
5049
5050                 NETDATA.gaugeSet(state, value, min, max);
5051                 return true;
5052         };
5053
5054         NETDATA.gaugeChartCreate = function(state, data) {
5055                 var self = $(state.element);
5056                 // var chart = $(state.element_chart);
5057
5058                 var value = data.result[0];
5059                 var max = self.data('gauge-max-value') || null;
5060                 var adjust = self.data('gauge-adjust') || null;
5061                 var pointerColor = self.data('gauge-pointer-color') || NETDATA.themes.current.gauge_pointer;
5062                 var strokeColor = self.data('gauge-stroke-color') || NETDATA.themes.current.gauge_stroke;
5063                 var startColor = self.data('gauge-start-color') || state.chartColors()[0];
5064                 var stopColor = self.data('gauge-stop-color') || void 0;
5065                 var generateGradient = self.data('gauge-generate-gradient') || false;
5066
5067                 if(max === null) {
5068                         max = data.max;
5069                         state.gaugeMax = null;
5070                 }
5071                 else
5072                         state.gaugeMax = max;
5073
5074                 var width = state.chartWidth(), height = state.chartHeight(); //, ratio = 1.5;
5075                 //switch(adjust) {
5076                 //      case 'width': width = height * ratio; break;
5077                 //      case 'height':
5078                 //      default: height = width / ratio; break;
5079                 //}
5080                 //state.element.style.width = width.toString() + 'px';
5081                 //state.element.style.height = height.toString() + 'px';
5082
5083                 var lum_d = 0.05;
5084
5085                 var options = {
5086                         lines: 12,                                      // The number of lines to draw
5087                         angle: 0.15,                            // The length of each line
5088                         lineWidth: 0.44,                        // 0.44 The line thickness
5089                         pointer: {
5090                                 length: 0.8,                    // 0.9 The radius of the inner circle
5091                                 strokeWidth: 0.035,             // The rotation offset
5092                                 color: pointerColor             // Fill color
5093                         },
5094                         colorStart: startColor,         // Colors
5095                         colorStop: stopColor,           // just experiment with them
5096                         strokeColor: strokeColor,       // to see which ones work best for you
5097                         limitMax: true,
5098                         generateGradient: (generateGradient === true)?true:false,
5099                         gradientType: 0
5100                 };
5101
5102                 if (generateGradient.constructor === Array) {
5103                         // example options:
5104                         // data-gauge-generate-gradient="[0, 50, 100]"
5105                         // data-gauge-gradient-percent-color-0="#FFFFFF"
5106                         // data-gauge-gradient-percent-color-50="#999900"
5107                         // data-gauge-gradient-percent-color-100="#000000"
5108
5109                         options.percentColors = new Array();
5110                         var len = generateGradient.length;
5111                         while(len--) {
5112                                 var pcent = generateGradient[len];
5113                                 var color = self.data('gauge-gradient-percent-color-' + pcent.toString()) || false;
5114                                 if(color !== false) {
5115                                         var a = new Array();
5116                                         a[0] = pcent / 100;
5117                                         a[1] = color;
5118                                         options.percentColors.unshift(a);
5119                                 }
5120                         }
5121                         if(options.percentColors.length === 0)
5122                                 delete options.percentColors;
5123                 }
5124                 else if(generateGradient === false && NETDATA.themes.current.gauge_gradient === true) {
5125                         options.percentColors = [
5126                                 [0.0, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 0))],
5127                                 [0.1, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 1))],
5128                                 [0.2, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 2))],
5129                                 [0.3, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 3))],
5130                                 [0.4, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 4))],
5131                                 [0.5, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 5))],
5132                                 [0.6, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 6))],
5133                                 [0.7, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 7))],
5134                                 [0.8, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 8))],
5135                                 [0.9, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 9))],
5136                                 [1.0, NETDATA.colorLuminance(startColor, 0.0)]];
5137                 }
5138
5139                 state.gauge_canvas = document.createElement('canvas');
5140                 state.gauge_canvas.id = 'gauge-' + state.uuid + '-canvas';
5141                 state.gauge_canvas.className = 'gaugeChart';
5142                 state.gauge_canvas.width  = width;
5143                 state.gauge_canvas.height = height;
5144                 state.element_chart.appendChild(state.gauge_canvas);
5145
5146                 var valuefontsize = Math.floor(height / 6);
5147                 var valuetop = Math.round((height - valuefontsize - (height / 6)) / 2);
5148                 state.gaugeChartLabel = document.createElement('span');
5149                 state.gaugeChartLabel.className = 'gaugeChartLabel';
5150                 state.gaugeChartLabel.style.fontSize = valuefontsize + 'px';
5151                 state.gaugeChartLabel.style.top = valuetop.toString() + 'px';
5152                 state.element_chart.appendChild(state.gaugeChartLabel);
5153
5154                 var titlefontsize = Math.round(valuefontsize / 2);
5155                 var titletop = 0;
5156                 state.gaugeChartTitle = document.createElement('span');
5157                 state.gaugeChartTitle.className = 'gaugeChartTitle';
5158                 state.gaugeChartTitle.innerHTML = state.title;
5159                 state.gaugeChartTitle.style.fontSize = titlefontsize + 'px';
5160                 state.gaugeChartTitle.style.lineHeight = titlefontsize + 'px';
5161                 state.gaugeChartTitle.style.top = titletop.toString() + 'px';
5162                 state.element_chart.appendChild(state.gaugeChartTitle);
5163
5164                 var unitfontsize = Math.round(titlefontsize * 0.9);
5165                 state.gaugeChartUnits = document.createElement('span');
5166                 state.gaugeChartUnits.className = 'gaugeChartUnits';
5167                 state.gaugeChartUnits.innerHTML = state.units;
5168                 state.gaugeChartUnits.style.fontSize = unitfontsize + 'px';
5169                 state.element_chart.appendChild(state.gaugeChartUnits);
5170
5171                 state.gaugeChartMin = document.createElement('span');
5172                 state.gaugeChartMin.className = 'gaugeChartMin';
5173                 state.gaugeChartMin.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px';
5174                 state.element_chart.appendChild(state.gaugeChartMin);
5175
5176                 state.gaugeChartMax = document.createElement('span');
5177                 state.gaugeChartMax.className = 'gaugeChartMax';
5178                 state.gaugeChartMax.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px';
5179                 state.element_chart.appendChild(state.gaugeChartMax);
5180
5181                 // when we just re-create the chart
5182                 // do not animate the first update
5183                 var animate = true;
5184                 if(typeof state.gauge_instance !== 'undefined')
5185                         animate = false;
5186
5187                 state.gauge_instance = new Gauge(state.gauge_canvas).setOptions(options); // create sexy gauge!
5188
5189                 state.___gaugeOld__ = {
5190                         value: value,
5191                         min: 0,
5192                         max: max,
5193                         valueLabel: null,
5194                         minLabel: null,
5195                         maxLabel: null
5196                 };
5197
5198                 // we will always feed a percentage
5199                 state.gauge_instance.minValue = 0;
5200                 state.gauge_instance.maxValue = 100;
5201
5202                 NETDATA.gaugeAnimation(state, animate);
5203                 NETDATA.gaugeSet(state, value, 0, max);
5204                 NETDATA.gaugeSetLabels(state, value, 0, max);
5205                 NETDATA.gaugeAnimation(state, true);
5206                 return true;
5207         };
5208
5209         // ----------------------------------------------------------------------------------------------------------------
5210         // Charts Libraries Registration
5211
5212         NETDATA.chartLibraries = {
5213                 "dygraph": {
5214                         initialize: NETDATA.dygraphInitialize,
5215                         create: NETDATA.dygraphChartCreate,
5216                         update: NETDATA.dygraphChartUpdate,
5217                         resize: function(state) {
5218                                 if(typeof state.dygraph_instance.resize === 'function')
5219                                         state.dygraph_instance.resize();
5220                         },
5221                         setSelection: NETDATA.dygraphSetSelection,
5222                         clearSelection:  NETDATA.dygraphClearSelection,
5223                         toolboxPanAndZoom: NETDATA.dygraphToolboxPanAndZoom,
5224                         initialized: false,
5225                         enabled: true,
5226                         format: function(state) { return 'json'; },
5227                         options: function(state) { return 'ms|flip'; },
5228                         legend: function(state) {
5229                                 if(this.isSparkline(state) === false)
5230                                         return 'right-side';
5231                                 else
5232                                         return null;
5233                         },
5234                         autoresize: function(state) { return true; },
5235                         max_updates_to_recreate: function(state) { return 5000; },
5236                         track_colors: function(state) { return true; },
5237                         pixels_per_point: function(state) {
5238                                 if(this.isSparkline(state) === false)
5239                                         return 3;
5240                                 else
5241                                         return 2;
5242                         },
5243
5244                         isSparkline: function(state) {
5245                                 if(typeof state.dygraph_sparkline === 'undefined') {
5246                                         var t = $(state.element).data('dygraph-theme');
5247                                         if(t === 'sparkline')
5248                                                 state.dygraph_sparkline = true;
5249                                         else
5250                                                 state.dygraph_sparkline = false;
5251                                 }
5252                                 return state.dygraph_sparkline;
5253                         }
5254                 },
5255                 "sparkline": {
5256                         initialize: NETDATA.sparklineInitialize,
5257                         create: NETDATA.sparklineChartCreate,
5258                         update: NETDATA.sparklineChartUpdate,
5259                         resize: null,
5260                         setSelection: undefined, // function(state, t) { return true; },
5261                         clearSelection: undefined, // function(state) { return true; },
5262                         toolboxPanAndZoom: null,
5263                         initialized: false,
5264                         enabled: true,
5265                         format: function(state) { return 'array'; },
5266                         options: function(state) { return 'flip|abs'; },
5267                         legend: function(state) { return null; },
5268                         autoresize: function(state) { return false; },
5269                         max_updates_to_recreate: function(state) { return 5000; },
5270                         track_colors: function(state) { return false; },
5271                         pixels_per_point: function(state) { return 3; }
5272                 },
5273                 "peity": {
5274                         initialize: NETDATA.peityInitialize,
5275                         create: NETDATA.peityChartCreate,
5276                         update: NETDATA.peityChartUpdate,
5277                         resize: null,
5278                         setSelection: undefined, // function(state, t) { return true; },
5279                         clearSelection: undefined, // function(state) { return true; },
5280                         toolboxPanAndZoom: null,
5281                         initialized: false,
5282                         enabled: true,
5283                         format: function(state) { return 'ssvcomma'; },
5284                         options: function(state) { return 'null2zero|flip|abs'; },
5285                         legend: function(state) { return null; },
5286                         autoresize: function(state) { return false; },
5287                         max_updates_to_recreate: function(state) { return 5000; },
5288                         track_colors: function(state) { return false; },
5289                         pixels_per_point: function(state) { return 3; }
5290                 },
5291                 "morris": {
5292                         initialize: NETDATA.morrisInitialize,
5293                         create: NETDATA.morrisChartCreate,
5294                         update: NETDATA.morrisChartUpdate,
5295                         resize: null,
5296                         setSelection: undefined, // function(state, t) { return true; },
5297                         clearSelection: undefined, // function(state) { return true; },
5298                         toolboxPanAndZoom: null,
5299                         initialized: false,
5300                         enabled: true,
5301                         format: function(state) { return 'json'; },
5302                         options: function(state) { return 'objectrows|ms'; },
5303                         legend: function(state) { return null; },
5304                         autoresize: function(state) { return false; },
5305                         max_updates_to_recreate: function(state) { return 50; },
5306                         track_colors: function(state) { return false; },
5307                         pixels_per_point: function(state) { return 15; }
5308                 },
5309                 "google": {
5310                         initialize: NETDATA.googleInitialize,
5311                         create: NETDATA.googleChartCreate,
5312                         update: NETDATA.googleChartUpdate,
5313                         resize: null,
5314                         setSelection: undefined, //function(state, t) { return true; },
5315                         clearSelection: undefined, //function(state) { return true; },
5316                         toolboxPanAndZoom: null,
5317                         initialized: false,
5318                         enabled: true,
5319                         format: function(state) { return 'datatable'; },
5320                         options: function(state) { return ''; },
5321                         legend: function(state) { return null; },
5322                         autoresize: function(state) { return false; },
5323                         max_updates_to_recreate: function(state) { return 300; },
5324                         track_colors: function(state) { return false; },
5325                         pixels_per_point: function(state) { return 4; }
5326                 },
5327                 "raphael": {
5328                         initialize: NETDATA.raphaelInitialize,
5329                         create: NETDATA.raphaelChartCreate,
5330                         update: NETDATA.raphaelChartUpdate,
5331                         resize: null,
5332                         setSelection: undefined, // function(state, t) { return true; },
5333                         clearSelection: undefined, // function(state) { return true; },
5334                         toolboxPanAndZoom: null,
5335                         initialized: false,
5336                         enabled: true,
5337                         format: function(state) { return 'json'; },
5338                         options: function(state) { return ''; },
5339                         legend: function(state) { return null; },
5340                         autoresize: function(state) { return false; },
5341                         max_updates_to_recreate: function(state) { return 5000; },
5342                         track_colors: function(state) { return false; },
5343                         pixels_per_point: function(state) { return 3; }
5344                 },
5345                 "c3": {
5346                         initialize: NETDATA.c3Initialize,
5347                         create: NETDATA.c3ChartCreate,
5348                         update: NETDATA.c3ChartUpdate,
5349                         resize: null,
5350                         setSelection: undefined, // function(state, t) { return true; },
5351                         clearSelection: undefined, // function(state) { return true; },
5352                         toolboxPanAndZoom: null,
5353                         initialized: false,
5354                         enabled: true,
5355                         format: function(state) { return 'csvjsonarray'; },
5356                         options: function(state) { return 'milliseconds'; },
5357                         legend: function(state) { return null; },
5358                         autoresize: function(state) { return false; },
5359                         max_updates_to_recreate: function(state) { return 5000; },
5360                         track_colors: function(state) { return false; },
5361                         pixels_per_point: function(state) { return 15; }
5362                 },
5363                 "d3": {
5364                         initialize: NETDATA.d3Initialize,
5365                         create: NETDATA.d3ChartCreate,
5366                         update: NETDATA.d3ChartUpdate,
5367                         resize: null,
5368                         setSelection: undefined, // function(state, t) { return true; },
5369                         clearSelection: undefined, // function(state) { return true; },
5370                         toolboxPanAndZoom: null,
5371                         initialized: false,
5372                         enabled: true,
5373                         format: function(state) { return 'json'; },
5374                         options: function(state) { return ''; },
5375                         legend: function(state) { return null; },
5376                         autoresize: function(state) { return false; },
5377                         max_updates_to_recreate: function(state) { return 5000; },
5378                         track_colors: function(state) { return false; },
5379                         pixels_per_point: function(state) { return 3; }
5380                 },
5381                 "easypiechart": {
5382                         initialize: NETDATA.easypiechartInitialize,
5383                         create: NETDATA.easypiechartChartCreate,
5384                         update: NETDATA.easypiechartChartUpdate,
5385                         resize: null,
5386                         setSelection: NETDATA.easypiechartSetSelection,
5387                         clearSelection: NETDATA.easypiechartClearSelection,
5388                         toolboxPanAndZoom: null,
5389                         initialized: false,
5390                         enabled: true,
5391                         format: function(state) { return 'array'; },
5392                         options: function(state) { return 'absolute'; },
5393                         legend: function(state) { return null; },
5394                         autoresize: function(state) { return false; },
5395                         max_updates_to_recreate: function(state) { return 5000; },
5396                         track_colors: function(state) { return true; },
5397                         pixels_per_point: function(state) { return 3; },
5398                         aspect_ratio: 100
5399                 },
5400                 "gauge": {
5401                         initialize: NETDATA.gaugeInitialize,
5402                         create: NETDATA.gaugeChartCreate,
5403                         update: NETDATA.gaugeChartUpdate,
5404                         resize: null,
5405                         setSelection: NETDATA.gaugeSetSelection,
5406                         clearSelection: NETDATA.gaugeClearSelection,
5407                         toolboxPanAndZoom: null,
5408                         initialized: false,
5409                         enabled: true,
5410                         format: function(state) { return 'array'; },
5411                         options: function(state) { return 'absolute'; },
5412                         legend: function(state) { return null; },
5413                         autoresize: function(state) { return false; },
5414                         max_updates_to_recreate: function(state) { return 5000; },
5415                         track_colors: function(state) { return true; },
5416                         pixels_per_point: function(state) { return 3; },
5417                         aspect_ratio: 70
5418                 }
5419         };
5420
5421         NETDATA.registerChartLibrary = function(library, url) {
5422                 if(NETDATA.options.debug.libraries === true)
5423                         console.log("registering chart library: " + library);
5424
5425                 NETDATA.chartLibraries[library].url = url;
5426                 NETDATA.chartLibraries[library].initialized = true;
5427                 NETDATA.chartLibraries[library].enabled = true;
5428         };
5429
5430         // ----------------------------------------------------------------------------------------------------------------
5431         // Load required JS libraries and CSS
5432
5433         NETDATA.requiredJs = [
5434                 {
5435                         url: NETDATA.serverDefault + 'lib/bootstrap.min.js',
5436                         isAlreadyLoaded: function() {
5437                                 // check if bootstrap is loaded
5438                                 if(typeof $().emulateTransitionEnd == 'function')
5439                                         return true;
5440                                 else {
5441                                         if(typeof netdataNoBootstrap !== 'undefined' && netdataNoBootstrap)
5442                                                 return true;
5443                                         else
5444                                                 return false;
5445                                 }
5446                         }
5447                 },
5448                 {
5449                         url: NETDATA.serverDefault + 'lib/jquery.nanoscroller.min.js',
5450                         isAlreadyLoaded: function() { return false; }
5451                 },
5452                 {
5453                         url: NETDATA.serverDefault + 'lib/bootstrap-toggle.min.js',
5454                         isAlreadyLoaded: function() { return false; }
5455                 }
5456         ];
5457
5458         NETDATA.requiredCSS = [
5459                 {
5460                         url: NETDATA.themes.current.bootstrap_css,
5461                         isAlreadyLoaded: function() {
5462                                 if(typeof netdataNoBootstrap !== 'undefined' && netdataNoBootstrap)
5463                                         return true;
5464                                 else
5465                                         return false;
5466                         }
5467                 },
5468                 {
5469                         url: NETDATA.serverDefault + 'css/font-awesome.min.css',
5470                         isAlreadyLoaded: function() { return false; }
5471                 },
5472                 {
5473                         url: NETDATA.themes.current.dashboard_css,
5474                         isAlreadyLoaded: function() { return false; }
5475                 },
5476                 {
5477                         url: NETDATA.serverDefault + 'css/bootstrap-toggle.min.css',
5478                         isAlreadyLoaded: function() { return false; }
5479                 }
5480         ];
5481
5482         NETDATA.loadRequiredJs = function(index, callback) {
5483                 if(index >= NETDATA.requiredJs.length)  {
5484                         if(typeof callback === 'function')
5485                                 callback();
5486                         return;
5487                 }
5488
5489                 if(NETDATA.requiredJs[index].isAlreadyLoaded()) {
5490                         NETDATA.loadRequiredJs(++index, callback);
5491                         return;
5492                 }
5493
5494                 if(NETDATA.options.debug.main_loop === true)
5495                         console.log('loading ' + NETDATA.requiredJs[index].url);
5496
5497                 $.ajax({
5498                         url: NETDATA.requiredJs[index].url,
5499                         cache: true,
5500                         dataType: "script",
5501                         xhrFields: { withCredentials: true } // required for the cookie
5502                 })
5503                 .success(function() {
5504                         if(NETDATA.options.debug.main_loop === true)
5505                                 console.log('loaded ' + NETDATA.requiredJs[index].url);
5506
5507                         NETDATA.loadRequiredJs(++index, callback);
5508                 })
5509                 .fail(function() {
5510                         alert('Cannot load required JS library: ' + NETDATA.requiredJs[index].url);
5511                 })
5512         };
5513
5514         NETDATA.loadRequiredCSS = function(index) {
5515                 if(index >= NETDATA.requiredCSS.length)
5516                         return;
5517
5518                 if(NETDATA.requiredCSS[index].isAlreadyLoaded()) {
5519                         NETDATA.loadRequiredCSS(++index);
5520                         return;
5521                 }
5522
5523                 if(NETDATA.options.debug.main_loop === true)
5524                         console.log('loading ' + NETDATA.requiredCSS[index].url);
5525
5526                 NETDATA._loadCSS(NETDATA.requiredCSS[index].url);
5527                 NETDATA.loadRequiredCSS(++index);
5528         };
5529
5530
5531         // ----------------------------------------------------------------------------------------------------------------
5532         // Registry of netdata hosts
5533
5534         NETDATA.registry = {
5535                 server: null,           // the netdata registry server
5536                 person_guid: null,      // the unique ID of this browser / user
5537                 machine_guid: null,     // the unique ID the netdata server that served dashboard.js
5538                 hostname: null,         // the hostname of the netdata server that served dashboard.js
5539                 machines: null,                 // the user's other URLs
5540                 machines_array: null,   // the user's other URLs in an array
5541                 person_urls: null,
5542
5543                 parsePersonUrls: function(person_urls) {
5544                         // console.log(person_urls);
5545                         NETDATA.registry.person_urls = person_urls;
5546
5547                         if(person_urls) {
5548                                 NETDATA.registry.machines = {};
5549                                 NETDATA.registry.machines_array = new Array();
5550
5551                                 var now = new Date().getTime();
5552                                 var apu = person_urls;
5553                                 var i = apu.length;
5554                                 while(i--) {
5555                                         if(typeof NETDATA.registry.machines[apu[i][0]] === 'undefined') {
5556                                                 // console.log('adding: ' + apu[i][4] + ', ' + ((now - apu[i][2]) / 1000).toString());
5557
5558                                                 var obj = {
5559                                                         guid: apu[i][0],
5560                                                         url: apu[i][1],
5561                                                         last_t: apu[i][2],
5562                                                         accesses: apu[i][3],
5563                                                         name: apu[i][4],
5564                                                         alternate_urls: new Array()
5565                                                 };
5566                                                 obj.alternate_urls.push(apu[i][1]);
5567
5568                                                 NETDATA.registry.machines[apu[i][0]] = obj;
5569                                                 NETDATA.registry.machines_array.push(obj);
5570                                         }
5571                                         else {
5572                                                 // console.log('appending: ' + apu[i][4] + ', ' + ((now - apu[i][2]) / 1000).toString());
5573
5574                                                 var pu = NETDATA.registry.machines[apu[i][0]];
5575                                                 if(pu.last_t < apu[i][2]) {
5576                                                         pu.url = apu[i][1];
5577                                                         pu.last_t = apu[i][2];
5578                                                         pu.name = apu[i][4];
5579                                                 }
5580                                                 pu.accesses += apu[i][3];
5581                                                 pu.alternate_urls.push(apu[i][1]);
5582                                         }
5583                                 }
5584                         }
5585
5586                         if(typeof netdataRegistryCallback === 'function')
5587                                 netdataRegistryCallback(NETDATA.registry.machines_array);
5588                 },
5589
5590                 init: function() {
5591                         if(typeof netdataNoRegistry !== 'undefined' && netdataNoRegistry)
5592                                 return;
5593
5594                         NETDATA.registry.hello(NETDATA.serverDefault, function(data) {
5595                                 if(data) {
5596                                         NETDATA.registry.server = data.registry;
5597                                         NETDATA.registry.machine_guid = data.machine_guid;
5598                                         NETDATA.registry.hostname = data.hostname;
5599
5600                                         NETDATA.registry.access(2, function (person_urls) {
5601                                                 NETDATA.registry.parsePersonUrls(person_urls);
5602
5603                                         });
5604                                 }
5605                         });
5606                 },
5607
5608                 hello: function(host, callback) {
5609                         while(host.slice(-1) === '/')
5610                                 host = host.substring(0, host.length - 1);
5611
5612                         // send HELLO to a netdata server:
5613                         // 1. verifies the server is reachable
5614                         // 2. responds with the registry URL, the machine GUID of this netdata server and its hostname
5615                         $.ajax({
5616                                         url: host + '/api/v1/registry?action=hello',
5617                                         async: true,
5618                                         cache: false,
5619                                         xhrFields: { withCredentials: true } // required for the cookie
5620                                 })
5621                                 .done(function(data) {
5622                                         if(typeof data.status !== 'string' || data.status !== 'ok') {
5623                                                 NETDATA.error(408, host + ' response: ' + JSON.stringify(data));
5624                                                 data = null;
5625                                         }
5626
5627                                         if(typeof callback === 'function')
5628                                                 callback(data);
5629                                 })
5630                                 .fail(function() {
5631                                         NETDATA.error(407, host);
5632
5633                                         if(typeof callback === 'function')
5634                                                 callback(null);
5635                                 });
5636                 },
5637
5638                 access: function(max_redirects, callback) {
5639                         // send ACCESS to a netdata registry:
5640                         // 1. it lets it know we are accessing a netdata server (its machine GUID and its URL)
5641                         // 2. it responds with a list of netdata servers we know
5642                         // the registry identifies us using a cookie it sets the first time we access it
5643                         // the registry may respond with a redirect URL to send us to another registry
5644                         $.ajax({
5645                                         url: NETDATA.registry.server + '/api/v1/registry?action=access&machine=' + NETDATA.registry.machine_guid + '&name=' + encodeURIComponent(NETDATA.registry.hostname) + '&url=' + encodeURIComponent(NETDATA.serverDefault), // + '&visible_url=' + encodeURIComponent(document.location),
5646                                         async: true,
5647                                         cache: false,
5648                                         xhrFields: { withCredentials: true } // required for the cookie
5649                                 })
5650                                 .done(function(data) {
5651                                         var redirect = null;
5652                                         if(typeof data.registry === 'string')
5653                                                 redirect = data.registry;
5654
5655                                         if(typeof data.status !== 'string' || data.status !== 'ok') {
5656                                                 NETDATA.error(409, NETDATA.registry.server + ' responded with: ' + JSON.stringify(data));
5657                                                 data = null;
5658                                         }
5659
5660                                         if(data === null) {
5661                                                 if(redirect !== null && max_redirects > 0) {
5662                                                         NETDATA.registry.server = redirect;
5663                                                         NETDATA.registry.access(max_redirects - 1, callback);
5664                                                 }
5665                                                 else {
5666                                                         if(typeof callback === 'function')
5667                                                                 callback(null);
5668                                                 }
5669                                         }
5670                                         else {
5671                                                 if(typeof data.person_guid === 'string')
5672                                                         NETDATA.registry.person_guid = data.person_guid;
5673
5674                                                 if(typeof callback === 'function')
5675                                                         callback(data.urls);
5676                                         }
5677                                 })
5678                                 .fail(function() {
5679                                         NETDATA.error(410, NETDATA.registry.server);
5680
5681                                         if(typeof callback === 'function')
5682                                                 callback(null);
5683                                 });
5684                 },
5685
5686                 delete: function(delete_url, callback) {
5687                         // send DELETE to a netdata registry:
5688                         $.ajax({
5689                                 url: NETDATA.registry.server + '/api/v1/registry?action=delete&machine=' + NETDATA.registry.machine_guid + '&name=' + encodeURIComponent(NETDATA.registry.hostname) + '&url=' + encodeURIComponent(NETDATA.serverDefault) + '&delete_url=' + encodeURIComponent(delete_url),
5690                                 async: true,
5691                                 cache: false,
5692                                 xhrFields: { withCredentials: true } // required for the cookie
5693                         })
5694                                 .done(function(data) {
5695                                         if(typeof data.status !== 'string' || data.status !== 'ok') {
5696                                                 NETDATA.error(411, NETDATA.registry.server + ' responded with: ' + JSON.stringify(data));
5697                                                 data = null;
5698                                         }
5699
5700                                         if(typeof callback === 'function')
5701                                                 callback(data);
5702                                 })
5703                                 .fail(function() {
5704                                         NETDATA.error(412, NETDATA.registry.server);
5705
5706                                         if(typeof callback === 'function')
5707                                                 callback(null);
5708                                 });
5709                 },
5710
5711                 switch: function(new_person_guid, callback) {
5712                         // impersonate
5713                         $.ajax({
5714                                 url: NETDATA.registry.server + '/api/v1/registry?action=switch&machine=' + NETDATA.registry.machine_guid + '&name=' + encodeURIComponent(NETDATA.registry.hostname) + '&url=' + encodeURIComponent(NETDATA.serverDefault) + '&to=' + new_person_guid,
5715                                 async: true,
5716                                 cache: false,
5717                                 xhrFields: { withCredentials: true } // required for the cookie
5718                         })
5719                                 .done(function(data) {
5720                                         if(typeof data.status !== 'string' || data.status !== 'ok') {
5721                                                 NETDATA.error(413, NETDATA.registry.server + ' responded with: ' + JSON.stringify(data));
5722                                                 data = null;
5723                                         }
5724
5725                                         if(typeof callback === 'function')
5726                                                 callback(data);
5727                                 })
5728                                 .fail(function() {
5729                                         NETDATA.error(414, NETDATA.registry.server);
5730
5731                                         if(typeof callback === 'function')
5732                                                 callback(null);
5733                                 });
5734                 }
5735         };
5736
5737         // ----------------------------------------------------------------------------------------------------------------
5738         // Boot it!
5739
5740         NETDATA.errorReset();
5741         NETDATA.loadRequiredCSS(0);
5742
5743         NETDATA._loadjQuery(function() {
5744                 NETDATA.loadRequiredJs(0, function() {
5745                         if(typeof $().emulateTransitionEnd !== 'function') {
5746                                 // bootstrap is not available
5747                                 NETDATA.options.current.show_help = false;
5748                         }
5749
5750                         if(typeof netdataDontStart === 'undefined' || !netdataDontStart) {
5751                                 if(NETDATA.options.debug.main_loop === true)
5752                                         console.log('starting chart refresh thread');
5753
5754                                 NETDATA.start();
5755                         }
5756                 });
5757         });
5758
5759         // window.NETDATA = NETDATA;
5760 // })(window, document);