diff -r 94073a2af6e1 -r 94f586daa623 integration/js/streamgraph.js
--- a/integration/js/streamgraph.js	Tue Jan 22 14:43:22 2013 +0100
+++ b/integration/js/streamgraph.js	Wed Jan 23 18:21:30 2013 +0100
@@ -1,17 +1,19 @@
-function Streamgraph($selector) {
+function Streamgraph($selector, data) {
     
     /* Constants */
    
     var VMARGIN = 3,
         YEARSHEIGHT = 20,
-        STARTTIME = new Date(2007,6,1),
+        STARTTIME = new Date(2007,5,1),
         ENDTIME = new Date(),
+        DATASTART = new Date(data.from_date),
+        DATAEND = new Date(data.to_date),
         CURVE = .25,
         DATEPADDING = 10,
         COLORS = [ "#943a23", "#fbee97", "#cfbb95", "#da9761", "#ba5036" ],
-        SELECTEDCOLOR = "#c51810"; 
+        SELECTEDCOLOR = "#007dad"; 
     
-    /* Generating random data */
+    /* Generating random data
     
     var data = [],
         clustercount = 12,
@@ -33,7 +35,7 @@
     
     var width = $selector.width(),
         height = $selector.height(),
-        transp = _.zip.apply( _, data ),
+        transp = _.zip.apply( _, _(data.clusters).pluck("volumes") ),
         cumulative = _(transp).map(function(column) {
             var total = 0;
             return _(column).map(function(point) {
@@ -45,22 +47,27 @@
         })
         maxcol = _(sums).max(),
         streamheight = height - YEARSHEIGHT,
+        streamwidth = width * (DATAEND - DATASTART) / (ENDTIME - STARTTIME),
         yscale = (streamheight - 2 * VMARGIN) / maxcol,
         centery = streamheight / 2,
-        xscale = width / (transp.length - 1),
+        xscale = streamwidth / (transp.length - 1),
         txscale = width / (ENDTIME - STARTTIME),
-        coords = _(data).map(function(line, lineindex) {
+        startx = txscale * (DATASTART - STARTTIME),
+        endx = txscale * (DATAEND - STARTTIME),
+        coords = _(data.clusters).map(function(line, lineindex) {
             return {
-                points : _(line).map(function(point, colindex) {
+                points : _(line.volumes).map(function(point, colindex) {
                     var lowercumul = lineindex ? cumulative[colindex][lineindex - 1] : 0,
                         uppercumul = cumulative[colindex][lineindex];
                     return {
                         data: point,
-                        x: xscale * colindex,
+                        x: startx + xscale * colindex,
                         lowery: centery + yscale * ( ( sums[colindex] / 2 ) - lowercumul ),
                         uppery: centery + yscale * ( ( sums[colindex] / 2 ) - uppercumul ),
                     }
-                })
+                }),
+                id : line.id,
+                title: line.title
             }
         }),
         _(coords).each(function(line) {
@@ -93,13 +100,24 @@
     
     /* Drawing streamgraph*/
    
+    $selector.empty();
+   
     var paper = new Raphael($selector[0]);
     
+    paper.path("M0 " + centery + "L" + width + " " + centery).attr({
+        stroke: "#000",
+        "stroke-width": .25
+    })
+    
     _(coords).each(function(line, index) {
         line.color = COLORS[index % COLORS.length];
+        //var hue = (parseInt(line.id)%6)/6;
+        //line.color = Raphael.hsl( hue, 1, .8 );
+        //line.highlightColor = Raphael.hsl( hue, 1, .4 );
         line.surface = paper.path(line.path);
         line.surface.attr({
-            stroke: "none",
+            stroke: "#ffffff",
+            "stroke-width": .25,
             fill: line.color
         });
     });
@@ -127,14 +145,14 @@
         attrcarres = {
             fill: "#333333",
             "fill-opacity": .5,
-            stroke: SELECTEDCOLOR
+            stroke: "#c51810"
         };
     carregauche.attr(attrcarres);
     carredroite.attr(attrcarres);
     
     var rangerect = paper.rect(0, (height - YEARSHEIGHT), width, YEARSHEIGHT);
     rangerect.attr({
-        fill: SELECTEDCOLOR,
+        fill: "#c51810",
         stroke: "none"
     });
     
@@ -163,16 +181,34 @@
         line.mousesurface.attr({
             stroke: "none",
             fill: line.color,
-            opacity: .01
+            opacity: .01,
+            title: line.title
         }).mouseover(function() {
-            line.surface.attr({
-                fill: SELECTEDCOLOR
-            })
+            $("body").trigger("select-cluster", line.id);
         }).mouseout(function() {
+            $("body").trigger("unselect-cluster", line.id);
+        });
+    });
+    
+    $("body").on("unselect-cluster", function(e, clusterid) {
+        var line = _(coords).find(function(line) {
+            return line.id == clusterid;
+        });
+        if (line) {
             line.surface.attr({
                 fill: line.color
-            })
+            });
+        }
+    });
+    $("body").on("select-cluster", function(e, clusterid) {
+        var line = _(coords).find(function(line) {
+            return line.id == clusterid;
         });
+        if (line) {
+            line.surface.attr({
+                fill: SELECTEDCOLOR //line.highlightColor
+            });
+        }
     });
     
     /* Returning a handler for slide value change */
@@ -195,10 +231,21 @@
             width: right - left
         });
     }
+    
+    $("#slider-range").dragslider("values", [startx, endx]);
+    this.slidevalues(startx, endx);
 
 }
 
+function loadStreamgraph(url) {
+    $(".streamgraph").empty();
+    delete window.streamgraph;
+    $.getJSON(url, function(data) {
+        window.streamgraph = new Streamgraph($(".streamgraph"), data);
+        streamgraph.slidevalues.apply(streamgraph,$("#slider-range").dragslider("values"));
+    });
+}
+
 $(function() {
-    window.streamgraph = new Streamgraph($(".streamgraph"));
-    streamgraph.slidevalues.apply(streamgraph,$("#slider-range").dragslider("values"));
+    loadStreamgraph("data/json_streamgraph.json");
 })