From 1bc8fbed42a5ccc98100ba676a19a8dc8abb9197 Mon Sep 17 00:00:00 2001
From: Rsl1122 <djrapitops@hotmail.com>
Date: Mon, 26 Aug 2019 11:46:11 +0300
Subject: [PATCH] Added a try catch to the loading to inform user

---
 .../resources/assets/plan/web/network.html    | 306 ++++-----
 .../resources/assets/plan/web/player.html     | 126 ++--
 .../resources/assets/plan/web/players.html    |  38 +-
 .../resources/assets/plan/web/server.html     | 610 +++++++++---------
 4 files changed, 556 insertions(+), 524 deletions(-)

diff --git a/Plan/common/src/main/resources/assets/plan/web/network.html b/Plan/common/src/main/resources/assets/plan/web/network.html
index eccd77170..fbf9a6355 100644
--- a/Plan/common/src/main/resources/assets/plan/web/network.html
+++ b/Plan/common/src/main/resources/assets/plan/web/network.html
@@ -815,162 +815,170 @@
 <script src="js/network-values.js"></script>
 
 <script>
-    setLoadingText('Calculating values..');
-    jsonRequest("../v1/network/overview", loadNetworkOverviewValues);
-    jsonRequest("../v1/network/servers", loadServerBoxes);
-    jsonRequest("../v1/network/sessionsOverview", loadSessionValues);
-    jsonRequest("../v1/network/playerbaseOverview", loadPlayerbaseOverviewValues);
-    jsonRequest("../v1/sessions", loadSessionAccordion);
-    setLoadingText('Rendering graphs..');
+    try {
+        setLoadingText('Calculating values..');
+        jsonRequest("../v1/network/overview", loadNetworkOverviewValues);
+        jsonRequest("../v1/network/servers", loadServerBoxes);
+        jsonRequest("../v1/network/sessionsOverview", loadSessionValues);
+        jsonRequest("../v1/network/playerbaseOverview", loadPlayerbaseOverviewValues);
+        jsonRequest("../v1/sessions", loadSessionAccordion);
+        setLoadingText('Rendering graphs..');
 
-    var v = {
-        colors: {
-            playersOnline: '${playersGraphColor}',
-            newPlayers: '#8BC34A',
-            geolocationsLow: '${worldMapColLow}',
-            geolocationsHigh: '${worldMapColHigh}',
-            maxPing: '${maxPingColor}',
-            minPing: '${minPingColor}',
-            avgPing: '${avgPingColor}'
-        }
-    };
-
-    // HighCharts Series
-    var s = {
-        name: {
-            playersOnline: 'Players Online',
-            uniquePlayers: 'Unique Players',
-            newPlayers: 'New Players',
-            maxPing: 'Worst Ping',
-            minPing: 'Best Ping',
-            avgPing: 'Average Ping'
-        },
-        tooltip: {
-            twoDecimals: {
-                valueDecimals: 2
-            },
-            zeroDecimals: {
-                valueDecimals: 0
+        var v = {
+            colors: {
+                playersOnline: '${playersGraphColor}',
+                newPlayers: '#8BC34A',
+                geolocationsLow: '${worldMapColLow}',
+                geolocationsHigh: '${worldMapColHigh}',
+                maxPing: '${maxPingColor}',
+                minPing: '${minPingColor}',
+                avgPing: '${avgPingColor}'
             }
-        },
-        type: {
-            areaSpline: 'areaspline',
-            spline: 'spline'
-        }
-    };
+        };
 
-    jsonRequest("../v1/graph?type=playersOnline&server=${serverUUID}", function (data, error) {
-        if (data) {
-            var series = {
-                playersOnline: {
-                    name: s.name.playersOnline, type: s.type.areaSpline, tooltip: s.tooltip.zeroDecimals,
-                    data: data.playersOnline, color: v.colors.playersOnline, yAxis: 0
+        // HighCharts Series
+        var s = {
+            name: {
+                playersOnline: 'Players Online',
+                uniquePlayers: 'Unique Players',
+                newPlayers: 'New Players',
+                maxPing: 'Worst Ping',
+                minPing: 'Best Ping',
+                avgPing: 'Average Ping'
+            },
+            tooltip: {
+                twoDecimals: {
+                    valueDecimals: 2
+                },
+                zeroDecimals: {
+                    valueDecimals: 0
                 }
-            };
-            playersChart('playersOnlineChart', series.playersOnline, 2);
-        } else if (error) {
-            $('#playersOnlineChart').text("Failed to load graph data: " + error);
+            },
+            type: {
+                areaSpline: 'areaspline',
+                spline: 'spline'
+            }
+        };
+
+        jsonRequest("../v1/graph?type=playersOnline&server=${serverUUID}", function (data, error) {
+            if (data) {
+                var series = {
+                    playersOnline: {
+                        name: s.name.playersOnline, type: s.type.areaSpline, tooltip: s.tooltip.zeroDecimals,
+                        data: data.playersOnline, color: v.colors.playersOnline, yAxis: 0
+                    }
+                };
+                playersChart('playersOnlineChart', series.playersOnline, 2);
+            } else if (error) {
+                $('#playersOnlineChart').text("Failed to load graph data: " + error);
+            }
+        });
+
+        jsonRequest("../v1/graph?type=uniqueAndNew", function (data, error) {
+            if (data) {
+                var uniquePlayers = {
+                    name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
+                    data: data.uniquePlayers, color: v.colors.playersOnline
+                };
+                var newPlayers = {
+                    name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
+                    data: data.newPlayers, color: v.colors.newPlayers
+                };
+                lineChart('uniqueChart', [uniquePlayers, newPlayers]);
+            } else if (error) {
+                $('#uniqueChart').text("Failed to load graph data: " + error)
+            }
+        });
+
+        jsonRequest("../v1/graph?type=serverPie", function (json, error) {
+            if (data) {
+                serverPieSeries = {
+                    name: 'Server Playtime',
+                    colorByPoint: true,
+                    colors: json.server_pie_colors,
+                    data: json.server_pie_series_30d
+                };
+                serverPie('serverPie', serverPieSeries);
+            } else if (error) {
+                $('#serverPie').text("Failed to load graph data: " + error)
+            }
+        });
+
+        jsonRequest("../v1/graph?type=activity", function (json, error) {
+            if (json) {
+                activityPie('activityPie', {
+                    name: 'Players', colorByPoint: true, data: json.activity_pie_series
+                });
+                stackChart('activityStackGraph', json.activity_labels, json.activity_series, 'Players');
+            } else if (error) {
+                $('#activityPie').text("Failed to load graph data: " + error);
+                $('#activityStackGraph').text("Failed to load graph data: " + error);
+            }
+        });
+
+        jsonRequest("../v1/graph?type=geolocation", function (json, error) {
+            if (json) {
+                var geolocationSeries = {
+                    name: 'Players',
+                    type: 'map',
+                    mapData: Highcharts.maps['custom/world'],
+                    data: json.geolocation_series,
+                    joinBy: ['iso-a3', 'code']
+                };
+                var geolocationBarSeries = {
+                    color: '#4CAF50',
+                    name: 'Players',
+                    data: json.geolocation_bar_series.map(function (bar) {
+                        return bar.value
+                    })
+                };
+                var geolocationBarCategories = json.geolocation_bar_series.map(function (bar) {
+                    return bar.label
+                });
+                worldMap('worldMap', v.colors.geolocationsLow, v.colors.geolocationsHigh, geolocationSeries);
+                horizontalBarChart('countryBarChart', geolocationBarCategories, [geolocationBarSeries], 'Players');
+            } else if (error) {
+                $('#worldMap').text("Failed to load graph data: " + error);
+                $('#countryBarChart').text("Failed to load graph data: " + error);
+            }
+        });
+
+        setLoadingText('Sorting out plugin tables..');
+
+        jsonRequest("../v1/network/pingTable", loadPingTable);
+
+        $('.server-name').text('${networkDisplayName}');
+        $('.player-plugin-table').DataTable({
+            responsive: true
+        });
+
+        setLoadingText('Almost done..');
+        var navButtons = document.getElementsByClassName("nav-button");
+        var tabs = document.getElementsByClassName("tab");
+        var slideIndex = window.sessionStorage.getItem("network_slide_index");
+        if (slideIndex === null) {
+            slideIndex = 0;
         }
-    });
-
-    jsonRequest("../v1/graph?type=uniqueAndNew", function (data, error) {
-        if (data) {
-            var uniquePlayers = {
-                name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
-                data: data.uniquePlayers, color: v.colors.playersOnline
-            };
-            var newPlayers = {
-                name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
-                data: data.newPlayers, color: v.colors.newPlayers
-            };
-            lineChart('uniqueChart', [uniquePlayers, newPlayers]);
-        } else if (error) {
-            $('#uniqueChart').text("Failed to load graph data: " + error)
+        var x = document.getElementById("content");
+        x.style.transform = "translate3d(0px,0px,0)";
+        x.style.width = "" + navButtons.length * 100 + "%";
+        for (var i = 0; i < navButtons.length; i++) {
+            navButtons[i].onclick = openFunc(i);
+            tabs[i].style.width = "" + 100 / navButtons.length + "%";
         }
-    });
-
-    jsonRequest("../v1/graph?type=serverPie", function (json, error) {
-        if (data) {
-            serverPieSeries = {
-                name: 'Server Playtime',
-                colorByPoint: true,
-                colors: json.server_pie_colors,
-                data: json.server_pie_series_30d
-            };
-            serverPie('serverPie', serverPieSeries);
-        } else if (error) {
-            $('#serverPie').text("Failed to load graph data: " + error)
-        }
-    });
-
-    jsonRequest("../v1/graph?type=activity", function (json, error) {
-        if (json) {
-            activityPie('activityPie', {
-                name: 'Players', colorByPoint: true, data: json.activity_pie_series
-            });
-            stackChart('activityStackGraph', json.activity_labels, json.activity_series, 'Players');
-        } else if (error) {
-            $('#activityPie').text("Failed to load graph data: " + error);
-            $('#activityStackGraph').text("Failed to load graph data: " + error);
-        }
-    });
-
-    jsonRequest("../v1/graph?type=geolocation", function (json, error) {
-        if (json) {
-            var geolocationSeries = {
-                name: 'Players',
-                type: 'map',
-                mapData: Highcharts.maps['custom/world'],
-                data: json.geolocation_series,
-                joinBy: ['iso-a3', 'code']
-            };
-            var geolocationBarSeries = {
-                color: '#4CAF50',
-                name: 'Players',
-                data: json.geolocation_bar_series.map(function (bar) {
-                    return bar.value
-                })
-            };
-            var geolocationBarCategories = json.geolocation_bar_series.map(function (bar) {
-                return bar.label
-            });
-            worldMap('worldMap', v.colors.geolocationsLow, v.colors.geolocationsHigh, geolocationSeries);
-            horizontalBarChart('countryBarChart', geolocationBarCategories, [geolocationBarSeries], 'Players');
-        } else if (error) {
-            $('#worldMap').text("Failed to load graph data: " + error);
-            $('#countryBarChart').text("Failed to load graph data: " + error);
-        }
-    });
-
-    setLoadingText('Sorting out plugin tables..');
-
-    jsonRequest("../v1/network/pingTable", loadPingTable);
-
-    $('.server-name').text('${networkDisplayName}');
-    $('.player-plugin-table').DataTable({
-        responsive: true
-    });
-
-    setLoadingText('Almost done..');
-    var navButtons = document.getElementsByClassName("nav-button");
-    var tabs = document.getElementsByClassName("tab");
-    var slideIndex = window.sessionStorage.getItem("network_slide_index");
-    if (slideIndex === null) {
-        slideIndex = 0;
+        x.style.opacity = "1";
+        openFunc(slideIndex)();
+        setLoadingText('Done.');
+        setTimeout(function () {
+            $('.page-loader').fadeOut();
+        }, 50);
+    } catch (loadingError) {
+        setLoadingText("Error occurred, see Developer Console (Ctrl+Shift+I) - Please report this: " + loadingError);
+        setTimeout(function () {
+            $('.page-loader').fadeOut();
+        }, 10000);
+        throw loadingError;
     }
-    var x = document.getElementById("content");
-    x.style.transform = "translate3d(0px,0px,0)";
-    x.style.width = "" + navButtons.length * 100 + "%";
-    for (var i = 0; i < navButtons.length; i++) {
-        navButtons[i].onclick = openFunc(i);
-        tabs[i].style.width = "" + 100 / navButtons.length + "%";
-    }
-    x.style.opacity = "1";
-    openFunc(slideIndex)();
-    setLoadingText('Done.');
-    setTimeout(function () {
-        $('.page-loader').fadeOut();
-    }, 50);
 
     function openFunc(i) {
         return function () {
diff --git a/Plan/common/src/main/resources/assets/plan/web/player.html b/Plan/common/src/main/resources/assets/plan/web/player.html
index 22d7e8374..22c39421f 100644
--- a/Plan/common/src/main/resources/assets/plan/web/player.html
+++ b/Plan/common/src/main/resources/assets/plan/web/player.html
@@ -737,67 +737,75 @@
 <script src="js/player-values.js"></script>
 
 <script>
-    setLoadingText('Loading player values..');
-    jsonRequest("../v1/player?player=${playerName}", function (json, error) {
-        loadPlayerOverviewValues(json, error);
-        loadSessionAccordion(json, error);
-        loadServerAccordion(json, error);
-        loadPlayerKills(json, error);
-        loadPlayerDeaths(json, error);
-        loadPvPPvEValues(json, error);
-        if (json) {
-            var series = {
-                worldPie: {
-                    name: 'World Playtime',
-                    colorByPoint: true,
-                    data: json.world_pie_series
-                },
-                worldPieGMs: json.gm_series,
-                punchCard: {
-                    name: 'Relative Activity',
-                    color: '#222',
-                    data: json.punchcard_series
-                },
-                serverPie: {
-                    name: 'Server Playtime',
-                    colorByPoint: true,
-                    colors: json.server_pie_colors,
-                    data: json.server_pie_series
-                }
-            };
-            punchCard("punchCard", series.punchCard);
-            worldPie("worldPie", series.worldPie, series.worldPieGMs);
-            serverPie('serverPie', series.serverPie);
-            sessionCalendar("#sessionCalendar", json.calendar_series, json.first_day);
-        } else if (error) {
-            $('#punchCard').text("Failed to load graph data: " + error);
-            $('#worldPie').text("Failed to load graph data: " + error);
-            $('#serverPie').text("Failed to load graph data: " + error);
-            $('#sessionCalendar').text("Failed to load calendar data: " + error)
+    try {
+        setLoadingText('Loading player values..');
+        jsonRequest("../v1/player?player=${playerName}", function (json, error) {
+            loadPlayerOverviewValues(json, error);
+            loadSessionAccordion(json, error);
+            loadServerAccordion(json, error);
+            loadPlayerKills(json, error);
+            loadPlayerDeaths(json, error);
+            loadPvPPvEValues(json, error);
+            if (json) {
+                var series = {
+                    worldPie: {
+                        name: 'World Playtime',
+                        colorByPoint: true,
+                        data: json.world_pie_series
+                    },
+                    worldPieGMs: json.gm_series,
+                    punchCard: {
+                        name: 'Relative Activity',
+                        color: '#222',
+                        data: json.punchcard_series
+                    },
+                    serverPie: {
+                        name: 'Server Playtime',
+                        colorByPoint: true,
+                        colors: json.server_pie_colors,
+                        data: json.server_pie_series
+                    }
+                };
+                punchCard("punchCard", series.punchCard);
+                worldPie("worldPie", series.worldPie, series.worldPieGMs);
+                serverPie('serverPie', series.serverPie);
+                sessionCalendar("#sessionCalendar", json.calendar_series, json.first_day);
+            } else if (error) {
+                $('#punchCard').text("Failed to load graph data: " + error);
+                $('#worldPie').text("Failed to load graph data: " + error);
+                $('#serverPie').text("Failed to load graph data: " + error);
+                $('#sessionCalendar').text("Failed to load calendar data: " + error)
+            }
+        });
+        setLoadingText('Rendering graphs..');
+        setLoadingText('Sorting players table..');
+        setLoadingText('Almost done..');
+        var navButtons = document.getElementsByClassName("nav-button");
+        var tabs = document.getElementsByClassName("tab");
+        var slideIndex = window.sessionStorage.getItem("player_slide_index");
+        if (slideIndex === null) {
+            slideIndex = 0;
         }
-    });
-    setLoadingText('Rendering graphs..');
-    setLoadingText('Sorting players table..');
-    setLoadingText('Almost done..');
-    var navButtons = document.getElementsByClassName("nav-button");
-    var tabs = document.getElementsByClassName("tab");
-    var slideIndex = window.sessionStorage.getItem("player_slide_index");
-    if (slideIndex === null) {
-        slideIndex = 0;
+        var x = document.getElementById("content");
+        x.style.transform = "translate3d(0px,0px,0)";
+        x.style.width = "" + navButtons.length * 100 + "%";
+        for (var i = 0; i < navButtons.length; i++) {
+            navButtons[i].onclick = openFunc(i);
+            tabs[i].style.width = "" + 100 / navButtons.length + "%";
+        }
+        x.style.opacity = "1";
+        openFunc(slideIndex)();
+        setLoadingText('Done.');
+        setTimeout(function () {
+            $('.page-loader').fadeOut();
+        }, 50);
+    } catch (loadingError) {
+        setLoadingText("Error occurred, see Developer Console (Ctrl+Shift+I) - Please report this: " + loadingError);
+        setTimeout(function () {
+            $('.page-loader').fadeOut();
+        }, 10000);
+        throw loadingError;
     }
-    var x = document.getElementById("content");
-    x.style.transform = "translate3d(0px,0px,0)";
-    x.style.width = "" + navButtons.length * 100 + "%";
-    for (var i = 0; i < navButtons.length; i++) {
-        navButtons[i].onclick = openFunc(i);
-        tabs[i].style.width = "" + 100 / navButtons.length + "%";
-    }
-    x.style.opacity = "1";
-    openFunc(slideIndex)();
-    setLoadingText('Done.');
-    setTimeout(function () {
-        $('.page-loader').fadeOut();
-    }, 50);
 
     function openFunc(i) {
         return function () {
diff --git a/Plan/common/src/main/resources/assets/plan/web/players.html b/Plan/common/src/main/resources/assets/plan/web/players.html
index a236959fc..be3658955 100644
--- a/Plan/common/src/main/resources/assets/plan/web/players.html
+++ b/Plan/common/src/main/resources/assets/plan/web/players.html
@@ -271,21 +271,29 @@
 <script src="js/color-selector.js"></script>
 
 <script>
-    jsonRequest("../v1/players", function (playersTableJson, error) {
-        if (playersTableJson) {
-            $('.player-table').DataTable({
-                responsive: true,
-                columns: playersTableJson.columns,
-                data: playersTableJson.data,
-                order: [[5, "desc"]]
-            })
-        } else if (error) {
-            $('.player-table').DataTable({
-                columns: [{title: "Error"}],
-                data: [["Failed to load Players table data: " + error]]
-            })
-        }
-    });
+    try {
+        jsonRequest("../v1/players", function (playersTableJson, error) {
+            if (playersTableJson) {
+                $('.player-table').DataTable({
+                    responsive: true,
+                    columns: playersTableJson.columns,
+                    data: playersTableJson.data,
+                    order: [[5, "desc"]]
+                })
+            } else if (error) {
+                $('.player-table').DataTable({
+                    columns: [{title: "Error"}],
+                    data: [["Failed to load Players table data: " + error]]
+                })
+            }
+        });
+    } catch (loadingError) {
+        window.alert("Error occurred, see Developer Console (Ctrl+Shift+I) - Please report this: " + loadingError);
+        setTimeout(function () {
+            $('.page-loader').fadeOut();
+        }, 10000);
+        throw loadingError;
+    }
 </script>
 
 </body>
diff --git a/Plan/common/src/main/resources/assets/plan/web/server.html b/Plan/common/src/main/resources/assets/plan/web/server.html
index 8172751fe..e6978d05c 100644
--- a/Plan/common/src/main/resources/assets/plan/web/server.html
+++ b/Plan/common/src/main/resources/assets/plan/web/server.html
@@ -1290,323 +1290,331 @@
 <script src="js/server-values.js"></script>
 
 <script>
-    var x = document.getElementById("content");
+    try {
+        var x = document.getElementById("content");
 
-    setLoadingText('Calculating values..');
-    jsonRequest("../v1/serverOverview?server=${serverName}", loadServerOverviewValues);
-    jsonRequest("../v1/onlineOverview?server=${serverName}", loadOnlineActivityOverviewValues);
-    jsonRequest("../v1/sessionsOverview?server=${serverName}", loadSessionValues);
-    jsonRequest("../v1/playerVersus?server=${serverName}", loadPvPPvEValues);
-    jsonRequest("../v1/playerbaseOverview?server=${serverName}", loadPlayerbaseOverviewValues);
-    jsonRequest("../v1/performanceOverview?server=${serverName}", loadPerformanceValues);
-    setLoadingText('Rendering graphs..');
+        setLoadingText('Calculating values..');
+        jsonRequest("../v1/serverOverview?server=${serverName}", loadServerOverviewValues);
+        jsonRequest("../v1/onlineOverview?server=${serverName}", loadOnlineActivityOverviewValues);
+        jsonRequest("../v1/sessionsOverview?server=${serverName}", loadSessionValues);
+        jsonRequest("../v1/playerVersus?server=${serverName}", loadPvPPvEValues);
+        jsonRequest("../v1/playerbaseOverview?server=${serverName}", loadPlayerbaseOverviewValues);
+        jsonRequest("../v1/performanceOverview?server=${serverName}", loadPerformanceValues);
+        setLoadingText('Rendering graphs..');
 
-    // TODO remove
-    var v = {
-        colors: {
-            playersOnline: '${playersGraphColor}',
-            newPlayers: '#8BC34A',
-            tpsLow: '${tpsLowColor}',
-            tpsMed: '${tpsMediumColor}',
-            tpsHigh: '${tpsHighColor}',
-            cpu: '#e0d264',
-            ram: '#7dcc24',
-            entities: '#ac69ef',
-            chunks: '#b58310',
-            geolocationsLow: '${worldMapColLow}',
-            geolocationsHigh: '${worldMapColHigh}',
-            punchCard: '#222',
-            maxPing: '${maxPingColor}',
-            minPing: '${minPingColor}',
-            avgPing: '${avgPingColor}'
-        },
-        values: {
-            tpsMed: ${tpsMedium},
-            tpsHigh: ${tpsHigh},
-            diskMed: ${diskMedium},
-            diskHigh: ${diskHigh},
-            firstDay: ${firstDay},
-            timezoneOffset: ${timeZone}
-        }
-    };
-
-    Highcharts.setOptions({lang: {noData: "No Data to Display"}, time: {timezoneOffset: v.timezoneOffset * 60}});
-
-    // HighCharts Series
-    var s = {
-        name: {
-            playersOnline: 'Players Online',
-            uniquePlayers: 'Unique Players',
-            newPlayers: 'New Players',
-            tps: 'TPS',
-            cpu: 'CPU Usage (%)',
-            ram: 'RAM Usage (Mb)',
-            entities: 'Loaded Entities',
-            chunks: 'Loaded Chunks',
-            maxPing: 'Worst Ping',
-            minPing: 'Best Ping',
-            avgPing: 'Average Ping',
-            disk: 'Free Disk Space (Mb)'
-        },
-        tooltip: {
-            twoDecimals: {
-                valueDecimals: 2
+        // TODO remove
+        var v = {
+            colors: {
+                playersOnline: '${playersGraphColor}',
+                newPlayers: '#8BC34A',
+                tpsLow: '${tpsLowColor}',
+                tpsMed: '${tpsMediumColor}',
+                tpsHigh: '${tpsHighColor}',
+                cpu: '#e0d264',
+                ram: '#7dcc24',
+                entities: '#ac69ef',
+                chunks: '#b58310',
+                geolocationsLow: '${worldMapColLow}',
+                geolocationsHigh: '${worldMapColHigh}',
+                punchCard: '#222',
+                maxPing: '${maxPingColor}',
+                minPing: '${minPingColor}',
+                avgPing: '${avgPingColor}'
             },
-            zeroDecimals: {
-                valueDecimals: 0
+            values: {
+                tpsMed: ${tpsMedium},
+                tpsHigh: ${tpsHigh},
+                diskMed: ${diskMedium},
+                diskHigh: ${diskHigh},
+                firstDay: ${firstDay},
+                timezoneOffset: ${timeZone}
             }
-        },
-        type: {
-            areaSpline: 'areaspline',
-            spline: 'spline'
-        },
-        zones: {
-            tps: [{
-                value: v.values.tpsMed,
-                color: v.colors.tpsLow
-            }, {
-                value: v.values.tpsHigh,
-                color: v.colors.tpsMed
-            }, {
-                value: 30,
-                color: v.colors.tpsHigh
-            }],
-            disk: [{
-                value: v.values.diskMed,
-                color: v.colors.tpsLow
-            }, {
-                value: v.values.diskHigh,
-                color: v.colors.tpsMed
-            }, {
-                value: Number.MAX_VALUE,
-                color: v.colors.tpsHigh
-            }]
-        }
-    };
+        };
 
-    jsonRequest("../v1/graph?type=performance&server=${serverName}", function (data, error) {
-        if (data) {
-            var series = {
-                playersOnline: {
-                    name: s.name.playersOnline, type: s.type.areaSpline, tooltip: s.tooltip.zeroDecimals,
-                    data: data.playersOnline, color: v.colors.playersOnline, yAxis: 0
+        Highcharts.setOptions({lang: {noData: "No Data to Display"}, time: {timezoneOffset: v.timezoneOffset * 60}});
+
+        // HighCharts Series
+        var s = {
+            name: {
+                playersOnline: 'Players Online',
+                uniquePlayers: 'Unique Players',
+                newPlayers: 'New Players',
+                tps: 'TPS',
+                cpu: 'CPU Usage (%)',
+                ram: 'RAM Usage (Mb)',
+                entities: 'Loaded Entities',
+                chunks: 'Loaded Chunks',
+                maxPing: 'Worst Ping',
+                minPing: 'Best Ping',
+                avgPing: 'Average Ping',
+                disk: 'Free Disk Space (Mb)'
+            },
+            tooltip: {
+                twoDecimals: {
+                    valueDecimals: 2
                 },
-                tps: {
-                    name: s.name.tps, type: s.type.spline, color: v.colors.tpsHigh,
-                    zones: s.zones.tps, tooltip: s.tooltip.twoDecimals, data: data.tps,
-                    yAxis: 1
-                },
-                cpu: {
-                    name: s.name.cpu, type: s.type.spline, tooltip: s.tooltip.twoDecimals,
-                    data: data.cpu, color: v.colors.cpu, yAxis: 2
-                },
-                cpu_alt: {
-                    name: s.name.cpu, type: s.type.spline, tooltip: s.tooltip.twoDecimals,
-                    data: data.cpu, color: v.colors.cpu, yAxis: 1
-                },
-                ram: {
-                    name: s.name.ram, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
-                    data: data.ram, color: v.colors.ram, yAxis: 3
-                },
-                ram_alt: {
-                    name: s.name.ram, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
-                    data: data.ram, color: v.colors.ram, yAxis: 2
-                },
-                entities: {
-                    name: s.name.entities, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
-                    data: data.entities, color: v.colors.entities, yAxis: 4
-                },
-                entities_alt: {
-                    name: s.name.entities, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
-                    data: data.entities, color: v.colors.entities, yAxis: 1
-                },
-                chunks: {
-                    name: s.name.chunks, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
-                    data: data.chunks, color: v.colors.chunks, yAxis: 5
-                },
-                chunks_alt: {
-                    name: s.name.chunks, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
-                    data: data.chunks, color: v.colors.chunks, yAxis: 2
-                },
-                disk: {
-                    name: s.name.disk, type: s.type.spline, color: v.colors.tpsHigh,
-                    zones: s.zones.disk, tooltip: s.tooltip.zeroDecimals, data: data.disk
+                zeroDecimals: {
+                    valueDecimals: 0
                 }
-            };
-            playersChart('playersOnlineChart', series.playersOnline, 2);
-            performanceChart('performanceGraph', series.playersOnline, series.tps, series.cpu, series.ram, series.entities, series.chunks);
-            tpsChart('tpsGraph', series.tps, series.playersOnline);
-            resourceChart('resourceGraph', series.cpu_alt, series.ram_alt, series.playersOnline);
-            worldChart('worldGraph', series.entities_alt, series.chunks_alt, series.playersOnline);
-            diskChart('diskGraph', [series.disk]);
-        } else if (error) {
-            $('#playersOnlineChart').text("Failed to load graph data: " + error);
-            $('#performanceGraph').text("Failed to load graph data: " + error);
-            $('#tpsGraph').text("Failed to load graph data: " + error);
-            $('#resourceGraph').text("Failed to load graph data: " + error);
-            $('#worldGraph').text("Failed to load graph data: " + error);
-            $('#diskGraph').text("Failed to load graph data: " + error);
-        }
-    });
+            },
+            type: {
+                areaSpline: 'areaspline',
+                spline: 'spline'
+            },
+            zones: {
+                tps: [{
+                    value: v.values.tpsMed,
+                    color: v.colors.tpsLow
+                }, {
+                    value: v.values.tpsHigh,
+                    color: v.colors.tpsMed
+                }, {
+                    value: 30,
+                    color: v.colors.tpsHigh
+                }],
+                disk: [{
+                    value: v.values.diskMed,
+                    color: v.colors.tpsLow
+                }, {
+                    value: v.values.diskHigh,
+                    color: v.colors.tpsMed
+                }, {
+                    value: Number.MAX_VALUE,
+                    color: v.colors.tpsHigh
+                }]
+            }
+        };
 
-    jsonRequest("../v1/graph?type=aggregatedPing&server=${serverName}", function (json, error) {
-        if (json) {
-            var series = {
-                avgPing: {
-                    name: s.name.avgPing,
-                    type: s.type.spline,
-                    tooltip: s.tooltip.twoDecimals,
-                    data: json.avg_ping_series,
-                    color: v.colors.avgPing
-                },
-                maxPing: {
-                    name: s.name.maxPing,
-                    type: s.type.spline,
-                    tooltip: s.tooltip.zeroDecimals,
-                    data: json.max_ping_series,
-                    color: v.colors.maxPing
-                },
-                minPing: {
-                    name: s.name.minPing,
-                    type: s.type.spline,
-                    tooltip: s.tooltip.zeroDecimals,
-                    data: json.min_ping_series,
-                    color: v.colors.minPing
-                }
-            };
-            lineChart('pingGraph', [series.avgPing, series.maxPing, series.minPing]);
-        } else if (error) {
-            $('#pingGraph').text("Failed to load graph data: " + error);
-        }
-    });
+        jsonRequest("../v1/graph?type=performance&server=${serverName}", function (data, error) {
+            if (data) {
+                var series = {
+                    playersOnline: {
+                        name: s.name.playersOnline, type: s.type.areaSpline, tooltip: s.tooltip.zeroDecimals,
+                        data: data.playersOnline, color: v.colors.playersOnline, yAxis: 0
+                    },
+                    tps: {
+                        name: s.name.tps, type: s.type.spline, color: v.colors.tpsHigh,
+                        zones: s.zones.tps, tooltip: s.tooltip.twoDecimals, data: data.tps,
+                        yAxis: 1
+                    },
+                    cpu: {
+                        name: s.name.cpu, type: s.type.spline, tooltip: s.tooltip.twoDecimals,
+                        data: data.cpu, color: v.colors.cpu, yAxis: 2
+                    },
+                    cpu_alt: {
+                        name: s.name.cpu, type: s.type.spline, tooltip: s.tooltip.twoDecimals,
+                        data: data.cpu, color: v.colors.cpu, yAxis: 1
+                    },
+                    ram: {
+                        name: s.name.ram, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
+                        data: data.ram, color: v.colors.ram, yAxis: 3
+                    },
+                    ram_alt: {
+                        name: s.name.ram, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
+                        data: data.ram, color: v.colors.ram, yAxis: 2
+                    },
+                    entities: {
+                        name: s.name.entities, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
+                        data: data.entities, color: v.colors.entities, yAxis: 4
+                    },
+                    entities_alt: {
+                        name: s.name.entities, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
+                        data: data.entities, color: v.colors.entities, yAxis: 1
+                    },
+                    chunks: {
+                        name: s.name.chunks, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
+                        data: data.chunks, color: v.colors.chunks, yAxis: 5
+                    },
+                    chunks_alt: {
+                        name: s.name.chunks, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
+                        data: data.chunks, color: v.colors.chunks, yAxis: 2
+                    },
+                    disk: {
+                        name: s.name.disk, type: s.type.spline, color: v.colors.tpsHigh,
+                        zones: s.zones.disk, tooltip: s.tooltip.zeroDecimals, data: data.disk
+                    }
+                };
+                playersChart('playersOnlineChart', series.playersOnline, 2);
+                performanceChart('performanceGraph', series.playersOnline, series.tps, series.cpu, series.ram, series.entities, series.chunks);
+                tpsChart('tpsGraph', series.tps, series.playersOnline);
+                resourceChart('resourceGraph', series.cpu_alt, series.ram_alt, series.playersOnline);
+                worldChart('worldGraph', series.entities_alt, series.chunks_alt, series.playersOnline);
+                diskChart('diskGraph', [series.disk]);
+            } else if (error) {
+                $('#playersOnlineChart').text("Failed to load graph data: " + error);
+                $('#performanceGraph').text("Failed to load graph data: " + error);
+                $('#tpsGraph').text("Failed to load graph data: " + error);
+                $('#resourceGraph').text("Failed to load graph data: " + error);
+                $('#worldGraph').text("Failed to load graph data: " + error);
+                $('#diskGraph').text("Failed to load graph data: " + error);
+            }
+        });
 
-    jsonRequest("../v1/graph?type=worldPie&server=${serverName}", function (json, error) {
-        if (json) {
-            var worldSeries = {name: 'World Playtime', colorByPoint: true, data: json.world_series};
-            var gmSeries = json.gm_series;
-            worldPie("worldPie", worldSeries, gmSeries);
-        } else if (error) {
-            $('#worldPie').text("Failed to load graph data: " + error)
-        }
-    });
+        jsonRequest("../v1/graph?type=aggregatedPing&server=${serverName}", function (json, error) {
+            if (json) {
+                var series = {
+                    avgPing: {
+                        name: s.name.avgPing,
+                        type: s.type.spline,
+                        tooltip: s.tooltip.twoDecimals,
+                        data: json.avg_ping_series,
+                        color: v.colors.avgPing
+                    },
+                    maxPing: {
+                        name: s.name.maxPing,
+                        type: s.type.spline,
+                        tooltip: s.tooltip.zeroDecimals,
+                        data: json.max_ping_series,
+                        color: v.colors.maxPing
+                    },
+                    minPing: {
+                        name: s.name.minPing,
+                        type: s.type.spline,
+                        tooltip: s.tooltip.zeroDecimals,
+                        data: json.min_ping_series,
+                        color: v.colors.minPing
+                    }
+                };
+                lineChart('pingGraph', [series.avgPing, series.maxPing, series.minPing]);
+            } else if (error) {
+                $('#pingGraph').text("Failed to load graph data: " + error);
+            }
+        });
 
-    jsonRequest("../v1/graph?type=activity&server=${serverName}", function (json, error) {
-        if (json) {
-            activityPie('activityPie', {
-                name: 'Players', colorByPoint: true, data: json.activity_pie_series
-            });
-            stackChart('activityStackGraph', json.activity_labels, json.activity_series, 'Players');
-        } else if (error) {
-            $('#activityPie').text("Failed to load graph data: " + error);
-            $('#activityStackGraph').text("Failed to load graph data: " + error);
-        }
-    });
+        jsonRequest("../v1/graph?type=worldPie&server=${serverName}", function (json, error) {
+            if (json) {
+                var worldSeries = {name: 'World Playtime', colorByPoint: true, data: json.world_series};
+                var gmSeries = json.gm_series;
+                worldPie("worldPie", worldSeries, gmSeries);
+            } else if (error) {
+                $('#worldPie').text("Failed to load graph data: " + error)
+            }
+        });
 
-    jsonRequest("../v1/graph?type=geolocation&server=${serverName}", function (json, error) {
-        if (json) {
-            var geolocationSeries = {
-                name: 'Players',
-                type: 'map',
-                mapData: Highcharts.maps['custom/world'],
-                data: json.geolocation_series,
-                joinBy: ['iso-a3', 'code']
-            };
-            var geolocationBarSeries = {
-                color: '#4CAF50',
-                name: 'Players',
-                data: json.geolocation_bar_series.map(function (bar) {
-                    return bar.value
+        jsonRequest("../v1/graph?type=activity&server=${serverName}", function (json, error) {
+            if (json) {
+                activityPie('activityPie', {
+                    name: 'Players', colorByPoint: true, data: json.activity_pie_series
+                });
+                stackChart('activityStackGraph', json.activity_labels, json.activity_series, 'Players');
+            } else if (error) {
+                $('#activityPie').text("Failed to load graph data: " + error);
+                $('#activityStackGraph').text("Failed to load graph data: " + error);
+            }
+        });
+
+        jsonRequest("../v1/graph?type=geolocation&server=${serverName}", function (json, error) {
+            if (json) {
+                var geolocationSeries = {
+                    name: 'Players',
+                    type: 'map',
+                    mapData: Highcharts.maps['custom/world'],
+                    data: json.geolocation_series,
+                    joinBy: ['iso-a3', 'code']
+                };
+                var geolocationBarSeries = {
+                    color: '#4CAF50',
+                    name: 'Players',
+                    data: json.geolocation_bar_series.map(function (bar) {
+                        return bar.value
+                    })
+                };
+                var geolocationBarCategories = json.geolocation_bar_series.map(function (bar) {
+                    return bar.label
+                });
+                worldMap('worldMap', v.colors.geolocationsLow, v.colors.geolocationsHigh, geolocationSeries);
+                horizontalBarChart('countryBarChart', geolocationBarCategories, [geolocationBarSeries], 'Players');
+            } else if (error) {
+                $('#worldMap').text("Failed to load graph data: " + error);
+                $('#countryBarChart').text("Failed to load graph data: " + error);
+            }
+        });
+
+        jsonRequest("../v1/graph?type=uniqueAndNew&server=${serverName}", function (data, error) {
+            if (data) {
+                var uniquePlayers = {
+                    name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
+                    data: data.uniquePlayers, color: v.colors.playersOnline
+                };
+                var newPlayers = {
+                    name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
+                    data: data.newPlayers, color: v.colors.newPlayers
+                };
+                lineChart('uniqueChart', [uniquePlayers, newPlayers]);
+            } else if (error) {
+                $('#uniqueChart').text("Failed to load graph data: " + error)
+            }
+        });
+
+        jsonRequest("../v1/graph?type=serverCalendar&server=${serverName}", function (json, error) {
+            if (json) {
+                var clicked = false;
+                $('#online-calendar-tab').click(function () {
+                    if (!clicked) {
+                        onlineActivityCalendar('#calendar', json.data, json.firstDay);
+                        clicked = true;
+                    }
+                });
+                $('#calendar').text('');
+            } else if (error) {
+                $('#calendar').text("Failed to load calendar data: " + error)
+            }
+        });
+
+        jsonRequest("../v1/graph?type=punchCard&server=${serverName}", function (json, error) {
+            if (json) {
+                var punchCardSeries = {
+                    name: 'Relative Join Activity',
+                    color: v.colors.punchCard,
+                    data: json.punchCard
+                };
+                punchCard('punchCard', punchCardSeries);
+            } else if (error) {
+                $('#punchCard').text("Failed to load graph data: " + error)
+            }
+        });
+
+        setLoadingText('Sorting players table..');
+
+        jsonRequest("../v1/players?server=${serverName}", function (playersTableJson, error) {
+            if (playersTableJson) {
+                $('.player-table').DataTable({
+                    responsive: true,
+                    columns: playersTableJson.columns,
+                    data: playersTableJson.data,
+                    order: [[5, "desc"]]
                 })
-            };
-            var geolocationBarCategories = json.geolocation_bar_series.map(function (bar) {
-                return bar.label
-            });
-            worldMap('worldMap', v.colors.geolocationsLow, v.colors.geolocationsHigh, geolocationSeries);
-            horizontalBarChart('countryBarChart', geolocationBarCategories, [geolocationBarSeries], 'Players');
-        } else if (error) {
-            $('#worldMap').text("Failed to load graph data: " + error);
-            $('#countryBarChart').text("Failed to load graph data: " + error);
-        }
-    });
+            } else if (error) {
+                $('.player-table').DataTable({
+                    columns: [{title: "Error"}],
+                    data: [["Failed to load Players table data: " + error]]
+                })
+            }
+        });
+        jsonRequest("../v1/kills?server=${serverName}", loadPlayerKills);
+        jsonRequest("../v1/pingTable?server=${serverName}", loadPingTable);
 
-    jsonRequest("../v1/graph?type=uniqueAndNew&server=${serverName}", function (data, error) {
-        if (data) {
-            var uniquePlayers = {
-                name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
-                data: data.uniquePlayers, color: v.colors.playersOnline
-            };
-            var newPlayers = {
-                name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
-                data: data.newPlayers, color: v.colors.newPlayers
-            };
-            lineChart('uniqueChart', [uniquePlayers, newPlayers]);
-        } else if (error) {
-            $('#uniqueChart').text("Failed to load graph data: " + error)
-        }
-    });
+        $('.server-name').text('${serverName}');
+        $('.player-plugin-table').DataTable({
+            responsive: true
+        });
 
-    jsonRequest("../v1/graph?type=serverCalendar&server=${serverName}", function (json, error) {
-        if (json) {
-            var clicked = false;
-            $('#online-calendar-tab').click(function () {
-                if (!clicked) {
-                    onlineActivityCalendar('#calendar', json.data, json.firstDay);
-                    clicked = true;
-                }
-            });
-            $('#calendar').text('');
-        } else if (error) {
-            $('#calendar').text("Failed to load calendar data: " + error)
-        }
-    });
+        setLoadingText('Almost done..');
+        openPageFunc();
 
-    jsonRequest("../v1/graph?type=punchCard&server=${serverName}", function (json, error) {
-        if (json) {
-            var punchCardSeries = {
-                name: 'Relative Join Activity',
-                color: v.colors.punchCard,
-                data: json.punchCard
-            };
-            punchCard('punchCard', punchCardSeries);
-        } else if (error) {
-            $('#punchCard').text("Failed to load graph data: " + error)
-        }
-    });
+        jsonRequest("../v1/sessions?server=${serverName}", loadSessionAccordion);
 
-    setLoadingText('Sorting players table..');
-
-    jsonRequest("../v1/players?server=${serverName}", function (playersTableJson, error) {
-        if (playersTableJson) {
-            $('.player-table').DataTable({
-                responsive: true,
-                columns: playersTableJson.columns,
-                data: playersTableJson.data,
-                order: [[5, "desc"]]
-            })
-        } else if (error) {
-            $('.player-table').DataTable({
-                columns: [{title: "Error"}],
-                data: [["Failed to load Players table data: " + error]]
-            })
-        }
-    });
-    jsonRequest("../v1/kills?server=${serverName}", loadPlayerKills);
-    jsonRequest("../v1/pingTable?server=${serverName}", loadPingTable);
-
-    $('.server-name').text('${serverName}');
-    $('.player-plugin-table').DataTable({
-        responsive: true
-    });
-
-    setLoadingText('Almost done..');
-    openPageFunc();
-
-    jsonRequest("../v1/sessions?server=${serverName}", loadSessionAccordion);
-
-    setLoadingText('Done.');
-    setTimeout(function () {
-        $('.page-loader').fadeOut();
-    }, 50);
+        setLoadingText('Done.');
+        setTimeout(function () {
+            $('.page-loader').fadeOut();
+        }, 50);
+    } catch (loadingError) {
+        setLoadingText("Error occurred, see Developer Console (Ctrl+Shift+I) - Please report this: " + loadingError);
+        setTimeout(function () {
+            $('.page-loader').fadeOut();
+        }, 10000);
+        throw loadingError;
+    }
 
     function openPageFunc() {
         var navButtons = document.getElementsByClassName("nav-button");