legends for the pie charts

public/less/admin/general/dashboard.less

@@ -7,6 +7,17 @@
 		padding-right: 50px;
 		position: relative;
 
+
+		&.pie-chart {
+			padding-right: 0px;
+			padding-left: 50px;
+			
+			.graph-legend {
+				top: 0px;
+				left: 0px;
+			}
+		}
+
 		.graph-legend {
 			.box-header-font;
 			display: block;
@@ -34,6 +45,30 @@
 						border-color: rgba(151,187,205,1);
 						background-color: rgba(151,187,205,0.2);
 					}
+					&.anonymous {
+						border-color: #46BFBD;
+						background-color: #5AD3D1;
+					}
+					&.registered {
+						border-color: #F7464A;
+						background-color: #FF5A5E;
+					}
+					&.reading-posts {
+						border-color: #46BFBD;
+						background-color: #5AD3D1;
+					}
+					&.on-homepage {
+						border-color: #F7464A;
+						background-color: #FF5A5E;
+					}
+					&.browsing-topics {
+						border-color: #FDB45C;
+						background-color: #FFC870;
+					}
+					&.idle {
+						border-color: #949FB1;
+						background-color: #A8B3C5;
+					}
 				}
 			}
 		}

src/views/admin/general/dashboard.tpl

@@ -60,7 +60,11 @@
 		<div class="panel panel-default">
 			<div class="panel-heading">Anonymous vs Registered Users</div>
 			<div class="panel-body">
-				<div class="graph-container">
+				<div class="graph-container pie-chart">
+					<ul class="graph-legend">
+						<li><div class="anonymous"></div><span>Anonymous</span></li>
+						<li><div class="registered"></div><span>Registered</span></li>
+					</ul>
 					<canvas id="analytics-registered"></canvas>
 				</div>
 			</div>
@@ -69,7 +73,13 @@
 		<div class="panel panel-default">
 			<div class="panel-heading">User Presence</div>
 			<div class="panel-body">
-				<div class="graph-container">
+				<div class="graph-container pie-chart">
+					<ul class="graph-legend">
+						<li><div class="on-homepage"></div><span>On Homepage</span></li>
+						<li><div class="reading-posts"></div><span>Reading posts</span></li>
+						<li><div class="browsing-topics"></div><span>Browsing topics</span></li>
+						<li><div class="idle"></div><span>Idle</span></li>
+					</ul>
 					<canvas id="analytics-presence"></canvas>
 				</div>
 			</div>