Got some stats displaying

assets/css/statbot.css

@@ -186,6 +186,31 @@ ul.menu-list-dropped {
   width: 150px;
 }
 
+aside {
+  padding: 0.3em 1em;
+  border-radius: 3px;
+  color: #fff;
+}
+
+/* Other Styles :D */
+.success {
+  background: rgb(28, 184, 65); /* this is a green */
+}
+
+.error {
+  background: rgb(202, 60, 60); /* this is a maroon */
+}
+
+.warning {
+  background: rgb(223, 117, 20); /* this is an orange */
+}
+.secondary {
+  background: rgb(66, 184, 221); /* this is a light blue*/
+}
+.primary {
+  background: #1f8dd6;
+}
+
 /* -- Responsive Styles (Media Queries) ------------------------------------- */
 
 /*

assets/js/main_stats.js

@@ -0,0 +1,113 @@
+document.addEventListener("DOMContentLoaded", function(event) {
+  var main_channel_names = ['general','random'],
+      main_member_numbers = [],
+      main_message_numbers = [],
+      other_channel_names = [],
+      other_member_numbers = [],
+      other_message_numbers = [];
+  for(var i = 0; i < stats.channels.length; i++){
+    if(stats.channels[i].name == "general") {
+      main_member_numbers[0] = stats.channels[i].member_count;
+      main_message_numbers[0] = stats.channels[i].message_count;
+    } else if(stats.channels[i].name == "random") {
+      main_member_numbers[1] = stats.channels[i].member_count;
+      main_message_numbers[1] = stats.channels[i].message_count;
+    } else {
+      other_channel_names.push(stats.channels[i].name);
+      other_member_numbers.push(stats.channels[i].member_count);
+      other_message_numbers.push(stats.channels[i].message_count);
+    }
+  }
+  
+  var mainChart = new Highcharts.Chart({
+    chart: {
+      renderTo: 'mainStatsBarChart',
+      type: 'column'
+    },
+
+    title: {
+      text: 'Main Channels'
+    },
+
+    yAxis: [{
+      min: 0,
+      title: { text: 'Messages' }
+    },{
+      min: 0,
+      title: { text: 'Members' },
+      opposite: true
+    }],
+
+    plotOptions: {
+      column: {
+        grouping: false,
+        shadow: false,
+        borderWidth: 0
+      }
+    },
+
+    xAxis: {
+      categories: main_channel_names
+    },
+
+    series: [{
+      name: 'Messages',
+      color: 'rgba(126,86,134,0.9)',
+      data: main_message_numbers,
+      pointPadding: 0.3
+    },{
+      name: 'Members',
+      color: 'rgba(165,170,217,1)',
+      data: main_member_numbers,
+      pointPadding: 0.4,
+      yAxis: 1
+    }]
+  });
+
+  var otherChart = new Highcharts.Chart({
+    chart: {
+      renderTo: 'statsBarChart',
+      type: 'column'
+    },
+
+    title: {
+      text: 'Other Channels'
+    },
+
+    yAxis: [{
+      min: 0,
+      title: { text: 'Members' }
+    },{
+      min: 0,
+      title: { text: 'Messages' },
+      opposite: true
+    }],
+
+    tooltip: { shared: true },
+
+    plotOptions: {
+      column: {
+        grouping: false,
+        shadow: false,
+        borderWidth: 0
+      }
+    },
+
+    xAxis: {
+      categories: other_channel_names
+    },
+
+    series: [{
+      name: 'Messages',
+      color: 'rgba(126,86,134,0.9)',
+      data: other_message_numbers,
+      pointPadding: 0.3
+    },{
+      name: 'Members',
+      color: 'rgba(165,170,217,1)',
+      data: other_member_numbers,
+      pointPadding: 0.4,
+      yAxis: 1
+    }]
+  });
+});