Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs/GraphDataCollector.js
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs/GraphDataCollector.js	(revision 13714)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs/GraphDataCollector.js	(revision 13714)
@@ -0,0 +1,95 @@
+﻿var dataCollection = [];
+
+function initSaveData(id, coll) {//initial data save
+    var temp = dataConversion(coll);
+    temp.unshift(id); //add ID in front of array
+    dataCollection.push(temp);// [id,timearr, piearr]
+    console.log("#CREATION: " + id);
+}
+function saveData(id, coll) {
+    var temp = dataConversion(coll);
+    for (var i = 0; i < dataCollection.length; i++) {
+        if (dataCollection[i][0] == id) {
+            dataCollection[i][1] = temp[0];
+            dataCollection[i][2] = temp[1];
+        }
+    }
+    console.log("#SAVEDATA: " + id);
+    redrawGraph(id);
+}
+function getData(id) {
+    for (var i = 0; i < dataCollection.length; i++) {
+        if (dataCollection[i][0] == id) {
+            return dataCollection[i][1];
+        }
+    }
+}
+function getDataPie(id) {
+    for (var i = 0; i < dataCollection.length; i++) {
+        if (dataCollection[i][0] == id) {
+            return dataCollection[i][2];
+        }
+    }
+
+}
+function dataConversion(coll) {
+    var xarr = [];
+    var yarr = [];
+    var waiting = 0;
+    var transfer = 0;
+    var calc = 0;
+    for (var v = 0; v < coll.length; v++) {
+        xarr.push(coll[v].DateTime.substr(11, 8));
+        if (coll[v].State == 1) {
+            yarr.push("Waiting");
+            if (v < (coll.length - 1))
+                waiting += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
+        }
+        else if (coll[v].State == 2) {
+            yarr.push("Transferring");
+            if (v < (coll.length - 1))
+                transfer += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
+        }
+        else if (coll[v].State == 3) {
+            yarr.push("Calculating");
+            if (v < (coll.length - 1))
+                calc += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
+        }
+        else if (coll[v].State == 5)
+            yarr.push("Finished");
+        else if (coll[v].State == 7)
+            yarr.push("Failed");
+    }
+    var data = [{//Time graph
+        x: xarr,
+        y: yarr,
+        type: 'scatter'
+    }];
+    var datap = [{//Pie graph
+        values: [
+            Math.round(waiting / 1000 / 60),
+            Math.round(transfer / 1000 / 60),
+            Math.round(calc / 1000 / 60)],
+        labels: [
+            'Minutes waiting',
+            'Minutes transferring',
+            'Minutes calculating'],
+        type: 'pie'
+    }];
+    return [data, datap];
+}
+
+function redrawGraph(val) {
+    if (document.getElementById("graphtoggle" + val).checked) {
+        setTimeout(function () {
+            Plotly.newPlot('graph' + val, getData(val));
+        }, 100);
+        console.log("#REDRAWN LINE: " + val);
+    } else {
+        setTimeout(function () {
+            Plotly.newPlot('graph' + val, getDataPie(val));
+        }, 100);
+        console.log("#REDRAWN PIE: " + val);
+    }
+
+}
Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs/GraphHubber.js
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs/GraphHubber.js	(revision 13714)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs/GraphHubber.js	(revision 13714)
@@ -0,0 +1,79 @@
+﻿var hubber = $.connection.jobUpdaterHub;
+
+$(function () {
+    //$.connection.hub.logging = true;
+    $.connection.hub.start().done(function () {
+        hubber.server.initConnection();
+        hubber.server.updateAll();
+        
+    });
+    hubber.client.processData = function (id, data) {
+        var obj = JSON.parse(data);
+        editTaskData(id, obj);
+        saveData(id, obj.StateLog);
+    }
+    hubber.client.requestDone = function(){
+        setTimeout(function () {
+            hubber.server.updateAll();
+        }, 5000);
+    }
+    //hubber.c
+})
+
+function editTaskData(id, task) {
+    console.log(task);
+    //lastupdate
+    var dat = new Date(task.LastHeartbeat);
+    $("#lastupdpar" + id).html("Last update: " + dat.toUTCString());
+    //state
+    if (task.State == "1") {
+        $("#statepar" + id).css({
+            'color': 'white',
+            'font-weight': 'normal'
+        });
+        $("#statepar" + id).html("State: Waiting");
+    }
+    else if (task.State == "2") {
+        $("#statepar" + id).css({
+            'color': 'white',
+            'font-weight': 'normal'
+        });
+        $("#statepar" + id).html("State: Transferring");
+    }
+    else if (task.State == "3") {
+        $("#statepar" + id).css({
+            'color': 'white',
+            'font-weight': 'normal'
+        });
+        $("#statepar" + id).html("State: Calculating");
+    }
+    else if (task.State == "5") {
+        $("#statepar" + id).css({
+            'color': '#009900',
+            'font-weight': '900'
+        });
+        $("#statepar" + id).html("State: Finished");
+        console.log(task.DateFinished);
+        var datf = new Date(task.StateLog[task.StateLog.length -1].DateTime);
+        $("#lastupdpar" + id).html("Finished: " + datf.toUTCString());
+    }
+    else if (task.State == "7") {
+        $("#statepar" + id).css({
+            'color': '#df2020',
+            'font-weight': '900'
+        });
+        $("#statepar" + id).html("State: Failed");
+    }
+    
+    //execution time
+    $("#executionpar" + id).html(task.ExecutionTime + " executed");
+    //state changes
+    $("#statechangespar" + id).html("Statelogs: "+task.StateLog.length);
+    //graph title
+    var dat1 = new Date(task.StateLog[0].DateTime);
+    var dat2 = new Date(task.StateLog[task.StateLog.length - 1].DateTime);
+    $("#graphtitle" + id).html(
+        "From " + dat1.toUTCString() +
+        "<br/> to " + dat2.toUTCString()
+        );
+}
Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/hubber.js
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/hubber.js	(revision 13712)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/hubber.js	(revision 13714)
@@ -10,13 +10,5 @@
     });
     hubber.client.processMessage = function (message, value) {
-        /* if(value > 0){
-             $("#progress").css("width", value + '%');
-             $('#progress').attr('aria-valuenow', value);
-         }
-         else {
-             var v = $('#progress').attr('aria-valuenow') + (-value);
-             $("#progress").css("width", v + '%');
-             $('#progress').attr('aria-valuenow', v);
-         }*/
+
         if (value > $('#progress').attr('aria-valuenow')) {
             $("#progress").css("width", value + '%');
