Use google charts

app/views/emarketing/content.html.erb

@@ -1,15 +1,35 @@
 <br/>
 <br/>
 
-<table>
-<tr><th>Content</th><th>Stats</th></tr>
-<% @traffic.domain_log_stats.each do |stat| -%>
-  <tr>
-    <td><%= stat.target.title %></td>
-    <td>
-      <div style="width:<%= (stat.hits.to_f / @max_hits.to_f) * 300 %>px; height:6px; background-color:red;"></div>
-      <div style="width:<%= (stat.visits.to_f / @max_hits.to_f) * 300 %>px; height:6px; background-color:green;"></div>
-    </td>
-  </tr>
-<% end -%>
-</table>
+<script type="text/javascript">
+google.load("visualization", "1", {packages:["corechart"]});
+google.setOnLoadCallback(drawChart);
+function drawChart() {
+  var width = 1000;
+  var height = <%= @traffic.domain_log_stats.size * 60 %>;
+  var data = new google.visualization.DataTable();
+  data.addColumn('string', 'Content');
+  data.addColumn('number', 'Visitors');
+  data.addColumn('number', 'Hits');
+  data.addRows(<%= @traffic.domain_log_stats.size %>);
+  <% @traffic.domain_log_stats.each_with_index do |stat,idx| -%>
+    data.setCell(<%= idx %>, 0, '<%= jh stat.target.title %>', '<%= jh stat.target.title %>', {url: '<%= url_for stat.target.admin_url %>'});
+    data.setValue(<%= idx %>, 1, <%= stat.visits %>);
+    data.setValue(<%= idx %>, 2, <%= stat.hits %>);
+  <% end -%>
+
+  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
+  chart.draw(data, {width: width, height: height, title: 'Content',
+                    hAxis: {minValue: 0, maxValue: <%= @max_hits %>}
+                   });
+
+  google.visualization.events.addListener(chart, 'select', function(event) {
+    var row = chart.getSelection()[0].row;
+    var url = data.getProperty(row, 0, 'url');
+    document.location = url;
+  });
+}
+
+</script>
+
+<div id="chart_div"></div>

public/javascripts/emarketing.js

@@ -148,8 +148,8 @@ RealTimeStatsViewer = {
 
     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Time');
-    data.addColumn('number', 'Uniques');
-    data.addColumn('number', 'Page Views');
+    data.addColumn('number', 'Visitors');
+    data.addColumn('number', 'Hits');
     data.addRows(RealTimeStatsViewer.chart.intervals);
     for( var i=0; i<RealTimeStatsViewer.chart.intervals; i++ ) {
         data.setValue(i, 0, RealTimeStatsViewer.chart.labels[i]);
@@ -161,7 +161,7 @@ RealTimeStatsViewer = {
                       height: height,
                       title: RealTimeStatsViewer.chart.from + ' - ' + RealTimeStatsViewer.chart.to,
                       legend: 'right',
-                      vAxis: {title: 'Uniques / Page Views', minValue: 0, maxValue: maxValue},
+                      vAxis: {title: 'Visitors / Hits', minValue: 0, maxValue: maxValue},
                       hAxis: {title: 'Every ' + RealTimeStatsViewer.chart.range + ' minutes'}
                      });
   },