diff --git a/webconsole-plugins/event/src/main/resources/res/ui/events.js b/webconsole-plugins/event/src/main/resources/res/ui/events.js
index e3b8ef2..771451f 100644
--- a/webconsole-plugins/event/src/main/resources/res/ui/events.js
+++ b/webconsole-plugins/event/src/main/resources/res/ui/events.js
@@ -14,6 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var view = 0;
+
 function renderStatusLine() {
 	$("#plugin_content").append( "<div class='fullwidth'><div class='statusline'/></div>" );
 }
@@ -43,6 +45,13 @@
         entry( eventData.data[idx] );
     }
     $("#plugin_table").trigger("update");
+    if ( view == 1 ) {
+		$("#timeline").remove();
+		$("div.table").append( "<div id='timeline'></div>" );
+        for ( var idx in eventData.data ) {
+            entryTimeline( eventData.data[idx] );
+        }
+    }
 }
 
 function entry( /* Object */ dataEntry ) {
@@ -51,16 +60,23 @@
 	$("#plugin_table > tbody").append(trElement);	
 }
 
+function entryTimeline( /* Object */ dataEntry ) {
+	var txt = "<div class='event" + dataEntry.category + "' style='width:" + dataEntry.width + "%;'>";
+	txt = txt + "<b>" + dataEntry.topic + "</b> ";
+	if ( dataEntry.info ) {
+	    txt = txt + dataEntry.info;
+	}
+    txt = txt + "</div>";
+	$("#timeline").append(txt);	
+}
 
 function entryInternal( /* Element */ parent, /* Object */ dataEntry ) {
     var id = dataEntry.id;
     var topic = dataEntry.topic;
     var properties = dataEntry.properties;
-    var styleClass = dataEntry.category;
-    if ( styleClass.length == 0 ) styleClass = null; else styleClass = "event" + styleClass;
     
-    parent.appendChild( td( styleClass, null, [ text( printDate(dataEntry.received) ) ] ) );
-    parent.appendChild( td( styleClass, null, [ text( topic ) ] ) );
+    parent.appendChild( td( null, null, [ text( printDate(dataEntry.received) ) ] ) );
+    parent.appendChild( td( null, null, [ text( topic ) ] ) );
 
     var propE;
     if ( dataEntry.info ) {
@@ -71,10 +87,10 @@
 	    tableE.appendChild(bodyE);
 	
 	    for( var p in dataEntry.properties ) {
-	    	var c1 = td(styleClass, null, [text(p)]);
+	    	var c1 = td(null, null, [text(p)]);
 	    	$(c1).css("border", "0px none");
             $(c1).css("padding", "0 4px 0 0");
-	    	var c2 = td(styleClass, null, [text(dataEntry.properties[p])]);
+	    	var c2 = td(null, null, [text(dataEntry.properties[p])]);
 	    	$(c2).css("border", "0px none");
             $(c2).css("padding", "0 0 0 4px");
 	    	bodyE.appendChild(tr(null, null, [ c1, c2 ]));
@@ -82,7 +98,7 @@
 	    propE = tableE;
     }
     
-    parent.appendChild( td( styleClass, null, [propE] ) );
+    parent.appendChild( td( null, null, [propE] ) );
 }
 
 /* displays a date in the user's local timezone */
@@ -97,15 +113,32 @@
 	}, "json");	
 }
 
+function switchView() {
+	if ( view == 0 ) {
+		view = 1;
+		$("#plugin_table").hide();
+		$(".switchButton").empty();
+		$(".switchButton").append("List");
+		loadData();
+	} else {
+		view = 0;
+		$("#timeline").remove();
+		$("#plugin_table").show();
+		$(".switchButton").empty();
+		$(".switchButton").append("Timeline");
+	}
+}
 function renderEvents() {
 	$(document).ready(function(){
 	    renderView( ["Received", "Topic", "Properties"],
+	    		 "<button class='switchButton' type='button' name='switch'>Timeline</button>" +
 	    		 "<button class='clearButton' type='button' name='clear'>Clear List</button>" +
 	    		 "<button class='reloadButton' type='button' name='reload'>Reload</button>");
 	    loadData();
 	    
 	    $("#plugin_table").tablesorter();
 	    $(".reloadButton").click(loadData);
+	    $(".switchButton").click(switchView);
 	    $(".clearButton").click(function () {
 	    	$("#plugin_table > tbody > tr").remove();
 	    	$.post(pluginRoot, { "action":"clear" }, function(data) {