Added line graph

josecolella · Jun 15, 2014 · 559f987 · 559f987
1 parent bc20463
commit 559f987
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 10 deletions.
diff --git a/visualization/static/visualization/js/visualize.js b/visualization/static/visualization/js/visualize.js
@@ -79,8 +79,7 @@ var visualize = {
             });
         }
 
-        console.log('HELLO');
-        console.log(group.all());
+
         var groupByValue = function(d) {
             return d.value;
         };
@@ -92,21 +91,19 @@ var visualize = {
             return item.key;
         });
         var linearY = d3.extent(group.all(), groupByValue);
-        console.log(ordinalX);
-        console.log(linearY);
 
         barChart.width(visualize.width)
             .height(visualize.height)
             .margins({top: 10, right: 10, bottom: 20, left: 40})
             .dimension(dimension)
             .group(group)
             .x(d3.scale.ordinal().domain(ordinalX))
-            .xUnits(dc.units.ordinal)
-            .y(d3.scale.linear().domain(linearY))
-            .brushOn(false)
-//            .renderHorizontalGridLines(true)
-//            .renderVerticalGridLines(true)
-            .centerBar(true);
+            .xUnits(dc.units.ordinal) //Set or get the xUnits function
+            .y(d3.scale.linear().domain(linearY)) //Get or set the y scale. y scale is typically automatically generated by the chart implementation.
+            .brushOn(true)
+            .elasticY(true) //Turn on/off elastic y axis
+            .centerBar(true); //Whether the bar chart will render each bar centered around the data position on x axis
+
 
         dc.renderAll();
 
@@ -121,7 +118,58 @@ var visualize = {
 
     },
     lineChart: function(selector) {
+        var chartSelector = selector+"-chart";
+        $("#chart")
+            .attr('class', chartSelector)
+            .css({
+                'height': '30em',
+                'margin-top': ''
+            });
 
+        //Defining the x scale is mandatory
+        var lineChart = dc.lineChart("."+chartSelector);
+
+
+        var dimension= visualize.cf.dimension(function(row) { return row[visualize.config.x];});
+
+        var group;
+        if (visualize.config.x !== visualize.config.y) {
+            group = dimension.group().reduceSum(function(row) {
+                return row[visualize.config.y];
+            });
+        } else {
+            group = dimension.group().reduceCount(function(row) {
+                return row[visualize.config.y];
+            });
+        }
+
+        console.log('HELLO');
+        console.log(group.all());
+        var groupByValue = function(d) {
+            return d.value;
+        };
+        var groupByKey = function(d) {
+            return d.key;
+        };
+
+        var linearX = d3.extent(group.all(), groupByKey);
+        var linearY = d3.extent(group.all(), groupByValue);
+
+        console.log(linearX);
+        console.log(linearY);
+
+        lineChart.width(visualize.width)
+            .height(visualize.height)
+            .margins({top: 10, right: 10, bottom: 20, left: 40})
+            .dimension(dimension)
+            .group(group)
+            .x(d3.scale.linear().domain(linearX))
+//            .y(d3.scale.linear().domain(linearY)) //Get or set the y scale. y scale is typically automatically generated by the chart implementation.
+            .brushOn(true)
+            .elasticY(true) //Turn on/off elastic y axis
+            .xAxis().tickFormat(d3.format("d"));
+
+        dc.renderAll();
     },
     scatterChart: function(selector) {
 

diff --git a/visualization/templates/visualization/index.html b/visualization/templates/visualization/index.html
@@ -18,8 +18,10 @@
     <link rel="stylesheet" href="{% static 'visualization/jquery/jquery.handsontable.full.css' %}"/>
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css"/>
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css"/>
+    <link rel="stylesheet" href="{% static 'visualization/css/colorbrewer.css' %}"/>
 {% endblock stylesheets %}
 {% block headjs %}
+    <script src="{% static "visualization/js/colorbrewer.js" %}"></script>
     <script src="{% static "visualization/jquery/jquery.handsontable.full.js" %}"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js"></script>