Imported Upstream version 1.1.0upstream/1.1.0

49 files changed, 1909 insertions, 246 deletions

diff --git a/web/Makefile.am b/web/Makefile.am
index f762ce373..1b6b918be 100644
--- a/web/Makefile.am
+++ b/web/Makefile.am
@@ -4,73 +4,75 @@
 MAINTAINERCLEANFILES= $(srcdir)/Makefile.in
 
 dist_web_DATA = \
-        robots.txt \
-        index.html \
+	robots.txt \
+	index.html \
 	demo.html \
 	demo2.html \
-        dashboard.html \
-        dashboard.js \
-        dashboard.css \
-        dashboard.slate.css \
+	tv.html \
+	dashboard.html \
+	dashboard.js \
+	dashboard.css \
+	dashboard.slate.css \
 	favicon.ico \
 	netdata-swagger.yaml \
 	netdata-swagger.json \
-        $(NULL)
+	version.txt \
+	$(NULL)
 
 webolddir=$(webdir)/old
 dist_webold_DATA = \
-        old/datasource.html \
-        old/index.html \
-        old/index.js \
-        old/netdata.js \
-        old/theme.css \
-        $(NULL)
+	old/datasource.html \
+	old/index.html \
+	old/index.js \
+	old/netdata.js \
+	old/theme.css \
+	$(NULL)
 
 weblibdir=$(webdir)/lib
 dist_weblib_DATA = \
-        lib/dygraph-combined.js \
-        lib/dygraph-smooth-plotter.js \
-        lib/jquery-1.12.0.min.js \
-        lib/jquery.peity.min.js \
-        lib/jquery.sparkline.min.js \
-        lib/morris.min.js \
-        lib/raphael-min.js \
+	lib/dygraph-combined.js \
+	lib/dygraph-smooth-plotter.js \
+	lib/jquery-1.12.0.min.js \
+	lib/jquery.peity.min.js \
+	lib/jquery.sparkline.min.js \
+	lib/morris.min.js \
+	lib/raphael-min.js \
 	lib/jquery.easypiechart.min.js \
 	lib/jquery.nanoscroller.min.js \
-        lib/bootstrap.min.js \
+	lib/bootstrap.min.js \
 	lib/ElementQueries.js \
 	lib/ResizeSensor.js \
-        lib/bootstrap-toggle.min.js \
-        lib/c3.min.js \
-        lib/d3.min.js \
-        lib/gauge.min.js \
-        $(NULL)
+	lib/bootstrap-toggle.min.js \
+	lib/c3.min.js \
+	lib/d3.min.js \
+	lib/gauge.min.js \
+	$(NULL)
 
 webcssdir=$(webdir)/css
 dist_webcss_DATA = \
-        css/morris.css \
-        css/bootstrap.min.css \
-        css/bootstrap-theme.min.css \
-        css/bootstrap.slate.min.css \
+	css/morris.css \
+	css/bootstrap.min.css \
+	css/bootstrap-theme.min.css \
+	css/bootstrap.slate.min.css \
 	css/font-awesome.min.css \
-        css/bootstrap-toggle.min.css \
-        css/c3.min.css \
-        $(NULL)
+	css/bootstrap-toggle.min.css \
+	css/c3.min.css \
+	$(NULL)
 
 webfontsdir=$(webdir)/fonts
 dist_webfonts_DATA = \
-        fonts/glyphicons-halflings-regular.eot \
-        fonts/glyphicons-halflings-regular.svg \
-        fonts/glyphicons-halflings-regular.ttf \
-        fonts/glyphicons-halflings-regular.woff \
-        fonts/glyphicons-halflings-regular.woff2 \
+	fonts/glyphicons-halflings-regular.eot \
+	fonts/glyphicons-halflings-regular.svg \
+	fonts/glyphicons-halflings-regular.ttf \
+	fonts/glyphicons-halflings-regular.woff \
+	fonts/glyphicons-halflings-regular.woff2 \
 	fonts/FontAwesome.otf \
 	fonts/fontawesome-webfont.eot \
 	fonts/fontawesome-webfont.svg \
 	fonts/fontawesome-webfont.ttf \
 	fonts/fontawesome-webfont.woff \
 	fonts/fontawesome-webfont.woff2 \
-        $(NULL)
+	$(NULL)
 
 webimagesdir=$(webdir)/images
 dist_webimages_DATA = \
@@ -86,6 +88,13 @@ dist_webimages_DATA = \
 	images/seo-performance-512.png \
 	images/seo-performance-multi-size.ico \
 	images/seo-performance-multi-size.icns \
-        $(NULL)
+	$(NULL)
 
+version.txt:
+	if test -d "$(top_srcdir)/.git"; then \
+		git --git-dir="$(top_srcdir)/.git" log -n 1 --format=%H; \
+	fi > $@.tmp
+	test -s $@.tmp || echo 0 > $@.tmp
+	mv $@.tmp $@
 
+.PHONY: version.txt
diff --git a/web/Makefile.in b/web/Makefile.in
new file mode 100644
index 000000000..98d5dcc76
--- /dev/null
+++ b/web/Makefile.in
@@ -0,0 +1,699 @@
+# Makefile.in generated by automake 1.14.1 from Makefile.am.
+# @configure_input@
+
+# Copyright (C) 1994-2013 Free Software Foundation, Inc.
+
+# This Makefile.in is free software; the Free Software Foundation
+# gives unlimited permission to copy and/or distribute it,
+# with or without modifications, as long as this notice is preserved.
+
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY, to the extent permitted by law; without
+# even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+# PARTICULAR PURPOSE.
+
+@SET_MAKE@
+
+VPATH = @srcdir@
+am__is_gnu_make = test -n '$(MAKEFILE_LIST)' && test -n '$(MAKELEVEL)'
+am__make_running_with_option = \
+  case $${target_option-} in \
+      ?) ;; \
+      *) echo "am__make_running_with_option: internal error: invalid" \
+              "target option '$${target_option-}' specified" >&2; \
+         exit 1;; \
+  esac; \
+  has_opt=no; \
+  sane_makeflags=$$MAKEFLAGS; \
+  if $(am__is_gnu_make); then \
+    sane_makeflags=$$MFLAGS; \
+  else \
+    case $$MAKEFLAGS in \
+      *\\[\ \	]*) \
+        bs=\\; \
+        sane_makeflags=`printf '%s\n' "$$MAKEFLAGS" \
+          | sed "s/$$bs$$bs[$$bs $$bs	]*//g"`;; \
+    esac; \
+  fi; \
+  skip_next=no; \
+  strip_trailopt () \
+  { \
+    flg=`printf '%s\n' "$$flg" | sed "s/$$1.*$$//"`; \
+  }; \
+  for flg in $$sane_makeflags; do \
+    test $$skip_next = yes && { skip_next=no; continue; }; \
+    case $$flg in \
+      *=*|--*) continue;; \
+        -*I) strip_trailopt 'I'; skip_next=yes;; \
+      -*I?*) strip_trailopt 'I';; \
+        -*O) strip_trailopt 'O'; skip_next=yes;; \
+      -*O?*) strip_trailopt 'O';; \
+        -*l) strip_trailopt 'l'; skip_next=yes;; \
+      -*l?*) strip_trailopt 'l';; \
+      -[dEDm]) skip_next=yes;; \
+      -[JT]) skip_next=yes;; \
+    esac; \
+    case $$flg in \
+      *$$target_option*) has_opt=yes; break;; \
+    esac; \
+  done; \
+  test $$has_opt = yes
+am__make_dryrun = (target_option=n; $(am__make_running_with_option))
+am__make_keepgoing = (target_option=k; $(am__make_running_with_option))
+pkgdatadir = $(datadir)/@PACKAGE@
+pkgincludedir = $(includedir)/@PACKAGE@
+pkglibdir = $(libdir)/@PACKAGE@
+pkglibexecdir = $(libexecdir)/@PACKAGE@
+am__cd = CDPATH="$${ZSH_VERSION+.}$(PATH_SEPARATOR)" && cd
+install_sh_DATA = $(install_sh) -c -m 644
+install_sh_PROGRAM = $(install_sh) -c
+install_sh_SCRIPT = $(install_sh) -c
+INSTALL_HEADER = $(INSTALL_DATA)
+transform = $(program_transform_name)
+NORMAL_INSTALL = :
+PRE_INSTALL = :
+POST_INSTALL = :
+NORMAL_UNINSTALL = :
+PRE_UNINSTALL = :
+POST_UNINSTALL = :
+build_triplet = @build@
+host_triplet = @host@
+subdir = web
+DIST_COMMON = $(srcdir)/Makefile.in $(srcdir)/Makefile.am \
+	$(dist_web_DATA) $(dist_webcss_DATA) $(dist_webfonts_DATA) \
+	$(dist_webimages_DATA) $(dist_weblib_DATA) $(dist_webold_DATA)
+ACLOCAL_M4 = $(top_srcdir)/aclocal.m4
+am__aclocal_m4_deps = $(top_srcdir)/m4/ax_pthread.m4 \
+	$(top_srcdir)/configure.ac
+am__configure_deps = $(am__aclocal_m4_deps) $(CONFIGURE_DEPENDENCIES) \
+	$(ACLOCAL_M4)
+mkinstalldirs = $(install_sh) -d
+CONFIG_HEADER = $(top_builddir)/config.h
+CONFIG_CLEAN_FILES =
+CONFIG_CLEAN_VPATH_FILES =
+AM_V_P = $(am__v_P_@AM_V@)
+am__v_P_ = $(am__v_P_@AM_DEFAULT_V@)
+am__v_P_0 = false
+am__v_P_1 = :
+AM_V_GEN = $(am__v_GEN_@AM_V@)
+am__v_GEN_ = $(am__v_GEN_@AM_DEFAULT_V@)
+am__v_GEN_0 = @echo "  GEN     " $@;
+am__v_GEN_1 = 
+AM_V_at = $(am__v_at_@AM_V@)
+am__v_at_ = $(am__v_at_@AM_DEFAULT_V@)
+am__v_at_0 = @
+am__v_at_1 = 
+SOURCES =
+DIST_SOURCES =
+am__can_run_installinfo = \
+  case $$AM_UPDATE_INFO_DIR in \
+    n|no|NO) false;; \
+    *) (install-info --version) >/dev/null 2>&1;; \
+  esac
+am__vpath_adj_setup = srcdirstrip=`echo "$(srcdir)" | sed 's|.|.|g'`;
+am__vpath_adj = case $$p in \
+    $(srcdir)/*) f=`echo "$$p" | sed "s|^$$srcdirstrip/||"`;; \
+    *) f=$$p;; \
+  esac;
+am__strip_dir = f=`echo $$p | sed -e 's|^.*/||'`;
+am__install_max = 40
+am__nobase_strip_setup = \
+  srcdirstrip=`echo "$(srcdir)" | sed 's/[].[^$$\\*|]/\\\\&/g'`
+am__nobase_strip = \
+  for p in $$list; do echo "$$p"; done | sed -e "s|$$srcdirstrip/||"
+am__nobase_list = $(am__nobase_strip_setup); \
+  for p in $$list; do echo "$$p $$p"; done | \
+  sed "s| $$srcdirstrip/| |;"' / .*\//!s/ .*/ ./; s,\( .*\)/[^/]*$$,\1,' | \
+  $(AWK) 'BEGIN { files["."] = "" } { files[$$2] = files[$$2] " " $$1; \
+    if (++n[$$2] == $(am__install_max)) \
+      { print $$2, files[$$2]; n[$$2] = 0; files[$$2] = "" } } \
+    END { for (dir in files) print dir, files[dir] }'
+am__base_list = \
+  sed '$$!N;$$!N;$$!N;$$!N;$$!N;$$!N;$$!N;s/\n/ /g' | \
+  sed '$$!N;$$!N;$$!N;$$!N;s/\n/ /g'
+am__uninstall_files_from_dir = { \
+  test -z "$$files" \
+    || { test ! -d "$$dir" && test ! -f "$$dir" && test ! -r "$$dir"; } \
+    || { echo " ( cd '$$dir' && rm -f" $$files ")"; \
+         $(am__cd) "$$dir" && rm -f $$files; }; \
+  }
+am__installdirs = "$(DESTDIR)$(webdir)" "$(DESTDIR)$(webcssdir)" \
+	"$(DESTDIR)$(webfontsdir)" "$(DESTDIR)$(webimagesdir)" \
+	"$(DESTDIR)$(weblibdir)" "$(DESTDIR)$(webolddir)"
+DATA = $(dist_web_DATA) $(dist_webcss_DATA) $(dist_webfonts_DATA) \
+	$(dist_webimages_DATA) $(dist_weblib_DATA) $(dist_webold_DATA)
+am__tagged_files = $(HEADERS) $(SOURCES) $(TAGS_FILES) $(LISP)
+DISTFILES = $(DIST_COMMON) $(DIST_SOURCES) $(TEXINFOS) $(EXTRA_DIST)
+ACLOCAL = @ACLOCAL@
+AMTAR = @AMTAR@
+AM_DEFAULT_VERBOSITY = @AM_DEFAULT_VERBOSITY@
+AUTOCONF = @AUTOCONF@
+AUTOHEADER = @AUTOHEADER@
+AUTOMAKE = @AUTOMAKE@
+AWK = @AWK@
+CC = @CC@
+CCDEPMODE = @CCDEPMODE@
+CFLAGS = @CFLAGS@
+CPP = @CPP@
+CPPFLAGS = @CPPFLAGS@
+CYGPATH_W = @CYGPATH_W@
+DEFS = @DEFS@
+DEPDIR = @DEPDIR@
+ECHO_C = @ECHO_C@
+ECHO_N = @ECHO_N@
+ECHO_T = @ECHO_T@
+EGREP = @EGREP@
+EXEEXT = @EXEEXT@
+GREP = @GREP@
+INSTALL = @INSTALL@
+INSTALL_DATA = @INSTALL_DATA@
+INSTALL_PROGRAM = @INSTALL_PROGRAM@
+INSTALL_SCRIPT = @INSTALL_SCRIPT@
+INSTALL_STRIP_PROGRAM = @INSTALL_STRIP_PROGRAM@
+LDFLAGS = @LDFLAGS@
+LIBMNL_CFLAGS = @LIBMNL_CFLAGS@
+LIBMNL_LIBS = @LIBMNL_LIBS@
+LIBOBJS = @LIBOBJS@
+LIBS = @LIBS@
+LTLIBOBJS = @LTLIBOBJS@
+MAINT = @MAINT@
+MAKEINFO = @MAKEINFO@
+MATH_CFLAGS = @MATH_CFLAGS@
+MATH_LIBS = @MATH_LIBS@
+MKDIR_P = @MKDIR_P@
+NFACCT_CFLAGS = @NFACCT_CFLAGS@
+NFACCT_LIBS = @NFACCT_LIBS@
+OBJEXT = @OBJEXT@
+OPTIONAL_MATH_CLFAGS = @OPTIONAL_MATH_CLFAGS@
+OPTIONAL_MATH_LIBS = @OPTIONAL_MATH_LIBS@
+OPTIONAL_NFACCT_CLFAGS = @OPTIONAL_NFACCT_CLFAGS@
+OPTIONAL_NFACCT_LIBS = @OPTIONAL_NFACCT_LIBS@
+OPTIONAL_ZLIB_CLFAGS = @OPTIONAL_ZLIB_CLFAGS@
+OPTIONAL_ZLIB_LIBS = @OPTIONAL_ZLIB_LIBS@
+PACKAGE = @PACKAGE@
+PACKAGE_BUGREPORT = @PACKAGE_BUGREPORT@
+PACKAGE_NAME = @PACKAGE_NAME@
+PACKAGE_RPM_RELEASE = @PACKAGE_RPM_RELEASE@
+PACKAGE_RPM_VERSION = @PACKAGE_RPM_VERSION@
+PACKAGE_STRING = @PACKAGE_STRING@
+PACKAGE_TARNAME = @PACKAGE_TARNAME@
+PACKAGE_URL = @PACKAGE_URL@
+PACKAGE_VERSION = @PACKAGE_VERSION@
+PATH_SEPARATOR = @PATH_SEPARATOR@
+PKG_CONFIG = @PKG_CONFIG@
+PKG_CONFIG_LIBDIR = @PKG_CONFIG_LIBDIR@
+PKG_CONFIG_PATH = @PKG_CONFIG_PATH@
+PTHREAD_CC = @PTHREAD_CC@
+PTHREAD_CFLAGS = @PTHREAD_CFLAGS@
+PTHREAD_LIBS = @PTHREAD_LIBS@
+SET_MAKE = @SET_MAKE@
+SHELL = @SHELL@
+STRIP = @STRIP@
+VERSION = @VERSION@
+ZLIB_CFLAGS = @ZLIB_CFLAGS@
+ZLIB_LIBS = @ZLIB_LIBS@
+abs_builddir = @abs_builddir@
+abs_srcdir = @abs_srcdir@
+abs_top_builddir = @abs_top_builddir@
+abs_top_srcdir = @abs_top_srcdir@
+ac_ct_CC = @ac_ct_CC@
+am__include = @am__include@
+am__leading_dot = @am__leading_dot@
+am__quote = @am__quote@
+am__tar = @am__tar@
+am__untar = @am__untar@
+ax_pthread_config = @ax_pthread_config@
+bindir = @bindir@
+build = @build@
+build_alias = @build_alias@
+build_cpu = @build_cpu@
+build_os = @build_os@
+build_vendor = @build_vendor@
+builddir = @builddir@
+cachedir = @cachedir@
+chartsdir = @chartsdir@
+configdir = @configdir@
+datadir = @datadir@
+datarootdir = @datarootdir@
+docdir = @docdir@
+dvidir = @dvidir@
+exec_prefix = @exec_prefix@
+host = @host@
+host_alias = @host_alias@
+host_cpu = @host_cpu@
+host_os = @host_os@
+host_vendor = @host_vendor@
+htmldir = @htmldir@
+includedir = @includedir@
+infodir = @infodir@
+install_sh = @install_sh@
+libdir = @libdir@
+libexecdir = @libexecdir@
+localedir = @localedir@
+localstatedir = @localstatedir@
+logdir = @logdir@
+mandir = @mandir@
+mkdir_p = @mkdir_p@
+nodedir = @nodedir@
+oldincludedir = @oldincludedir@
+pdfdir = @pdfdir@
+pluginsdir = @pluginsdir@
+prefix = @prefix@
+program_transform_name = @program_transform_name@
+psdir = @psdir@
+sbindir = @sbindir@
+sharedstatedir = @sharedstatedir@
+srcdir = @srcdir@
+sysconfdir = @sysconfdir@
+target_alias = @target_alias@
+top_build_prefix = @top_build_prefix@
+top_builddir = @top_builddir@
+top_srcdir = @top_srcdir@
+webdir = @webdir@
+
+#
+# Copyright (C) 2015 Alon Bar-Lev <alon.barlev@gmail.com>
+#
+MAINTAINERCLEANFILES = $(srcdir)/Makefile.in
+dist_web_DATA = \
+	robots.txt \
+	index.html \
+	demo.html \
+	demo2.html \
+	tv.html \
+	dashboard.html \
+	dashboard.js \
+	dashboard.css \
+	dashboard.slate.css \
+	favicon.ico \
+	netdata-swagger.yaml \
+	netdata-swagger.json \
+	version.txt \
+	$(NULL)
+
+webolddir = $(webdir)/old
+dist_webold_DATA = \
+	old/datasource.html \
+	old/index.html \
+	old/index.js \
+	old/netdata.js \
+	old/theme.css \
+	$(NULL)
+
+weblibdir = $(webdir)/lib
+dist_weblib_DATA = \
+	lib/dygraph-combined.js \
+	lib/dygraph-smooth-plotter.js \
+	lib/jquery-1.12.0.min.js \
+	lib/jquery.peity.min.js \
+	lib/jquery.sparkline.min.js \
+	lib/morris.min.js \
+	lib/raphael-min.js \
+	lib/jquery.easypiechart.min.js \
+	lib/jquery.nanoscroller.min.js \
+	lib/bootstrap.min.js \
+	lib/ElementQueries.js \
+	lib/ResizeSensor.js \
+	lib/bootstrap-toggle.min.js \
+	lib/c3.min.js \
+	lib/d3.min.js \
+	lib/gauge.min.js \
+	$(NULL)
+
+webcssdir = $(webdir)/css
+dist_webcss_DATA = \
+	css/morris.css \
+	css/bootstrap.min.css \
+	css/bootstrap-theme.min.css \
+	css/bootstrap.slate.min.css \
+	css/font-awesome.min.css \
+	css/bootstrap-toggle.min.css \
+	css/c3.min.css \
+	$(NULL)
+
+webfontsdir = $(webdir)/fonts
+dist_webfonts_DATA = \
+	fonts/glyphicons-halflings-regular.eot \
+	fonts/glyphicons-halflings-regular.svg \
+	fonts/glyphicons-halflings-regular.ttf \
+	fonts/glyphicons-halflings-regular.woff \
+	fonts/glyphicons-halflings-regular.woff2 \
+	fonts/FontAwesome.otf \
+	fonts/fontawesome-webfont.eot \
+	fonts/fontawesome-webfont.svg \
+	fonts/fontawesome-webfont.ttf \
+	fonts/fontawesome-webfont.woff \
+	fonts/fontawesome-webfont.woff2 \
+	$(NULL)
+
+webimagesdir = $(webdir)/images
+dist_webimages_DATA = \
+	images/seo-performance-16.png \
+	images/seo-performance-24.png \
+	images/seo-performance-32.png \
+	images/seo-performance-48.png \
+	images/seo-performance-64.png \
+	images/seo-performance-72.png \
+	images/seo-performance-114.png \
+	images/seo-performance-128.png \
+	images/seo-performance-256.png \
+	images/seo-performance-512.png \
+	images/seo-performance-multi-size.ico \
+	images/seo-performance-multi-size.icns \
+	$(NULL)
+
+all: all-am
+
+.SUFFIXES:
+$(srcdir)/Makefile.in: @MAINTAINER_MODE_TRUE@ $(srcdir)/Makefile.am  $(am__configure_deps)
+	@for dep in $?; do \
+	  case '$(am__configure_deps)' in \
+	    *$$dep*) \
+	      ( cd $(top_builddir) && $(MAKE) $(AM_MAKEFLAGS) am--refresh ) \
+	        && { if test -f $@; then exit 0; else break; fi; }; \
+	      exit 1;; \
+	  esac; \
+	done; \
+	echo ' cd $(top_srcdir) && $(AUTOMAKE) --gnu web/Makefile'; \
+	$(am__cd) $(top_srcdir) && \
+	  $(AUTOMAKE) --gnu web/Makefile
+.PRECIOUS: Makefile
+Makefile: $(srcdir)/Makefile.in $(top_builddir)/config.status
+	@case '$?' in \
+	  *config.status*) \
+	    cd $(top_builddir) && $(MAKE) $(AM_MAKEFLAGS) am--refresh;; \
+	  *) \
+	    echo ' cd $(top_builddir) && $(SHELL) ./config.status $(subdir)/$@ $(am__depfiles_maybe)'; \
+	    cd $(top_builddir) && $(SHELL) ./config.status $(subdir)/$@ $(am__depfiles_maybe);; \
+	esac;
+
+$(top_builddir)/config.status: $(top_srcdir)/configure $(CONFIG_STATUS_DEPENDENCIES)
+	cd $(top_builddir) && $(MAKE) $(AM_MAKEFLAGS) am--refresh
+
+$(top_srcdir)/configure: @MAINTAINER_MODE_TRUE@ $(am__configure_deps)
+	cd $(top_builddir) && $(MAKE) $(AM_MAKEFLAGS) am--refresh
+$(ACLOCAL_M4): @MAINTAINER_MODE_TRUE@ $(am__aclocal_m4_deps)
+	cd $(top_builddir) && $(MAKE) $(AM_MAKEFLAGS) am--refresh
+$(am__aclocal_m4_deps):
+install-dist_webDATA: $(dist_web_DATA)
+	@$(NORMAL_INSTALL)
+	@list='$(dist_web_DATA)'; test -n "$(webdir)" || list=; \
+	if test -n "$$list"; then \
+	  echo " $(MKDIR_P) '$(DESTDIR)$(webdir)'"; \
+	  $(MKDIR_P) "$(DESTDIR)$(webdir)" || exit 1; \
+	fi; \
+	for p in $$list; do \
+	  if test -f "$$p"; then d=; else d="$(srcdir)/"; fi; \
+	  echo "$$d$$p"; \
+	done | $(am__base_list) | \
+	while read files; do \
+	  echo " $(INSTALL_DATA) $$files '$(DESTDIR)$(webdir)'"; \
+	  $(INSTALL_DATA) $$files "$(DESTDIR)$(webdir)" || exit $$?; \
+	done
+
+uninstall-dist_webDATA:
+	@$(NORMAL_UNINSTALL)
+	@list='$(dist_web_DATA)'; test -n "$(webdir)" || list=; \
+	files=`for p in $$list; do echo $$p; done | sed -e 's|^.*/||'`; \
+	dir='$(DESTDIR)$(webdir)'; $(am__uninstall_files_from_dir)
+install-dist_webcssDATA: $(dist_webcss_DATA)
+	@$(NORMAL_INSTALL)
+	@list='$(dist_webcss_DATA)'; test -n "$(webcssdir)" || list=; \
+	if test -n "$$list"; then \
+	  echo " $(MKDIR_P) '$(DESTDIR)$(webcssdir)'"; \
+	  $(MKDIR_P) "$(DESTDIR)$(webcssdir)" || exit 1; \
+	fi; \
+	for p in $$list; do \
+	  if test -f "$$p"; then d=; else d="$(srcdir)/"; fi; \
+	  echo "$$d$$p"; \
+	done | $(am__base_list) | \
+	while read files; do \
+	  echo " $(INSTALL_DATA) $$files '$(DESTDIR)$(webcssdir)'"; \
+	  $(INSTALL_DATA) $$files "$(DESTDIR)$(webcssdir)" || exit $$?; \
+	done
+
+uninstall-dist_webcssDATA:
+	@$(NORMAL_UNINSTALL)
+	@list='$(dist_webcss_DATA)'; test -n "$(webcssdir)" || list=; \
+	files=`for p in $$list; do echo $$p; done | sed -e 's|^.*/||'`; \
+	dir='$(DESTDIR)$(webcssdir)'; $(am__uninstall_files_from_dir)
+install-dist_webfontsDATA: $(dist_webfonts_DATA)
+	@$(NORMAL_INSTALL)
+	@list='$(dist_webfonts_DATA)'; test -n "$(webfontsdir)" || list=; \
+	if test -n "$$list"; then \
+	  echo " $(MKDIR_P) '$(DESTDIR)$(webfontsdir)'"; \
+	  $(MKDIR_P) "$(DESTDIR)$(webfontsdir)" || exit 1; \
+	fi; \
+	for p in $$list; do \
+	  if test -f "$$p"; then d=; else d="$(srcdir)/"; fi; \
+	  echo "$$d$$p"; \
+	done | $(am__base_list) | \
+	while read files; do \
+	  echo " $(INSTALL_DATA) $$files '$(DESTDIR)$(webfontsdir)'"; \
+	  $(INSTALL_DATA) $$files "$(DESTDIR)$(webfontsdir)" || exit $$?; \
+	done
+
+uninstall-dist_webfontsDATA:
+	@$(NORMAL_UNINSTALL)
+	@list='$(dist_webfonts_DATA)'; test -n "$(webfontsdir)" || list=; \
+	files=`for p in $$list; do echo $$p; done | sed -e 's|^.*/||'`; \
+	dir='$(DESTDIR)$(webfontsdir)'; $(am__uninstall_files_from_dir)
+install-dist_webimagesDATA: $(dist_webimages_DATA)
+	@$(NORMAL_INSTALL)
+	@list='$(dist_webimages_DATA)'; test -n "$(webimagesdir)" || list=; \
+	if test -n "$$list"; then \
+	  echo " $(MKDIR_P) '$(DESTDIR)$(webimagesdir)'"; \
+	  $(MKDIR_P) "$(DESTDIR)$(webimagesdir)" || exit 1; \
+	fi; \
+	for p in $$list; do \
+	  if test -f "$$p"; then d=; else d="$(srcdir)/"; fi; \
+	  echo "$$d$$p"; \
+	done | $(am__base_list) | \
+	while read files; do \
+	  echo " $(INSTALL_DATA) $$files '$(DESTDIR)$(webimagesdir)'"; \
+	  $(INSTALL_DATA) $$files "$(DESTDIR)$(webimagesdir)" || exit $$?; \
+	done
+
+uninstall-dist_webimagesDATA:
+	@$(NORMAL_UNINSTALL)
+	@list='$(dist_webimages_DATA)'; test -n "$(webimagesdir)" || list=; \
+	files=`for p in $$list; do echo $$p; done | sed -e 's|^.*/||'`; \
+	dir='$(DESTDIR)$(webimagesdir)'; $(am__uninstall_files_from_dir)
+install-dist_weblibDATA: $(dist_weblib_DATA)
+	@$(NORMAL_INSTALL)
+	@list='$(dist_weblib_DATA)'; test -n "$(weblibdir)" || list=; \
+	if test -n "$$list"; then \
+	  echo " $(MKDIR_P) '$(DESTDIR)$(weblibdir)'"; \
+	  $(MKDIR_P) "$(DESTDIR)$(weblibdir)" || exit 1; \
+	fi; \
+	for p in $$list; do \
+	  if test -f "$$p"; then d=; else d="$(srcdir)/"; fi; \
+	  echo "$$d$$p"; \
+	done | $(am__base_list) | \
+	while read files; do \
+	  echo " $(INSTALL_DATA) $$files '$(DESTDIR)$(weblibdir)'"; \
+	  $(INSTALL_DATA) $$files "$(DESTDIR)$(weblibdir)" || exit $$?; \
+	done
+
+uninstall-dist_weblibDATA:
+	@$(NORMAL_UNINSTALL)
+	@list='$(dist_weblib_DATA)'; test -n "$(weblibdir)" || list=; \
+	files=`for p in $$list; do echo $$p; done | sed -e 's|^.*/||'`; \
+	dir='$(DESTDIR)$(weblibdir)'; $(am__uninstall_files_from_dir)
+install-dist_weboldDATA: $(dist_webold_DATA)
+	@$(NORMAL_INSTALL)
+	@list='$(dist_webold_DATA)'; test -n "$(webolddir)" || list=; \
+	if test -n "$$list"; then \
+	  echo " $(MKDIR_P) '$(DESTDIR)$(webolddir)'"; \
+	  $(MKDIR_P) "$(DESTDIR)$(webolddir)" || exit 1; \
+	fi; \
+	for p in $$list; do \
+	  if test -f "$$p"; then d=; else d="$(srcdir)/"; fi; \
+	  echo "$$d$$p"; \
+	done | $(am__base_list) | \
+	while read files; do \
+	  echo " $(INSTALL_DATA) $$files '$(DESTDIR)$(webolddir)'"; \
+	  $(INSTALL_DATA) $$files "$(DESTDIR)$(webolddir)" || exit $$?; \
+	done
+
+uninstall-dist_weboldDATA:
+	@$(NORMAL_UNINSTALL)
+	@list='$(dist_webold_DATA)'; test -n "$(webolddir)" || list=; \
+	files=`for p in $$list; do echo $$p; done | sed -e 's|^.*/||'`; \
+	dir='$(DESTDIR)$(webolddir)'; $(am__uninstall_files_from_dir)
+tags TAGS:
+
+ctags CTAGS:
+
+cscope cscopelist:
+
+
+distdir: $(DISTFILES)
+	@srcdirstrip=`echo "$(srcdir)" | sed 's/[].[^$$\\*]/\\\\&/g'`; \
+	topsrcdirstrip=`echo "$(top_srcdir)" | sed 's/[].[^$$\\*]/\\\\&/g'`; \
+	list='$(DISTFILES)'; \
+	  dist_files=`for file in $$list; do echo $$file; done | \
+	  sed -e "s|^$$srcdirstrip/||;t" \
+	      -e "s|^$$topsrcdirstrip/|$(top_builddir)/|;t"`; \
+	case $$dist_files in \
+	  */*) $(MKDIR_P) `echo "$$dist_files" | \
+			   sed '/\//!d;s|^|$(distdir)/|;s,/[^/]*$$,,' | \
+			   sort -u` ;; \
+	esac; \
+	for file in $$dist_files; do \
+	  if test -f $$file || test -d $$file; then d=.; else d=$(srcdir); fi; \
+	  if test -d $$d/$$file; then \
+	    dir=`echo "/$$file" | sed -e 's,/[^/]*$$,,'`; \
+	    if test -d "$(distdir)/$$file"; then \
+	      find "$(distdir)/$$file" -type d ! -perm -700 -exec chmod u+rwx {} \;; \
+	    fi; \
+	    if test -d $(srcdir)/$$file && test $$d != $(srcdir); then \
+	      cp -fpR $(srcdir)/$$file "$(distdir)$$dir" || exit 1; \
+	      find "$(distdir)/$$file" -type d ! -perm -700 -exec chmod u+rwx {} \;; \
+	    fi; \
+	    cp -fpR $$d/$$file "$(distdir)$$dir" || exit 1; \
+	  else \
+	    test -f "$(distdir)/$$file" \
+	    || cp -p $$d/$$file "$(distdir)/$$file" \
+	    || exit 1; \
+	  fi; \
+	done
+check-am: all-am
+check: check-am
+all-am: Makefile $(DATA)
+installdirs:
+	for dir in "$(DESTDIR)$(webdir)" "$(DESTDIR)$(webcssdir)" "$(DESTDIR)$(webfontsdir)" "$(DESTDIR)$(webimagesdir)" "$(DESTDIR)$(weblibdir)" "$(DESTDIR)$(webolddir)"; do \
+	  test -z "$$dir" || $(MKDIR_P) "$$dir"; \
+	done
+install: install-am
+install-exec: install-exec-am
+install-data: install-data-am
+uninstall: uninstall-am
+
+install-am: all-am
+	@$(MAKE) $(AM_MAKEFLAGS) install-exec-am install-data-am
+
+installcheck: installcheck-am
+install-strip:
+	if test -z '$(STRIP)'; then \
+	  $(MAKE) $(AM_MAKEFLAGS) INSTALL_PROGRAM="$(INSTALL_STRIP_PROGRAM)" \
+	    install_sh_PROGRAM="$(INSTALL_STRIP_PROGRAM)" INSTALL_STRIP_FLAG=-s \
+	      install; \
+	else \
+	  $(MAKE) $(AM_MAKEFLAGS) INSTALL_PROGRAM="$(INSTALL_STRIP_PROGRAM)" \
+	    install_sh_PROGRAM="$(INSTALL_STRIP_PROGRAM)" INSTALL_STRIP_FLAG=-s \
+	    "INSTALL_PROGRAM_ENV=STRIPPROG='$(STRIP)'" install; \
+	fi
+mostlyclean-generic:
+
+clean-generic:
+
+distclean-generic:
+	-test -z "$(CONFIG_CLEAN_FILES)" || rm -f $(CONFIG_CLEAN_FILES)
+	-test . = "$(srcdir)" || test -z "$(CONFIG_CLEAN_VPATH_FILES)" || rm -f $(CONFIG_CLEAN_VPATH_FILES)
+
+maintainer-clean-generic:
+	@echo "This command is intended for maintainers to use"
+	@echo "it deletes files that may require special tools to rebuild."
+	-test -z "$(MAINTAINERCLEANFILES)" || rm -f $(MAINTAINERCLEANFILES)
+clean: clean-am
+
+clean-am: clean-generic mostlyclean-am
+
+distclean: distclean-am
+	-rm -f Makefile
+distclean-am: clean-am distclean-generic
+
+dvi: dvi-am
+
+dvi-am:
+
+html: html-am
+
+html-am:
+
+info: info-am
+
+info-am:
+
+install-data-am: install-dist_webDATA install-dist_webcssDATA \
+	install-dist_webfontsDATA install-dist_webimagesDATA \
+	install-dist_weblibDATA install-dist_weboldDATA
+
+install-dvi: install-dvi-am
+
+install-dvi-am:
+
+install-exec-am:
+
+install-html: install-html-am
+
+install-html-am:
+
+install-info: install-info-am
+
+install-info-am:
+
+install-man:
+
+install-pdf: install-pdf-am
+
+install-pdf-am:
+
+install-ps: install-ps-am
+
+install-ps-am:
+
+installcheck-am:
+
+maintainer-clean: maintainer-clean-am
+	-rm -f Makefile
+maintainer-clean-am: distclean-am maintainer-clean-generic
+
+mostlyclean: mostlyclean-am
+
+mostlyclean-am: mostlyclean-generic
+
+pdf: pdf-am
+
+pdf-am:
+
+ps: ps-am
+
+ps-am:
+
+uninstall-am: uninstall-dist_webDATA uninstall-dist_webcssDATA \
+	uninstall-dist_webfontsDATA uninstall-dist_webimagesDATA \
+	uninstall-dist_weblibDATA uninstall-dist_weboldDATA
+
+.MAKE: install-am install-strip
+
+.PHONY: all all-am check check-am clean clean-generic cscopelist-am \
+	ctags-am distclean distclean-generic distdir dvi dvi-am html \
+	html-am info info-am install install-am install-data \
+	install-data-am install-dist_webDATA install-dist_webcssDATA \
+	install-dist_webfontsDATA install-dist_webimagesDATA \
+	install-dist_weblibDATA install-dist_weboldDATA install-dvi \
+	install-dvi-am install-exec install-exec-am install-html \
+	install-html-am install-info install-info-am install-man \
+	install-pdf install-pdf-am install-ps install-ps-am \
+	install-strip installcheck installcheck-am installdirs \
+	maintainer-clean maintainer-clean-generic mostlyclean \
+	mostlyclean-generic pdf pdf-am ps ps-am tags-am uninstall \
+	uninstall-am uninstall-dist_webDATA uninstall-dist_webcssDATA \
+	uninstall-dist_webfontsDATA uninstall-dist_webimagesDATA \
+	uninstall-dist_weblibDATA uninstall-dist_weboldDATA
+
+
+version.txt:
+	if test -d "$(top_srcdir)/.git"; then \
+		git --git-dir="$(top_srcdir)/.git" log -n 1 --format=%H; \
+	fi > $@.tmp
+	test -s $@.tmp || echo 0 > $@.tmp
+	mv $@.tmp $@
+
+.PHONY: version.txt
+
+# Tell versions [3.59,3.63) of GNU make to not export all variables.
+# Otherwise a system limit (for SysV at least) may be exceeded.
+.NOEXPORT:
diff --git a/web/css/bootstrap-theme.min.css b/web/css/bootstrap-theme.min.css
index dc95d8e4e..dc95d8e4e 100755..100644
--- a/web/css/bootstrap-theme.min.css
+++ b/web/css/bootstrap-theme.min.css
diff --git a/web/css/bootstrap.min.css b/web/css/bootstrap.min.css
index 4cf729e43..4cf729e43 100755..100644
--- a/web/css/bootstrap.min.css
+++ b/web/css/bootstrap.min.css
diff --git a/web/css/font-awesome.min.css b/web/css/font-awesome.min.css
index d0603cb4b..d0603cb4b 100755..100644
--- a/web/css/font-awesome.min.css
+++ b/web/css/font-awesome.min.css
diff --git a/web/dashboard.css b/web/dashboard.css
index 5c756d552..a7b090d66 100755..100644
--- a/web/dashboard.css
+++ b/web/dashboard.css
@@ -66,6 +66,43 @@ body {
 	margin: 0px;
 }
 
+.netdata-legend-toolbox {
+	display: block;
+	position: absolute;
+	bottom: 0px;
+	right: 30px;
+	height: 15px;
+	width: 110px;
+	background-color: White;
+	font-size: 12px;
+	vertical-align: middle;
+	line-height: 15px;
+	color: #DDDDDD;
+	text-align: center;
+	overflow: hidden;
+	z-index: 20;
+	padding: 0px;
+	margin: 0px;
+}
+
+.netdata-legend-toolbox-button {
+	display: inline-block;
+	position: relative;
+	height: 15px;
+	width: 18px;
+	background-color: White;
+	font-size: 12px;
+	vertical-align: middle;
+	line-height: 15px;
+	color: #CDCDCD;
+	text-align: center;
+	overflow: hidden;
+	z-index: 21;
+	padding: 0px;
+	margin: 0px;
+	cursor: pointer;
+}
+
 .netdata-message {
 	display: inline-block;
 	text-align: left;
@@ -102,6 +139,7 @@ body {
 	height: calc(100% - 15px);	/* 10px for the resize handler and 5px for the top margin */
 	font-size: 10px;
 	margin-top: 5px;
+	text-align: left;
 	/* width and height is calculated (depends on the appearance of the legend) */
 }
 
@@ -452,3 +490,11 @@ body {
 	color: #999999;
 	font-weight: normal;
 }
+
+.popover-title {
+	font-weight: bold;
+	font-size: 12px;
+}
+.popover-content {
+	font-size: 11px;
+}
diff --git a/web/dashboard.html b/web/dashboard.html
index 8b8a69900..fd505078d 100755..100644
--- a/web/dashboard.html
+++ b/web/dashboard.html
@@ -177,7 +177,7 @@ Sparklines using dygraphs
 		data-height="20"
 		data-after="-300"
 		></div>
-	are also possible! This 
+	are also possible! This
 	<div data-netdata="system.ipv4"
 		data-chart-library="dygraph"
 		data-dygraph-theme="sparkline"
@@ -647,4 +647,3 @@ So, to avoid flashing the charts, we destroy and re-create the charts on each up
 
 	<!-- load the dashboard manager - it will do the rest -->
 	<script type="text/javascript" src="dashboard.js"></script>
-
diff --git a/web/dashboard.js b/web/dashboard.js
index 079209d78..b6c62ae3c 100755..100644
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -11,6 +11,7 @@
 // var netdataNoC3 = true;				// do not use C3
 // var netdataNoBootstrap = true;		// do not load bootstrap
 // var netdataDontStart = true;			// do not start the thread to process the charts
+// var netdataErrorCallback = null;		// Callback function that will be invoked upon error
 //
 // You can also set the default netdata server, using the following.
 // When this variable is not set, we assume the page is hosted on your
@@ -155,7 +156,7 @@
 		after: -600,					// panning
 		pixels_per_point: 1,			// the detail of the chart
 		fill_luminance: 0.8				// luminance of colors in solit areas
-	}
+	};
 
 	// ----------------------------------------------------------------------------------------------------------------
 	// global options
@@ -242,6 +243,10 @@
 
 			destroy_on_hide: false,		// destroy charts when they are not visible
 
+			show_help: true,			// when enabled the charts will show some help
+			show_help_delay_show_ms: 500,
+			show_help_delay_hide_ms: 0,
+
 			eliminate_zero_dimensions: true, // do not show dimensions with just zeros
 
 			stop_updates_when_focus_is_lost: true, // boolean - shall we stop auto-refreshes when document does not have user focus
@@ -257,6 +262,11 @@
  			color_fill_opacity_area: 0.2,
 			color_fill_opacity_stacked: 0.8,
 
+			pan_and_zoom_factor: 0.25,		// the increment when panning and zooming with the toolbox
+			pan_and_zoom_factor_multiplier_control: 2.0,
+			pan_and_zoom_factor_multiplier_shift: 3.0,
+			pan_and_zoom_factor_multiplier_alt: 4.0,
+
 			setOptionCallback: function() { ; }
 		},
 
@@ -272,7 +282,7 @@
 			libraries: 			false,
 			dygraph: 			false
 		}
-	}
+	};
 
 
 	// ----------------------------------------------------------------------------------------------------------------
@@ -320,7 +330,7 @@
 
 		NETDATA.localStorage.current[key.toString()] = ret;
 		return ret;
-	}
+	};
 
 	NETDATA.localStorageSet = function(key, value, callback) {
 		if(typeof value === 'undefined' || value === 'undefined') {
@@ -345,7 +355,7 @@
 
 		NETDATA.localStorage.current[key.toString()] = value;
 		return value;
-	}
+	};
 
 	NETDATA.localStorageGetRecursive = function(obj, prefix, callback) {
 		for(var i in obj) {
@@ -357,7 +367,7 @@
 
 			obj[i] = NETDATA.localStorageGet(prefix + '.' + i.toString(), obj[i], callback);
 		}
-	}
+	};
 
 	NETDATA.setOption = function(key, value) {
 		if(key.toString() === 'setOptionCallback') {
@@ -382,11 +392,11 @@
 		}
 
 		return true;
-	}
+	};
 
 	NETDATA.getOption = function(key) {
 		return NETDATA.options.current[key.toString()];
-	}
+	};
 
 	// read settings from local storage
 	NETDATA.localStorageGetRecursive(NETDATA.options.current, 'options', null);
@@ -449,7 +459,9 @@
 		101: { message: "Cannot load jQuery", alert: true },
 		402: { message: "Chart library not found", alert: false },
 		403: { message: "Chart library not enabled/is failed", alert: false },
-		404: { message: "Chart not found", alert: false }
+		404: { message: "Chart not found", alert: false },
+		405: { message: "Cannot download charts index from server", alert: true },
+		406: { message: "Invalid charts index downloaded from server", alert: true }
 	};
 	NETDATA.errorLast = {
 		code: 0,
@@ -464,9 +476,14 @@
 
 		console.log("ERROR " + code + ": " + NETDATA.errorCodes[code].message + ": " + msg);
 
-		if(NETDATA.errorCodes[code].alert)
+		var ret = true;
+		if(typeof netdataErrorCallback === 'function') {
+		   ret = netdataErrorCallback('system', code, msg);
+		}
+
+		if(ret && NETDATA.errorCodes[code].alert)
 			alert("ERROR " + code + ": " + NETDATA.errorCodes[code].message + ": " + msg);
-	}
+	};
 
 	NETDATA.errorReset = function() {
 		NETDATA.errorLast.code = 0;
@@ -529,13 +546,18 @@
 				cache: false
 			})
 			.done(function(data) {
-				var h = NETDATA.chartRegistry.fixid(host);
-				//console.log('downloaded all charts from ' + host + ' (' + h + ')');
-				self.charts[h] = data.charts;
+				if(data !== null) {
+					var h = NETDATA.chartRegistry.fixid(host);
+					self.charts[h] = data.charts;
+				}
+				else NETDATA.error(406, host + '/api/v1/charts');
+
 				if(typeof callback === 'function')
 					callback(data);
 			})
 			.fail(function() {
+				NETDATA.error(405, host + '/api/v1/charts');
+
 				if(typeof callback === 'function')
 					callback(null);
 			});
@@ -560,7 +582,7 @@
 		master: null,			// the master chart (state), to which all others
 								// are synchronized
 
-		force_before_ms: null,	// the timespan to sync all other charts 
+		force_before_ms: null,	// the timespan to sync all other charts
 		force_after_ms: null,
 
 		// set a new master
@@ -621,7 +643,7 @@
 
 			return true;
 		}
-	}
+	};
 
 	// ----------------------------------------------------------------------------------------------------------------
 	// dimensions selection
@@ -637,19 +659,19 @@
 		this.value_div = null;
 		this.color = NETDATA.themes.current.foreground;
 
-		if(parent.selected === parent.unselected)
+		if(parent.selected_count > parent.unselected_count)
 			this.selected = true;
 		else
 			this.selected = false;
 
 		this.setOptions(name_div, value_div, color);
-	}
+	};
 
 	dimensionStatus.prototype.invalidate = function() {
 		this.name_div = null;
 		this.value_div = null;
 		this.enabled = false;
-	}
+	};
 
 	dimensionStatus.prototype.setOptions = function(name_div, value_div, color) {
 		this.color = color;
@@ -676,7 +698,7 @@
 
 		this.enabled = true;
 		this.setHandler();
-	}
+	};
 
 	dimensionStatus.prototype.setHandler = function() {
 		if(this.enabled === false) return;
@@ -721,7 +743,7 @@
 
 			ds.parent.state.redrawChart();
 		}
-	}
+	};
 
 	dimensionStatus.prototype.select = function() {
 		if(this.enabled === false) return;
@@ -729,7 +751,7 @@
 		this.name_div.className = 'netdata-legend-name selected';
 		this.value_div.className = 'netdata-legend-value selected';
 		this.selected = true;
-	}
+	};
 
 	dimensionStatus.prototype.unselect = function() {
 		if(this.enabled === false) return;
@@ -737,11 +759,11 @@
 		this.name_div.className = 'netdata-legend-name not-selected';
 		this.value_div.className = 'netdata-legend-value hidden';
 		this.selected = false;
-	}
+	};
 
 	dimensionStatus.prototype.isSelected = function() {
 		return(this.enabled === true && this.selected === true);
-	}
+	};
 
 	// ----------------------------------------------------------------------------------------------------------------
 
@@ -751,7 +773,7 @@
 		this.dimensions = {};
 		this.selected_count = 0;
 		this.unselected_count = 0;
-	}
+	};
 
 	dimensionsVisibility.prototype.dimensionAdd = function(label, name_div, value_div, color) {
 		if(typeof this.dimensions[label] === 'undefined') {
@@ -762,21 +784,21 @@
 			this.dimensions[label].setOptions(name_div, value_div, color);
 
 		return this.dimensions[label];
-	}
+	};
 
 	dimensionsVisibility.prototype.dimensionGet = function(label) {
 		return this.dimensions[label];
-	}
+	};
 
 	dimensionsVisibility.prototype.invalidateAll = function() {
 		for(var d in this.dimensions)
 			this.dimensions[d].invalidate();
-	}
+	};
 
 	dimensionsVisibility.prototype.selectAll = function() {
 		for(var d in this.dimensions)
 			this.dimensions[d].select();
-	}
+	};
 
 	dimensionsVisibility.prototype.countSelected = function() {
 		var i = 0;
@@ -784,12 +806,12 @@
 			if(this.dimensions[d].isSelected()) i++;
 
 		return i;
-	}
+	};
 
 	dimensionsVisibility.prototype.selectNone = function() {
 		for(var d in this.dimensions)
 			this.dimensions[d].unselect();
-	}
+	};
 
 	dimensionsVisibility.prototype.selected2BooleanArray = function(array) {
 		var ret = new Array();
@@ -820,7 +842,7 @@
 		}
 
 		return ret;
-	}
+	};
 
 
 	// ----------------------------------------------------------------------------------------------------------------
@@ -859,10 +881,18 @@
 		 * show an error instead of the chart
 		 */
 		var error = function(msg) {
-			that.element.innerHTML = that.id + ': ' + msg;
-			that.enabled = false;
-			that.current = that.pan;
-		}
+			var ret = true;
+
+			if(typeof netdataErrorCallback === 'function') {
+				ret = netdataErrorCallback('chart', that.id, msg);
+			}
+
+			if(ret) {
+				that.element.innerHTML = that.id + ': ' + msg;
+				that.enabled = false;
+				that.current = that.pan;
+			}
+		};
 
 		// GUID - a unique identifier for the chart
 		this.uuid = NETDATA.guid();
@@ -1081,10 +1111,10 @@
 			that.tm.last_dom_created = new Date().getTime();
 
 			showLoading();
-		}
+		};
 
 		/* init() private
-		 * initialize state viariables
+		 * initialize state variables
 		 * destroy all (possibly) created state elements
 		 * create the basic DOM for a chart
 		 */
@@ -1114,7 +1144,7 @@
 				last_hidden: 0,				// the time the chart was hidden
 				last_unhidden: 0,			// the time the chart was unhidden
 				last_autorefreshed: 0		// the time the chart was last refreshed
-			},
+			};
 
 			that.data = null;				// the last data as downloaded from the netdata server
 			that.data_url = 'invalid://';	// string - the last url used to update the chart
@@ -1127,7 +1157,7 @@
 			createDOM();
 
 			that.setMode('auto');
-		}
+		};
 
 		var maxMessageFontSize = function() {
 			// normally we want a font size, as tall as the element
@@ -1158,29 +1188,29 @@
 			// set it
 			that.element_message.style.fontSize = h.toString() + 'px';
 			that.element_message.style.paddingTop = paddingTop.toString() + 'px';
-		}
+		};
 
 		var showMessage = function(msg) {
 			that.element_message.className = 'netdata-message';
 			that.element_message.innerHTML = msg;
-			this.element_message.style.fontSize = 'x-small';
+			that.element_message.style.fontSize = 'x-small';
 			that.element_message.style.paddingTop = '0px';
 			that.___messageHidden___ = undefined;
-		}
+		};
 
 		var showMessageIcon = function(icon) {
 			that.element_message.innerHTML = icon;
 			that.element_message.className = 'netdata-message icon';
 			maxMessageFontSize();
 			that.___messageHidden___ = undefined;
-		}
+		};
 
 		var hideMessage = function() {
 			if(typeof that.___messageHidden___ === 'undefined') {
 				that.___messageHidden___ = true;
 				that.element_message.className = 'netdata-message hidden';
 			}
-		}
+		};
 
 		var showRendering = function() {
 			var icon;
@@ -1194,7 +1224,7 @@
 				icon = '<i class="fa fa-area-chart"></i>';
 
 			showMessageIcon(icon + ' netdata');
-		}
+		};
 
 		var showLoading = function() {
 			if(that.chart_created === false) {
@@ -1202,14 +1232,14 @@
 				return true;
 			}
 			return false;
-		}
+		};
 
 		var isHidden = function() {
 			if(typeof that.___chartIsHidden___ !== 'undefined')
 				return true;
 
 			return false;
-		}
+		};
 
 		// hide the chart, when it is not visible - called from isVisible()
 		var hideChart = function() {
@@ -1228,9 +1258,9 @@
 					that.tm.last_hidden = new Date().getTime();
 				}
 			}
-			
+
 			that.___chartIsHidden___ = true;
-		}
+		};
 
 		// unhide the chart, when it is visible - called from isVisible()
 		var unhideChart = function() {
@@ -1251,14 +1281,14 @@
 				resizeChart();
 				hideMessage();
 			}
-		}
+		};
 
 		var canBeRendered = function() {
 			if(isHidden() === true || that.isVisible(true) === false)
 				return false;
 
 			return true;
-		}
+		};
 
 		// https://github.com/petkaantonov/bluebird/wiki/Optimization-killers
 		var callChartLibraryUpdateSafely = function(data) {
@@ -1284,7 +1314,7 @@
 			}
 
 			return true;
-		}
+		};
 
 		// https://github.com/petkaantonov/bluebird/wiki/Optimization-killers
 		var callChartLibraryCreateSafely = function(data) {
@@ -1312,7 +1342,7 @@
 			that.chart_created = true;
 			that.updates_since_last_creation = 0;
 			return true;
-		}
+		};
 
 		// ----------------------------------------------------------------------------------------------------------------
 		// Chart Resize
@@ -1338,7 +1368,7 @@
 
 				that.tm.last_resized = new Date().getTime();
 			}
-		}
+		};
 
 		// this is the actual chart resize algorithm
 		// it will:
@@ -1434,8 +1464,8 @@
 					};
 
 				// process end event
-				document.onmouseup = 
-				document.ontouchend = 
+				document.onmouseup =
+				document.ontouchend =
 				this.element_legend_childs.resize_handler.onmouseup =
 				this.element_legend_childs.resize_handler.ontouchend =
 					function(e) {
@@ -1455,7 +1485,7 @@
 						NETDATA.options.auto_refresher_stop_until = 0;
 					};
 			}
-		}
+		};
 
 
 		var noDataToShow = function() {
@@ -1466,14 +1496,14 @@
 			//that.element_chart.style.display = 'none';
 			//if(that.element_legend !== null) that.element_legend.style.display = 'none';
 			//that.___chartIsHidden___ = true;
-		}
+		};
 
 		// ============================================================================================================
 		// PUBLIC FUNCTIONS
 
 		this.error = function(msg) {
 			error(msg);
-		}
+		};
 
 		this.setMode = function(m) {
 			if(this.current !== null && this.current.name === m) return;
@@ -1492,7 +1522,7 @@
 			this.current.force_after_ms = null;
 
 			this.tm.last_mode_switch = new Date().getTime();
-		}
+		};
 
 		// ----------------------------------------------------------------------------------------------------------------
 		// global selection sync
@@ -1506,7 +1536,7 @@
 				NETDATA.globalSelectionSync.dont_sync_before = new Date().getTime() + ms;
 			else
 				NETDATA.globalSelectionSync.dont_sync_before = new Date().getTime() + NETDATA.options.current.sync_selection_delay;
-		}
+		};
 
 		// can we globally apply selection sync?
 		this.globalSelectionSyncAbility = function() {
@@ -1517,14 +1547,14 @@
 				return false;
 
 			return true;
-		}
+		};
 
 		this.globalSelectionSyncIsMaster = function() {
 			if(NETDATA.globalSelectionSync.state === this)
 				return true;
 			else
 				return false;
-		}
+		};
 
 		// this chart is the master of the global selection sync
 		this.globalSelectionSyncBeMaster = function() {
@@ -1569,7 +1599,7 @@
 			}
 
 			// this.globalSelectionSyncDelay(100);
-		}
+		};
 
 		// can the chart participate to the global selection sync as a slave?
 		this.globalSelectionSyncIsEligible = function() {
@@ -1581,13 +1611,13 @@
 				return true;
 
 			return false;
-		}
+		};
 
 		// this chart becomes a slave of the global selection sync
 		this.globalSelectionSyncBeSlave = function() {
 			if(NETDATA.globalSelectionSync.state !== this)
 				NETDATA.globalSelectionSync.slaves.push(this);
-		}
+		};
 
 		// sync all the visible charts to the given time
 		// this is to be called from the chart libraries
@@ -1617,7 +1647,7 @@
 			$.each(NETDATA.globalSelectionSync.slaves, function(i, st) {
 				st.setSelection(t);
 			});
-		}
+		};
 
 		// stop syncing all charts to the given time
 		this.globalSelectionSyncStop = function() {
@@ -1644,7 +1674,7 @@
 			}
 
 			this.clearSelection();
-		}
+		};
 
 		this.setSelection = function(t) {
 			if(typeof this.library.setSelection === 'function') {
@@ -1659,7 +1689,7 @@
 				this.log('selection set to ' + t.toString());
 
 			return this.selected;
-		}
+		};
 
 		this.clearSelection = function() {
 			if(this.selected === true) {
@@ -1678,26 +1708,26 @@
 			}
 
 			return this.selected;
-		}
+		};
 
 		// find if a timestamp (ms) is shown in the current chart
 		this.timeIsVisible = function(t) {
 			if(t >= this.data_after && t <= this.data_before)
 				return true;
 			return false;
-		},
+		};
 
 		this.calculateRowForTime = function(t) {
 			if(this.timeIsVisible(t) === false) return -1;
 			return Math.floor((t - this.data_after) / this.data_update_every);
-		}
+		};
 
 		// ----------------------------------------------------------------------------------------------------------------
 
 		// console logging
 		this.log = function(msg) {
 			console.log(this.id + ' (' + this.library_name + ' ' + this.uuid + '): ' + msg);
-		}
+		};
 
 		this.pauseChart = function() {
 			if(this.paused === false) {
@@ -1706,7 +1736,7 @@
 
 				this.paused = true;
 			}
-		}
+		};
 
 		this.unpauseChart = function() {
 			if(this.paused === true) {
@@ -1715,7 +1745,7 @@
 
 				this.paused = false;
 			}
-		}
+		};
 
 		this.resetChart = function(dont_clear_master, dont_update) {
 			if(this.debug === true)
@@ -1757,7 +1787,7 @@
 			if(dont_update !== true && this.isVisible() === true) {
 				this.updateChart();
 			}
-		}
+		};
 
 		this.updateChartPanOrZoom = function(after, before) {
 			var logme = 'updateChartPanOrZoom(' + after + ', ' + before + '): ';
@@ -1767,13 +1797,15 @@
 				this.log(logme);
 
 			if(before < after) {
-				this.log(logme + 'flipped parameters, rejecting it.');
+				if(this.debug === true)
+					this.log(logme + 'flipped parameters, rejecting it.');
+
 				return false;
 			}
 
 			if(typeof this.fixed_min_duration === 'undefined')
 				this.fixed_min_duration = Math.round((this.chartWidth() / 30) * this.chart.update_every * 1000);
-			
+
 			var min_duration = this.fixed_min_duration;
 			var current_duration = Math.round(this.view_before - this.view_after);
 
@@ -1788,7 +1820,7 @@
 
 			// the final wanted duration
 			var wanted_duration = before - after;
-			
+
 			// to allow panning, accept just a point below our minimum
 			if((current_duration - this.data_update_every) < min_duration)
 				min_duration = current_duration - this.data_update_every;
@@ -1831,7 +1863,7 @@
 			this.current.force_before_ms = before;
 			NETDATA.globalPanAndZoom.setMaster(this, after, before);
 			return ret;
-		}
+		};
 
 		this.legendFormatValue = function(value) {
 			if(value === null || value === 'undefined') return '-';
@@ -1843,7 +1875,7 @@
 			if(abs >= 1   ) return (Math.round(value * 100) / 100).toLocaleString();
 			if(abs >= 0.1 ) return (Math.round(value * 1000) / 1000).toLocaleString();
 			return (Math.round(value * 10000) / 10000).toLocaleString();
-		}
+		};
 
 		this.legendSetLabelValue = function(label, value) {
 			var series = this.element_legend_childs.series[label];
@@ -1873,7 +1905,7 @@
 
 			if(series.value !== null) series.value.innerHTML = s;
 			if(series.user !== null) series.user.innerHTML = r;
-		}
+		};
 
 		this.legendSetDate = function(ms) {
 			if(typeof ms !== 'number') {
@@ -1891,7 +1923,7 @@
 
 			if(this.element_legend_childs.title_units)
 				this.element_legend_childs.title_units.innerHTML = this.units;
-		}
+		};
 
 		this.legendShowUndefined = function() {
 			if(this.element_legend_childs.title_date)
@@ -1914,7 +1946,7 @@
 					this.legendSetLabelValue(label, null);
 				}
 			}
-		}
+		};
 
 		this.legendShowLatestValues = function() {
 			if(this.chart === null) return;
@@ -1949,11 +1981,11 @@
 				else
 					this.legendSetLabelValue(label, this.data.view_latest_values[i]);
 			}
-		}
+		};
 
 		this.legendReset = function() {
 			this.legendShowLatestValues();
-		}
+		};
 
 		// this should be called just ONCE per dimension per chart
 		this._chartDimensionColor = function(label) {
@@ -1977,13 +2009,14 @@
 
 			this.colors.push(this.colors_assigned[label]);
 			return this.colors_assigned[label];
-		}
+		};
 
 		this.chartColors = function() {
 			if(this.colors !== null) return this.colors;
 
 			this.colors = new Array();
 			this.colors_available = new Array();
+			var i, len;
 
 			var c = $(this.element).data('colors');
 			// this.log('read colors: ' + c);
@@ -1996,7 +2029,7 @@
 					var added = 0;
 
 					while(added < 20) {
-						for(var i = 0, len = c.length; i < len ; i++) {
+						for(i = 0, len = c.length; i < len ; i++) {
 							added++;
 							this.colors_available.push(c[i]);
 							// this.log('adding color: ' + c[i]);
@@ -2006,11 +2039,11 @@
 			}
 
 			// push all the standard colors too
-			for(var i = 0, len = NETDATA.themes.current.colors.length; i < len ; i++)
+			for(i = 0, len = NETDATA.themes.current.colors.length; i < len ; i++)
 				this.colors_available.push(NETDATA.themes.current.colors[i]);
 
 			return this.colors;
-		}
+		};
 
 		this.legendUpdateDOM = function() {
 			var needed = false;
@@ -2079,7 +2112,7 @@
 				if(user_id !== null) {
 					user_element = document.getElementById(user_id) || null;
 					if(user_element === null)
-						me.log('Cannot find element with id: ' + user_id);
+						state.log('Cannot find element with id: ' + user_id);
 				}
 
 				state.element_legend_childs.series[name] = {
@@ -2117,6 +2150,13 @@
 				this.element_legend_childs = {
 					content: content,
 					resize_handler: document.createElement('div'),
+					toolbox: document.createElement('div'),
+					toolbox_left: document.createElement('div'),
+					toolbox_right: document.createElement('div'),
+					toolbox_reset: document.createElement('div'),
+					toolbox_zoomin: document.createElement('div'),
+					toolbox_zoomout: document.createElement('div'),
+					toolbox_volume: document.createElement('div'),
 					title_date: document.createElement('span'),
 					title_time: document.createElement('span'),
 					title_units: document.createElement('span'),
@@ -2137,9 +2177,171 @@
 
 				this.element_legend.innerHTML = '';
 
+				if(this.library.toolboxPanAndZoom !== null) {
+
+					function get_pan_and_zoom_step(event) {
+						if (event.ctrlKey)
+							return NETDATA.options.current.pan_and_zoom_factor * NETDATA.options.current.pan_and_zoom_factor_multiplier_control;
+
+						else if (event.shiftKey)
+							return NETDATA.options.current.pan_and_zoom_factor * NETDATA.options.current.pan_and_zoom_factor_multiplier_shift;
+
+						else if (event.altKey)
+							return NETDATA.options.current.pan_and_zoom_factor * NETDATA.options.current.pan_and_zoom_factor_multiplier_alt;
+
+						else
+							return NETDATA.options.current.pan_and_zoom_factor;
+					}
+
+					this.element_legend_childs.toolbox.className += ' netdata-legend-toolbox';
+					this.element.appendChild(this.element_legend_childs.toolbox);
+
+					this.element_legend_childs.toolbox_left.className += ' netdata-legend-toolbox-button';
+					this.element_legend_childs.toolbox_left.innerHTML = '<i class="fa fa-backward"></i>';
+					this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_left);
+					this.element_legend_childs.toolbox_left.onclick = function(e) {
+						e.preventDefault();
+
+						var step = (that.view_before - that.view_after) * get_pan_and_zoom_step(e);
+						var before = that.view_before - step;
+						var after = that.view_after - step;
+						if(after >= that.netdata_first)
+							that.library.toolboxPanAndZoom(that, after, before);
+					};
+					if(NETDATA.options.current.show_help === true)
+						$(this.element_legend_childs.toolbox_left).popover({
+						container: "body",
+						animation: false,
+						html: true,
+						trigger: 'hover',
+						placement: 'bottom',
+						delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
+						title: 'Pan Left',
+						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>'
+					});
+
+
+					this.element_legend_childs.toolbox_reset.className += ' netdata-legend-toolbox-button';
+					this.element_legend_childs.toolbox_reset.innerHTML = '<i class="fa fa-play"></i>';
+					this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_reset);
+					this.element_legend_childs.toolbox_reset.onclick = function(e) {
+						e.preventDefault();
+						NETDATA.resetAllCharts(that);
+					};
+					if(NETDATA.options.current.show_help === true)
+						$(this.element_legend_childs.toolbox_reset).popover({
+						container: "body",
+						animation: false,
+						html: true,
+						trigger: 'hover',
+						placement: 'bottom',
+						delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
+						title: 'Chart Reset',
+						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>'
+					});
+					
+					this.element_legend_childs.toolbox_right.className += ' netdata-legend-toolbox-button';
+					this.element_legend_childs.toolbox_right.innerHTML = '<i class="fa fa-forward"></i>';
+					this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_right);
+					this.element_legend_childs.toolbox_right.onclick = function(e) {
+						e.preventDefault();
+						var step = (that.view_before - that.view_after) * get_pan_and_zoom_step(e);
+						var before = that.view_before + step;
+						var after = that.view_after + step;
+						if(before <= that.netdata_last)
+							that.library.toolboxPanAndZoom(that, after, before);
+					};
+					if(NETDATA.options.current.show_help === true)
+						$(this.element_legend_childs.toolbox_right).popover({
+						container: "body",
+						animation: false,
+						html: true,
+						trigger: 'hover',
+						placement: 'bottom',
+						delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
+						title: 'Pan Right',
+						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>'
+					});
+
+					
+					this.element_legend_childs.toolbox_zoomin.className += ' netdata-legend-toolbox-button';
+					this.element_legend_childs.toolbox_zoomin.innerHTML = '<i class="fa fa-plus"></i>';
+					this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomin);
+					this.element_legend_childs.toolbox_zoomin.onclick = function(e) {
+						e.preventDefault();
+						var dt = ((that.view_before - that.view_after) * (get_pan_and_zoom_step(e) * 0.8) / 2);
+						var before = that.view_before - dt;
+						var after = that.view_after + dt;
+						that.library.toolboxPanAndZoom(that, after, before);
+					};
+					if(NETDATA.options.current.show_help === true)
+						$(this.element_legend_childs.toolbox_zoomin).popover({
+						container: "body",
+						animation: false,
+						html: true,
+						trigger: 'hover',
+						placement: 'bottom',
+						delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
+						title: 'Chart Zoom In',
+						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>'
+					});
+					
+					this.element_legend_childs.toolbox_zoomout.className += ' netdata-legend-toolbox-button';
+					this.element_legend_childs.toolbox_zoomout.innerHTML = '<i class="fa fa-minus"></i>';
+					this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomout);
+					this.element_legend_childs.toolbox_zoomout.onclick = function(e) {
+						e.preventDefault();
+						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);
+						var before = that.view_before + dt;
+						var after = that.view_after - dt;
+
+						that.library.toolboxPanAndZoom(that, after, before);
+					};
+					if(NETDATA.options.current.show_help === true)
+						$(this.element_legend_childs.toolbox_zoomout).popover({
+						container: "body",
+						animation: false,
+						html: true,
+						trigger: 'hover',
+						placement: 'bottom',
+						delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
+						title: 'Chart Zoom Out',
+						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>'
+					});
+					
+					//this.element_legend_childs.toolbox_volume.className += ' netdata-legend-toolbox-button';
+					//this.element_legend_childs.toolbox_volume.innerHTML = '<i class="fa fa-sort-amount-desc"></i>';
+					//this.element_legend_childs.toolbox_volume.title = 'Visible Volume';
+					//this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_volume);
+					//this.element_legend_childs.toolbox_volume.onclick = function(e) {
+						//e.preventDefault();
+						//alert('clicked toolbox_volume on ' + that.id);
+					//}
+				}
+				else {
+					this.element_legend_childs.toolbox = null;
+					this.element_legend_childs.toolbox_left = null;
+					this.element_legend_childs.toolbox_reset = null;
+					this.element_legend_childs.toolbox_right = null;
+					this.element_legend_childs.toolbox_zoomin = null;
+					this.element_legend_childs.toolbox_zoomout = null;
+					this.element_legend_childs.toolbox_volume = null;
+				}
+				
 				this.element_legend_childs.resize_handler.className += " netdata-legend-resize-handler";
 				this.element_legend_childs.resize_handler.innerHTML = '<i class="fa fa-chevron-up"></i><i class="fa fa-chevron-down"></i>';
 				this.element.appendChild(this.element_legend_childs.resize_handler);
+				if(NETDATA.options.current.show_help === true)
+					$(this.element_legend_childs.resize_handler).popover({
+					container: "body",
+					animation: false,
+					html: true,
+					trigger: 'hover',
+					placement: 'bottom',
+					delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
+					title: 'Chart Resize',
+					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>'
+				});
 
 				// mousedown event
 				this.element_legend_childs.resize_handler.onmousedown =
@@ -2172,11 +2374,30 @@
 
 				content.className = 'netdata-legend-series-content';
 				this.element_legend_childs.nano.appendChild(content);
+
+				if(NETDATA.options.current.show_help === true)
+					$(content).popover({
+					container: "body",
+					animation: false,
+					html: true,
+					trigger: 'hover',
+					placement: 'bottom',
+					title: 'Chart Legend',
+					delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
+					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>'
+				});
 			}
 			else {
 				this.element_legend_childs = {
 					content: content,
 					resize_handler: null,
+					toolbox: null,
+					toolbox_left: null,
+					toolbox_right: null,
+					toolbox_reset: null,
+					toolbox_zoomin: null,
+					toolbox_zoomout: null,
+					toolbox_volume: null,
 					title_date: null,
 					title_time: null,
 					title_units: null,
@@ -2220,7 +2441,7 @@
 				$(this.element_legend_childs.nano).nanoScroller(this.element_legend_childs.nano_options);
 
 			this.legendShowLatestValues();
-		}
+		};
 
 		this.hasLegend = function() {
 			if(typeof this.___hasLegendCache___ !== 'undefined')
@@ -2234,23 +2455,23 @@
 
 			this.___hasLegendCache___ = leg;
 			return leg;
-		}
+		};
 
 		this.legendWidth = function() {
 			return (this.hasLegend())?140:0;
-		}
+		};
 
 		this.legendHeight = function() {
 			return $(this.element).height();
-		}
+		};
 
 		this.chartWidth = function() {
 			return $(this.element).width() - this.legendWidth();
-		}
+		};
 
 		this.chartHeight = function() {
 			return $(this.element).height();
-		}
+		};
 
 		this.chartPixelsPerPoint = function() {
 			// force an options provided detail
@@ -2263,7 +2484,7 @@
 				px = NETDATA.options.current.pixels_per_point;
 
 			return px;
-		}
+		};
 
 		this.needsRecreation = function() {
 			return (
@@ -2272,7 +2493,7 @@
 					&& this.library.autoresize() === false
 					&& this.tm.last_resized < NETDATA.options.last_resized
 				);
-		}
+		};
 
 		this.chartURL = function() {
 			var after, before, points_multiplier = 1;
@@ -2348,12 +2569,12 @@
 
 			if(NETDATA.options.debug.chart_data_url === true || this.debug === true)
 				this.log('chartURL(): ' + this.data_url + ' WxH:' + this.chartWidth() + 'x' + this.chartHeight() + ' points: ' + this.data_points + ' library: ' + this.library_name);
-		}
+		};
 
 		this.redrawChart = function() {
 			if(this.data !== null)
 				this.updateChartWithData(this.data);
-		}
+		};
 
 		this.updateChartWithData = function(data) {
 			if(this.debug === true)
@@ -2385,7 +2606,7 @@
 					// console.log('adusting view_after from ' + this.view_after + ' to ' + this.data_after);
 					this.view_after = this.data_after;
 				}
-				
+
 				if(this.view_before > this.data_before) {
 					// console.log('adusting view_before from ' + this.view_before + ' to ' + this.data_before);
 					this.view_before = this.data_before;
@@ -2466,7 +2687,7 @@
 
 			if(this.refresh_dt_element !== null)
 				this.refresh_dt_element.innerHTML = this.refresh_dt_ms.toString();
-		}
+		};
 
 		this.updateChart = function(callback) {
 			if(this.debug === true)
@@ -2536,12 +2757,12 @@
 				error('data download failed for url: ' + that.data_url);
 			})
 			.always(function() {
-				this._updating = false;
+				that._updating = false;
 				if(typeof callback === 'function') callback();
 			});
 
 			return true;
-		}
+		};
 
 		this.isVisible = function(nocache) {
 			if(typeof nocache === 'undefined')
@@ -2590,14 +2811,14 @@
 				this.___isVisible___ = true;
 				return this.___isVisible___;
 			}
-		}
+		};
 
 		this.isAutoRefreshed = function() {
 			return (this.current.autorefresh);
-		}
+		};
 
 		this.canBeAutoRefreshed = function() {
-			now = new Date().getTime();
+			var now = new Date().getTime();
 
 			if(this.enabled === false) {
 				if(this.debug === true)
@@ -2686,7 +2907,7 @@
 			}
 
 			return false;
-		}
+		};
 
 		this.autoRefresh = function(callback) {
 			if(this.canBeAutoRefreshed() === true) {
@@ -2696,7 +2917,7 @@
 				if(typeof callback !== 'undefined')
 					callback();
 			}
-		}
+		};
 
 		this._defaultsFromDownloadedChart = function(chart) {
 			this.chart = chart;
@@ -2710,7 +2931,7 @@
 
 			if(this.units === null)
 				this.units = chart.units;
-		}
+		};
 
 		// fetch the chart description from the netdata server
 		this.getChart = function(callback) {
@@ -2744,13 +2965,13 @@
 					if(typeof callback === 'function') callback();
 				});
 			}
-		}
+		};
 
 		// ============================================================================================================
 		// INITIALIZATION
 
 		init();
-	}
+	};
 
 	NETDATA.resetAllCharts = function(state) {
 		// first clear the global selection sync
@@ -2771,10 +2992,10 @@
 
 		// if we were not the master, reset our status too
 		// this is required because most probably the mouse
-		// is over this chart, blocking it from autorefreshing
+		// is over this chart, blocking it from auto-refreshing
 		if(master === false && (state.paused === true || state.selected === true))
 			state.resetChart();
-	}
+	};
 
 	// get or create a chart state, given a DOM element
 	NETDATA.chartState = function(element) {
@@ -2784,7 +3005,7 @@
 			$(element).data('netdata-state-object', state);
 		}
 		return state;
-	}
+	};
 
 	// ----------------------------------------------------------------------------------------------------------------
 	// Library functions
@@ -2811,7 +3032,7 @@
 		}
 		else if(typeof callback === "function")
 			callback();
-	}
+	};
 
 	NETDATA._loadCSS = function(filename) {
 		// don't use jQuery here
@@ -2825,7 +3046,7 @@
 
 		if (typeof fileref !== 'undefined')
 			document.getElementsByTagName("head")[0].appendChild(fileref);
-	}
+	};
 
 	NETDATA.colorHex2Rgb = function(hex) {
 		// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
@@ -2840,7 +3061,7 @@
 			g: parseInt(result[2], 16),
 			b: parseInt(result[3], 16)
 		} : null;
-	}
+	};
 
 	NETDATA.colorLuminance = function(hex, lum) {
 		// validate hex string
@@ -2859,7 +3080,7 @@
 		}
 
 		return rgb;
-	}
+	};
 
 	NETDATA.guid = function() {
 		function s4() {
@@ -2869,35 +3090,35 @@
 			}
 
 			return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-	}
+	};
 
 	NETDATA.zeropad = function(x) {
 		if(x > -10 && x < 10) return '0' + x.toString();
 		else return x.toString();
-	}
+	};
 
 	// user function to signal us the DOM has been
 	// updated.
 	NETDATA.updatedDom = function() {
 		NETDATA.options.updated_dom = true;
-	}
+	};
 
 	NETDATA.ready = function(callback) {
 		NETDATA.options.pauseCallback = callback;
-	}
+	};
 
 	NETDATA.pause = function(callback) {
 		if(NETDATA.options.pause === true)
 			callback();
 		else
 			NETDATA.options.pauseCallback = callback;
-	}
+	};
 
 	NETDATA.unpause = function() {
 		NETDATA.options.pauseCallback = null;
 		NETDATA.options.updated_dom = true;
 		NETDATA.options.pause = false;
-	}
+	};
 
 	// ----------------------------------------------------------------------------------------------------------------
 
@@ -2945,7 +3166,7 @@
 				}, NETDATA.options.current.idle_between_charts);
 			}
 		}
-	}
+	};
 
 	// this is part of the parallel refresher
 	// its cause is to refresh sequencially all the charts
@@ -2953,7 +3174,7 @@
 	// it will call the parallel refresher back
 	// as soon as it sees a chart that its chart library
 	// is initialized
-	NETDATA.chartRefresher_unitialized = function() {
+	NETDATA.chartRefresher_uninitialized = function() {
 		if(NETDATA.options.updated_dom === true) {
 			// the dom has been updated
 			// get the dom parts again
@@ -2968,20 +3189,20 @@
 			if(state.library.initialized === true)
 				NETDATA.chartRefresher();
 			else
-				state.autoRefresh(NETDATA.chartRefresher_unitialized);
+				state.autoRefresh(NETDATA.chartRefresher_uninitialized);
 		}
-	}
+	};
 
 	NETDATA.chartRefresherWaitTime = function() {
 		return NETDATA.options.current.idle_parallel_loops;
-	}
+	};
 
 	// the default refresher
 	// it will create 2 sets of charts:
 	// - the ones that can be refreshed in parallel
 	// - the ones that depend on something else
 	// the first set will be executed in parallel
-	// the second will be given to NETDATA.chartRefresher_unitialized()
+	// the second will be given to NETDATA.chartRefresher_uninitialized()
 	NETDATA.chartRefresher = function() {
 		if(NETDATA.options.pause === true) {
 			// console.log('auto-refresher is paused');
@@ -3050,7 +3271,7 @@
 			setTimeout(NETDATA.chartRefresher,
 				NETDATA.chartRefresherWaitTime());
 		}
-	}
+	};
 
 	NETDATA.parseDom = function(callback) {
 		NETDATA.options.last_page_scroll = new Date().getTime();
@@ -3070,7 +3291,7 @@
 		}
 
 		if(typeof callback === 'function') callback();
-	}
+	};
 
 	// this is the main function - where everything starts
 	NETDATA.start = function() {
@@ -3108,9 +3329,9 @@
 		// bootstrap modal switching
 		$('.modal').on('hidden.bs.modal', NETDATA.onscroll);
 		$('.modal').on('shown.bs.modal', NETDATA.onscroll);
-		
+
 		NETDATA.parseDom(NETDATA.chartRefresher);
-	}
+	};
 
 	// ----------------------------------------------------------------------------------------------------------------
 	// peity
@@ -3154,7 +3375,7 @@
 
 		$(state.peity_instance).peity('line', state.peity_options);
 		return true;
-	}
+	};
 
 	NETDATA.peityChartCreate = function(state, data) {
 		state.peity_instance = document.createElement('div');
@@ -3171,7 +3392,7 @@
 
 		NETDATA.peityChartUpdate(state, data);
 		return true;
-	}
+	};
 
 	// ----------------------------------------------------------------------------------------------------------------
 	// sparkline
@@ -3197,7 +3418,7 @@
 		}
 		else {
 			NETDATA.chartLibraries.sparkline.enabled = false;
-			if(typeof callback === "function") 
+			if(typeof callback === "function")
 				callback();
 		}
 	};
@@ -3208,7 +3429,7 @@
 
 		$(state.element_chart).sparkline(data.result, state.sparkline_options);
 		return true;
-	}
+	};
 
 	NETDATA.sparklineChartCreate = function(state, data) {
 		var self = $(state.element);
@@ -3236,7 +3457,6 @@
 		var drawNormalOnTop = self.data('sparkline-drawnormalontop') || undefined;
 		var xvalues = self.data('sparkline-xvalues') || undefined;
 		var chartRangeClip = self.data('sparkline-chartrangeclip') || undefined;
-		var xvalues = self.data('sparkline-xvalues') || undefined;
 		var chartRangeMinX = self.data('sparkline-chartrangeminx') || undefined;
 		var chartRangeMaxX = self.data('sparkline-chartrangemaxx') || undefined;
 		var disableInteraction = self.data('sparkline-disableinteraction') || false;
@@ -3321,6 +3541,22 @@
 		smooth: false
 	};
 
+	NETDATA.dygraphToolboxPanAndZoom = function(state, after, before) {
+		if(after < state.netdata_first)
+			after = state.netdata_first;
+
+		if(before > state.netdata_last)
+			before = state.netdata_last;
+
+		state.setMode('zoom');
+		state.globalSelectionSyncStop();
+		state.globalSelectionSyncDelay();
+		state.dygraph_user_action = true;
+		state.dygraph_force_zoom = true;
+		state.updateChartPanOrZoom(after, before);
+		NETDATA.globalPanAndZoom.setMaster(state, after, before);
+	};
+
 	NETDATA.dygraphSetSelection = function(state, t) {
 		if(typeof state.dygraph_instance !== 'undefined') {
 			var r = state.calculateRowForTime(t);
@@ -3359,7 +3595,7 @@
 			if(typeof callback === "function")
 				callback();
 		});
-	}
+	};
 
 	NETDATA.dygraphInitialize = function(callback) {
 		if(typeof netdataNoDygraphs === 'undefined' || !netdataNoDygraphs) {
@@ -3732,7 +3968,7 @@
 						state.log('interactionModel.mousewheel()');
 
 					// Take the offset of a mouse event on the dygraph canvas and
-					// convert it to a pair of percentages from the bottom left. 
+					// convert it to a pair of percentages from the bottom left.
 					// (Not top left, bottom is where the lower value is.)
 					function offsetToPercentage(g, offsetX, offsetY) {
 						// This is calculating the pixel offset of the leftmost date.
@@ -4003,7 +4239,7 @@
 		}
 		else // stacked
 			state.morris_instance = new Morris.Area(state.morris_options);
-		
+
 		return true;
 	};
 
@@ -4340,7 +4576,7 @@
 	NETDATA.percentFromValueMax = function(value, max) {
 		if(value === null) value = 0;
 		if(max < value) max = value;
-		
+
 		var pcent = 0;
 		if(max !== 0) {
 			pcent = Math.round(value * 100 / max);
@@ -4348,7 +4584,7 @@
 		}
 
 		return pcent;
-	}
+	};
 
 	// ----------------------------------------------------------------------------------------------------------------
 	// easy-pie-chart
@@ -4411,7 +4647,7 @@
 			state.easyPieChartEvent = {
 				timer: null,
 				value: 0,
-				pcent: 0,
+				pcent: 0
 			};
 		}
 
@@ -4461,7 +4697,7 @@
 		var value = data.result[0];
 		var max = self.data('easypiechart-max-value') || null;
 		var adjust = self.data('easypiechart-adjust') || null;
-		
+
 		if(max === null) {
 			max = data.max;
 			state.easyPieChartMax = null;
@@ -4528,7 +4764,7 @@
 			animate: self.data('easypiechart-rotate') || {duration: 500, enabled: true},
 			easing: self.data('easypiechart-easing') || undefined
 		});
-		
+
 		// when we just re-create the chart
 		// do not animate the first update
 		var animate = true;
@@ -4578,10 +4814,10 @@
 			speed = 1000000000;
 		else if(typeof status === 'number')
 			speed = status;
-		
+
 		state.gauge_instance.animationSpeed = speed;
 		state.___gaugeOld__.speed = speed;
-	}
+	};
 
 	NETDATA.gaugeSet = function(state, value, min, max) {
 		if(typeof value !== 'number') value = 0;
@@ -4715,7 +4951,7 @@
 
 	NETDATA.gaugeChartCreate = function(state, data) {
 		var self = $(state.element);
-		var chart = $(state.element_chart);
+		// var chart = $(state.element_chart);
 
 		var value = data.result[0];
 		var max = self.data('gauge-max-value') || null;
@@ -4834,7 +5070,7 @@
 			minLabel: null,
 			maxLabel: null
 		};
-		
+
 		// we will always feed a percentage
 		state.gauge_instance.minValue = 0;
 		state.gauge_instance.maxValue = 100;
@@ -4860,6 +5096,7 @@
 			},
 			setSelection: NETDATA.dygraphSetSelection,
 			clearSelection:  NETDATA.dygraphClearSelection,
+			toolboxPanAndZoom: NETDATA.dygraphToolboxPanAndZoom,
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'json'; },
@@ -4898,6 +5135,7 @@
 			resize: null,
 			setSelection: undefined, // function(state, t) { return true; },
 			clearSelection: undefined, // function(state) { return true; },
+			toolboxPanAndZoom: null,
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'array'; },
@@ -4915,6 +5153,7 @@
 			resize: null,
 			setSelection: undefined, // function(state, t) { return true; },
 			clearSelection: undefined, // function(state) { return true; },
+			toolboxPanAndZoom: null,
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'ssvcomma'; },
@@ -4932,6 +5171,7 @@
 			resize: null,
 			setSelection: undefined, // function(state, t) { return true; },
 			clearSelection: undefined, // function(state) { return true; },
+			toolboxPanAndZoom: null,
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'json'; },
@@ -4949,6 +5189,7 @@
 			resize: null,
 			setSelection: undefined, //function(state, t) { return true; },
 			clearSelection: undefined, //function(state) { return true; },
+			toolboxPanAndZoom: null,
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'datatable'; },
@@ -4966,6 +5207,7 @@
 			resize: null,
 			setSelection: undefined, // function(state, t) { return true; },
 			clearSelection: undefined, // function(state) { return true; },
+			toolboxPanAndZoom: null,
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'json'; },
@@ -4983,6 +5225,7 @@
 			resize: null,
 			setSelection: undefined, // function(state, t) { return true; },
 			clearSelection: undefined, // function(state) { return true; },
+			toolboxPanAndZoom: null,
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'csvjsonarray'; },
@@ -5000,6 +5243,7 @@
 			resize: null,
 			setSelection: undefined, // function(state, t) { return true; },
 			clearSelection: undefined, // function(state) { return true; },
+			toolboxPanAndZoom: null,
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'json'; },
@@ -5017,6 +5261,7 @@
 			resize: null,
 			setSelection: NETDATA.easypiechartSetSelection,
 			clearSelection: NETDATA.easypiechartClearSelection,
+			toolboxPanAndZoom: null,
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'array'; },
@@ -5035,6 +5280,7 @@
 			resize: null,
 			setSelection: NETDATA.gaugeSetSelection,
 			clearSelection: NETDATA.gaugeClearSelection,
+			toolboxPanAndZoom: null,
 			initialized: false,
 			enabled: true,
 			format: function(state) { return 'array'; },
@@ -5055,7 +5301,7 @@
 		NETDATA.chartLibraries[library].url = url;
 		NETDATA.chartLibraries[library].initialized = true;
 		NETDATA.chartLibraries[library].enabled = true;
-	}
+	};
 
 	// ----------------------------------------------------------------------------------------------------------------
 	// Start up
@@ -5137,7 +5383,7 @@
 		.fail(function() {
 			alert('Cannot load required JS library: ' + NETDATA.requiredJs[index].url);
 		})
-	}
+	};
 
 	NETDATA.loadRequiredCSS = function(index) {
 		if(index >= NETDATA.requiredCSS.length)
@@ -5153,7 +5399,7 @@
 
 		NETDATA._loadCSS(NETDATA.requiredCSS[index].url);
 		NETDATA.loadRequiredCSS(++index);
-	}
+	};
 
 	NETDATA.errorReset();
 	NETDATA.loadRequiredCSS(0);
diff --git a/web/dashboard.slate.css b/web/dashboard.slate.css
index 0a6e955ed..662731061 100755..100644
--- a/web/dashboard.slate.css
+++ b/web/dashboard.slate.css
@@ -74,6 +74,43 @@ body {
 	margin: 0px;
 }
 
+.netdata-legend-toolbox {
+	display: block;
+	position: absolute;
+	bottom: 0px;
+	right: 30px;
+	height: 15px;
+	width: 110px;
+	background-color: #272b30;
+	font-size: 12px;
+	vertical-align: middle;
+	line-height: 15px;
+	color: #373b40;
+	text-align: center;
+	overflow: hidden;
+	z-index: 20;
+	padding: 0px;
+	margin: 0px;
+}
+
+.netdata-legend-toolbox-button {
+	display: inline-block;
+	position: relative;
+	height: 15px;
+	width: 18px;
+	background-color: #272b30;
+	font-size: 12px;
+	vertical-align: middle;
+	line-height: 15px;
+	color: #474b50;
+	text-align: center;
+	overflow: hidden;
+	z-index: 21;
+	padding: 0px;
+	margin: 0px;
+	cursor: pointer;
+}
+
 .netdata-message {
 	display: inline-block;
 	text-align: left;
@@ -110,6 +147,7 @@ body {
 	height: calc(100% - 15px);	/* 10px for the resize handler and 5px for the top margin */
 	font-size: 10px;
 	margin-top: 5px;
+	text-align: left;
 	/* width and height is calculated (depends on the appearance of the legend) */
 }
 
@@ -464,3 +502,11 @@ body {
 	color: #676b70;
 	font-weight: normal;
 }
+
+.popover-title {
+	font-weight: bold;
+	font-size: 12px;
+}
+.popover-content {
+	font-size: 11px;
+}
diff --git a/web/demo.html b/web/demo.html
index 8a6c0c129..8a6c0c129 100755..100644
--- a/web/demo.html
+++ b/web/demo.html
diff --git a/web/demo2.html b/web/demo2.html
index 7a8d75a54..7a8d75a54 100755..100644
--- a/web/demo2.html
+++ b/web/demo2.html
diff --git a/web/favicon.ico b/web/favicon.ico
index bba4043e5..821f7c402 100755..100644
--- a/web/favicon.ico
+++ b/web/favicon.ico
diff --git a/web/fonts/FontAwesome.otf b/web/fonts/FontAwesome.otf
index 3ed7f8b48..3ed7f8b48 100755..100644
--- a/web/fonts/FontAwesome.otf
+++ b/web/fonts/FontAwesome.otf
diff --git a/web/fonts/fontawesome-webfont.eot b/web/fonts/fontawesome-webfont.eot
index 9b6afaedc..9b6afaedc 100755..100644
--- a/web/fonts/fontawesome-webfont.eot
+++ b/web/fonts/fontawesome-webfont.eot
diff --git a/web/fonts/fontawesome-webfont.svg b/web/fonts/fontawesome-webfont.svg
index d05688e9e..d05688e9e 100755..100644
--- a/web/fonts/fontawesome-webfont.svg
+++ b/web/fonts/fontawesome-webfont.svg
diff --git a/web/fonts/fontawesome-webfont.ttf b/web/fonts/fontawesome-webfont.ttf
index 26dea7951..26dea7951 100755..100644
--- a/web/fonts/fontawesome-webfont.ttf
+++ b/web/fonts/fontawesome-webfont.ttf
diff --git a/web/fonts/fontawesome-webfont.woff b/web/fonts/fontawesome-webfont.woff
index dc35ce3c2..dc35ce3c2 100755..100644
--- a/web/fonts/fontawesome-webfont.woff
+++ b/web/fonts/fontawesome-webfont.woff
diff --git a/web/fonts/fontawesome-webfont.woff2 b/web/fonts/fontawesome-webfont.woff2
index 500e51725..500e51725 100755..100644
--- a/web/fonts/fontawesome-webfont.woff2
+++ b/web/fonts/fontawesome-webfont.woff2
diff --git a/web/fonts/glyphicons-halflings-regular.eot b/web/fonts/glyphicons-halflings-regular.eot
index b93a4953f..b93a4953f 100755..100644
--- a/web/fonts/glyphicons-halflings-regular.eot
+++ b/web/fonts/glyphicons-halflings-regular.eot
diff --git a/web/fonts/glyphicons-halflings-regular.svg b/web/fonts/glyphicons-halflings-regular.svg
index 94fb5490a..94fb5490a 100755..100644
--- a/web/fonts/glyphicons-halflings-regular.svg
+++ b/web/fonts/glyphicons-halflings-regular.svg
diff --git a/web/fonts/glyphicons-halflings-regular.ttf b/web/fonts/glyphicons-halflings-regular.ttf
index 1413fc609..1413fc609 100755..100644
--- a/web/fonts/glyphicons-halflings-regular.ttf
+++ b/web/fonts/glyphicons-halflings-regular.ttf
diff --git a/web/fonts/glyphicons-halflings-regular.woff b/web/fonts/glyphicons-halflings-regular.woff
index 9e612858f..9e612858f 100755..100644
--- a/web/fonts/glyphicons-halflings-regular.woff
+++ b/web/fonts/glyphicons-halflings-regular.woff
diff --git a/web/fonts/glyphicons-halflings-regular.woff2 b/web/fonts/glyphicons-halflings-regular.woff2
index 64539b54c..64539b54c 100755..100644
--- a/web/fonts/glyphicons-halflings-regular.woff2
+++ b/web/fonts/glyphicons-halflings-regular.woff2
diff --git a/web/images/README.md b/web/images/README.md
deleted file mode 100644
index 0c250fe59..000000000
--- a/web/images/README.md
+++ /dev/null
@@ -1 +0,0 @@
-Icons provided by [IconsDB.com](http://www.iconsdb.com/red-icons/seo-performance-icon.html)
diff --git a/web/images/seo-performance-114.png b/web/images/seo-performance-114.png
index 894270793..894270793 100755..100644
--- a/web/images/seo-performance-114.png
+++ b/web/images/seo-performance-114.png
diff --git a/web/images/seo-performance-128.png b/web/images/seo-performance-128.png
index c91a39b58..c91a39b58 100755..100644
--- a/web/images/seo-performance-128.png
+++ b/web/images/seo-performance-128.png
diff --git a/web/images/seo-performance-16.png b/web/images/seo-performance-16.png
index 4bafb3c27..4bafb3c27 100755..100644
--- a/web/images/seo-performance-16.png
+++ b/web/images/seo-performance-16.png
diff --git a/web/images/seo-performance-24.png b/web/images/seo-performance-24.png
index 1a03f394c..1a03f394c 100755..100644
--- a/web/images/seo-performance-24.png
+++ b/web/images/seo-performance-24.png
diff --git a/web/images/seo-performance-256.png b/web/images/seo-performance-256.png
index 380c4317a..380c4317a 100755..100644
--- a/web/images/seo-performance-256.png
+++ b/web/images/seo-performance-256.png
diff --git a/web/images/seo-performance-32.png b/web/images/seo-performance-32.png
index 407b34076..407b34076 100755..100644
--- a/web/images/seo-performance-32.png
+++ b/web/images/seo-performance-32.png
diff --git a/web/images/seo-performance-48.png b/web/images/seo-performance-48.png
index dd2149920..dd2149920 100755..100644
--- a/web/images/seo-performance-48.png
+++ b/web/images/seo-performance-48.png
diff --git a/web/images/seo-performance-512.png b/web/images/seo-performance-512.png
index b51648027..b51648027 100755..100644
--- a/web/images/seo-performance-512.png
+++ b/web/images/seo-performance-512.png
diff --git a/web/images/seo-performance-64.png b/web/images/seo-performance-64.png
index 36f8af4ca..36f8af4ca 100755..100644
--- a/web/images/seo-performance-64.png
+++ b/web/images/seo-performance-64.png
diff --git a/web/images/seo-performance-72.png b/web/images/seo-performance-72.png
index e168fde06..e168fde06 100755..100644
--- a/web/images/seo-performance-72.png
+++ b/web/images/seo-performance-72.png
diff --git a/web/images/seo-performance-multi-size.icns b/web/images/seo-performance-multi-size.icns
index 2e1a884fb..2e1a884fb 100755..100644
--- a/web/images/seo-performance-multi-size.icns
+++ b/web/images/seo-performance-multi-size.icns
diff --git a/web/images/seo-performance-multi-size.ico b/web/images/seo-performance-multi-size.ico
index bba4043e5..821f7c402 100755..100644
--- a/web/images/seo-performance-multi-size.ico
+++ b/web/images/seo-performance-multi-size.ico
diff --git a/web/index.html b/web/index.html
index 8c86e16c6..6f6013da1 100755..100644
--- a/web/index.html
+++ b/web/index.html
@@ -12,7 +12,7 @@
 	<meta name="author" content="costa@tsaousis.gr">
 
 	<link rel="shortcut icon" href="images/seo-performance-multi-size.ico">
-	
+
 	<link rel="apple-touch-icon" href="images/seo-performance-72.png">
 	<link rel="apple-touch-icon" sizes="72x72" href="images/seo-performance-72.png">
 	<link rel="apple-touch-icon" sizes="114x114" href="images/seo-performance-114.png">
@@ -28,7 +28,7 @@
 
 	<style>
 
-	/* prevent body from hidding under the navbar */
+	/* prevent body from hiding under the navbar */
 	body {
 		padding-top: 50px;
 	}
@@ -48,12 +48,12 @@
 		position: relative;
 		z-index: -2;
 	}
-	h1:before, h2:before { 
-		display: block; 
-		content: " "; 
+	h1:before, h2:before {
+		display: block;
+		content: " ";
 		margin-top: -70px;
 		height: 70px;
-		visibility: hidden; 
+		visibility: hidden;
 	}
 
 	.p {
@@ -74,7 +74,7 @@
 	}
 
 	.chart-message {
-		display: block; 
+		display: block;
 		margin-top: 10px;
 	}
 
@@ -280,9 +280,57 @@
 	<!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
 	<!-- <script> netdataServer = "http://box:19999"; </script> -->
 
+	<!-- check which theme to use -->
+	<script>
+		function loadLocalStorage(name) {
+			var ret = null;
+
+			try {
+				if(typeof Storage !== "undefined" && typeof localStorage === 'object')
+					ret = localStorage.getItem(name);
+			}
+			catch(error) {
+				;
+			}
+
+			if(typeof ret === 'undefined' || ret === null)
+				return null;
+
+			return ret;
+		}
+
+		function saveLocalStorage(name, value) {
+			try {
+				if(typeof Storage !== "undefined" && typeof localStorage === 'object') {
+					localStorage.setItem(name, value.toString());
+					return true;
+				}
+			}
+			catch(error) {
+				;
+			}
+
+			return false;
+		}
+
+		function getTheme(def) {
+			var ret = loadLocalStorage('netdataTheme');
+			if(typeof ret === 'undefined' || ret === null || ret === 'undefined')
+				return def;
+			else
+				return ret;
+		}
+		var netdataTheme = getTheme('slate');
+
+		function setTheme(theme) {
+			if(theme === netdataTheme) return false;
+
+			return saveLocalStorage('netdataTheme', theme);
+		}
+	</script>
+
 	<!-- load the dashboard manager - it will do the rest -->
-	<script>var netdataTheme = 'slate';</script>
-	<script type="text/javascript" src="dashboard.js?v25"></script>
+	<script type="text/javascript" src="dashboard.js?v32"></script>
 </head>
 
 <body data-spy="scroll" data-target="#sidebar">
@@ -301,6 +349,7 @@
 				<ul class="nav navbar-nav">
 					<li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
 					<li><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
+					<li id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal"><i class="fa fa-cloud-download"></i> update</a></li>
 <!--					<li><a href="old/" class="btn" target="_blank"><i class="fa fa-step-backward"></i> old dashboard</a></li> -->
 					<li><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
 <!--					<li><a href="#sec">Visualize</a></li>
@@ -407,6 +456,9 @@
 						<i class="fa fa-circle"></i> <a href="http://D3js.org/" target="_blank">D3</a>,
 						<i class="fa fa-copyright"></i> Copyright 2015, Mike Bostock, <a href="http://opensource.org/licenses/BSD-3-Clause" target="_blank">BSD License</a>
 
+						<i class="fa fa-circle"></i> <a href="https://github.com/broofa/node-int64" target="_blank">node-int64</a>,
+						<i class="fa fa-copyright"></i> Copyright 2014, Robert Kieffer, <a href="https://github.com/broofa/node-int64/blob/master/LICENSE" target="_blank">MIT License</a>
+
 					</small>
 				</div>
 			</div>
@@ -422,7 +474,7 @@
 				</div>
 				<div class="modal-body">
 						<div class="p">
-						<b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> is the fastest way to visualize metrics. It is a resource efficient, highly optimized system for collecting and visualizing any type of realtime timeseries data, from CPU usage, disk activity, SQL queries, API calls, web site visitors, etc.
+						<b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> is the fastest way to visualize metrics. It is a resource efficient, highly optimized system for collecting and visualizing any type of real-time time series data, from CPU usage, disk activity, SQL queries, API calls, web site visitors, etc.
 						</div>
 						<div class="p">
 						<b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> tries to visualize the truth of <b>now</b>, in its <b>greatest detail</b>, so that you can get insights of what is happening now and what just happened, on your systems and applications.
@@ -494,7 +546,7 @@
 								While pressing the shift key, click on the contents of a chart and move the mouse to select an area, to zoom in. The other charts will follow too. Zooming is performed in two phases:
 								<ul>
 									<li>The already loaded chart contents are zoomed (low resolution)</li>
-									<li>New data are transfered from the netdata server, to refresh the chart with possibly more detail.</li>
+									<li>New data are transferred from the netdata server, to refresh the chart with possibly more detail.</li>
 								</ul>
 								Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 							</div>
@@ -508,9 +560,9 @@
 							<hr/>
 							<div class="p">
 								<h4>Legend Operations</h4>
-								Click on the label or value of a dimension, will select / unselect this dimension.
+								Click on the label or value of a dimension, will select / un-select this dimension.
 								<br/>
-								You can press any of the SHIFT or CONTROL keys and then click on legend labels or values, to select / unselect multiple dimensions.
+								You can press any of the SHIFT or CONTROL keys and then click on legend labels or values, to select / un-select multiple dimensions.
 							</div>
 						</div>
 						<div role="tabpanel" class="tab-pane" id="help_touch">
@@ -544,7 +596,7 @@
 							<hr/>
 							<div class="p">
 								<h4>Legend Operations</h4>
-								Tap on the label or value of a dimension, will select / unselect this dimension.
+								Tap on the label or value of a dimension, will select / un-select this dimension.
 							</div>
 						</div>
 					</div>
@@ -565,9 +617,11 @@
 				</div>
 				<div class="modal-body">
 					<center>
-						<small style="color: #BBBBBB;">Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
+						<small style="color: #BBBBBB;">These are browser settings. Each viewer has its own. They do not affect the operation of your netdata server.
 						<br/>
-						To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="NETDATA.resetOptions(); return false;">here</a>.</small>
+						Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
+						<br/>
+						To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="resetDashboardOptions(); return false;">here</a>.</small>
 					</center>
 					<div style="padding: 10px;"></div>
 
@@ -581,7 +635,7 @@
 					<!-- Tab panes -->
 					<div class="tab-content">
 						<div role="tabpanel" class="tab-pane active" id="settings_performance">
-							<form id="optionsForm" method="get" class="form-horizontal">
+							<form id="optionsForm1" method="get" class="form-horizontal">
 								<div class="form-group">
 									<table>
 									<tr class="option-row">
@@ -595,7 +649,7 @@
 										<input id="eliminate_zero_dimensions" type="checkbox" checked data-toggle="toggle" data-on="Non Zero" data-off="All" data-width="110px">
 										</td>
 										<td class="option-info"><strong>Which dimensions to show?</strong><br/>
-											<small>When set to <b>Non Zero</b>, dimensions that have all their values (within the current view) set to zero will not be transfered from the netdata server (except if all dimensions of the chart are zero, in which case this setting does nothing - all dimensions are transfered and shown). When set to <b>All</b>, all dimensions will always be shown. Set it to <b>Non Zero</b> to lower the data transfered between netdata and your browser, lower the CPU requirements of your browser (fewer lines to draw) and increase the focus on the legends (fewer entries at the legends).</small>
+											<small>When set to <b>Non Zero</b>, dimensions that have all their values (within the current view) set to zero will not be transferred from the netdata server (except if all dimensions of the chart are zero, in which case this setting does nothing - all dimensions are transferred and shown). When set to <b>All</b>, all dimensions will always be shown. Set it to <b>Non Zero</b> to lower the data transferred between netdata and your browser, lower the CPU requirements of your browser (fewer lines to draw) and increase the focus on the legends (fewer entries at the legends).</small>
 										</td>
 										</tr>
 									<tr class="option-row">
@@ -609,13 +663,13 @@
 							</form>
 						</div>
 						<div role="tabpanel" class="tab-pane" id="settings_sync">
-							<form id="optionsForm" method="get" class="form-horizontal">
+							<form id="optionsForm2" method="get" class="form-horizontal">
 								<div class="form-group">
 									<table>
 									<tr class="option-row">
-										<td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequencial" data-width="110px"></td>
+										<td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequential" data-width="110px"></td>
 										<td class="option-info"><strong>Which chart refresh policy to use?</strong><br/>
-											<small>When set to <b>parallel</b>, visible charts are refreshed in parallel (all queries are sent to netdata server in parallel) and are rendered asynchronously. When set to <b>sequencial</b> charts are refreshed one after another. Set it to parallel if your browser can cope with it (most modern browsers do), set it to sequencial if you work on an older/slower computer.</small>
+											<small>When set to <b>parallel</b>, visible charts are refreshed in parallel (all queries are sent to netdata server in parallel) and are rendered asynchronously. When set to <b>sequential</b> charts are refreshed one after another. Set it to parallel if your browser can cope with it (most modern browsers do), set it to sequential if you work on an older/slower computer.</small>
 										</td>
 										</tr>
 									<tr class="option-row" id="concurrent_refreshes_row">
@@ -651,10 +705,28 @@
 							</form>
 						</div>
 						<div role="tabpanel" class="tab-pane" id="settings_visual">
-							<form id="optionsForm" method="get" class="form-horizontal">
+							<form id="optionsForm3" method="get" class="form-horizontal">
 								<div class="form-group">
 									<table>
 									<tr class="option-row">
+										<td class="option-control"><input id="netdata_theme_control" type="checkbox" checked data-toggle="toggle" data-offstyle="danger" data-onstyle="success" data-on="Dark" data-off="White" data-width="110px"></td>
+										<td class="option-info"><strong>Which theme to use?</strong><br/>
+											<small>Netdata comes with two themes: <b>Dark</b> (the default) and <b>White</b>.
+											<br/>
+											<b>Switching this will reload the dashboard</b>.
+											</small>
+										</td>
+										</tr>
+									<tr class="option-row">
+										<td class="option-control"><input id="show_help" type="checkbox" checked data-toggle="toggle" data-on="Help Me" data-off="No Help" data-width="110px"></td>
+										<td class="option-info"><strong>Do you need help?</strong><br/>
+											<small>Netdata can show some help in some areas to help you use the dashboard. If all these balloons bother you, disable them using this switch.
+											<br/>
+											<b>Switching this will reload the dashboard</b>.
+											</small>
+										</td>
+										</tr>
+									<tr class="option-row">
 										<td class="option-control"><input id="pan_and_zoom_data_padding" type="checkbox" checked data-toggle="toggle"  data-on="Pad" data-off="Don't Pad" data-width="110px"></td>
 										<td class="option-info"><strong>Enable data padding when panning and zooming?</strong><br/>
 											<small>When set to <b>Pad</b> the charts will be padded with more data, both before and after the visible area, thus giving the impression the whole database is loaded. This padding will happen only after the first pan or zoom operation on the chart (initially all charts have only the visible data). When set to <b>Don't Pad</b> only the visible data will be transfered from the netdata server, even after the first pan and zoom operation.</small>
@@ -663,7 +735,9 @@
 									<tr class="option-row">
 										<td class="option-control"><input id="smooth_plot" type="checkbox" checked data-toggle="toggle"  data-on="Smooth" data-off="Rough" data-width="110px"></td>
 										<td class="option-info"><strong>Enable Bézier lines on charts?</strong><br/>
-											<small>When set to <b>Smooth</b> the charts libraries that support it, will plot smooth curves instead of simple straight lines to connect the points.</small>
+											<small>When set to <b>Smooth</b> the charts libraries that support it, will plot smooth curves instead of simple straight lines to connect the points.
+											<br/>
+											Keep in mind <a href="http://dygraphs.com" target="_blank">dygraphs</a>, the main charting library in netdata dashboards, can only smooth line charts. It cannot smooth area or stacked charts. When set to <b>Rough</b>, this setting can lower the CPU resources consumed by your browser.</small>
 										</td>
 										</tr>
 									</table>
@@ -679,14 +753,47 @@
 		</div>
 	</div>
 
-</body>
-</html>
+
+	<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+					<h4 class="modal-title" id="updateModalLabel">Update Check</h4>
+				</div>
+				<div class="modal-body">
+					Your netdata version: <b><code><span id="netdataVersion">Unknown</span></code></b>
+					<br/>
+					<div style="padding: 10px;"></div>
+					<div id="versionCheckLog">Not checked yet. Please press the Check Now button.</div>
+				</div>
+				<div class="modal-footer">
+					<a href="#" onclick="notifyForUpdate(true);" type="button" class="btn btn-default">Check Now</a>
+					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
 <script>
 
-var demo_hostname = 'netdata.firehol.org';
-// var demo_hostname = 'box';
+var this_is_demo = null;
+function isdemo() {
+	if(this_is_demo !== null) return this_is_demo;
+	this_is_demo = false;
+
+	try {
+		if(typeof document.location.hostname === 'string')
+			this_is_demo = document.location.hostname.endsWith('.firehol.org');
+	}
+	catch(error) {
+		;
+	}
 
-if(document.location.hostname === demo_hostname) {
+	return this_is_demo;
+}
+
+if(isdemo()) {
 	document.getElementById('masthead').style.display = 'block';
 }
 
@@ -768,10 +875,10 @@ function sortObjectByPriority(object) {
 function gaugeChart(title, width, dimensions, colors) {
 	if(typeof colors === 'undefined')
 		colors = '';
-	
+
 	if(typeof dimensions === 'undefined')
 		dimensions = '';
-	
+
 	return '<div data-netdata="CHART_UNIQUE_ID"'
 							+ ' data-dimensions="' + dimensions + '"'
 							+ ' data-chart-library="gauge"'
@@ -813,6 +920,11 @@ var menuData = {
 		info: undefined
 	},
 
+	'ipv6': {
+		title: 'IPv6 Networking',
+		info: undefined
+	},
+
 	'ipvs': {
 		title: 'IP Virtual Server',
 		info: undefined
@@ -850,7 +962,19 @@ var menuData = {
 
 	'apps': {
 		title: 'Applications',
-		info: 'Per application statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics for applications of interest, defined in <code>/etc/netdata/apps_groups.conf</code> (the default is <a href="https://github.com/firehol/netdata/blob/master/conf.d/apps_groups.conf" target="_blank">here</a>). The plugin internaly builds a process tree (much like <code>ps fax</code> does), and groups processes together (evaluating both child and parent processes) so that the result is always a chart with a predefined set of dimensions (of course, only application groups found running are reported).<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning childs continiously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited childs of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealisting utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
+		info: 'Per application statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics for applications of interest, defined in <code>/etc/netdata/apps_groups.conf</code> (the default is <a href="https://github.com/firehol/netdata/blob/master/conf.d/apps_groups.conf" target="_blank">here</a>). The plugin internally builds a process tree (much like <code>ps fax</code> does), and groups processes together (evaluating both child and parent processes) so that the result is always a chart with a predefined set of dimensions (of course, only application groups found running are reported).<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning children continuously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited children of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealistic utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
+		height: 1.5
+	},
+
+	'users': {
+		title: 'Users',
+		info: 'Per user statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics per user.<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning children continuously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited children of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealistic utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
+		height: 1.5
+	},
+
+	'groups': {
+		title: 'User Groups',
+		info: 'Per user group statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics per user group.<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning children continuously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited children of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealistic utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
 		height: 1.5
 	},
 
@@ -868,7 +992,22 @@ var menuData = {
 var submenuData = {
 	'mem.ksm': {
 		title: 'Memory Deduper',
-		info: 'Kernel Same-page Merging (KSM) is the kernel memory de-duper.'
+		info: 'Kernel Same-page Merging (KSM) performance monitoring, read from several files in <code>/sys/kernel/mm/ksm/</code>. KSM is a memory-saving de-duplication feature in the Linux kernel (since version 2.6.32). The KSM daemon ksmd periodically scans those areas of user memory which have been registered with it, looking for pages of identical content which can be replaced by a single write-protected page (which is automatically copied if a process later wants to update its content). KSM was originally developed for use with KVM (where it was known as Kernel Shared Memory), to fit more virtual machines into physical memory, by sharing the data common between them.  But it can be useful to any application which generates many instances of the same data.'
+	},
+
+	'netfilter.conntrack': {
+		title: 'Connection Tracker',
+		info: 'Netfilter Connection Tracker performance monitoring, read from <code>/proc/net/stat/nf_conntrack</code>. The connection tracker keeps track of all connections of the machine, inbound and outbound. It works by keeping a database with all open connections, tracking network and address translation and connection expectations.'
+	},
+
+	'netfilter.nfacct': {
+		title: 'Bandwidth Accounting',
+		info: 'The following information is read using the <code>nfacct.plugin</code>.'
+	},
+
+	'netfilter.synproxy': {
+		title: 'DDoS Protection',
+		info: 'DDoS Protection performance monitoring read from <code>/proc/net/stat/synproxy</code>. <a href="https://github.com/firehol/firehol/wiki/Working-with-SYNPROXY" target="_blank">SYNPROXY</a> is a TCP SYN packets proxy. It is used to protect any TCP server (like a web server) from SYN floods and similar DDoS attacks. It is a netfilter module, in the Linux kernel (since version 3.12). It is optimized to handle millions of packets per second utilizing all CPUs available without any concurrency locking between the connections. It can be used for any kind of TCP traffic (even encrypted), since it does not interfere with the content itself.'
 	}
 };
 
@@ -931,11 +1070,15 @@ var chartData = {
 
 	'system.idlejitter': {
 		colors: '#5555AA',
-		info: 'Idle jitter is calculated by netdata. A thread is spawned that requests to sleep for a few microseconds. When the system wakes it up, it measures how many microseconds have passed. The different between the requested and the actual duration of the sleep, is the <b>idle jitter</b>. This number is useful in realtime environments, where CPU jitter can affect the quality of the service (like VoIP media gateways).'
+		info: 'Idle jitter is calculated by netdata. A thread is spawned that requests to sleep for a few microseconds. When the system wakes it up, it measures how many microseconds have passed. The difference between the requested and the actual duration of the sleep, is the <b>idle jitter</b>. This number is useful in real-time environments, where CPU jitter can affect the quality of the service (like VoIP media gateways).'
 	},
 
 	'system.ipv4': {
-		info: 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>. This includes <code>lo</code> device traffic.'
+		info: 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>.'
+	},
+
+	'system.ipv6': {
+		info: 'Total IPv6 Traffic, read from <code>/proc/net/snmp6</code>.'
 	},
 
 	'system.ram': {
@@ -986,6 +1129,30 @@ var chartData = {
 		height: 2.0
 	},
 
+	'users.cpu': {
+		height: 2.0
+	},
+
+	'users.preads': {
+		height: 2.0
+	},
+
+	'users.pwrites': {
+		height: 2.0
+	},
+
+	'groups.cpu': {
+		height: 2.0
+	},
+
+	'groups.preads': {
+		height: 2.0
+	},
+
+	'groups.pwrites': {
+		height: 2.0
+	},
+
 	'tc.qos': {
 		heads: [
 			function(id) {
@@ -1135,7 +1302,7 @@ function menuTitle(menu) {
 }
 
 function menuInfo(menu) {
-	return anyAttribute(menuData, 'title', menu, null);
+	return anyAttribute(menuData, 'info', menu, null);
 }
 
 function menuHeight(menu, relative) {
@@ -1190,11 +1357,22 @@ function enrichChartData(chart) {
 		case 'tc':
 			chart.menu = tmp;
 
-			// find the interface name from the name
-			if(typeof options.submenu_names[chart.family] === 'undefined' || options.submenu_names[chart.family] === chart.family)
-				options.submenu_names[chart.family] = chart.name.split('.')[1].split('_')[0];
+			// find a name for this device from fireqos info
+			// we strip '_(in|out)' or '(in|out)_'
+			if(typeof options.submenu_names[chart.family] === 'undefined' || options.submenu_names[chart.family] === chart.family) {
+				var n = chart.name.split('.')[1];
+				if(n.endsWith('_in'))
+					options.submenu_names[chart.family] = n.slice(0, n.lastIndexOf('_in'));
+				else if(n.endsWith('_out'))
+					options.submenu_names[chart.family] = n.slice(0, n.lastIndexOf('_out'));
+				else if(n.startsWith('in_'))
+					options.submenu_names[chart.family] = n.slice(3, n.length);
+				else if(n.startsWith('out_'))
+					options.submenu_names[chart.family] = n.slice(4, n.length);
+			}
 
 			// increase the priority of IFB devices
+			// to have inbound appear before outbound
 			if(chart.id.match(/.*-ifb$/))
 				chart.priority--;
 
@@ -1296,6 +1474,29 @@ function headMain(charts, duration) {
 		+ ' data-points="' + duration.toString() + '"'
 		+ ' role="application"></div>';
 	}
+	else if(typeof charts['system.ipv6'] !== 'undefined') {
+		head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
+		+ ' data-dimensions="received"'
+		+ ' data-chart-library="easypiechart"'
+		+ ' data-title="IPv6 Inbound"'
+		+ ' data-units="kbps"'
+		+ ' data-width="10%"'
+		+ ' data-before="0"'
+		+ ' data-after="-' + duration.toString() + '"'
+		+ ' data-points="' + duration.toString() + '"'
+		+ ' role="application"></div>';
+
+		head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
+		+ ' data-dimensions="sent"'
+		+ ' data-chart-library="easypiechart"'
+		+ ' data-title="IPv6 Outbound"'
+		+ ' data-units="kbps"'
+		+ ' data-width="10%"'
+		+ ' data-before="0"'
+		+ ' data-after="-' + duration.toString() + '"'
+		+ ' data-points="' + duration.toString() + '"'
+		+ ' role="application"></div>';
+	}
 
 	if(typeof charts['system.ram'] !== 'undefined')
 		head += '<div style="margin-right: 10px;" data-netdata="system.ram"'
@@ -1433,7 +1634,7 @@ function renderChartsAndMenu(data) {
 				height: menuHeight(charts[c].menu, options.chartsHeight)
 			};
 		}
-		
+
 		if(charts[c].priority < menus[charts[c].menu].priority)
 			menus[charts[c].menu].priority = charts[c].priority;
 
@@ -1447,7 +1648,7 @@ function renderChartsAndMenu(data) {
 				height: submenuHeight(charts[c].menu, charts[c].submenu, menus[charts[c].menu].height)
 			};
 		}
-		
+
 		if(charts[c].priority < menus[charts[c].menu].submenus[charts[c].submenu].priority)
 			menus[charts[c].menu].submenus[charts[c].submenu].priority = charts[c].priority;
 
@@ -1484,7 +1685,7 @@ function downloadAllCharts(netdata_url) {
 			document.getElementById('hostname').innerHTML = options.hostname;
 			document.getElementById('hostname').href = NETDATA.serverDefault;
 			document.title = options.hostname + ' dashboard';
-			
+
 			renderChartsAndMenu(data);
 
 			// prepare our DOM
@@ -1498,6 +1699,141 @@ function downloadAllCharts(netdata_url) {
 
 // ----------------------------------------------------------------------------
 
+function versionLog(msg) {
+	document.getElementById('versionCheckLog').innerHTML = msg;
+}
+
+function getNetdataVersion(callback) {
+	versionLog('Downloading installed version info from netdata...');
+
+	$.ajax({
+		url: 'version.txt',
+		async: true,
+		cache: false
+	})
+	.done(function(data) {
+		data = data.replace(/(\r\n|\n|\r| |\t)/gm,"");
+		if(data.length !== 40) {
+			versionLog('Received version string is invalid.');
+			callback(null);
+		}
+		else {
+			versionLog('Installed version of netdata is ' + data);
+			document.getElementById('netdataVersion').innerHTML = data;
+			callback(data);
+		}
+	})
+	.fail(function() {
+		versionLog('Failed to download installed version info from netdata!');
+		callback(null);
+	});
+}
+
+function getGithubLatestCommit(callback) {
+	versionLog('Downloading latest version info from github...');
+
+	$.ajax({
+		url: 'https://api.github.com/repos/firehol/netdata/commits',
+		async: true,
+		cache: false
+	})
+	.done(function(data) {
+		versionLog('Latest version info from github is ' + data[0].sha);
+		callback(data[0].sha);
+	})
+	.fail(function() {
+		versionLog('Failed to download installed version info from github!');
+		callback(null);
+	});
+}
+
+function checkForUpdate(callback) {
+	getNetdataVersion(function(sha1) {
+		if(sha1 === null) callback(null, null);
+
+		getGithubLatestCommit(function(sha2) {
+			callback(sha1, sha2);
+		});
+	});
+
+	return null;
+}
+
+var updateBlinkCounter = 0;
+function notifyForUpdate(force) {
+	versionLog('<p>checking for updates...</p>');
+
+	var now = new Date().getTime();
+
+	if(typeof force === 'undefined' || force !== true) {
+		var last = loadLocalStorage('last_update_check');
+
+		if(typeof last === 'string')
+			last = parseInt(last);
+		else
+			last = 0;
+
+		if(now - last < 3600000 * 8) {
+			// no need to check it - too soon
+			return;
+		}
+	}
+
+	checkForUpdate(function(sha1, sha2) {
+		var save = false;
+
+		if(sha1 === null) {
+			save = false;
+			versionLog('<p><big>Failed to get your netdata version!</big></p><p>You can always get the latest version of netdata from <a href="https://github.com/firehol/netdata" target="_blank">its github page</a>.</p>');
+		}
+		else if(sha2 === null) {
+			save = false;
+			versionLog('<p><big>Failed to get the latest version from github.</big></p><p>You can always get the latest version of netdata from <a href="https://github.com/firehol/netdata" target="_blank">its github page</a>.</p>');
+		}
+		else if(sha1 === sha2) {
+			save = true;
+			versionLog('<p><big>You already have the latest version of netdata!</big></p><p>No update yet?<br/>Probably, we need some motivation to keep going on!</p><p>If you haven\'t already, <a href="https://github.com/firehol/netdata" target="_blank">give netdata a <b>Star</b> at its github page</a>.</p>');
+		}
+		else {
+			save = true;
+			var compare = 'https://github.com/firehol/netdata/compare/' + sha1.toString() + '...' + sha2.toString();
+
+			versionLog('<p><big><strong>New version of netdata available!</strong></big></p><p>Latest version: ' + sha2.toString() + '</p><p><a href="' + compare + '" target="_blank">Click here for the changes log</a> since your installed version, and<br/><a href="https://github.com/firehol/netdata/wiki/Updating-Netdata" target="_blank">click here for directions on updating</a> your netdata installation.</p><p>We suggest to review the changes log for new features you may be interested, or important bug fixes you may need.<br/>Keeping your netdata updated, is generally a good idea.</p>');
+
+			function updateButtonBlink() {
+				updateBlinkCounter--;
+				if(updateBlinkCounter > 0)
+					$('#updateButton').fadeOut(500).fadeIn(500, updateButtonBlink);
+			}
+
+			if(updateBlinkCounter === 0) {
+				updateBlinkCounter = 300;
+				updateButtonBlink();
+			}
+		}
+
+		if(save)
+			saveLocalStorage('last_update_check', now.toString());
+	});
+}
+
+// ----------------------------------------------------------------------------
+
+function getUrlParameter(sParam) {
+    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
+        sURLVariables = sPageURL.split('&'),
+        sParameterName,
+        i;
+
+    for (i = 0; i < sURLVariables.length; i++) {
+        sParameterName = sURLVariables[i].split('=');
+
+        if (sParameterName[0] === sParam) {
+            return sParameterName[1] === undefined ? true : sParameterName[1];
+        }
+    }
+}
+
 function finalizePage() {
 	// resize all charts - without starting the background thread
 	// this has to be done while NETDATA is paused
@@ -1505,6 +1841,13 @@ function finalizePage() {
 	// the Dom elements are initially zero-sized
 	NETDATA.parseDom();
 
+	var before = 0, after = 0;
+	after = getUrlParameter('force_after_ms');
+	before = getUrlParameter('force_before_ms');
+
+	if(before > 0 && after > 0)
+		NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], after, before);
+
 	// let it run (update the charts)
 	NETDATA.unpause();
 
@@ -1521,7 +1864,7 @@ function finalizePage() {
 	/* activate bootstrap sidebar (affix) */
 	$('#sidebar').affix({
 		offset: {
-			top: (document.location.hostname === demo_hostname)?150:0,
+			top: (isdemo())?150:0,
 			bottom: 0
 		}
 	});
@@ -1532,7 +1875,7 @@ function finalizePage() {
 	$('#sidebar').on('affixed.bs.affix', function() {
 		$(this).removeAttr('style');
 	});
-	
+
 	/* activate bootstrap scrollspy (needed for sidebar) */
 	$(document.body).scrollspy({
 		target: '#sidebar',
@@ -1554,6 +1897,12 @@ function finalizePage() {
 			}
 		}
 
+		var theme_sync_option = function(option) {
+			var self = $('#' + option);
+
+			self.bootstrapToggle(netdataTheme === 'slate'?'on':'off');
+		}
+
 		sync_option('eliminate_zero_dimensions');
 		sync_option('destroy_on_hide');
 		sync_option('parallel_refresher');
@@ -1563,6 +1912,8 @@ function finalizePage() {
 		sync_option('stop_updates_when_focus_is_lost');
 		sync_option('smooth_plot');
 		sync_option('pan_and_zoom_data_padding');
+		sync_option('show_help');
+		theme_sync_option('netdata_theme_control');
 
 		if(NETDATA.getOption('parallel_refresher') === false) {
 			$('#concurrent_refreshes_row').hide();
@@ -1583,13 +1934,42 @@ function finalizePage() {
 	$('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
 	$('#smooth_plot').change(function()                     { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
 	$('#pan_and_zoom_data_padding').change(function()       { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); });
-	
-	if(document.location.hostname === demo_hostname)
+	$('#show_help').change(function()                       { NETDATA.setOption('show_help', $(this).prop('checked')); location.reload(); });
+
+	// this has to be the last
+	// it reloads the page
+	$('#netdata_theme_control').change(function() {
+		if(setTheme($(this).prop('checked')?'slate':'default'))
+			location.reload();
+	});
+
+	if(isdemo()) {
 		setTimeout(function() {
 			$('#welcomeModal').modal();
 		}, 1000);
+	}
+	else
+		notifyForUpdate();
+
+	$('#updateModal').on('shown.bs.modal', function() {
+		notifyForUpdate(true);
+	});
+}
+
+function resetDashboardOptions() {
+	var help = NETDATA.options.current.show_help;
+
+	NETDATA.resetOptions();
+	if(setTheme('slate'))
+		location.reload();
+
+	if(help !== NETDATA.options.current.show_help)
+		location.reload();
 }
 
 downloadAllCharts();
 
 </script>
+
+</body>
+</html>
diff --git a/web/lib/ElementQueries.js b/web/lib/ElementQueries.js
index 0c0906e3b..0c0906e3b 100755..100644
--- a/web/lib/ElementQueries.js
+++ b/web/lib/ElementQueries.js
diff --git a/web/lib/ResizeSensor.js b/web/lib/ResizeSensor.js
index e5ce136a8..e5ce136a8 100755..100644
--- a/web/lib/ResizeSensor.js
+++ b/web/lib/ResizeSensor.js
diff --git a/web/lib/bootstrap.min.js b/web/lib/bootstrap.min.js
index e79c06513..e79c06513 100755..100644
--- a/web/lib/bootstrap.min.js
+++ b/web/lib/bootstrap.min.js
diff --git a/web/lib/dygraph-combined.js b/web/lib/dygraph-combined.js
index 047e91773..047e91773 100755..100644
--- a/web/lib/dygraph-combined.js
+++ b/web/lib/dygraph-combined.js
diff --git a/web/lib/jquery.peity.min.js b/web/lib/jquery.peity.min.js
index 3d0166ee8..3d0166ee8 100755..100644
--- a/web/lib/jquery.peity.min.js
+++ b/web/lib/jquery.peity.min.js
diff --git a/web/lib/jquery.sparkline.min.js b/web/lib/jquery.sparkline.min.js
index fa616bf96..fa616bf96 100755..100644
--- a/web/lib/jquery.sparkline.min.js
+++ b/web/lib/jquery.sparkline.min.js
diff --git a/web/netdata-swagger.json b/web/netdata-swagger.json
index ba674d505..ba674d505 100755..100644
--- a/web/netdata-swagger.json
+++ b/web/netdata-swagger.json
diff --git a/web/netdata-swagger.yaml b/web/netdata-swagger.yaml
index 8413d72d7..7dfef0aa8 100755..100644
--- a/web/netdata-swagger.yaml
+++ b/web/netdata-swagger.yaml
@@ -206,7 +206,6 @@ definitions:
         type: number
         description: 'The update frequency of this chart, in seconds. One value every this amount of time is kept in the round robin database.'
       dimensions:
-        description: 'The dimensions of the chart.'
         type: object
         description: 'An object containing all the chart dimensions available for the chart. This is used as an indexed array. The key of the object the id of the dimension.'
         properties:
@@ -218,7 +217,7 @@ definitions:
       name:
         type: string
         description: 'The name of the dimension'
-  
+ 
   json_wrap:
     type: object
     properties:
diff --git a/web/old/index.js b/web/old/index.js
index 3a28daf73..3a28daf73 100755..100644
--- a/web/old/index.js
+++ b/web/old/index.js
diff --git a/web/old/netdata.js b/web/old/netdata.js
index f1af0a67d..f1af0a67d 100755..100644
--- a/web/old/netdata.js
+++ b/web/old/netdata.js
diff --git a/web/tv.html b/web/tv.html
new file mode 100644
index 000000000..2003a6060
--- /dev/null
+++ b/web/tv.html
@@ -0,0 +1,239 @@
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<title>NetData TV Dashboard</title>

+

+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

+	<meta charset="utf-8">

+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

+	<meta name="viewport" content="width=device-width, initial-scale=1">

+	<meta name="apple-mobile-web-app-capable" content="yes">

+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

+

+	<script>

+	// this section has to appear before loading dashboard.js

+

+	// Select a theme.

+	// uncomment on of the two themes:

+

+	// var netdataTheme = 'default'; // this is white

+	var netdataTheme = 'slate'; // this is dark

+

+

+	// Set the default netdata server.

+	// on charts without a 'data-host', this one will be used.

+	// the default is the server that dashboard.js is downloaded from.

+

+	// var netdataServer = 'http://my.server:19999/';

+	</script>

+

+	<!--

+		Load dashboard.js

+

+		to host this HTML file on your web server,

+		you have to load dashboard.js from the netdata server.

+

+		So, pick one the two below

+		If you pick the first, set the server name/IP.

+

+		The second assumes you host this file on /usr/share/netdata/web

+		and that you have chown it to be owned by netdata:netdata

+	-->

+	<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->

+	<script type="text/javascript" src="dashboard.js"></script>

+

+	<script>

+	// Set options for TV operation

+	// This has to be done, after dashboard.js is loaded

+

+	// destroy charts not shown (lowers memory on the browser)

+	NETDATA.options.current.destroy_on_hide = true;

+	

+	// set this to false, to always show all dimensions

+	NETDATA.options.current.eliminate_zero_dimensions = true;

+	

+	// always update the charts, even if focus is lost

+	NETDATA.options.current.stop_updates_when_focus_is_lost = false;

+

+	// Since you may render charts from many servers and any of them may

+	// become offline for some time, the charts will break.

+	// This will reload the page every RELOAD_EVERY minutes

+	var RELOAD_EVERY = 5;

+	setTimeout(function(){

+		location.reload();

+	}, RELOAD_EVERY * 60 * 1000);

+

+	</script>

+

+</head>

+<body>

+

+<div style="width: 100%; text-align: center; display: inline-block;">

+

+	<b>PLEASE RESPECT OUR DEMO SITE RESOURCES - DON'T PUT THIS AS-IS ON TV - CLOSE IT WHEN YOU DON'T NEED IT !</b>

+	

+

+	<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">

+		<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">

+			<b>CPU On both servers</b>

+		</div>

+		<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">

+			<br/>

+			<div data-netdata="system.cpu"

+					data-host="http://netdata.firehol.org"

+					data-title="CPU usage of netdata.firehol.org"

+					data-chart-library="dygraph"

+					data-width="49%"

+					data-height="100%"

+					data-after="-300"

+					></div>

+			<div data-netdata="system.cpu"

+					data-title="CPU usage of your netdata server"

+					data-chart-library="dygraph"

+					data-width="49%"

+					data-height="100%"

+					data-after="-300"

+					></div>

+		</div>

+	</div>

+

+

+	<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">

+		<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">

+			<b>Disk I/O on both servers</b>

+		</div>

+		<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">

+			<div data-netdata="system.io"

+					data-host="http://netdata.firehol.org"

+					data-title="I/O on netdata.firehol.org"

+					data-chart-library="dygraph"

+					data-width="49%"

+					data-height="100%"

+					data-after="-300"

+					></div>

+			<div data-netdata="system.io"

+					data-title="I/O on your netdata server"

+					data-chart-library="dygraph"

+					data-width="49%"

+					data-height="100%"

+					data-after="-300"

+					></div>

+		</div>

+	</div>

+

+

+	<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">

+		<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">

+			<b>IPv4 traffic on both servers</b>

+		</div>

+		<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">

+			<div data-netdata="system.ipv4"

+					data-host="http://netdata.firehol.org"

+					data-title="IPv4 traffic on netdata.firehol.org"

+					data-chart-library="dygraph"

+					data-width="49%"

+					data-height="100%"

+					data-after="-300"

+					></div>

+			<div data-netdata="system.ipv4"

+					data-title="IPv4 traffic on your netdata server"

+					data-chart-library="dygraph"

+					data-width="49%"

+					data-height="100%"

+					data-after="-300"

+					></div>

+		</div>

+	</div>

+

+	<div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">

+		<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">

+			<b>Netdata statistics on both servers</b>

+		</div>

+		<div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">

+			<div style="width: 49%; height:100%; align: center; display: inline-block;">

+				netdata.firehol.org

+				<br/>

+				<div data-netdata="netdata.requests"

+						data-host="http://netdata.firehol.org"

+						data-title="Chart Refreshes/s"

+						data-chart-library="gauge"

+						data-width="20%"

+						data-height="100%"

+						data-after="-300"

+						data-points="300"

+						></div>

+				<div data-netdata="netdata.clients"

+						data-host="http://netdata.firehol.org"

+						data-title="Sockets"

+						data-chart-library="gauge"

+						data-width="20%"

+						data-height="100%"

+						data-after="-300"

+						data-points="300"

+						data-colors="#AA5500"

+						></div>

+				<div data-netdata="netdata.net"

+						data-dimensions="in"

+						data-host="http://netdata.firehol.org"

+						data-title="Requests Traffic"

+						data-chart-library="easypiechart"

+						data-width="15%"

+						data-height="100%"

+						data-after="-300"

+						data-points="300"

+						></div>

+				<div data-netdata="netdata.net"

+						data-dimensions="out"

+						data-host="http://netdata.firehol.org"

+						data-title="Chart Data Traffic"

+						data-chart-library="easypiechart"

+						data-width="15%"

+						data-height="100%"

+						data-after="-300"

+						data-points="300"

+						></div>

+			</div>

+			<div style="width: 49%; height:100%; align: center; display: inline-block;">

+				your netdata server

+				<br/>

+				<div data-netdata="netdata.requests"

+						data-title="Chart Refreshes/s"

+						data-chart-library="gauge"

+						data-width="20%"

+						data-height="100%"

+						data-after="-300"

+						data-points="300"

+						></div>

+				<div data-netdata="netdata.clients"

+						data-title="Sockets"

+						data-chart-library="gauge"

+						data-width="20%"

+						data-height="100%"

+						data-after="-300"

+						data-points="300"

+						data-colors="#AA5500"

+						></div>

+				<div data-netdata="netdata.net"

+						data-dimensions="in"

+						data-title="Requests Traffic"

+						data-chart-library="easypiechart"

+						data-width="15%"

+						data-height="100%"

+						data-after="-300"

+						data-points="300"

+						></div>

+				<div data-netdata="netdata.net"

+						data-dimensions="out"

+						data-title="Chart Data Traffic"

+						data-chart-library="easypiechart"

+						data-width="15%"

+						data-height="100%"

+						data-after="-300"

+						data-points="300"

+						></div>

+			</div>

+		</div>

+	</div>

+</div>

+</body>

+</html>

diff --git a/web/version.txt b/web/version.txt
new file mode 100644
index 000000000..9aef34725
--- /dev/null
+++ b/web/version.txt
@@ -0,0 +1 @@
+39c196708756fc8f85bfc70c931836479be3b9c2