Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Controllers/JobController.cs
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Controllers/JobController.cs	(revision 13713)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Controllers/JobController.cs	(revision 13714)
@@ -59,5 +59,5 @@
             {
                 HiveClientWeb.Instance.Refresh();
-
+                
                 vm.userJobs = HiveClientWeb.Instance.Jobs.ToList();
                 foreach(var j in vm.userJobs)
@@ -69,5 +69,7 @@
                 }
                 vm.selectedJob.RefreshAutomatically = true;
-                HiveClientWeb.LoadJob(vm.selectedJob);
+                 HiveClientWeb.LoadJob(vm.selectedJob);
+                FileOpeningService.Instance.NewModel();
+                FileOpeningService.Instance.Job = vm.selectedJob;
                 ViewBag.Title = vm.selectedJob.Job.Name + " - Jobs";
                 return View("Index", vm);
Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/JobUpdaterHub.cs
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/JobUpdaterHub.cs	(revision 13713)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/JobUpdaterHub.cs	(revision 13714)
@@ -1,7 +1,10 @@
-﻿using Microsoft.AspNet.SignalR;
+﻿using HeuristicLab.Clients.Hive.WebJobManager.Services;
+using Microsoft.AspNet.SignalR;
+using Newtonsoft.Json;
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
+using HeuristicLab.Clients.Hive.WebJobManager.Services;
 
 namespace HeuristicLab.Clients.Hive.WebJobManager
@@ -11,7 +14,7 @@
         private RefreshableJob Job;
 
-        public void initConnection(RefreshableJob j)
+        public void initConnection()
         {
-            Job = j;
+            Job = FileOpeningService.Instance.Job;
         }
         public void sendUpdate()
@@ -19,4 +22,31 @@
             Clients.All.sendUpdate();
         }
+        public void updateAll()
+        {
+            FileOpeningService.Instance.refreshJob();
+            Job = FileOpeningService.Instance.Job;
+            
+            foreach (var t in Job.HiveTasks)
+            {
+                looperTasks(t);
+            }
+            Clients.All.requestDone();
+
+        }
+        private void looperTasks(HiveTask task)
+        {
+            try
+            {
+                JsonSerializerSettings settings = new JsonSerializerSettings();
+                settings.ContractResolver = new JsonTaskResolver();
+                var json = JsonConvert.SerializeObject(task.Task, settings);
+                Clients.All.processData(task.Task.Id,json );
+                foreach (var t in task.ChildHiveTasks)
+                {
+                    looperTasks(t);
+                }
+            }
+            catch (JsonSerializationException e) { }
+        }
     }
 }
Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Services/FileOpeningService.cs
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Services/FileOpeningService.cs	(revision 13713)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Services/FileOpeningService.cs	(revision 13714)
@@ -38,4 +38,9 @@
             Job.HiveTasks.Add(vm.SelectedTask);
         }
+        public void refreshJob()
+        {
+           // HiveClientWeb.Instance.Refresh();
+            HiveClientWeb.LoadJob(Job);
+        }
 
         public RefreshableJob AddCurrentModelToHive()
Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Services/JsonTaskResolver.cs
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Services/JsonTaskResolver.cs	(revision 13714)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Services/JsonTaskResolver.cs	(revision 13714)
@@ -0,0 +1,40 @@
+﻿using Newtonsoft.Json;
+using Newtonsoft.Json.Serialization;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Reflection;
+using System.Threading.Tasks;
+
+namespace HeuristicLab.Clients.Hive.WebJobManager.Services
+{
+    public class JsonTaskResolver : DefaultContractResolver
+    {
+        protected override JsonProperty CreateProperty(MemberInfo member,
+                                            MemberSerialization memberSerialization)
+        {
+            JsonProperty property = base.CreateProperty(member, memberSerialization);
+            if (property.PropertyName == "ItemImage" ||
+                property.PropertyName == "Parameters" ||
+                property.PropertyName == "OperatorGraph" ||
+                property.PropertyName == "DistanceMatrix" ||
+                property.PropertyName == "Operators" ||
+                property.PropertyName == "Engine" ||
+                property.PropertyName == "ActualValue" ||
+                property.PropertyName == "CurrentScope" ||
+                property.PropertyName == "Problems" ||
+                property.PropertyName == "Random" ||
+                property.PropertyName == "Optimizer" ||
+                property.PropertyName == "Optimizers" ||
+                property.PropertyName == "Problem" ||
+                property.PropertyName == "NestedOptimizers")
+            {
+                property.ShouldSerialize = instanceOfProblematic => false;
+            }
+
+            return property;
+        }
+    }
+
+}
Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/Index.cshtml
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/Index.cshtml	(revision 13713)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/Index.cshtml	(revision 13714)
@@ -88,9 +88,10 @@
 
                     </div>
-                    <div class="row">
-                        <h3 style="padding-left:20px">Tasks</h3>
-                        <script type="text/javascript">
-                            //TODO Globale variabele waar data per categorie in gestoken kan worden 
-                        </script>
+
+                    <script src="~/js/scripts/graphs/graphdatacollector.js"></script>
+                    <script src="~/js/scripts/graphs/graphhubber.js"></script>
+
+                    <div class="row" >
+                        <h3 style="padding-left:20px; ">Tasks</h3>
                         @foreach (var task in Model.selectedJob.HiveTasks)
                         {
Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/OpenFilePartials/_AlgorithmSmall.cshtml
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/OpenFilePartials/_AlgorithmSmall.cshtml	(revision 13713)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/OpenFilePartials/_AlgorithmSmall.cshtml	(revision 13714)
@@ -20,5 +20,7 @@
 <div class="collapse" id="collapseExample@(randomal)" style="margin-left:10px;margin-right:10px;margin-top:-10px">
     <img src="~/img/accoladealg.png" style="width:100%;" />
-    <div class="panel panel-primary" style="border-width:2px!important">
+    <div class="panel panel-primary" style="border-width:2px!important;
+box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+text-shadow:none">
         <div class="panel-heading panel-primary text-center">
             <p>@Model.algo.Description</p>
Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/OpenFilePartials/_BatchRunSmall.cshtml
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/OpenFilePartials/_BatchRunSmall.cshtml	(revision 13713)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/OpenFilePartials/_BatchRunSmall.cshtml	(revision 13714)
@@ -22,7 +22,13 @@
 </p>
 <div class="collapse" 
-     id="collapseExample@(randombr)" style="margin-left:10px;margin-right:10px;margin-top:-10px ">
+     id="collapseExample@(randombr)" 
+     style="margin-left:10px;margin-right:10px;margin-top:-10px "
+     
+     >
     <img src="~/img/accoladebatch.png" style="width:100%" />
-    <div class="panel panel-warning" style="border-color:#f6cd94!important; border-width:2px!important">
+    <div class="panel panel-warning" 
+         style="border-color:#f6cd94!important; border-width:2px!important;
+box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+text-shadow:2px 2px black">
         <div class="panel-heading  text-center">
             <p class="panel-title">
Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/OpenFilePartials/_ExperimentSmall.cshtml
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/OpenFilePartials/_ExperimentSmall.cshtml	(revision 13713)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/OpenFilePartials/_ExperimentSmall.cshtml	(revision 13714)
@@ -20,5 +20,7 @@
 <div class="collapse" id="collapseExample@(randomex)" style="margin-left:10px;margin-right:10px;margin-top:-10px">
     <img src="~/img/accoladeexp.png" style="width:100%" />
-    <div class="panel panel-danger" style="border-color:#c12e2a!important; border-width:2px!important">
+    <div class="panel panel-danger" style="border-color:#c12e2a!important; border-width:2px!important;
+box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+text-shadow:2px 2px black">
         <div class="panel-heading panel-danger text-center">
             <p class="panel-title">Children: @Model.exp.Optimizers.Count</p>
Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_AlgTask.cshtml
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_AlgTask.cshtml	(revision 13713)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_AlgTask.cshtml	(revision 13714)
@@ -1,12 +1,15 @@
 ﻿@model HeuristicLab.Clients.Hive.WebJobManager.Models.HiveTaskContainer
 @using Newtonsoft.Json;
-<div class="panel panel-primary" style="border-width:2px!important">
-    <div class="panel-heading" 
+<div class="panel panel-primary"
+     style="border-width:2px!important;
+box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+text-shadow:2px 2px black">
+    <div class="panel-heading"
          data-toggle="collapse"
          data-target="#panbody@(Model.hiveTask.Task.Id)"
-         onclick="redrawalg('@(Model.hiveTask.Task.Id)')"
-       aria-expanded="false"
-       aria-controls="panbody@(Model.hiveTask.Task.Id)">
-        <table class="table ">
+         onclick="redrawGraph('@(Model.hiveTask.Task.Id)')"
+         aria-expanded="false"
+         aria-controls="panbody@(Model.hiveTask.Task.Id)">
+        <table class="table">
             <thead>
                 <tr>
@@ -36,78 +39,51 @@
             <tbody>
                 <tr>
-                    <td>Last update @Model.hiveTask.Task.LastTaskDataUpdate </td>
-                    <td>State: @Model.hiveTask.Task.State</td>
+                    <td id="lastupdpar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
+                    <td id="statepar@(Model.hiveTask.Task.Id)"
+                        >
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
 
                 </tr>
                 <tr>
-                    <td>@Model.hiveTask.Task.ExecutionTime executed</td>
+                    <td id="executionpar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
                     <td>Created: @Model.hiveTask.Task.DateCreated</td>
                 </tr>
                 <tr>
-                    <td>Statelogs: @Model.hiveTask.Task.StateLog.Count</td>
+                    <td></td>
+                    <td id="statechangespar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
                 </tr>
             </tbody>
         </table>
     </div>
-    <div class="panel-body ">
+    <div class="panel-body " style="text-shadow:none">
         <div class="collapse" id="panbody@(Model.hiveTask.Task.Id)">
-            <h4>From @Model.hiveTask.Task.StateLog.First().DateTime <br />to @Model.hiveTask.Task.StateLog.Last().DateTime  </h4>
+          
+            <input id="graphtoggle@(Model.hiveTask.Task.Id)"
+                   type="checkbox"
+                   data-toggle="toggle"
+                   data-on="Line"
+                   data-off="Pie"
+                   onchange="redrawGraph('@(Model.hiveTask.Task.Id)')" />
+            <h4 id="graphtitle@(Model.hiveTask.Task.Id)">
+                <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+            </h4>
             <div id="graph@(Model.hiveTask.Task.Id)"></div>
         </div>
     </div>
     <script type="text/javascript">
-        var temp = @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog));
-        var xarr = [];
-        var yarr = [];
-        var waiting = 0;
-        var transfer = 0;
-        var calc = 0;
-        for(var v = 0; v < temp.length; v++){
-            xarr.push(temp[v].DateTime.substr(11,8));
-            if(temp[v].State == 1){
-                yarr.push("Waiting");
-                if(v < (temp.length -1))
-                    waiting += Date.parse(temp[v+1].DateTime) - Date.parse(temp[v].DateTime);
-            }
-            else if(temp[v].State == 2){
-                yarr.push("Transferring");
-                if(v < (temp.length -1))
-                    transfer += Date.parse(temp[v+1].DateTime) - Date.parse(temp[v].DateTime);
-            }
-            else if(temp[v].State == 3){
-                yarr.push("Calculating");
-                if(v < (temp.length -1))
-                    calc += Date.parse(temp[v+1].DateTime) - Date.parse(temp[v].DateTime);
-            }
+        initSaveData("@(Model.hiveTask.Task.Id)",
+            @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog)));
 
-            else if(temp[v].State == 5)
-                yarr.push("Finished");
-            else if(temp[v].State == 7)
-                yarr.push("Failed");
-        }
-
-        var data = [{
-            x: xarr,
-            y: yarr,
-            type:'scatter'
-        }];
-        var dats = [{
-            values:[waiting/1000/60,transfer/1000/60,calc/1000/60],
-            labels: ['Minutes waiting', 'Minutes transferring', 'Minutes calculating'],
-            type:'pie'
-        }];
-        console.log(dats);
         document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 90%; height: 450px;";
 
-        Plotly.newPlot('graph@(Model.hiveTask.Task.Id)', dats);
-
-        function redrawalg(val){
-            setTimeout(function(){
-                Plotly.redraw('graph' + val);
-            }, 100);
-            
-
-        }
-
+        Plotly.newPlot('graph@(Model.hiveTask.Task.Id)',
+            getDataPie("@Model.hiveTask.Task.Id"));
     </script>
 </div>
Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_BatchTask.cshtml
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_BatchTask.cshtml	(revision 13713)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_BatchTask.cshtml	(revision 13714)
@@ -1,11 +1,13 @@
 ﻿@model HeuristicLab.Clients.Hive.WebJobManager.Models.HiveTaskContainer
 @using Newtonsoft.Json;
-<div class="panel panel-warning" style="border-color:#f6cd94!important; border-width:2px!important">
+<div class="panel panel-warning" style="border-color:#f6cd94!important; border-width:2px!important;
+box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+text-shadow:2px 2px black">
     <div class="panel-heading"
          data-toggle="collapse"
          data-target="#panbody@(Model.hiveTask.Task.Id)"
-         onclick="redrawbat('@(Model.hiveTask.Task.Id)')"
-       aria-expanded="false"
-       aria-controls="panbody@(Model.hiveTask.Task.Id)">
+         onclick="redrawGraph('@(Model.hiveTask.Task.Id)')"
+         aria-expanded="false"
+         aria-controls="panbody@(Model.hiveTask.Task.Id)">
         <table class="table ">
             <thead>
@@ -37,12 +39,18 @@
             <tbody>
                 <tr>
-                    <td>Last update @Model.hiveTask.Task.LastTaskDataUpdate </td>
-                    <td>State: @Model.hiveTask.Task.State</td>
+                    <td id="lastupdpar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
+                    <td id="statepar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
 
                 </tr>
                 <tr>
-                    <td>@Model.hiveTask.Task.ExecutionTime executed</td>
+                    <td id="executionpar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
                     <td>Created: @Model.hiveTask.Task.DateCreated</td>
-                </tr>
+                 </tr>
                 <tr>
                     <td>
@@ -54,13 +62,24 @@
                                data-onstyle="success" />
                     </td>
-                    <td>Statelogs: @Model.hiveTask.Task.StateLog.Count</td>
+                    <td id="statechangespar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
                 </tr>
             </tbody>
         </table>
     </div>
-    <div class="panel-body ">
+    <div class="panel-body " style="text-shadow:none">
         <div class="collapse" id="panbody@(Model.hiveTask.Task.Id)">
-            <h4>From @Model.hiveTask.Task.StateLog.First().DateTime <br />to @Model.hiveTask.Task.StateLog.Last().DateTime  </h4>
-            <div id="graph@(Model.hiveTask.Task.Id)"></div>
+            <input id="graphtoggle@(Model.hiveTask.Task.Id)"
+                   type="checkbox"
+                   data-toggle="toggle"
+                   checked
+                   data-on="Line"
+                   data-off="Pie"
+                   onchange="redrawGraph('@(Model.hiveTask.Task.Id)')">
+            <h4 id="graphtitle@(Model.hiveTask.Task.Id)">
+                <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+            </h4>
+            <div style="text-shadow:none" id="graph@(Model.hiveTask.Task.Id)"></div>
         </div>
     </div>
@@ -77,37 +96,11 @@
     }
     <script type="text/javascript">
-        var temp = @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog));
-        var xarr = [];
-        var yarr = [];
-        for(var v = 0; v < temp.length; v++){
-            xarr.push(temp[v].DateTime.substr(11,8));
-            if(temp[v].State == 1)
-                yarr.push("Waiting");
-            else if(temp[v].State == 2)
-                yarr.push("Transferring");
-            else if(temp[v].State == 3)
-                yarr.push("Calculating");
-            else if(temp[v].State == 5)
-                yarr.push("Finished");
-            else if(temp[v].State == 7)
-                yarr.push("Failed");
-        }
+        initSaveData("@(Model.hiveTask.Task.Id)",
+            @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog)));
 
-        var data = [{
-            x: xarr,
-            y: yarr,
-            type:'scatter'
-        }];
         document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 90%; height: 450px;";
 
-        Plotly.newPlot('graph@(Model.hiveTask.Task.Id)', data);
-
-        function redrawbat(val){
-            setTimeout(function(){
-                Plotly.newPlot('graph' + val,data);
-            }, 100);
-            
-
-        }
+        Plotly.newPlot('graph@(Model.hiveTask.Task.Id)',
+            getData("@Model.hiveTask.Task.Id"));
 
     </script>
Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_ExpTask.cshtml
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_ExpTask.cshtml	(revision 13713)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/SelectedJobPartials/_ExpTask.cshtml	(revision 13714)
@@ -2,9 +2,13 @@
 @using Newtonsoft.Json;
 
-<div class="panel panel-danger" style="border-color:#c12e2a!important; border-width:2px!important">
+<div class="panel panel-danger" 
+     style="border-color:#c12e2a!important; border-width:2px!important;
+box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+text-shadow:2px 2px black"
+     >
     <div class="panel-heading"
          data-toggle="collapse"
          data-target="#panbody@(Model.hiveTask.Task.Id)"
-         onclick="redrawexp('@(Model.hiveTask.Task.Id)')"
+         onclick="redrawGraph('@(Model.hiveTask.Task.Id)')"
        aria-expanded="false"
        aria-controls="panbody@(Model.hiveTask.Task.Id)">
@@ -38,16 +42,17 @@
             <tbody>
                 <tr>
-                    <td id="lastupdate@(Model.hiveTask.Task.Id)">
-                        Last update @Model.hiveTask.Task.LastTaskDataUpdate
+                    <td id="lastupdpar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
                     </td>
-                    <td id="state@(Model.hiveTask.Task.Id)">State: @Model.hiveTask.Task.State</td>
+                    <td id="statepar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
 
                 </tr>
                 <tr>
-                    <td id="exectime@(Model.hiveTask.Task.Id)">
-                        @Model.hiveTask.Task.ExecutionTime executed
+                    <td id="executionpar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
                     </td>
-                    <td>Created: @Model.hiveTask.Task.DateCreated</td>
-                </tr>
+                    <td>Created: @Model.hiveTask.Task.DateCreated</td> </tr>
                 <tr>
                     <td>
@@ -59,13 +64,24 @@
                                data-onstyle="success" />
                     </td>
-                    <td>Statelogs: @Model.hiveTask.Task.StateLog.Count</td>
+                    <td id="statechangespar@(Model.hiveTask.Task.Id)">
+                        <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+                    </td>
                 </tr>
             </tbody>
         </table>
     </div>
-    <div class="panel-body ">
+    <div class="panel-body " style="text-shadow:none">
         <div class="collapse" id="panbody@(Model.hiveTask.Task.Id)">
-            <h4>From @Model.hiveTask.Task.StateLog.First().DateTime <br />to @Model.hiveTask.Task.StateLog.Last().DateTime  </h4>
-            <div id="graph@(Model.hiveTask.Task.Id)"></div>
+            <input id="graphtoggle@(Model.hiveTask.Task.Id)"
+                   type="checkbox"
+                   data-toggle="toggle"
+                   checked
+                   data-on="Line"
+                   data-off="Pie"
+                   onchange="redrawGraph('@(Model.hiveTask.Task.Id)')">
+            <h4 id="graphtitle@(Model.hiveTask.Task.Id)">
+                <i class="fa fa-cog fa-spin fa-2x" id="spinner"></i>
+            </h4>
+            <div style="text-shadow:none" id="graph@(Model.hiveTask.Task.Id)"></div>
         </div>
     </div>
@@ -82,38 +98,11 @@
     }
     <script type="text/javascript">
-        var temp = @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog));
-        var xarr = [];
-        var yarr = [];
-        for(var v = 0; v < temp.length; v++){
-            xarr.push(temp[v].DateTime.substr(11,8));
-            if(temp[v].State == 1)
-                yarr.push("Waiting");
-            else if(temp[v].State == 2)
-                yarr.push("Transferring");
-            else if(temp[v].State == 3)
-                yarr.push("Calculating");
-            else if(temp[v].State == 5)
-                yarr.push("Finished");
-            else if(temp[v].State == 7)
-                yarr.push("Failed");
-        }
+        initSaveData("@(Model.hiveTask.Task.Id)",
+            @Html.Raw(JsonConvert.SerializeObject(Model.hiveTask.Task.StateLog)));
 
-        var data = [{
-            x: xarr,
-            y: yarr,
-            type:'scatter'
-        }];
         document.getElementById("graph@(Model.hiveTask.Task.Id)").style = "width: 90%; height: 450px;";
 
-        Plotly.newPlot('graph@(Model.hiveTask.Task.Id)', data);
-
-        function redrawexp(val){
-            setTimeout(function(){
-                Plotly.newPlot('graph' + val,data);
-            }, 100);
-            
-
-        }
-
+        Plotly.newPlot('graph@(Model.hiveTask.Task.Id)',
+            getData("@Model.hiveTask.Task.Id"));
     </script>
 </div>
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 13713)
+++ 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 + '%');
