--- a/ckanext/ga_report/templates/ga_report/site/index.html
+++ b/ckanext/ga_report/templates/ga_report/site/index.html
@@ -8,14 +8,12 @@
   <py:def function="page_title">Site usage</py:def>
 
   <py:def function="optional_head">
+    <link rel="stylesheet" type="text/css" href="/scripts/vendor/rickshaw.min.css"/>
+    <link rel="stylesheet" type="text/css" href="/css/ga_report.css"/>
     <script type="text/javascript" src="/scripts/vendor/jquery.sparkline.modified.js"></script>
-    <style type="text/css">
-      .table-condensed td.sparkline-cell {
-        padding: 1px 0 0 0;
-        width: 108px;
-        text-align: center;
-      }
-    </style>
+    <script type="text/javascript" src="/scripts/vendor/d3.v2.js"></script>
+    <script type="text/javascript" src="/scripts/vendor/d3.layout.min.js"></script>
+    <script type="text/javascript" src="/scripts/vendor/rickshaw.min.js"></script>
   </py:def>
 
   <py:match path="primarysidebar">
@@ -96,16 +94,20 @@
                </table>
         </div>
          <div class="tab-pane" id="browsers_versions">
+             ${rickshaw_graph(c.browser_versions_graph,'browser-versions')}
              <p>Note: Where a browser has a large number of versions, these have been grouped together.</p>
              ${stat_table(c.browser_versions)}
          </div>
          <div class="tab-pane" id="browsers_names">
+             ${rickshaw_graph(c.browsers_graph,'browsers')}
              ${stat_table(c.browsers)}
          </div>
          <div class="tab-pane" id="os">
+             ${rickshaw_graph(c.os_graph,'os')}
              ${stat_table(c.os)}
          </div>
          <div class="tab-pane" id="os_versions">
+             ${rickshaw_graph(c.os_versions_graph,'os_versions')}
              ${stat_table(c.os_versions)}
          </div>
         <div class="tab-pane" id="social_referrals_totals">
@@ -113,23 +115,20 @@
             ${social_table(c.social_referrer_totals)}
         </div>
         <div class="tab-pane" id="social_networks">
+             ${rickshaw_graph(c.social_networks_graph, 'social_networks')}
             <p>Percentage of visits that were referred from these social networks</p>
-
              ${stat_table(c.social_networks, 'Visits')}
         </div>
         <div class="tab-pane" id="languages">
+             ${rickshaw_graph(c.languages_graph,'languages')}
              ${stat_table(c.languages)}
         </div>
         <div class="tab-pane" id="country">
+             ${rickshaw_graph(c.country_graph,'country')}
              ${stat_table(c.country)}
         </div>
-
-
        </div>
      </div>
-
-
-
   </div>
 
 
@@ -150,7 +149,7 @@
             fillColor: 'B7E66B'
           };
           $('.sparkline').sparkline('html',sparkOptions);
-      });
+      });  
     </script>
   </py:def>