Fix issue w3c#137

Add ability to fill in zeros from min_x to max_x, if applicable

data/missing-y.json

@@ -1,11 +1,11 @@
 
     [
         {
-            "date": "2014-01-01",
+            "date": "2014-01-08",
             "value": 500
         },
         {
-            "date": "2014-01-02",
+            "date": "2014-01-12",
             "value": 500
         },
         {

js/main.js

@@ -38,13 +38,15 @@ $(document).ready(function() {
         //add a line chart that has a few observations
         moz_chart({
             title: "Few Observations",
-            description: "We sometimes have only a few observations. By setting <i>missing_is_zero: true</i>, missing values for a time-series will be interpreted as zeros. In this example, we've override the rollover callback to show 'no date' for missing observations.",
+            description: "We sometimes have only a few observations. By setting <i>missing_is_zero: true</i>, missing values for a time-series will be interpreted as zeros. In this example, we've override the rollover callback to show 'no date' for missing observations and have set <i>min_x</i> and <i>max_x</i> to dates beyond our date range.",
             data: data,
             interpolate: 'basic',
             missing_is_zero: true,
             width: torso.width,
             height: torso.height,
             right: torso.right,
+            min_x: new Date('2014-01-01'),
+            max_x: new Date('2014-06-01'),
             target: '#missing-y',
             x_accessor: 'date',
             y_accessor: 'value',

src/common/x_axis.js

@@ -9,7 +9,8 @@ function x_axis(args) {
     }
 
     var last_i;
-    if (args.chart_type == 'line'){
+
+    if(args.chart_type == 'line') {
         for(var i=0; i<args.data.length; i++) {
             last_i = args.data[i].length-1;
 
@@ -18,12 +19,13 @@ function x_axis(args) {
 
             if(args.data[i][last_i][args.x_accessor] > max_x || !max_x)
                 max_x = args.data[i][last_i][args.x_accessor];
-        }    
-    } else if (args.chart_type == 'point') {
+        }
+    }
+    else if(args.chart_type == 'point') {
         max_x = d3.max(args.data[0], function(d){return d[args.x_accessor]});
         min_x = d3.min(args.data[0], function(d){return d[args.x_accessor]});
     }
-    else if (args.chart_type == 'histogram') {
+    else if(args.chart_type == 'histogram') {
         min_x = d3.min(args.data[0], function(d){return d[args.x_accessor]});
         max_x = d3.max(args.data[0], function(d){return d[args.x_accessor]});
 
@@ -39,8 +41,8 @@ function x_axis(args) {
                 return args.xax_units + pf.scale(f) + pf.symbol;
             }
         }
-    } else if (args.chart_type = 'bar') {
-
+    }
+    else if(args.chart_type = 'bar') {
         //min_x = d3.min(args.data[0], function(d){return d[args.value_accessor]});
         min_x = 0; // TODO: think about what actually makes sense.
         max_x = d3.max(args.data[0], function(d){return d[args.x_accessor]});
@@ -59,6 +61,7 @@ function x_axis(args) {
     min_x = args.min_x ? args.min_x : min_x;
     max_x = args.max_x ? args.max_x : max_x;
     args.x_axis_negative = false;
+
     if (!args.time_series) {
         if (min_x < 0){
             min_x = min_x  - (max_x * (args.inflator-1));

src/misc/process.js

@@ -45,13 +45,24 @@ function process_line(args) {
 
             //initialize our new array for storing the processed data
             var processed_data = [];
-            processed_data.push(clone(args.data[i][0]));
 
             //we'll be starting from the day after our first date
             var start_date = clone(first['date']).setDate(first['date'].getDate() + 1);
+            //start_date = new Date(start_date);
+            //start_date.setHours(0, 0, 0, 0);
 
-            for (var d = new Date(start_date); d <= last['date']; d.setDate(d.getDate() + 1)) {
+            //if we've set a max_x, add data points up to there
+            var from = (args.min_x) ? args.min_x : start_date;
+            var upto = (args.max_x) ? args.max_x : last['date'];
+            for (var d = new Date(from); d <= upto; d.setDate(d.getDate() + 1)) {
                 var o = {};
+                d.setHours(0, 0, 0, 0);
+
+                //add the first date item (judge me not, world)
+                //we'll be starting from the day after our first date
+                if(Date.parse(d) == Date.parse(new Date(start_date))) {
+                    processed_data.push(clone(args.data[i][0]));
+                }
 
                 //check to see if we already have this date in our data object
                 var existing_o = null;
@@ -74,11 +85,13 @@ function process_line(args) {
                 else {
                     processed_data.push(existing_o);
                 }
+
+                //add the last data item
+                if(Date.parse(d) == Date.parse(new Date(last['date']))) {
+                    processed_data.push(last);
+                }
             }
 
-            //add the last data item
-            processed_data.push(last);
-
             //update our date object
             args.data[i] = processed_data;
         }