date - Fill areas in time-based bar chart where there is no corresponding data -

i have bar chart displays json data time scale x axis set @ 1 day intervals , linear scale y axis.

here representative data sample have:

[{"date":"2013-04-20","load_volume":400},{"date":"2013-04-23","load_volume":400},{"date":"2013-04-24","load_volume":400},{"date":"2013-04-28","load_volume":1732},{"date":"2013-04-30","load_volume":400}] 

and here chart looks data:

what want draw "stub" rect elements missing date keys in dataset make clear there no corresponding value date, in graph here:

how should go this?

i considering trying select elements .elementfrompoint() function in javascript, , if there no rects @ specified point along xaxis, proceed draw "stub" rect element, not sure work, , wondering if there simpler way achieve in d3.

i think you're correct in trying tackle in massage-the-data phase. came with:

first, create object date key (assumine array above var inputdata) can use lookup later:

inputdata.foreach(   function(d){     d.date = new date(d.date).sethours(0)   } );  var data = inputdata.reduce(function(o,d){   o[+d.date] = d.load_volume;   return o; }, {}); 

then, make date scale x axis:

var extent = d3.extent(inputdata, function(d){     return d.date; });  var x = d3.time.scale().range([0,chartwidth]).domain(extent); 

you can use output of scale create array of data suitable chart had in mind:

var chartdata = x.ticks(d3.time.days).map(function(d){   return data[+d] ? {date: d, stub: false, value: data[+d]} : {date:d, stub: true, value: 10}; }); 

output:

[{"date":1366383600000,"stub":false,"value":400},{"date":1366470000000,"stub":true,"value":10},{"date":1366556400000,"stub":true,"value":10},{"date":1366642800000,"stub":false,"value":400},{"date":1366729200000,"stub":false,"value":400},{"date":1366815600000,"stub":true,"value":10},{"date":1366902000000,"stub":true,"value":10},{"date":1366988400000,"stub":true,"value":10},{"date":1367074800000,"stub":false,"value":1732},{"date":1367161200000,"stub":true,"value":10},{"date":1367247600000,"stub":false,"value":400}] 

adjust value of stub object in above function height want. can use stub boolean set class on each rect change color between blue or gray.