View/Status/index.view

@@ -1,6 +1,7 @@
 @Init{
 	$this->RegisterJSFile("services/statusService.js");
 	$this->RegisterJSFile("controllers/status.js");
+	$this->RegisterJSFile("directives/googleChart.js");
 }@
 @Title{Server Status}@
 @CSS{
@@ -34,7 +35,7 @@
 			<tr><td>CPU Temp</td><td>{{cpuTemp| number: 0}}&deg;C<div class="percentageBar"><div style="width:{{(cpuTemp / 90) * 100}}%"></div></td></tr>
 			<tr><td>RAM</td><td>{{memory.free / 1024| number: 2}}MB free of {{memory.total / 1024| number: 2}}MB ({{memory.used| number: 0}}% used)<div class="percentageBar"><div style="width:{{memory.used}}%"></div></td></tr>
 		</table>
-		<div id="linechart"></div>
+		<google-chart data="chartData" curveType="function" legend-position="top"></google-chart>
 	</div>
 	<h3>Disc Space</h3>
 	<table class="alternatingRows">

scripts/controllers/status.js

@@ -1,48 +1,5 @@
 app.controller('status', function($scope, statusService, $interval) {
-	$.getScript("https://www.google.com/jsapi", function() {
-		//google.load('visualization', '1.1', {packages: ['line'], callback:function(){
-		google.load('visualization', '1', {packages: ['corechart'], callback: function() {
-				google.setOnLoadCallback(InitChart);
-			}});
-	});
-
-	var chart, chartData;
-
-	var chartOptions = {
-		chart: {
-			title: 'System Info History',
-		},
-		height: 400,
-		legend: {
-			position: 'top',
-			alignment: 'start'
-		},
-		backgroundColor: 'transparent'
-	};
-
-	var chartLoaded = false;
-	var currentId = 0;
-
-	function InitChart() {
-		chart = new google.visualization.LineChart(document.getElementById('linechart'));
-
-		chartData = new google.visualization.DataTable();
-		chartData.addColumn('number', 'id');
-		chartData.addColumn('number', 'CPU');
-		chartData.addColumn('number', 'MEM');
-		chartData.addColumn('number', 'TEMP');
-
-		chartLoaded = true;
-	}
-	function AddDataToChart(cpu, mem, temp) {
-		if (!chartLoaded)
-			return;
-		currentId++;
-		chartData.addRow([currentId, cpu, mem, temp]);
-		if (chartData.getNumberOfRows() > 50)
-			chartData.removeRow(0);
-		chart.draw(chartData, chartOptions);
-	}
+	$scope.chartData=[];
 
 	function reloadUptime() {
 		statusService.getUptime().then(function(data) {
@@ -57,8 +14,8 @@ app.controller('status', function($scope, statusService, $interval) {
 
 	function reloadSystemInfo() {
 		statusService.getSystemInfo().then(function(data) {
+			$scope.chartData=$scope.chartData.concat([{id: $scope.chartData.length, CPU: data.load[0]*100, Mem: data.memUsage, Temp: data.cpuTemp}]);
 			$scope.load = data.load;
-			AddDataToChart(data.load[0] * 100, data.memUsage, data.cpuTemp);
 			$scope.cpuTemp = data.cpuTemp;
 			$scope.memory = {
 				free: data.memFree,