Fix issue w3c#162

examples/data/missing-is-hidden.json

@@ -0,0 +1,39 @@
+
+    [
+        {
+            "date": "2014-01-08",
+            "value": 500
+        },
+        {
+            "date": "2014-01-09",
+            "value": 500
+        },
+        {
+            "date": "2014-01-10",
+            "value": 400
+        },
+        {
+            "date": "2014-02-12",
+            "value": 500
+        },
+        {
+            "date": "2014-02-13",
+            "value": 100
+        },
+        {
+            "date": "2014-02-14",
+            "value": 120
+        },
+        {
+            "date": "2014-02-15",
+            "value": 30
+        },
+        {
+            "date": "2014-02-16",
+            "value": 300
+        },
+        {
+            "date": "2014-02-17",
+            "value": 200
+        }
+    ]

examples/dev.htm

@@ -95,6 +95,8 @@
             <div id='glorious_chart'></div>
             <div id='linked_multi1'></div>
             <div id='linked_multi2'></div>
+            <div id='missing_is_hidden'></div>
+            <div id='missing_is_hidden_multi'></div>
         </div>
         <div id='trunk'>
             <div class='row trunk-section'>

examples/examples.htm

@@ -70,6 +70,8 @@
             <div id='glorious_chart'></div>
             <div id='linked_multi1'></div>
             <div id='linked_multi2'></div>
+            <div id='missing_is_hidden'></div>
+            <div id='missing_is_hidden_multi'></div>
         </div>
         <div id='trunk'>
             <div class='row trunk-section'>

examples/js/main.js

@@ -154,6 +154,40 @@
             y_accessor: 'value'
         });
     });
+
+    d3.json('data/missing-is-hidden.json', function(data) {
+        data = MG.convert.date(data, 'date');
+        MG.data_graphic({
+            title: 'Broken Lines',
+            description: 'Setting <i>missing_is_hidden</i> to true will hide missing ranges rather than considering them to be zeros or interpolating between the two points on either side.',
+            data: data,
+            missing_is_hidden: true,
+            width: torso.width,
+            height: torso.height,
+            right: torso.right,
+            target: '#missing_is_hidden',
+            show_secondary_x_label: false
+        });
+    });
+
+    d3.json('data/missing-is-hidden-multi.json', function(data) {
+        for (var i = 0; i < data.length; i++) {
+            data[i] = MG.convert.date(data[i], 'date');
+        }
+
+        // add a multi-line chart
+        MG.data_graphic({
+            title: 'Broken Multi-Lines',
+            description: 'Setting <i>missing_is_hidden</i> works with multiple lines too.',
+            data: data,
+            width: torso.width,
+            height: torso.height,
+            right: torso.right,
+            missing_is_hidden: true,
+            target: '#missing_is_hidden_multi',
+            show_secondary_x_label: false
+        });
+    });
 
     d3.json('data/fake_users1.json', function(data) {
         data = MG.convert.date(data, 'date');

src/js/charts/line.js

@@ -154,6 +154,64 @@ charts.line = function(args) {
                 }
             }
 
+            if (args.missing_is_hidden) {
+                var the_line = svg.select('.mg-line' + (line_id) + '-color');
+                var bits = the_line.attr('d').split('L');
+                var zero = args.scales.Y(0);
+                var dasharray = [];
+                var singleton_point_length = 2;
+
+                var x_y, 
+                    x_y_plus_1,
+                    x,
+                    y,
+                    x_plus_1,
+                    y_plus_1,
+                    segment_length,
+                    cumulative_segment_length = 0;
+
+                bits[0] = bits[0].replace('M', '');
+                bits[bits.length - 1] = bits[bits.length - 1].replace('Z', '');
+
+                //if we have a min_x, turn the line off first
+                if (args.min_x) {
+                    dasharray.push(0);
+                }
+
+                //build the stroke-dasharray pattern
+                for (var j = 0; j < bits.length - 1; j++) {
+                    x_y = bits[j].split(',');
+                    x_y_plus_1 = bits[j + 1].split(',');
+                    x = Number(x_y[0]);
+                    y = Number(x_y[1]);
+                    x_plus_1 = Number(x_y_plus_1[0]);
+                    y_plus_1 = Number(x_y_plus_1[1]);
+
+                    segment_length = Math.sqrt(Math.pow(x - x_plus_1, 2) + Math.pow(y - y_plus_1, 2));
+
+                    //do we need to either cover or clear the current stroke
+                    if (y_plus_1 == zero && y != zero) {
+                        dasharray.push(cumulative_segment_length || singleton_point_length);
+                        cumulative_segment_length = (cumulative_segment_length)
+                            ? segment_length
+                            : segment_length - singleton_point_length;
+                    } else if (y_plus_1 != zero && y == zero) { //switching on line
+                        dasharray.push(cumulative_segment_length += segment_length);
+                        cumulative_segment_length = 0;
+                    } else {
+                        cumulative_segment_length += segment_length;
+                    }
+                }
+
+                //fear not, end bit of line, ye too shall be covered
+                if (dasharray.length > 0) {
+                    dasharray.push(the_line.node().getTotalLength() - dasharray[dasharray.length - 1]);
+
+                    svg.select('.mg-line' + (line_id) + '-color')
+                        .attr('stroke-dasharray', dasharray.join());
+                }
+            }
+
             //build legend
             if (args.legend) {
                 legend = "<span class='mg-line" + line_id  + "-legend-color'>&mdash; "
@@ -450,6 +508,9 @@ charts.line = function(args) {
                         .style('opacity', 1);
                   }
                 });
+            } else if (args.missing_is_hidden && d[args.y_accessor] == 0) {
+                //disable rollovers for hidden parts of the line
+                return;
             } else {
 
                 //show circle on mouse-overed rect

src/js/common/data_graphic.js

@@ -14,6 +14,7 @@ MG.data_graphic = function() {
     var defaults = {};
     defaults.all = {
         missing_is_zero: false,       // if true, missing values will be treated as zeros
+        missing_is_hidden: false,     // if true, missing values will appear as broken segments
         legend: '' ,                  // an array identifying the labels for a chart's lines
         legend_target: '',            // if set, the specified element is populated with a legend
         error: '',                    // if set, a graph will show an error icon and log the error to the console

src/js/misc/process.js

@@ -57,11 +57,16 @@ function process_line(args) {
     'use strict';
     //do we have a time-series?
     var is_time_series = args.data[0][0][args.x_accessor] instanceof Date
-            ? true
-            : false;
+        ? true
+        : false;
+
+    //force linear interpolation when missing_is_hidden is enabled
+    if (args.missing_is_hidden) {
+        args.interpolate = 'linear';
+    }
 
     //are we replacing missing y values with zeros?
-    if (args.missing_is_zero
+    if ((args.missing_is_zero || args.missing_is_hidden) 
             && args.chart_type === 'line'
             && is_time_series
         ) {