title: Flot line chart time xaxis series fixed labels
body: <p>I want to create a flot line chart with time xaxis series which will have always fixed numbers of labels that is 6. Those 6 labels will be half of each year for 3 years. For example the labels could be <code>Jan-2016, June-2016, Jan-2017, June-2017, Jan-2019, June-2018</code>. Here the year can be changed based on current date, but the month will be fixed. Now these labels appears based on data of chart. So it my data don't have any value between Jan-2017 to July-2018 they are not appeared. Also if there is single data then no xaxis label appears.</p>
  
  <p>So how can I always have six labels any times regardless of what data is?</p>
  
  <p>I am attaching two example. One has only one value so it doesn't show the xaxis labels and second example has multiple points then also not all labels are appearing.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var flotLineOption = {            
   series: {
    lines: {
     show: true,
     fill: 0.01
    },
    points: {
     show: true,
     radius: 4
    }
   },
   grid: {
    borderColor: '#eee',
    borderWidth: 1,
    hoverable: true,
    backgroundColor: '#fcfcfc',
    margin: { bottom : 50 }
   },
   tooltip: true,
   tooltipOpts: {
    content: function (label, x, y) {
     var objDate = new Date(x);
     var yearValue = objDate.getFullYear();
     objDate = new Date(x).setMonth(objDate.getMonth() - 1);
     var monthName = new Date(objDate).toLocaleString("en-us", { month: "short" });
     return monthName + " " + yearValue + ' : ' + y; 
    }
   },
   xaxis: {
    tickColor: '#eee',
    tickDecimals: 0,
    tickSize: 6,
    show: true,
    mode: "time",
    timeformat: "%b %y",
    ticks: [new Date(2017,1).getTime(), new Date(2017,6).getTime(), new Date(2018,1).getTime(), new Date(2018,6).getTime(), new Date(2019,1).getTime(), new Date(2019,6).getTime()]
   },
   yaxis: {
    position: 'left',
    tickColor: '#eee',
    tickDecimals: 0
   },
   shadowSize: 0
  };
  
  function getData(){
      var data = [];
  
   
   data.push([new Date(2017, 2).getTime(), 8])
   data.push([new Date(2017, 8).getTime(), 2])
   data.push([new Date(2018, 3).getTime(), 9])
   data.push([new Date(2018, 9).getTime(), 3])
   data.push([new Date(2019, 4).getTime(), 7])
  
      return data;
  }
  
  $(function () { 
      
      $.plot($("#flotcontainer"),
          [
              {data: getData() }
          ],
          flotLineOption
      );
   
   $.plot($("#flotcontainer1"),
          [
              {data: [[new Date(2017, 4).getTime(), 7]] }
          ],
          flotLineOption
      );
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#flotcontainer {
      width: 600px;
      height: 200px;
      text-align: center;
      margin: 0 auto;
  }
  
  #flotcontainer1 {
      width: 600px;
      height: 200px;
      text-align: center;
      margin: 50px auto  0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"&gt;&lt;/script&gt;
  &lt;div id="flotcontainer"&gt;&lt;/div&gt;
  &lt;div id="flotcontainer1"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>