Revamped resource graphing, uses chart.js

CHANGELOG.md

@@ -11,6 +11,7 @@ This project follows [Semantic Versioning](http://semver.org) guidelines.
 
 ### Changed
 * Servers are now queued for deletion to allow for cancellation of deletion, as well as run in the background to speed up page loading.
+* Switched to new graphing library to make graphs less... broken.
 
 ### Removed
 * Removed online player listing due to inconsistency in query library and an assortment of query related bugs. This will return in future versions when we get it working correctly.

README.md

@@ -43,7 +43,7 @@ Bootstrap - [license](https://github.com/twbs/bootstrap/blob/master/LICENSE) - [
 
 BootStrap Notify - [license](https://github.com/mouse0270/bootstrap-notify/blob/master/LICENSE) - [homepage](http://bootstrap-notify.remabledesigns.com)
 
-D3.js - [license](https://github.com/mbostock/d3/blob/master/LICENSE) - [homepage](https://d3js.org/)
+Chart.js - [license](https://github.com/chartjs/Chart.js/blob/master/LICENSE.md) - [homepage](http://www.chartjs.org)
 
 FontAwesome - [license](http://fontawesome.io/license/) - [homepage](http://fontawesome.io)
 
@@ -57,8 +57,6 @@ jQuery Terminal - [license](https://github.com/jcubic/jquery.terminal/blob/maste
 
 Lodash - [license](https://github.com/lodash/lodash/blob/master/LICENSE) - [homepage](https://lodash.com/)
 
-MetricsGraphics.js - [license](https://github.com/mozilla/metrics-graphics/blob/master/LICENSE) - [homepage](http://metricsgraphicsjs.org/)
-
 Socket.io - [license](https://github.com/socketio/socket.io/blob/master/LICENSE) - [homepage](http://socket.io)
 
 SweetAlert - [license](https://github.com/t4t5/sweetalert/blob/master/LICENSE) - [homepage](http://t4t5.github.io/sweetalert/)

public/js/vendor/jquery/jquery-dateFormat.min.js

@@ -0,0 +1,2 @@
+/*! jquery-dateFormat 18-05-2015 */
+var DateFormat={};!function(a){var b=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],c=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],d=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],e=["January","February","March","April","May","June","July","August","September","October","November","December"],f={Jan:"01",Feb:"02",Mar:"03",Apr:"04",May:"05",Jun:"06",Jul:"07",Aug:"08",Sep:"09",Oct:"10",Nov:"11",Dec:"12"},g=/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.?\d{0,3}[Z\-+]?(\d{2}:?\d{2})?/;a.format=function(){function a(a){return b[parseInt(a,10)]||a}function h(a){return c[parseInt(a,10)]||a}function i(a){var b=parseInt(a,10)-1;return d[b]||a}function j(a){var b=parseInt(a,10)-1;return e[b]||a}function k(a){return f[a]||a}function l(a){var b,c,d,e,f,g=a,h="";return-1!==g.indexOf(".")&&(e=g.split("."),g=e[0],h=e[e.length-1]),f=g.split(":"),3===f.length?(b=f[0],c=f[1],d=f[2].replace(/\s.+/,"").replace(/[a-z]/gi,""),g=g.replace(/\s.+/,"").replace(/[a-z]/gi,""),{time:g,hour:b,minute:c,second:d,millis:h}):{time:"",hour:"",minute:"",second:"",millis:""}}function m(a,b){for(var c=b-String(a).length,d=0;c>d;d++)a="0"+a;return a}return{parseDate:function(a){var b,c,d={date:null,year:null,month:null,dayOfMonth:null,dayOfWeek:null,time:null};if("number"==typeof a)return this.parseDate(new Date(a));if("function"==typeof a.getFullYear)d.year=String(a.getFullYear()),d.month=String(a.getMonth()+1),d.dayOfMonth=String(a.getDate()),d.time=l(a.toTimeString()+"."+a.getMilliseconds());else if(-1!=a.search(g))b=a.split(/[T\+-]/),d.year=b[0],d.month=b[1],d.dayOfMonth=b[2],d.time=l(b[3].split(".")[0]);else switch(b=a.split(" "),6===b.length&&isNaN(b[5])&&(b[b.length]="()"),b.length){case 6:d.year=b[5],d.month=k(b[1]),d.dayOfMonth=b[2],d.time=l(b[3]);break;case 2:c=b[0].split("-"),d.year=c[0],d.month=c[1],d.dayOfMonth=c[2],d.time=l(b[1]);break;case 7:case 9:case 10:d.year=b[3],d.month=k(b[1]),d.dayOfMonth=b[2],d.time=l(b[4]);break;case 1:c=b[0].split(""),d.year=c[0]+c[1]+c[2]+c[3],d.month=c[5]+c[6],d.dayOfMonth=c[8]+c[9],d.time=l(c[13]+c[14]+c[15]+c[16]+c[17]+c[18]+c[19]+c[20]);break;default:return null}return d.date=d.time?new Date(d.year,d.month-1,d.dayOfMonth,d.time.hour,d.time.minute,d.time.second,d.time.millis):new Date(d.year,d.month-1,d.dayOfMonth),d.dayOfWeek=String(d.date.getDay()),d},date:function(b,c){try{var d=this.parseDate(b);if(null===d)return b;for(var e,f=d.year,g=d.month,k=d.dayOfMonth,l=d.dayOfWeek,n=d.time,o="",p="",q="",r=!1,s=0;s<c.length;s++){var t=c.charAt(s),u=c.charAt(s+1);if(r)"'"==t?(p+=""===o?"'":o,o="",r=!1):o+=t;else switch(o+=t,q="",o){case"ddd":p+=a(l),o="";break;case"dd":if("d"===u)break;p+=m(k,2),o="";break;case"d":if("d"===u)break;p+=parseInt(k,10),o="";break;case"D":k=1==k||21==k||31==k?parseInt(k,10)+"st":2==k||22==k?parseInt(k,10)+"nd":3==k||23==k?parseInt(k,10)+"rd":parseInt(k,10)+"th",p+=k,o="";break;case"MMMM":p+=j(g),o="";break;case"MMM":if("M"===u)break;p+=i(g),o="";break;case"MM":if("M"===u)break;p+=m(g,2),o="";break;case"M":if("M"===u)break;p+=parseInt(g,10),o="";break;case"y":case"yyy":if("y"===u)break;p+=o,o="";break;case"yy":if("y"===u)break;p+=String(f).slice(-2),o="";break;case"yyyy":p+=f,o="";break;case"HH":p+=m(n.hour,2),o="";break;case"H":if("H"===u)break;p+=parseInt(n.hour,10),o="";break;case"hh":e=0===parseInt(n.hour,10)?12:n.hour<13?n.hour:n.hour-12,p+=m(e,2),o="";break;case"h":if("h"===u)break;e=0===parseInt(n.hour,10)?12:n.hour<13?n.hour:n.hour-12,p+=parseInt(e,10),o="";break;case"mm":p+=m(n.minute,2),o="";break;case"m":if("m"===u)break;p+=n.minute,o="";break;case"ss":p+=m(n.second.substring(0,2),2),o="";break;case"s":if("s"===u)break;p+=n.second,o="";break;case"S":case"SS":if("S"===u)break;p+=o,o="";break;case"SSS":var v="000"+n.millis.substring(0,3);p+=v.substring(v.length-3),o="";break;case"a":p+=n.hour>=12?"PM":"AM",o="";break;case"p":p+=n.hour>=12?"p.m.":"a.m.",o="";break;case"E":p+=h(l),o="";break;case"'":o="",r=!0;break;default:p+=t,o=""}}return p+=q}catch(w){return console&&console.log&&console.log(w),b}},prettyDate:function(a){var b,c,d;return("string"==typeof a||"number"==typeof a)&&(b=new Date(a)),"object"==typeof a&&(b=new Date(a.toString())),c=((new Date).getTime()-b.getTime())/1e3,d=Math.floor(c/86400),isNaN(d)||0>d?void 0:60>c?"just now":120>c?"1 minute ago":3600>c?Math.floor(c/60)+" minutes ago":7200>c?"1 hour ago":86400>c?Math.floor(c/3600)+" hours ago":1===d?"Yesterday":7>d?d+" days ago":31>d?Math.ceil(d/7)+" weeks ago":d>=31?"more than 5 weeks ago":void 0},toBrowserTimeZone:function(a,b){return this.date(new Date(a),b||"MM/dd/yyyy HH:mm:ss")}}}()}(DateFormat),function(a){a.format=DateFormat.format}(jQuery);

resources/views/admin/nodes/view.blade.php

@@ -25,11 +25,10 @@
 
 @section('scripts')
     @parent
-    {!! Theme::css('css/vendor/metricsgraphics/metricsgraphics.css') !!}
-    {!! Theme::js('js/vendor/d3/d3.min.js') !!}
-    {!! Theme::js('js/vendor/metricsgraphics/metricsgraphics.min.js') !!}
     {!! Theme::js('js/vendor/socketio/socket.io.min.js') !!}
     {!! Theme::js('js/bootstrap-notify.min.js') !!}
+    {!! Theme::js('js/vendor/chartjs/chart.min.js') !!}
+    {!! Theme::js('js/vendor/jquery/jquery-dateFormat.min.js') !!}
     <script>
         $(document).ready(function () {
             $.notifyDefaults({
@@ -102,9 +101,8 @@
                 <div class="panel-heading" style="border-top: 1px solid #ddd;"></div>
                 <div class="panel-body">
                     <div class="row">
-                        <div class="col-xs-11 text-center" id="chart_memory" style="height:250px;"></div>
+                        <canvas id="chart_memory" style="max-height:300px;"></canvas>
-                        <div class="col-xs-11 text-center" id="chart_cpu" style="height:250px;"></div>
+                        <canvas id="chart_cpu" style="max-height:300px;"></canvas>
-                        <div class="col-xs-11 text-center" id="chart_players" style="height:250px;"></div>
                     </div>
                 </div>
             </div>
@@ -545,58 +543,6 @@ $(document).ready(function () {
         3: 'Stopping'
     };
 
-    // -----------------+
-    // Charting Methods |
-    // -----------------+
-    var memoryGraphSettings = {
-        title: 'Memory Usage (MB)',
-        data: [{
-            'date': new Date(),
-            'memory': 0
-        }],
-        full_width: true,
-        full_height: true,
-        target: document.getElementById('chart_memory'),
-        x_accessor: 'date',
-        y_accessor: 'memory',
-        y_rug: true,
-        area: false,
-    };
-
-    var cpuGraphSettings = {
-        title: 'CPU Usage (%)',
-        data: [{
-            'date': new Date(),
-            'cpu': 0
-        }],
-        full_width: true,
-        full_height: true,
-        target: document.getElementById('chart_cpu'),
-        x_accessor: 'date',
-        y_accessor: 'cpu',
-        y_rug: true,
-        area: false,
-    };
-
-    var playersGraphSettings = {
-        title: 'Players Online',
-        data: [{
-            'date': new Date(),
-            'players': 0
-        }],
-        full_width: true,
-        full_height: true,
-        target: document.getElementById('chart_players'),
-        x_accessor: 'date',
-        y_accessor: 'players',
-        y_rug: true,
-        area: false,
-    };
-
-    MG.data_graphic(memoryGraphSettings);
-    MG.data_graphic(cpuGraphSettings);
-    MG.data_graphic(playersGraphSettings);
-
     // Main Socket Object
     var socket = io('{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/stats/', {
         'query': 'token={{ $node->daemonSecret }}'
@@ -626,36 +572,112 @@ $(document).ready(function () {
         console.error('There was an error while attemping to connect to the websocket: ' + err + '\n\nPlease try loading this page again.');
     });
 
+    var ctc = $('#chart_cpu');
+    var timeLabels = [];
+    var cpuData = [];
+    var CPUChart = new Chart(ctc, {
+        type: 'line',
+        data: {
+            labels: timeLabels,
+            datasets: [
+                {
+                    label: "Percent Use",
+                    fill: false,
+                    lineTension: 0.03,
+                    backgroundColor: "#00A1CB",
+                    borderColor: "#00A1CB",
+                    borderCapStyle: 'butt',
+                    borderDash: [],
+                    borderDashOffset: 0.0,
+                    borderJoinStyle: 'miter',
+                    pointBorderColor: "rgba(75,192,192,1)",
+                    pointBackgroundColor: "#fff",
+                    pointBorderWidth: 1,
+                    pointHoverRadius: 5,
+                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
+                    pointHoverBorderColor: "rgba(220,220,220,1)",
+                    pointHoverBorderWidth: 2,
+                    pointRadius: 1,
+                    pointHitRadius: 10,
+                    data: cpuData,
+                    spanGaps: false,
+                }
+            ]
+        },
+        options: {
+            title: {
+                display: true,
+                text: 'CPU Usage (as Percent Total)'
+            },
+            legend: {
+                display: false,
+            },
+            animation: {
+                duration: 1,
+            }
+        }
+    });
+
+    var ctm = $('#chart_memory');
+    var memoryData = [];
+    var MemoryChart = new Chart(ctm, {
+        type: 'line',
+        data: {
+            labels: timeLabels,
+            datasets: [
+                {
+                    label: "Memory Use",
+                    fill: false,
+                    lineTension: 0.03,
+                    backgroundColor: "#01A4A4",
+                    borderColor: "#01A4A4",
+                    borderCapStyle: 'butt',
+                    borderDash: [],
+                    borderDashOffset: 0.0,
+                    borderJoinStyle: 'miter',
+                    pointBorderColor: "rgba(75,192,192,1)",
+                    pointBackgroundColor: "#fff",
+                    pointBorderWidth: 1,
+                    pointHoverRadius: 5,
+                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
+                    pointHoverBorderColor: "rgba(220,220,220,1)",
+                    pointHoverBorderWidth: 2,
+                    pointRadius: 1,
+                    pointHitRadius: 10,
+                    data: memoryData,
+                    spanGaps: false,
+                }
+            ]
+        },
+        options: {
+            title: {
+                display: true,
+                text: 'Memory Usage (in Megabytes)'
+            },
+            legend: {
+                display: false,
+            },
+            animation: {
+                duration: 1,
+            }
+        }
+    });
+
     socket.on('live-stats', function (data) {
-
+        if (cpuData.length > 10) {
-        if (typeof memoryGraphSettings.data[0][100] !== 'undefined' || memoryGraphSettings.data[0][0].memory === -1) {
+            cpuData.shift();
-            memoryGraphSettings.data[0].shift();
+            memoryData.shift();
-        }
+            timeLabels.shift();
-        if (typeof cpuGraphSettings.data[0][100] !== 'undefined' || cpuGraphSettings.data[0][0].cpu === -1) {
-            cpuGraphSettings.data[0].shift();
-        }
-        if (typeof playersGraphSettings.data[0][100] !== 'undefined' || playersGraphSettings.data[0][0].players === -1) {
-            playersGraphSettings.data[0].shift();
         }
 
-        memoryGraphSettings.data[0].push({
+        cpuData.push(data.stats.cpu);
-            'date': new Date(),
+        memoryData.push(parseInt(data.stats.memory / (1024 * 1024)));
-            'memory': parseInt(data.stats.memory / (1024 * 1024))
-        });
 
-        cpuGraphSettings.data[0].push({
+        var m = new Date();
-            'date': new Date(),
+        timeLabels.push($.format.date(new Date(), 'HH:MM:ss'));
-            'cpu': data.stats.cpu
-        });
 
-        playersGraphSettings.data[0].push({
+        CPUChart.update();
-            'date': new Date(),
+        MemoryChart.update();
-            'players': data.stats.players
-        });
-
-        MG.data_graphic(memoryGraphSettings);
-        MG.data_graphic(cpuGraphSettings);
-        MG.data_graphic(playersGraphSettings);
 
         $.each(data.servers, function (uuid, info) {
             var element = $('tr[data-server="' + uuid + '"]');

resources/views/server/index.blade.php

@@ -25,20 +25,19 @@
 
 @section('scripts')
     @parent
-    {!! Theme::css('css/vendor/metricsgraphics/metricsgraphics.css') !!}
     {!! Theme::css('css/jquery.terminal.css') !!}
-    {!! Theme::js('js/vendor/d3/d3.min.js') !!}
-    {!! Theme::js('js/vendor/metricsgraphics/metricsgraphics.min.js') !!}
-    {!! Theme::js('js/vendor/async/async.min.js') !!}
     {!! Theme::js('js/jquery.mousewheel-min.js') !!}
     {!! Theme::js('js/jquery.terminal-0.11.6.min.js') !!}
     {!! Theme::js('js/unix_formatting.js') !!}
+    {!! Theme::js('js/vendor/chartjs/chart.min.js') !!}
+    {!! Theme::js('js/vendor/jquery/jquery-dateFormat.min.js') !!}
 @endsection
 
 @section('content')
 <div class="col-md-12">
     <ul class="nav nav-tabs tabs_with_panel" id="config_tabs">
         <li class="active"><a href="#console" data-toggle="tab">{{ trans('server.index.control') }}</a></li>
+        <li><a href="#resources" data-toggle="tab">Resource Use</a></li>
         @can('view-allocation', $server)<li><a href="#allocation" data-toggle="tab">{{ trans('server.index.allocation') }}</a></li>@endcan
     </ul>
     <div class="tab-content">
@@ -67,6 +66,23 @@
                 </div>
             </div>
         </div>
+        <div class="tab-pane" id="resources">
+            <div class="panel panel-default">
+                <div class="panel-heading"></div>
+                <div class="panel-body">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <canvas id="chart_memory" style="max-height:300px;"></canvas>
+                        </div>
+                    </div>
+                    <div class="row" style="margin-top:15px;">
+                        <div class="col-md-12">
+                            <canvas id="chart_cpu" style="max-height:300px;"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         @can('view-allocation', $server)
             <div class="tab-pane" id="allocation">
                 <div class="panel panel-default">
@@ -108,23 +124,6 @@
             </div>
         @endcan
     </div>
-    <div class="panel panel-default" style="margin-top:-22px;">
-        <div class="panel-heading"></div>
-        <div class="panel-body">
-            <div class="row">
-                <div class="col-md-12">
-                    <h4 class="text-center">Memory Usage (MB)</h4>
-                    <div class="col-md-12" id="chart_memory" style="height:250px;"></div>
-                </div>
-            </div>
-            <div class="row" style="margin-top:15px;">
-                <div class="col-md-12">
-                    <h4 class="text-center">CPU Usage (% Total) <small><a href="#" data-action="show-all-cores">toggle cores</a></small></h4>
-                    <div class="col-md-12" id="chart_cpu" style="height:250px;"></div>
-                </div>
-            </div>
-        </div>
-    </div>
 </div>
 <div class="modal fade" id="pauseConsole" tabindex="-1" role="dialog" aria-labelledby="PauseConsole" aria-hidden="true">
     <div class="modal-dialog">
@@ -199,145 +198,112 @@ $(window).load(function () {
         }
     });
 
-    var showOnlyTotal = true;
+    var ctc = $('#chart_cpu');
-    $('[data-action="show-all-cores"]').click(function (event) {
+    var timeLabels = [];
-        event.preventDefault();
+    var cpuData = [];
-        showOnlyTotal = !showOnlyTotal;
+    var CPUChart = new Chart(ctc, {
-        $('#chart_cpu').empty();
+        type: 'line',
+        data: {
+            labels: timeLabels,
+            datasets: [
+                {
+                    label: "Percent Use",
+                    fill: false,
+                    lineTension: 0.03,
+                    backgroundColor: "#00A1CB",
+                    borderColor: "#00A1CB",
+                    borderCapStyle: 'butt',
+                    borderDash: [],
+                    borderDashOffset: 0.0,
+                    borderJoinStyle: 'miter',
+                    pointBorderColor: "rgba(75,192,192,1)",
+                    pointBackgroundColor: "#fff",
+                    pointBorderWidth: 1,
+                    pointHoverRadius: 5,
+                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
+                    pointHoverBorderColor: "rgba(220,220,220,1)",
+                    pointHoverBorderWidth: 2,
+                    pointRadius: 1,
+                    pointHitRadius: 10,
+                    data: cpuData,
+                    spanGaps: false,
+                }
+            ]
+        },
+        options: {
+            title: {
+                display: true,
+                text: 'CPU Usage (as Percent Total)'
+            },
+            legend: {
+                display: false,
+            },
+            animation: {
+                duration: 1,
+            }
+        }
     });
 
-    // -----------------+
+    var ctm = $('#chart_memory');
-    // Charting Methods |
+    var memoryData = [];
-    // -----------------+
+    var MemoryChart = new Chart(ctm, {
-    var memoryGraphSettings = {
+        type: 'line',
-        data: [{
+        data: {
-            'date': new Date(),
+            labels: timeLabels,
-            'memory': -1
+            datasets: [
-        }],
+                {
-        full_width: true,
+                    label: "Memory Use",
-        full_height: true,
+                    fill: false,
-        right: 40,
+                    lineTension: 0.03,
-        target: document.getElementById('chart_memory'),
+                    backgroundColor: "#01A4A4",
-        x_accessor: 'date',
+                    borderColor: "#01A4A4",
-        y_accessor: 'memory',
+                    borderCapStyle: 'butt',
-        animate_on_load: false,
+                    borderDash: [],
-        y_rug: true,
+                    borderDashOffset: 0.0,
-        area: false,
+                    borderJoinStyle: 'miter',
-    };
+                    pointBorderColor: "rgba(75,192,192,1)",
-
+                    pointBackgroundColor: "#fff",
-    var cpuGraphData = [
+                    pointBorderWidth: 1,
-        [{
+                    pointHoverRadius: 5,
-            'date': new Date(),
+                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
-            'cpu': -1
+                    pointHoverBorderColor: "rgba(220,220,220,1)",
-        }]
+                    pointHoverBorderWidth: 2,
-    ];
+                    pointRadius: 1,
-    var cpuGraphSettings = {
+                    pointHitRadius: 10,
-        data: cpuGraphData,
+                    data: memoryData,
-        legend: ['Total', 'C0', 'C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7'],
+                    spanGaps: false,
-        colors: [
+                }
-            '#113F8C',
+            ]
-            '#00A1CB',
+        },
-            '#01A4A4',
+        options: {
-            '#61AE24',
+            title: {
-            '#D0D102',
+                display: true,
-            '#D70060',
+                text: 'Memory Usage (in Megabytes)'
-            '#E54028',
+            },
-            '#F18D05',
+            legend: {
-            '#616161',
+                display: false,
-            '#32742C',
+            },
-        ],
+            animation: {
-        right: 40,
+                duration: 1,
-        full_width: true,
+            }
-        full_height: true,
+        }
-        target: document.getElementById('chart_cpu'),
+    });
-        x_accessor: 'date',
-        y_accessor: 'cpu',
-        aggregate_rollover: true,
-        missing_is_hidden: true,
-        animate_on_load: false,
-        area: false,
-    };
-
-    MG.data_graphic(memoryGraphSettings);
-    MG.data_graphic(cpuGraphSettings);
-
-    // Socket Recieves New Server Stats
-    var activeChartArrays = [];
     socket.on('proc', function (proc) {
-
+        if (cpuData.length > 10) {
-        var curDate = new Date();
+            cpuData.shift();
-        if (typeof memoryGraphSettings.data[0][20] !== 'undefined' || memoryGraphSettings.data[0][0].memory === -1) {
+            memoryData.shift();
-            memoryGraphSettings.data[0].shift();
+            timeLabels.shift();
         }
 
-        if (typeof cpuGraphData[0][20] !== 'undefined' || cpuGraphData[0][0].cpu === -1) {
+        var cpuUse = ({{ $server->cpu }} > 0) ? parseFloat(((proc.data.cpu.total / {{ $server->cpu }}) * 100).toFixed(3).toString()) : proc.data.cpu.total;
-            cpuGraphData[0].shift();
+        cpuData.push(cpuUse);
-        }
+        memoryData.push(parseInt(proc.data.memory.total / (1024 * 1024)));
 
-        memoryGraphSettings.data[0].push({
+        var m = new Date();
-            'date': curDate,
+        timeLabels.push($.format.date(new Date(), 'HH:MM:ss'));
-            'memory': parseInt(proc.data.memory.total / (1024 * 1024))
-        });
 
-        cpuGraphData[0].push({
+        CPUChart.update();
-            'date': curDate,
+        MemoryChart.update();
-            'cpu': ({{ $server->cpu }} > 0) ? parseFloat(((proc.data.cpu.total / {{ $server->cpu }}) * 100).toFixed(3).toString()) : proc.data.cpu.total
-        });
-
-        async.waterfall([
-            function (callback) {
-                // Remove blank values from listing
-                var activeCores = [];
-                async.forEachOf(proc.data.cpu.cores, function(inner, i, eachCallback) {
-                    if (proc.data.cpu.cores[i] > 0) {
-                        activeCores.push(proc.data.cpu.cores[i]);
-                    }
-                    return eachCallback();
-                }, function () {
-                    return callback(null, activeCores);
-                });
-            },
-            function (active, callback) {
-                var modifedActiveCores = { '0': 0 };
-                async.forEachOf(active, function (inner, i, eachCallback) {
-                    if (i > 7) {
-                        modifedActiveCores['0'] = modifedActiveCores['0'] + active[i];
-                    } else {
-                        if (activeChartArrays.indexOf(i) < 0) activeChartArrays.push(i);
-                        modifedActiveCores[i] = active[i];
-                    }
-                    return eachCallback();
-                }, function () {
-                    return callback(null, modifedActiveCores);
-                });
-            },
-            function (modified, callback) {
-                async.forEachOf(activeChartArrays, function (inner, i, eachCallback) {
-                    if (typeof cpuGraphData[(i + 1)] === 'undefined') {
-                        cpuGraphData[(i + 1)] = [{
-                            'date': curDate,
-                            'cpu': ({{ $server->cpu }} > 0) ? parseFloat((((modified[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()) : modified[i] || null
-                        }];
-                    } else {
-                        if (typeof cpuGraphData[(i + 1)][20] !== 'undefined') cpuGraphData[(i + 1)].shift();
-                        cpuGraphData[(i + 1)].push({
-                            'date': curDate,
-                            'cpu': ({{ $server->cpu }} > 0) ? parseFloat((((modified[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()) : modified[i] || null
-                        });
-                    }
-                    return eachCallback();
-                }, function () {
-                    return callback();
-                });
-            },
-            function (callback) {
-                cpuGraphSettings.data = (showOnlyTotal === true) ? cpuGraphData[0] : cpuGraphData;
-                return callback();
-            },
-        ], function () {
-            MG.data_graphic(memoryGraphSettings);
-            MG.data_graphic(cpuGraphSettings);
-        });
     });
 
     // Socket Recieves New Query