title: How to fill the gaps in an array of Dates with fixed length
body: <p>I'm working on a bar chart using <strong>Chart.js 2.6</strong> and the xAxes is a time scale of days. meaning each tick in the axis is a day of month. so the values are <strong>Date</strong> objects and not just numbers;</p>
  
  <p>Say we're in <strong>July</strong> and we have <strong>31 days</strong> in the month. We have a number array that represents days of month. for example: </p>
  
  <pre><code>[1, 2, 3, 12, 28, 30, 31]
  </code></pre>
  
  <p>In our case this means that we have data available on these particular days. Now if we wanted to render a timeline from the first day of month to last, we could easily iterate days and chart the data easily. But there's a special case.</p>
  
  <p>Suppose we have 10 days or less of data, like the example array you saw. in these situations there's no need to render 31 days since most of them will be empty. it becomes more important specially on smaller screens (i.e iPhone 5).</p>
  
  <h2>The question</h2>
  
  <p>I want to display 10 days of data, meaning the xAxes will have 10 dates. But how do we fill in the gaps and kind of pad the array?</p>
  
  <h2>Example</h2>
  
  <p>Say we have this array: </p>
  
  <pre><code>[1, 2, 29, 30, 31]
  </code></pre>
  
  <p>Which means we have data available on the 1st day of the month, the 2nd, 29th, 30th and last day of month. Now we want to have an array of exactly 10 items. </p>
  
  <p>We have 5 days of data, and so there's room for 5 days to be filled in. We could fill the gaps like this:</p>
  
  <pre><code>[1, 2, 3, 4, 5, 6, 7, 29, 30, 31]
  </code></pre>
  
  <p>How do I go about implementing this in JavaScript? I need to be able to use my array of days, fill in the rest to have an array of 10 days. but this should be done considering available days. where to add missing days, and how many to add is the question.</p>