--- a/src/css/LdtPlayer.css	Fri Dec 23 12:47:17 2011 +0100
+++ b/src/css/LdtPlayer.css	Fri Dec 23 15:44:16 2011 +0100
@@ -501,16 +501,12 @@
     /* sparkline widget */
     .Ldt-sparklineWidget {
       position: relative;
-      width: 640px;
-      height: 60px;
-      border: 1px solid pink;
     }
     
     .Ldt-sparkLinePositionMarker {
       position: absolute;
       top: 0px;
       width: 0px;
-      height: 60px;
       background-color: #333333;
       border-right: solid 1px pink;
       z-index: 3;

--- a/src/js/widgets/sparklineWidget.js	Fri Dec 23 12:47:17 2011 +0100
+++ b/src/js/widgets/sparklineWidget.js	Fri Dec 23 15:44:16 2011 +0100
@@ -13,23 +13,60 @@
 
 };
 
+/** draw the sparkline using jquery sparkline */
 IriSP.SparklineWidget.prototype.draw = function() {
-  var templ = Mustache.to_html(IriSP.SparklineWidget_template, {});
+  var templ = Mustache.to_html(IriSP.SparklineWidget_template, {width: this.width, height: this.height});
   /** this widget uses three divs -
     the first is the sparkline, which is generated by jquery sparkline,
     the second is an overlay div to display the progression in the video,
     and the third is a div to react to clicks
   */
+    
+  /* we suppose that a column is 5 pixels wide */
+  var num_columns = (this.selector.width()) / 10;
+  var duration = +this._serializer.currentMedia().meta["dc:duration"];
+  var time_step = duration / num_columns; /* the time interval between two columns */
+  var results = [];
+  var i = 0; /* the index in the loop */
+
+  /* this algorithm makes one assumption : that the array is sorted 
+     (it's done for us by the JSONSerializer). We go through the array 
+     and count how many comments fall within a peculiar time piece.
+     As i is preserved between each iteration, it's O(n).
+  */
+  for(var j = 0; j < num_columns; j++) {
+    var count = 0;
+    
+    var annotation_begin = +(this._serializer._data.annotations[i].begin);
+    
+    while(annotation_begin >= j * time_step && annotation_begin <= (j + 1) * time_step ) {
+      count++;
+      i++;
+      if (i >= this._serializer._data.annotations.length)
+        break;
+        
+      annotation_begin = +(this._serializer._data.annotations[i].begin);
+      
+    }
+    
+    results.push(count);
+  }
+  
   this.selector.append(templ);
-  this.selector.find(".Ldt-sparkLine").sparkline([1, 34, 56, 45, 34, 67, 78, 84], {width: "640px", height: "60px"});
+  this.selector.find(".Ldt-sparkLine").css("background", "#c7c8cc");
+  this.selector.find(".Ldt-sparkLine").sparkline(results, {lineColor: "#7492b4", fillColor: "#aeaeb8",
+                                                           spotColor: "#b70056",
+                                                           width: this.width, height: this.height});
   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler));
+  
+  this.spacer.css("height", "2px");
 };
 
 /** react to a timeupdate event */
 IriSP.SparklineWidget.prototype.timeUpdateHandler = function() {
   var currentTime = this._Popcorn.currentTime();  
   var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000;
-  var proportion = ((currentTime / duration) * 100).toFixed(3);
-
+  var proportion = ((currentTime / duration) * 100).toFixed(4);
+  
   IriSP.jQuery(".Ldt-sparkLinePositionMarker").css("width", proportion + "%");                                    
 }

--- a/src/templates/SparklineWidget.html	Fri Dec 23 12:47:17 2011 +0100
+++ b/src/templates/SparklineWidget.html	Fri Dec 23 15:44:16 2011 +0100
@@ -1,5 +1,5 @@
-<div class='Ldt-sparklineWidget'>
-    <div class='Ldt-sparkLinePositionMarker'></div>
-    <div class='Ldt-sparkLineClickOverlay'></div>
-    <div class='Ldt-sparkLine'>Loading</div>
+<div class='Ldt-sparklineWidget' style='width: {{width}}px; height: {{height}}px'>
+    <div class='Ldt-sparkLinePositionMarker' style='width: 0px; height: {{height}}px'></div>
+    <div class='Ldt-sparkLineClickOverlay' style='width: {{width}}px; height: {{height}}px'></div>
+    <div class='Ldt-sparkLine' style='width: {{width}}px; height: {{height}}px'>Loading</div>
 </div>

--- a/test/integration/polemic.htm	Fri Dec 23 12:47:17 2011 +0100
+++ b/test/integration/polemic.htm	Fri Dec 23 15:44:16 2011 +0100
@@ -49,6 +49,8 @@
              }],
             },
             {type: "SparklineWidget",
+             width: 640, /* required for this widget */
+             height: 50,
 						 metadata:{
 						  format:'cinelab',
 						  src:'polemic_fr.json',