rewrote javascript for full async operation, added support for different chart type per graph, smart updating only the charts on screen

3 files changed, 368 insertions, 262 deletions

diff --git a/web/index.html b/web/index.html
index 54b86c9aa4..e2bf64fbc2 100644
--- a/web/index.html
+++ b/web/index.html
@@ -22,23 +22,34 @@
 
 	<!-- NetData -->
 	<script type="text/javascript" src="/file/netdata.js"></script>
+	<script type="text/javascript" src="/file/jquery.visible.js"></script>
 	<script type="text/javascript">
 	
 	// Set a callback to run when the Google Visualization API is loaded.
-	google.setOnLoadCallback(drawCharts);
+	google.setOnLoadCallback(initCharts);
 	
+	var MODE_THUMBS = 1;
+	var MODE_MAIN = 2;
+	var mode; // one of the MODE_* values
+
 	var mycharts = new Array();
 	var mainchart;
 
+	function chartIsLoadingHTML(width, height) { return "<table><tr><td align=\"center\" width=\"" + width + "\" height=\"" + height + "\"><h4><span class=\"glyphicon glyphicon-refresh\"></span><br/><br/>loading chart<br/><br/><span class=\"label label-default\">Please wait...</span></h4></td></tr></table>"; }
+
+	function showChartIsLoading(id, width, height) { document.getElementById(id).innerHTML = chartIsLoadingHTML(width, height); }
+
+	// copy the chart c to mainchart
+	// switch to main graphs screen
 	function mainChart(c) {
 		if(mainchart && mainchart.chart) mainchart.chart.clearChart();
 
 		mainchart = $.extend(true, {}, c);
 
 		mainchart.chart = null;
-		mainchart.width = Math.round(((window.innerWidth * 0.95) - 50) / 1);
-		mainchart.height = window.innerHeight - 200;
-		if(mainchart.height < 300) mainchart.height = 300;
+		mainchart.chartOptions.width = Math.round((($(window).width() * 0.95) - 50) / 1);
+		mainchart.chartOptions.height = $(window).height() - 200;
+		if(mainchart.chartOptions.height < 300) mainchart.chartOptions.height = 300;
 		
 		mainchart.thumbnail = false;
 		mainchart.group = 5;
@@ -65,9 +76,11 @@
 		// show max 10 mins of data
 		if(mainchart.points_to_show * mainchart.group > 1200) mainchart.points_to_show = 1200 / mainchart.group;
 
+		// initialize the div
+		showChartIsLoading(mainchart.div, mainchart.chartOptions.width, mainchart.chartOptions.height);
+
 		document.getElementById('maingraph_title').innerHTML = " <b> " + mainchart.title + " </b> (as " + mainchart.group_method + " of every " + (mainchart.group * mainchart.update_every) + " seconds)";
 
-		refreshChart(mainchart);
 		showMainGraph();
 	}
 
@@ -75,201 +88,206 @@
 		mainChart(mycharts[i]);
 	}
 
+	// refresh the main chart
+	// make sure it gets updated frequently
+	function mainChartRefresh() {
+		if(!mainchart || mode != MODE_MAIN) {
+			if(mainchart) mainchart.clearChart();
+			showThumbGraphs();
+			return;
+		}
+
+		var now = new Date().getTime();
+
+		if((now - mainchart.last_updated) >= mainchart.chart_update_every) {
+			refreshChart(mainchart, triggerMainChartRefresh);
+			mainchart.last_updated = now;
+		}
+		else triggerMainChartRefresh();
+	}
+
+	// callback for refreshing the main chart
+	function triggerMainChartRefresh() {
+		if(mode == MODE_MAIN) setTimeout(mainChartRefresh, 500);
+	}
+
+	// calculate the proper width for the thumb charts
 	function thumbWidth() {
-		var items = Math.round(((window.innerWidth * 0.95) - 50) / 500);
+		var items = Math.round((($(window).width() * 0.95) - 50) / 500);
 		if(items < 1) items = 1;
 
-		var width = Math.round(((window.innerWidth * 0.95) - 50) / items) - 1;
-		console.log("window = " + ((window.innerWidth * 0.95) - 50) + ", items = " + items + ", width = " + width);
+		var width = Math.round((($(window).width() * 0.95) - 50) / items) - 1;
+		//console.log("window = " + (($(window).width() * 0.95) - 50) + ", items = " + items + ", width = " + width);
 
 		return width;
 	}
 
+	// resize all charts
+	// if the thumb charts need resize in their width, reset them
 	function resizeCharts() {
+		var width = Math.round((($(window).width() * 0.95) - 50) / 1);
 		if(mainchart) {
-			mainchart.width = Math.round(((window.innerWidth * 0.95) - 50) / 1);
-			mainchart.height = window.innerHeight - 200;
+			mainchart.chartOptions.width = Math.round((($(window).width() * 0.95) - 50) / 1);
+			mainchart.chartOptions.height = $(window).height() - 200;
+			mainchart.last_updated = 0;
 		}
 
-		var width = thumbWidth();
+		width = thumbWidth();
 		$.each(mycharts, function(i, c) {
-			if(c.enabled) {
-				c.width = width;
-				c.needs_refresh = true;
+			if(c.enabled && c.chartOptions.width != width) {
+				if(c.chart) c.chart.clearChart();
+				c.chart = null;
+				c.chartOptions.width = width;
+				showChartIsLoading(c.div, c.chartOptions.width, c.chartOptions.height);
+				c.last_updated = 0;
 			}
 		});
 	}
 
-	var go_thumbs = 0;
-	var go_main = 0;
-	function drawCharts() {
-		myChartsRefreshInternal(mycharts.length);
-	};
-
 	// load the charts from the server
 	// generate html for the thumbgraphs to support them
 	function initCharts() {
 		var width = thumbWidth();
 		var height = 200;
 
-		mycharts = loadCharts();
-		if(mycharts == null || mycharts.length == 0) {
-			alert("Cannot load data from server.");
-			return;
-		}
-
-		var scroll = document.getElementById("graphs");
-		if(!scroll) {
-			alert("Cannot find the scroller");
-			return;
-		}
-
-		function chartssort(a, b) {
-			if(a.userpriority < b.userpriority) return -1;
-			return 1;
-		}
-		mycharts.sort(chartssort);
-
-		document.getElementById('hostname_id').innerHTML = mycharts[0].hostname;
-		document.title = mycharts[0].hostname;
+		loadCharts(function(c) {
+			mycharts = c;
 
-		// create an array for grouping all same-type graphs together
-		var categories = new Array();
-		$.each(mycharts, function(i, c) {
-			c.thumbnail = false;
-			c.last_updated = 0;
-			c.width = width;
-			c.height = height;
-			c.enabled = true;
-			c.needs_refresh = true;
-
-			if(c.userpriority == "IGNORE") c.enabled = false;
-			if(c.usertitle) c.title = c.usertitle;
-
-			if(c.type == "tc") {
-				c.category = "Quality of Service"
-				c.glyphicon = "glyphicon-transfer";
-				c.group = 30;
-				c.group_method = "average";
-			}
-			else if(c.type == "net") {
-				c.category = "Network Traffic"
-				c.glyphicon = "glyphicon-cloud";
-				c.group = 10;
-				c.group_method = "max";
-
-				if((c.id.substring(c.id.length - 4, c.id.length) == "-ifb") ||
-					c.id == "net.lo")
-					c.enabled = false;
-			}
-			else if(c.type == "ipv4") {
-				c.category = "IPv4 connections"
-				c.glyphicon = "glyphicon-resize-full";
-				c.group = 30;
-				c.group_method = "max";
+			if(mycharts == null || mycharts.length == 0) {
+				alert("Cannot load data from server.");
+				return;
 			}
-			else if(c.type == "conntrack") {
-				c.category = "Netfilter Connections Tracked"
-				c.glyphicon = "glyphicon-eye-open";
-				c.group = 30;
-				c.group_method = "max";
-			}
-			else if(c.type == "ipvs") {
-				c.category = "IPVS"
-				c.glyphicon = "glyphicon-sort";
-				c.group = 30;
-				c.group_method = "max";
-			}
-			else if(c.type == "disk") {
-				c.category = "Disk I/O"
-				c.glyphicon = "glyphicon-floppy-disk";
-				c.group = 20;
-				c.group_method = "max";
+
+			var thumbsContainer = document.getElementById("graphs");
+			if(!thumbsContainer) {
+				alert("Cannot find the thumbsContainer");
+				return;
 			}
-			else {
-				c.category = "Unknown"
-				c.glyphicon = "glyphicon-search";
-				c.group = 60;
-				c.group_method = "max";
+
+			function chartssort(a, b) {
+				if(a.userpriority < b.userpriority) return -1;
+				return 1;
 			}
+			mycharts.sort(chartssort);
+
+			document.getElementById('hostname_id').innerHTML = mycharts[0].hostname;
+			document.title = mycharts[0].hostname;
+
+			// create an array for grouping all same-type graphs together
+			var categories = new Array();
+			$.each(mycharts, function(i, c) {
+				c.last_updated = 0;
+				c.chartOptions.width = width;
+				c.chartOptions.height = height;
+
+				switch(c.type) {
+					case "tc":
+						c.glyphicon = "glyphicon-transfer";
+						c.group = 30;
+						c.group_method = "average";
+						break;
 
-			// calculate the time to refresh each chart
-			c.chart_update_every = c.group * 1000; // milliseconds
+					case "net":
+						c.glyphicon = "glyphicon-cloud";
+						c.group = 10;
+						c.group_method = "max";
+						break;
 
-			// calculate how many point to show for each chart
-			c.points_to_show = Math.round(c.entries / c.group) - 1;
+					case "ipv4":
+						c.glyphicon = "glyphicon-resize-full";
+						c.group = 30;
+						c.group_method = "max";
+						break;
 
-			// show max 10 mins of data
-			if(c.points_to_show * c.group > 600) c.points_to_show = 600 / c.group;
+					case "conntrack":
+						c.glyphicon = "glyphicon-eye-open";
+						c.group = 30;
+						c.group_method = "max";
+						break;
 
-			if(c.enabled) {
-				var j;
-				var h = "<div class=\"thumbgraph\"><table><tr><td><div class=\"thumbgraph\" id=\"" + c.div + "\"><table><tr><td align=\"center\" width=\"" + c.width + "\" height=\"" + c.height + "\"><h4><span class=\"glyphicon glyphicon-refresh\"></span><br/><br/>loading chart<br/><br/><span class=\"label label-default\">Please wait...</span></h4></td></tr></table></div></td></tr><tr><td align=\"center\"><div class=\"btn-group-xs\"><button type=\"button\" class=\"btn btn-default\" onclick=\"setMainChart(" + i +");\">&nbsp;&nbsp;select " + c.name + " for zoom&nbsp;&nbsp;</button></div></td></tr></table></div>";
+					case "ipvs":
+						c.glyphicon = "glyphicon-sort";
+						c.group = 30;
+						c.group_method = "max";
+						break;
 
-				// find the categories object for this type
-				for(j = 0; j < categories.length ;j++) {
-					if(categories[j].name == c.type) {
-						categories[j].html += h;
-						categories[j].count++;
+					case "disk":
+						c.glyphicon = "glyphicon-floppy-disk";
+						c.group = 20;
+						c.group_method = "max";
 						break;
-					}
-				}
 
-				if(j == categories.length) {
-					var t = "(as " + c.group_method + " every " + (c.group*c.update_every) + " seconds)";
-					categories.push({name: c.type, title: c.category, description: t, priority: 0, count: 1, glyphicon: c.glyphicon, html: h});
+					default:
+						c.glyphicon = "glyphicon-search";
+						c.group = 60;
+						c.group_method = "max";
+						break;
 				}
-			}
-		});
 
-		$.each(categories, function(i, a) {
-			     if(a.name == "net") a.priority = 1;
-			else if(a.name == "tc") a.priority = 2;
-			else if(a.name == "conntrack") a.priority = 3;
-			else if(a.name == "ipvs") a.priority = 4;
-			else if(a.name == "ipv4") a.priority = 5;
-			else if(a.name == "disk") a.priority = 6;
-			else a.priority = 4;
+				// calculate the time to refresh each chart
+				c.chart_update_every = c.group * 1000; // milliseconds
 
-			a.html = "<tr><td><ol class=\"breadcrumb graphs\"><li class=\"active\"><span class=\"glyphicon " + a.glyphicon + "\"></span> &nbsp; <a id=\"" + a.name + "\" href=\"#" + a.name + "\"><b>" + a.title + "</b> " + a.description + " </a></li></ol></td></tr><tr><td><div class=\"thumbgraphs\">" + a.html + "</td></tr>";
-		});
+				// calculate how many point to show for each chart
+				c.points_to_show = Math.round(c.entries / c.group) - 1;
 
-		function categoriessort(a, b) {
-			if(a.priority < b.priority) return -1;
-			return 1;
-		}
-		categories.sort(categoriessort);
+				// show max 10 mins of data
+				if(c.points_to_show * c.group > 600) c.points_to_show = 600 / c.group;
 
-		// combine all the htmls into one
-		var allcategories = "<table width=\"100%\">";
-		$.each(categories, function(i, a) {
-			allcategories += a.html;
-		});
-		allcategories += "</table>";
+				if(c.enabled) {
+					var j;
+					var h = "<div class=\"thumbgraph\"><table><tr><td><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.chartOptions.width, c.chartOptions.height) + "</div></td></tr><tr><td align=\"center\"><div class=\"btn-group-xs\"><button type=\"button\" class=\"btn btn-default\" onclick=\"setMainChart(" + i +");\">&nbsp;&nbsp;select " + c.name + " for zoom&nbsp;&nbsp;</button></div></td></tr></table></div>";
 
-		scroll.innerHTML = allcategories;
-		showThumbGraphs();
-	};
+					// find the categories object for this type
+					for(j = 0; j < categories.length ;j++) {
+						if(categories[j].name == c.type) {
+							categories[j].html += h;
+							categories[j].count++;
+							break;
+						}
+					}
 
-	var last_mini = 0;
-	function myChartsRefreshInternal(howmany) {
-		var ot = go_thumbs;
-		var om = go_main;
+					if(j == categories.length) {
+						var t = "(as " + c.group_method + " every " + (c.group*c.update_every) + " seconds)";
+						categories.push({name: c.type, title: c.category, description: t, priority: 0, count: 1, glyphicon: c.glyphicon, html: h});
+					}
+				}
+			});
+
+			$.each(categories, function(i, a) {
+				     if(a.name == "net") a.priority = 1;
+				else if(a.name == "tc") a.priority = 2;
+				else if(a.name == "conntrack") a.priority = 3;
+				else if(a.name == "ipvs") a.priority = 4;
+				else if(a.name == "ipv4") a.priority = 5;
+				else if(a.name == "disk") a.priority = 6;
+				else a.priority = 4;
+
+				a.html = "<tr><td><ol class=\"breadcrumb graphs\"><li class=\"active\"><span class=\"glyphicon " + a.glyphicon + "\"></span> &nbsp; <a id=\"" + a.name + "\" href=\"#" + a.name + "\"><b>" + a.title + "</b> " + a.description + " </a></li></ol></td></tr><tr><td><div class=\"thumbgraphs\">" + a.html + "</td></tr>";
+			});
+
+			function categoriessort(a, b) {
+				if(a.priority < b.priority) return -1;
+				return 1;
+			}
+			categories.sort(categoriessort);
 
-		go_thumbs = 0;
-		go_main = 0;
+			// combine all the htmls into one
+			var allcategories = "<table width=\"100%\">";
+			$.each(categories, function(i, a) {
+				allcategories += a.html;
+			});
+			allcategories += "</table>";
 
-		var now = new Date().getTime();
+			thumbsContainer.innerHTML = allcategories;
+			showThumbGraphs();
+		});
+	}
 
-		// refresh the main chart
-		if(om && mainchart && (now - mainchart.last_updated) >= mainchart.chart_update_every) {
-			refreshChart(mainchart);
-			mainchart.last_updated = now;
-		}
-		go_main = om;
+	var last_mini = 0;
+	function thumbChartsRefreshInternal(howmany) {
+		if(mycharts.length == 0 || mode != MODE_THUMBS) return;
 
-		// refresh a few of the thumbcharts
-		if(mycharts.length == 0 || !ot) return;
+		var now = new Date().getTime();
 
 		// refresh the mini charts
 		var wanted = howmany;
@@ -281,43 +299,53 @@
 			if(last_mini >= mycharts.length) last_mini = 0;
 
 			if(!mycharts[last_mini].enabled) continue;
-			if(!mycharts[last_mini].needs_refresh && now - mycharts[last_mini].last_updated < mycharts[last_mini].chart_update_every) continue;
+			if((now - mycharts[last_mini].last_updated) < mycharts[last_mini].chart_update_every) continue;
 
 			if(mycharts[last_mini].chart != null)
 				if(mycharts[last_mini].chart.getSelection()[0]) continue;
 
-			refreshChart(mycharts[last_mini]);
+			if($('#' + mycharts[last_mini].div).visible(true) == false) continue;
+
+			refreshChart(mycharts[last_mini], mycharts[last_mini].last_updated?triggerThumbChartsRefresh:triggerThumbChartsRefreshFast);
 			mycharts[last_mini].last_updated = now;
 
 			did++;
-			mycharts[last_mini].needs_refresh = false;
 		}
 
-		go_thumbs = ot;
+		if(did == 0) triggerThumbChartsRefresh();
+	}
+
+	function triggerThumbChartsRefresh() {
+		setTimeout(thumbChartsRefresh, 500);
 	}
 
-	function myChartsRefresh() {
-		myChartsRefreshInternal(1);
+	function triggerThumbChartsRefreshFast() {
+		thumbChartsRefresh();
 	}
 
-	setInterval(myChartsRefresh, 500);
+	function thumbChartsRefresh() {
+		if(mode == MODE_THUMBS) thumbChartsRefreshInternal(1);
+	}
+
+	// setInterval(myChartsRefresh, 500);
 
 	window.onresize = function(event) {
 		resizeCharts();
-		drawCharts();
 	};
 
 	function showMainGraph() {
 		if(!mainchart) return;
+		mode = MODE_MAIN;
 
 		document.getElementById('maingraph_container').style.display = 'block';
 		document.getElementById('thumbgraphs_container').style.display = 'none';
 
-		go_thumbs = 0;
-		go_main = 1;
+		mainChartRefresh();
 	}
 
 	function showThumbGraphs() {
+		mode = MODE_THUMBS;
+
 		document.getElementById('maingraph_container').style.display = 'none';
 		document.getElementById('thumbgraphs_container').style.display = 'block';
 
@@ -326,8 +354,7 @@
 			mainchart = null;
 		}
 
-		go_thumbs = 1;
-		go_main = 0;
+		thumbChartsRefresh(1);
 	}
 
 	</script>
@@ -359,7 +386,7 @@
       </div>
     </div>
 
-    <div class="container graphs" id="maingraph_container"">
+    <div class="container graphs" id="maingraph_container" style="display: none">
 		<table>
 			<tr><td><ol class="breadcrumb graphs"><li class="active"><a id="maingraph_title" href="#maingraph"><b> Maingraph </b></a></li></ol></td></tr>
 			<tr><td>
@@ -375,8 +402,7 @@
 
     <div class="container graphs" id="thumbgraphs_container">
     	<div class="allgraphs" id="graphs">
+    	<table width="100%"><tr><td align="center"><p/>&nbsp;<p/>&nbsp;<p/>&nbsp;<h1><span class="glyphicon glyphicon-refresh"></span><br/><br/>loading charts<br/><br/><span class="label label-default">Please wait...</span></h1></td></tr></table>
     	</div>
 	</div>
-
-	<script type="text/javascript">initCharts();</script>
 </html>
diff --git a/web/jquery.visible.js b/web/jquery.visible.js
new file mode 100644
index 0000000000..764464ef07
--- /dev/null
+++ b/web/jquery.visible.js
@@ -0,0 +1,27 @@
+(function($){
+
+	/**
+	 * Copyright 2012, Digital Fusion
+	 * Licensed under the MIT license.
+	 * http://teamdf.com/jquery-plugins/license/
+	 *
+	 * @author Sam Sehnert
+	 * @desc A small plugin that checks whether elements are within
+	 *		 the user visible viewport of a web browser.
+	 *		 only accounts for vertical position, not horizontal.
+	 */
+	$.fn.visible = function(partial){
+		
+	    var $t				= $(this),
+	    	$w				= $(window),
+	    	viewTop			= $w.scrollTop(),
+	    	viewBottom		= viewTop + $w.height(),
+	    	_top			= $t.offset().top,
+	    	_bottom			= _top + $t.height(),
+	    	compareTop		= partial === true ? _bottom : _top,
+	    	compareBottom	= partial === true ? _top : _bottom;
+		
+		return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
+    };
+    
+})(jQuery);
\ No newline at end of file
diff --git a/web/netdata.js b/web/netdata.js
index aa68e77bb9..c8959755ca 100644
--- a/web/netdata.js
+++ b/web/netdata.js
@@ -4,7 +4,7 @@ if(!window.console){ window.console = {log: function(){} }; }
 // Load the Visualization API and the piechart package.
 google.load('visualization', '1', {'packages':['corechart']});
 
-function refreshChart(chart) {
+function refreshChart(chart, doNext) {
 	chart.refreshCount++;
 	
 	if(chart.chart != null) {
@@ -17,70 +17,39 @@ function refreshChart(chart) {
 	url += chart.group?chart.group.toString():"1";
 	url += "/";
 	url += chart.group_method?chart.group_method:"average";
-	chart.jsondata = $.ajax({
+
+	$.ajax({
 		url: url,
 		dataType:"json",
-		async: false,
 		cache: false
-	}).responseText;
-	
-	if(!chart.jsondata || chart.jsondata.length == 0) return;
-	
-	// Create our data table out of JSON data loaded from server.
-	chart.datatable = new google.visualization.DataTable(chart.jsondata);
-	
-	// setup the default options
-	var options = {
-		width: chart.width,
-		height: chart.height,
-		title: chart.title,
-		hAxis: {title: "Time of Day"},
-		vAxis: {title: chart.vtitle, minValue: 10},
-		focusTarget: 'category',
-		explorer: (chart.explorer)?true:false,
-		// animation: {duration: 1000, easing: 'inAndOut'},
-	};
-
-	// disable interactivity on thumbnails
-	if(chart.thumbnail) options.enableInteractivity = false;
-
-	// hide axis titles if too small
-	if(chart.height < 200) options.vAxis.title = null;
-	if(chart.width < 350) options.hAxis.title = null;
-
-	if(chart.name.substring(0, 5) == "ipv4." || chart.name.substring(0, 10) == "conntrack." || chart.name.substring(0, 5) == "ipvs.") {
-		options.lineWidth = 3;
-		options.curveType = 'function';
-	}
-	else if(chart.name.substring(0, 3) == "tc.") {
-		options.isStacked = true;
-		options.title += " [stacked]";
-		options.areaOpacity = 1.0;
-		options.lineWidth = 1;
-	}
-	else {
-		options.areaOpacity = 0.3;
-		options.lineWidth = 2;
-	}
+	}).done(function(jsondata) {
+		if(!jsondata || jsondata.length == 0) return;
+		chart.jsondata = jsondata;
+		
+		// Create our data table out of JSON data loaded from server.
+		chart.datatable = new google.visualization.DataTable(chart.jsondata);
+		
+		// cleanup once every 50 updates
+		// we don't cleanup on every single, to avoid firefox flashing effect
+		if(chart.chart && chart.refreshCount > 50) {
+			chart.chart.clearChart();
+			chart.chart = null;
+		}
 
-	// cleanup once every 100 updates
-	// we don't cleanup on every single, to avoid firefox flashing effect
-	if(chart.chart && chart.refreshCount > 100) {
-		chart.chart.clearChart();
-		chart.chart = null;
-	}
+		// Instantiate and draw our chart, passing in some options.
+		if(!chart.chart) {
+			console.log('Creating new chart for ' + chart.url);
+			if(chart.chartType == "LineChart")
+				chart.chart = new google.visualization.LineChart(document.getElementById(chart.div));
+			else
+				chart.chart = new google.visualization.AreaChart(document.getElementById(chart.div));
+		}
+		
+		if(chart.chart) chart.chart.draw(chart.datatable, chart.chartOptions);
+		else console.log('Cannot create chart for ' + chart.url);
 
-	// Instantiate and draw our chart, passing in some options.
-	if(!chart.chart) {
-		console.log('Creating new chart for ' + chart.url);
-		if(chart.name.substring(0, 5) == "ipv4." || chart.name.substring(0, 10) == "conntrack." || chart.name.substring(0, 5) == "ipvs.")
-			chart.chart = new google.visualization.LineChart(document.getElementById(chart.div));
-		else
-			chart.chart = new google.visualization.AreaChart(document.getElementById(chart.div));
-	}
-	
-	if(chart.chart) chart.chart.draw(chart.datatable, options);
-	else console.log('Cannot create chart for ' + chart.url);
+		if(typeof doNext == "function") doNext();
+	});
 }
 
 // loadCharts()
@@ -88,35 +57,111 @@ function refreshChart(chart) {
 // returns an array of objects, containing all the server metadata
 // (not the values of the graphs - just the info about the graphs)
 
-function loadCharts() {
-	var mycharts = new Array();
-
+function loadCharts(doNext) {
 	$.ajax({
 		url: '/all.json',
-		async: false,
 		dataType: 'json',
-		success: function (json) { mycharts = json.charts; }
-	});
+		cache: false
+	}).done(function(json) {
+		$.each(json.charts, function(i, value) {
+			json.charts[i].div = json.charts[i].name.replace(/\./g,"_");
+			json.charts[i].div = json.charts[i].div.replace(/\-/g,"_");
+			json.charts[i].div = json.charts[i].div + "_div";
 
-	$.each(mycharts, function(i, value) {
-		mycharts[i].div = mycharts[i].name.replace(/\./g,"_");
-		mycharts[i].div = mycharts[i].div.replace(/\-/g,"_");
-		mycharts[i].div = mycharts[i].div + "_div";
-
-		mycharts[i].width = 0;
-		mycharts[i].height = 0;
-		mycharts[i].thumbnail = false;
-		mycharts[i].refreshCount = 0;
-		mycharts[i].group = 1;
-		mycharts[i].points_to_show = 0;	// all
-		mycharts[i].group_method = "average";
-
-		mycharts[i].chart = null;
-		mycharts[i].jsondata = null;
-		mycharts[i].datatable = null;
-	});
+			json.charts[i].thumbnail = false;
+			json.charts[i].refreshCount = 0;
+			json.charts[i].group = 1;
+			json.charts[i].points_to_show = 0;	// all
+			json.charts[i].group_method = "max";
+
+			json.charts[i].chart = null;
+			json.charts[i].jsondata = null;
+			json.charts[i].datatable = null;
+			
+			// if the user has given a title, use it
+			if(json.charts[i].usertitle) json.charts[i].title = json.charts[i].usertitle;
+
+			// check if the userpriority is IGNORE
+			if(json.charts[i].userpriority == "IGNORE")
+				json.charts[i].enabled = false;
+			else
+				json.charts[i].enabled = true;
+
+			// set default chart options
+			json.charts[i].chartOptions = {
+				lineWidth: 2,
+				title: json.charts[i].title,
+				hAxis: {title: "Time of Day"},
+				vAxis: {title: json.charts[i].vtitle, minValue: 10},
+				focusTarget: 'category',
+			};
+
+			// set the chart type
+			if((json.charts[i].type == "ipv4" || json.charts[i].type == "ipv6" || json.charts[i].type == "ipvs" || json.charts[i].type == "conntrack")
+				&& json.charts[i].name != "ipv4.net" && json.charts[i].name != "ipvs.net") {
+				
+				// default for all LineChart
+				json.charts[i].chartType = "LineChart";
+				json.charts[i].chartOptions.lineWidth = 3;
+				json.charts[i].chartOptions.curveType = 'function';
+			}
+			else if(json.charts[i].type == "tc") {
+
+				// default for all stacked AreaChart
+				json.charts[i].chartType = "AreaChart";
+				json.charts[i].chartOptions.isStacked = true;
+				json.charts[i].chartOptions.areaOpacity = 1.0;
+				json.charts[i].chartOptions.lineWidth = 1;
+
+				json.charts[i].group_method = "average";
+			}
+			else {
+
+				// default for all AreaChart
+				json.charts[i].chartType = "AreaChart";
+				json.charts[i].chartOptions.isStacked = false;
+				json.charts[i].chartOptions.areaOpacity = 0.3;
+			}
+
+			// the category name, and other options, per type
+			switch(json.charts[i].type) {
+				case "tc":
+					json.charts[i].category = "Quality of Service";
+					break;
+
+				case "net":
+					json.charts[i].category = "Network Interfaces";
 
-	return mycharts;
+					// disable IFB and net.lo devices by default
+					if((json.charts[i].id.substring(json.charts[i].id.length - 4, json.charts[i].id.length) == "-ifb")
+						|| json.charts[i].id == "net.lo")
+						json.charts[i].enabled = false;
+					break;
+
+				case "ipv4":
+					json.charts[i].category = "IPv4";
+					break;
+
+				case "conntrack":
+					json.charts[i].category = "Netfilter";
+					break;
+
+				case "ipvs":
+					json.charts[i].category = "IPVS";
+					break;
+
+				case "disk":
+					json.charts[i].category = "Disk I/O";
+					break;
+
+				default:
+					json.charts[i].category = "Unknown";
+					break;
+			}
+		});
+
+		if(typeof doNext == "function") doNext(json.charts);
+	});
 };
 
 var charts = new Array();
@@ -133,14 +178,22 @@ function addChart(name, div, width, height, jsonurl, title, vtitle) {
 
 	charts[i].div = div;
 
-	charts[i].width = width;
-	charts[i].height = height;
 	charts[i].refreshCount = 0;
 	charts[i].thumbnail = false;
 
 	charts[i].chart = null;
 	charts[i].jsondata = null;
 	charts[i].datatable = null;
+
+	charts[i].chartType = "AreaChart";
+	charts[i].chartOptions = {
+		width: width,
+		height: height,
+		title: charts[i].title,
+		hAxis: {title: "Time of Day"},
+		vAxis: {title: charts[i].vtitle, minValue: 10},
+		focusTarget: 'category',
+	};
 }
 
 var charts_last_drawn = 999999999;
@@ -188,9 +241,9 @@ function refreshCharts(howmany) {
 		charts_last_drawn++;
 		if(charts_last_drawn >= charts.length) charts_last_drawn = 0;
 		
-		if(charts[charts_last_drawn].width == 0 && charts[charts_last_drawn].height == 0) {
-			charts[charts_last_drawn].width = width;
-			charts[charts_last_drawn].height = height;
+		if(charts[charts_last_drawn].chartOptions.width == 0 && charts[charts_last_drawn].height == 0) {
+			charts[charts_last_drawn].chartOptions.width = width;
+			charts[charts_last_drawn].chartOptions.height = height;
 			zeroDimensions = 1;
 		}
 
@@ -204,8 +257,8 @@ function refreshCharts(howmany) {
 		}
 
 		if(zeroDimensions == 1) {
-			charts[charts_last_drawn].width = 0;
-			charts[charts_last_drawn].height = 0;
+			charts[charts_last_drawn].chartOptions.width = 0;
+			charts[charts_last_drawn].chartOptions.height = 0;
 		}
 	}
 	return 0;