--- a/kallithea/controllers/changeset.py	Fri Jul 18 18:45:54 2014 +0200
+++ b/kallithea/controllers/changeset.py	Tue Dec 10 19:30:37 2013 +0100
@@ -39,6 +39,7 @@
 from kallithea.lib.vcs.exceptions import RepositoryError, \
     ChangesetDoesNotExistError
 
+from kallithea.lib.compat import json
 import kallithea.lib.helpers as h
 from kallithea.lib.auth import LoginRequired, HasRepoPermissionAnyDecorator,\
     NotAnonymous
@@ -55,6 +56,7 @@
 from kallithea.lib.exceptions import StatusChangeOnClosedPullRequestError
 from kallithea.lib.vcs.backends.base import EmptyChangeset
 from kallithea.lib.utils2 import safe_unicode, safe_str
+from kallithea.lib.graphmod import graph_data
 
 log = logging.getLogger(__name__)
 
@@ -313,6 +315,8 @@
                 return render('changeset/changeset.html')
             else:
                 c.cs_ranges_org = None
+                revs = [ctx.revision for ctx in reversed(c.cs_ranges)]
+                c.jsdata = json.dumps(graph_data(c.db_repo_scm_instance, revs))
                 return render('changeset/changeset_range.html')
 
     @LoginRequired()

--- a/kallithea/controllers/pullrequests.py	Fri Jul 18 18:45:54 2014 +0200
+++ b/kallithea/controllers/pullrequests.py	Tue Dec 10 19:30:37 2013 +0100
@@ -60,6 +60,7 @@
 from kallithea.controllers.changeset import anchor_url, _ignorews_url,\
     _context_url, get_line_ctx, get_ignore_ws
 from kallithea.controllers.compare import CompareController
+from kallithea.lib.graphmod import graph_data
 
 log = logging.getLogger(__name__)
 
@@ -200,6 +201,8 @@
         org_scm_instance = c.org_repo.scm_instance # property with expensive cache invalidation check!!!
         c.cs_ranges = [org_scm_instance.get_changeset(x) for x in pull_request.revisions]
         c.cs_ranges_org = None # not stored and not important and moving target - could be calculated ...
+        revs = [ctx.revision for ctx in reversed(c.cs_ranges)]
+        c.jsdata = json.dumps(graph_data(org_scm_instance, revs))
 
         c.statuses = c.org_repo.statuses([x.raw_id for x in c.cs_ranges])
 

--- a/kallithea/templates/compare/compare_cs.html	Fri Jul 18 18:45:54 2014 +0200
+++ b/kallithea/templates/compare/compare_cs.html	Tue Dec 10 19:30:37 2013 +0100
@@ -10,9 +10,15 @@
     </div>
     %endif
 
+    <div id="graph_nodes">
+        <canvas id="graph_canvas"></canvas>
+    </div>
+
+    <div id="graph_content_pr" style="margin-left: 100px;">
+
     <table class="compare_view_commits noborder">
-    %for cs in reversed(c.cs_ranges):
-        <tr id="row-${cs.raw_id}">
+    %for cnt, cs in enumerate(c.cs_ranges):
+        <tr id="chg_${cnt+1}">
         <td style="width:50px">
           %if cs.raw_id in c.statuses:
             <div title="${_('Changeset status: %s') % c.statuses[cs.raw_id][1]}" class="changeset-status-ico">
@@ -36,6 +42,9 @@
         </tr>
     %endfor
     </table>
+
+    </div>
+
     %if c.as_form:
       <div style="font-size:1.1em;font-weight: bold;clear:both;padding-top:10px">
       ## links should perhaps use ('rev', c.org_rev) instead ...
@@ -70,13 +79,29 @@
   %endif
 </div>
 
-<script>
-$('.expand_commit').on('click',function(e){
-    var cid = $(this).attr('commit_id');
-    $('#C-'+cid).toggleClass('expanded');
-});
-$('.gravatar').on('click',function(e){
-    var cid = $(this).attr('commit_id');
-    $('#row-'+cid).toggleClass('hl', !$('#row-'+cid).hasClass('hl'));
-});
-</script>
+%if not c.as_form:
+<script type="text/javascript" src="${h.url('/js/graph.js')}"></script>
+%endif
+
+<script type="text/javascript">
+
+    $(document).ready(function(){
+%if not c.as_form:
+        var jsdata = ${c.jsdata|n};
+        var r = new BranchRenderer('graph_canvas', 'graph_content_pr');
+        r.render(jsdata,100);
+%endif
+
+        $('.expand_commit').click(function(e){
+            var cid = $(this).attr('commit_id');
+            $('#C-'+cid).toggleClass('expanded');
+            r.render(jsdata,100);
+        });
+
+        $('.gravatar').click(function(e){
+            var cid = $(this).attr('commit_id');
+            $('#row-'+cid).toggleClass('hl', !$('#row-'+cid).hasClass('hl'));
+        });
+    });
+
+</script>
\ No newline at end of file