RangeSelector ignores connectSeparatePoints

[waegen]

Currenly the RangeSelector does ignore the connectSeparatePoint option which leaves us with ugly gaps when we have nulls in our data.

Please check the demo here: http://plnkr.co/edit/UvxTUzwUwC0KsfnNFs31?p=preview

[danvk]

Thanks for the report. For reasons I don't recall, the range selector has its own independent plotter. I think it should just use the standard fill plotter. @paulfelix do you remember the backstory on this?

I hadn't seen plunker before, cool!

[paulfelix]

Hmm, employing a "standard fill plotter" certainly makes sense. Not sure if that was an option when the range selector was first implemented. It might have been.

[kmlbgn]

Hi @danvk I have the opposite problem. I want to display gaps in the range selector, but range selector connects them and plots a ugly filled line. While on my graphic, gaps behave as intended (not plotted).

Forcing connectSeparatePoints to false in option doesn't affect it, of course.

My options are set as follow :

  var options = {
  	plugins : [
  		tidechart.hairlines
  	],
  	labels: labels,
  	ylabel: 'Tide level (m)',
  	legend: 'always',
  	showRangeSelector: true,
  	connectSeparatedPoints: false,
  	interactionModel: Dygraph.defaultInteractionModel,
  	legendFormatter: function(data) {
  			data.series.splice(0,1)
  	return Dygraph.Plugins.Legend.defaultFormatter.call(this, data);
  	},
  	axes: {
  		x: {
  			axisLabelWidth: 80
  		},
  		y: {
  			axisLabelWidth: 40,
  			valueFormatter: function(v) {
  			return v + ' m';  // controls formatting in the legend/mouseover
  			}
  		}
  	},
  	series: {
  	  'Tide level': {
  		color: '#A9A9A9',
  		fillGraph: true,
  		showInRangeSelector: true,
  		showLabelsOnHighlight: false,
  		strokeWidth: 0.1,
  		drawPoints: false,
  		highlightCircleSize: 0
  	  },
  	  'Camera 1': {
  		color: '#2DAAE1',
  		drawPoints: true,
  		pointSize: 1.5,
  		highlightCircleSize: 5
  	  },
  	  'Camera 2': {
  		color: '#FFC329',
  		drawPoints: true,
  		pointSize: 1.5,
  		highlightCircleSize: 5
  	  },
  	  'Camera 3': {
  		color: '#FF5229',
  		drawPoints: true,
  		pointSize: 1.5,
  		highlightCircleSize: 5
  	  }
  	}
  };

Any clue why it is behaving differently on my part ?