[TEST] reached a functionnal level with "dygraph"

static/js/graph-it.js

@@ -7,7 +7,7 @@
         var container2 = $('<div>').addClass('graphit-container-2').appendTo( this.first() );
         var data;
         var method;
-        var dcChart, dcVolumeChart;
+        var _chartObject;
 
         var width, height;
 
@@ -32,18 +32,13 @@
 
         container.css('background', '#FFF');
 
-
-        // http://dygraphs.com/tutorial.html
-        // http://dygraphs.com/data.html
-        // http://dygraphs.com/tests/callback.html
-        // http://dygraphs.com/legal.html
-
         
         var corpusId = 13410;
         var series = [];
         var keywordsList = ['bee,bees', 'brain,virus'];
         var dimensions;
-        // create the series for future plotting        
+
+        // generate data
         for (var i=0; i<keywordsList.length; i++) {
             keywords = keywordsList[i];
             // get data from server
@@ -59,25 +54,6 @@
                 },
             });
             dimensions = data.dimensions;
-            // format all data
-            for (var j=0; j<data.dimensions.length; j++) {
-                var dimension = data.dimensions[j];
-                var key = dimension.key;
-                var n = data.collection.length;
-                for (k=0; k<n; k++) {
-                    var value = data.list[k][j];
-                    switch (dimension.type) {
-                        case 'datetime':
-                            value = Date(value.replace(' ', 'T'));
-                            break;
-                        case 'numeric':
-                            value = +value;
-                            break;
-                    }
-                    data.list[k][j] = value;
-                    data.collection[k][key] = value;
-                }
-            }
             // add to the series
             series.push({
                 name: keywords,
@@ -85,43 +61,120 @@
             });
         }
         
-        // debugging only
-        dbg = series;
-        console.log(series);
-
-        container.highcharts({
-            chart: {
-                type: 'spline'
-            },
-            title: {
-                text: 'Evolution of documents count over time'
-            },
-            subtitle: {
-                text: 'the results are filtered by ngrams'
-            },
-            xAxis: {
-                type: dimensions[0].type,
-                // dateTimeLabelFormats: { // don't display the dummy year
-                //     month: '%e. %b',
-                //     year: '%b'
-                // },
-                title: {
-                    text: 'Date'
-                }
-            },
-            yAxis: {
-                title: {
-                    text: 'Documents count'
+        // different types of grouping
+        var groupings = {
+            datetime: {
+                century: {
+                    truncate: function(x) {return x.substr(0, 2)},
+                    next: function(x) {x = new Date(x); x.setFullYear(x.getFullYear()+100); return x;},                
+                },
+                decade: {
+                    truncate: function(x) {return x.substr(0, 3)},
+                    next: function(x) {x = new Date(x); x.setFullYear(x.getFullYear()+10); return x;},                
+                },
+                year: {
+                    truncate: function(x) {return x.substr(0, 4)},
+                    next: function(x) {x = new Date(x); x.setFullYear(x.getFullYear()+1); return x;},                
+                },
+                month: {
+                    truncate: function(x) {return x.substr(0, 7)},
+                    next: function(x) {x = new Date(x); x.setMonth(x.getMonth()+1); return x;},                
+                },
+                day: {
+                    truncate: function(x) {return x.substr(0, 10)},
+                    next: function(x) {x = new Date(x); x.setDate(x.getDate()+1); return x;},                
                 },
-                min: 0
-            },
-            tooltip: {
-                headerFormat: '<b>{series.name}</b><br>',
-                pointFormat: '{point.x:%e. %b}: {point.y:%d} m'
             },
-            series: series
+        };
+
+        var grouping = groupings.datetime.year;
+
+        // generate associative data
+        var associativeData = {};
+        for (var s=0; s<series.length; s++) {
+            var data = series[s].data;
+            for (var d=0; d<data.length; d++) {
+                var row = data[d];
+                var x = grouping.truncate(row[0]);
+                var y = row[1];
+                if (!associativeData[x]) {
+                    associativeData[x] = new Array(series.length);
+                    for (var i=0; i<series.length; i++) {
+                        associativeData[x][i] = 0;
+                    }
+                }
+                associativeData[x][s] += y;
+            }
+        };
+
+        // now, flatten this
+        var linearData = [];
+        for (var x in associativeData) {
+            var row = associativeData[x];
+            row.unshift(x);
+            linearData.push(row);
+        }
+
+        // extrema retrieval & scalar data formatting
+        for (var d=0; d<dimensions.length; d++) {
+            dimensions[d].extrema = {};
+        }
+        var keys = {};
+        for (var r=0; r<linearData.length; r++) {
+            var row = linearData[r];
+            for (var d=0; d<dimensions.length; d++) {
+                var value = row[d];
+                var dimension = dimensions[d];
+                switch (dimension.type) {
+                    case 'datetime':
+                        value += '2000-01-01 00:00:00'.substr(value.length);
+                        value = new Date(value.replace(' ', 'T') + '.000Z');
+                        break;
+                    case 'numeric':
+                        value = +value;
+                        break;
+                }
+                if (dimension.extrema.min == undefined || value < dimension.extrema.min) {
+                    dimension.extrema.min = value;
+                }
+                if (dimension.extrema.max == undefined || value > dimension.extrema.max) {
+                    dimension.extrema.max = value;
+                }
+                row[d] = value;
+            }
+            keys[row[0]] = true;
+        }
+
+        // interpolation
+        var xMin = dimensions[0].extrema.min;
+        var xMax = dimensions[0].extrema.max;
+        for (var x=xMin; x<xMax; x=grouping.next(x)) {
+            if (!keys[x]) {
+                // TODO: this below is just WRONG
+                var row = [x, 0, 0];
+                linearData.push(row);
+            }
+        }
+        linearData.sort(function(row1, row2) {
+            return row1[0] > row2[0];
+        });
+
+
+        // do the graph!
+        var labels = [dimensions[0].key];
+        for (var k=0; k<keywordsList.length; k++) {
+            labels.push(dimensions[1].key + ' (' + keywordsList[k] + ')');
+        }
+        // var _chartObject = new Dygraph(container[0], linearData);
+        var _chartObject = new Dygraph(container[0], linearData, {
+            labels: labels,
         });
 
+        // console.log(associativeData);
+        console.log(linearData);
+        console.log(dimensions);
+
+
         return container;
     };
 

templates/graph-it.html

@@ -21,8 +21,7 @@
 
     <script type="text/javascript" src="{% static "js/jquery/jquery.min.js" %}"></script>
 
-    <script src="http://code.highcharts.com/highcharts.js"></script>
-    <script src="http://code.highcharts.com/modules/exporting.js"></script>
+    <script type="text/javascript" src="http://dygraphs.com/dygraph-combined.js"></script>
     
     <script type="text/javascript" src="{% static "js/graph-it.js" %}"></script>