Added google charts

app/views/layouts/application.html.erb

@@ -15,7 +15,7 @@
   <div>
   <%= yield %>
   </div>
-
+  <br/>
   <div class="tweeter-feed">
     <a class="twitter-timeline" href="https://twitter.com/git_lab" data-widget-id="293671753740324864">Tweets by @git_lab</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

app/views/status/index.html.erb

+  <% idx = 0 %>
   <% @stats.keys.each do |key| %>
-  <% label = "success" %>
-  <% label_text = "OK" %>
-  <% label = "warning" if @stats[key].last['state'] != 0 %>
-  <% label_text = "NOT OK" if @stats[key].last['state'] != 0 %>
-  <h3><%= @stats[key].last['value'] %></h3>
-  <h5><span class="label label-<%= label %>"><%= label_text %></span> <%= key %></h5>
+  <% idx += 1 %>
+  <div class="row">
+    <div class="col-sm-3">
+      <% label = "success" %>
+      <% label_text = "OK" %>
+      <% label = "warning" if @stats[key].last['state'] != 0 %>
+      <% label_text = "NOT OK" if @stats[key].last['state'] != 0 %>
+      <h3><%= @stats[key].last['value'] %></h3>
+      <h5><span class="label label-<%= label %>"><%= label_text %></span> <%= key %></h5>
+    </div>
+    <div class="col-sm-4">
+      <div id="chart_<%= idx %>"></div>
+    </div>
+  </div>
   <% end %>
-  <br/>
+
+  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+  <script type="text/javascript">
+    google.load('visualization', '1', {packages: ['corechart', 'line', 'timeline']});
+    google.setOnLoadCallback(drawCharts);
+
+    function drawCharts() {
+    <% idx = 0 %>
+    <% @stats.keys.each do |key| %>
+      <% idx += 1 %>
+      var data = new google.visualization.DataTable();
+      data.addColumn('datetime', 'X');
+      data.addColumn('number', '');
+
+      data.addRows([
+        <% @stats[key].each do |stat| %>
+        <% value = stat['value'] %>
+        <% value = '0' if !stat['value'] %>
+        <% time = Time.at(stat['time']) %>
+        [new Date(<%= time.year %>,<%= time.month %>,<%= time.day %>,<%= time.hour %>,<%= time.min %>),<%= value.gsub('ms', '').gsub('s', '') %>],
+        <% end %>
+      ]);
+
+      var options = {
+        backgroundColor: '#fff',
+        legend: {
+          position: 'none'
+        },
+        colors: ['#777'],
+        timeline: {
+          groupByRowLabel: true
+        }
+      };
+
+      var chart = new google.visualization.LineChart(document.getElementById("chart_<%= idx %>"));
+      chart.draw(data, options);
+      <% end %>
+    }
+  </script>