Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/Index.cshtml
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/Index.cshtml	(revision 13712)
+++ 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 13712)
+++ 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 13712)
+++ 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 13712)
+++ 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 13712)
+++ 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 13712)
+++ 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 13712)
+++ 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>
