@@ -137,13 +121,171 @@
$(window).load(function () {
$('[data-toggle="tooltip"]').tooltip();
+ // -----------------+
+ // Charting Methods |
+ // -----------------+
+ $('#chart_memory').highcharts({
+ chart: {
+ type: 'area',
+ animation: Highcharts.svg,
+ marginRight: 10,
+ },
+ colors: [
+ '#113F8C',
+ '#00A1CB',
+ '#01A4A4',
+ '#61AE24',
+ '#D0D102',
+ '#D70060',
+ '#E54028',
+ '#F18D05',
+ '#616161',
+ '#32742C',
+ ],
+ credits: {
+ enabled: false,
+ },
+ title: {
+ text: 'Live Memory Usage',
+ },
+ tooltip: {
+ shared: true,
+ crosshairs: true,
+ formatter: function () {
+ var s = 'Memory Usage';
+
+ $.each(this.points, function () {
+ s += '
' + this.series.name + ': ' +
+ this.y + 'MB';
+ });
+
+ return s;
+ },
+ },
+ xAxis: {
+ visible: false,
+ },
+ yAxis: {
+ title: {
+ text: 'Memory Usage (MB)',
+ },
+ plotLines: [{
+ value: 0,
+ width: 1,
+ }],
+ },
+ plotOptions: {
+ area: {
+ fillOpacity: 0.10,
+ marker: {
+ enabled: false,
+ },
+ },
+ },
+ legend: {
+ enabled: false
+ },
+ series: [{
+ name: 'Total Memory',
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+ }]
+ });
+
+ $('#chart_cpu').highcharts({
+ chart: {
+ type: 'area',
+ animation: Highcharts.svg,
+ marginRight: 10,
+ },
+ colors: [
+ '#113F8C',
+ '#00A1CB',
+ '#01A4A4',
+ '#61AE24',
+ '#D0D102',
+ '#D70060',
+ '#E54028',
+ '#F18D05',
+ '#616161',
+ '#32742C',
+ ],
+ credits: {
+ enabled: false,
+ },
+ title: {
+ text: 'Live CPU Usage',
+ },
+ tooltip: {
+ shared: true,
+ crosshairs: true,
+ formatter: function () {
+ var s = 'CPU Usage';
+
+ $.each(this.points, function () {
+ s += '
' + this.series.name + ': ' +
+ this.y + '%';
+ });
+
+ return s;
+ },
+ },
+ xAxis: {
+ visible: false,
+ },
+ yAxis: {
+ title: {
+ text: 'CPU Usage (%)',
+ },
+ plotLines: [{
+ value: 0,
+ width: 1,
+ }],
+ },
+ plotOptions: {
+ area: {
+ fillOpacity: 0.10,
+ stacking: 'normal',
+ lineWidth: 1,
+ marker: {
+ enabled: false,
+ },
+ },
+ },
+ legend: {
+ enabled: true
+ },
+ series: [{
+ name: 'Total CPU',
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+ }]
+ });
+
// Socket Recieves New Server Stats
- socket.on('stats', function (data) {
- var currentTime = new Date();
- memoryChart.addData([parseInt(data.data.memory / (1024 * 1024))], '');
- memoryChart.removeData();
- if({{ $server->cpu }} > 0) { cpuChart.addData([(data.data.cpu / {{ $server->cpu }}) * 100], ''); }else{ cpuChart.addData([data.data.cpu], ''); }
- cpuChart.removeData();
+ socket.on('proc', function (proc) {
+ var MemoryChart = $('#chart_memory').highcharts();
+ MemoryChart.series[0].addPoint(parseInt(proc.data.memory.total / (1024 * 1024)), true, true);
+
+ var CPUChart = $('#chart_cpu').highcharts();
+
+ if({{ $server->cpu }} > 0) {
+ CPUChart.series[0].addPoint(parseFloat(((proc.data.cpu.total / {{ $server->cpu }}) * 100).toFixed(3).toString()), true, true);
+ } else {
+ CPUChart.series[0].addPoint(proc.data.cpu.total, true, true);
+ }
+ for (i = 0, length = proc.data.cpu.cores.length; i < length; i++) {
+ if (typeof CPUChart.series[ i + 1 ] === 'undefined') {
+ CPUChart.addSeries({
+ name: 'Core ' + i,
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+ });
+ }
+ if({{ $server->cpu }} > 0) {
+ CPUChart.series[ i + 1 ].addPoint(parseFloat(((proc.data.cpu.cores[i] / {{ $server->cpu }}) * 100).toFixed(3).toString())
+, true, true);
+ } else {
+ CPUChart.series[ i + 1 ].addPoint(proc.data.cpu.cores[i], true, true);
+ }
+ }
});
// Socket Recieves New Query
@@ -215,15 +357,6 @@ $(window).load(function () {
$('#paused_console').val($('#live_console').val());
});
- // -----------------+
- // Charting Methods |
- // -----------------+
- var ctx = $('#memoryChart').get(0).getContext('2d');
- var cty = $('#cpuChart').get(0).getContext('2d');
- var memoryChartData = {labels:["","","","","","","","","","","","","","","","","","","",""],datasets:[{fillColor:"#ccc",strokeColor:"rgba(0,0,0,0)",highlightFill:"#666",data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}]};
- var cpuChartData = {labels:["","","","","","","","","","","","","","","","","","","",""],datasets:[{fillColor:"#ccc",strokeColor:"rgba(0,0,0,0)",highlightFill:"#666",data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}]};
- var memoryChart= new Chart(ctx).Bar(memoryChartData,{animation:!1,showScale:!0,barShowStroke:!1,scaleOverride:!1,tooltipTemplate:"<%= value %> Mb",barValueSpacing:1,barStrokeWidth:1,scaleShowGridLines:!1});
- var cpuChart = new Chart(cty).Bar(cpuChartData,{animation:!1,showScale:!0,barShowStroke:!1,scaleOverride:!1,tooltipTemplate:"<%= value %> %",barValueSpacing:1,barStrokeWidth:1,scaleShowGridLines:!1});
function updatePlayerListVisibility(data) {
// Server is On or Starting
if(data !== 0) {