Flot line chart time xaxis series fixed labels

Question

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 Jan-2016, June-2016, Jan-2017, June-2017, Jan-2019, June-2018. 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.

So how can I always have six labels any times regardless of what data is?

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.

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
    );

});

#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}

#flotcontainer1 {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 50px auto  0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="flotcontainer"></div>
<div id="flotcontainer1"></div>

Answer 1

Flot starts the chart at the first data point and ends it at the last data point. This leads to your ticks being outside of the chart. Set minimum and maximum values for the x axis to display all ticks:

xaxis: {
    //other options
    min: new Date(2017, 1).getTime(),
    max: new Date(2019, 6).getTime()
}

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()],
    min: new Date(2017, 1).getTime(),
    max: 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
  );

});

#flotcontainer {
  width: 600px;
  height: 200px;
  text-align: center;
  margin: 0 auto;
}

#flotcontainer1 {
  width: 600px;
  height: 200px;
  text-align: center;
  margin: 50px auto 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="flotcontainer"></div>
<div id="flotcontainer1"></div>