Offsetting the x-axis values in the line graph

Question

I am trying to generate a line graph using the flot library. I have got 3 problems:

1. I am trying to offset the first point (237) to some distance. Setting the min and max values under x-axis is not helping

2. March has 31 days but April 1 and March 31 is on the same y-axis. How do I get march 31 to show up in the graph?

3. How do I get vertical grid lines to show up on the graph?

Here is my code:

var alertTrendData = [[gd(2018,3,26),237],[gd(2018,3,27),200],[gd(2018,3,28),252],[gd(2018,3,29),232],[gd(2018,3,30),161],[gd(2018,3,31),54],[gd(2018,4,1),18],[gd(2018,4,2),134]];
    var alertTrendDataset = [{
        data: alertTrendData,
        points:{
            symbol: "circle"
        },
        valueLabels: {
            show: true,
            font: "9pt 'Trebuchet MS'"    
        }
    }];

    var alertTrendOptions = {
        series: {
            lines: {
                show: true
            },
            points: {
                radius: 3,
                fill: true,
                show: true            
            }
        },
        xaxis: {
            mode: "time",
            timeformat: "%m/%d",
            //tickSize: [1, "month"],        
            tickLength: 0,
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10,
            tickFormatter: function (v, axis) {
                var d = new Date(v);
                return (d.getUTCMonth()) + "/" + d.getUTCDate();
            }
        },
        yaxes: [{
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3,
        }],
        legend: {
            noColumns: 0,
            labelBoxBorderColor: "#000000",
            position: "nw"
        },
        grid: {
            hoverable: true,
            borderWidth: 0,
            borderColor: "#633200",
            backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
        },
        colors: ["#296292", "#0022FF"]
    };

    function gd(year, month, day) {
        //var x = new Date(year, month, day).getTime(); 
        var x = new Date(year, month, day).getTime(); 
        return x;
    }

    $(document).ready(function () {
        $.plot($("#alertTrend_Canvas"), alertTrendDataset, alertTrendOptions);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<div id="alertTrend_Canvas" style="height: 300px;"></div>

Here is my current output

I would appreciate any help in solving this issue. Thanks

Answer 1

1. To offset the first and/or last data point from the edge of the chart, add min/max values to the x axis.

2. To fix you dates, use all Date functions in their UTC variant (see here) and remember that month in JavaScript is zero-based.

3. For the vertical grid lines add this option:

   xaxis: {
       // other options
       tickLength: null
   },
   

See the code snippet for a full example:

var alertTrendData = [
  [gd(2018, 3, 26), 237],
  [gd(2018, 3, 27), 200],
  [gd(2018, 3, 28), 252],
  [gd(2018, 3, 29), 232],
  [gd(2018, 3, 30), 161],
  [gd(2018, 3, 31), 54],
  [gd(2018, 4, 1), 18],
  [gd(2018, 4, 2), 134]
];

var alertTrendDataset = [{
  data: alertTrendData,
  points: {
    symbol: "circle"
  },
  valueLabels: {
    show: true,
    font: "9pt 'Trebuchet MS'"
  }
}];

var alertTrendOptions = {
  series: {
    lines: {
      show: true
    },
    points: {
      radius: 3,
      fill: true,
      show: true
    }
  },
  xaxis: {
    mode: "time",
    timeformat: "%m/%d",
    //tickSize: [1, "month"],        
    tickLength: 0,
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 10,
    tickFormatter: function(v, axis) {
      var d = new Date(v);
      return (d.getUTCMonth()+1) + "/" + d.getUTCDate();
    },
    tickLength: null,
    min: gd(2018, 3, 25),
    max: gd(2018, 4, 3)
  },
  yaxes: [{
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 3,
  }],
  legend: {
    noColumns: 0,
    labelBoxBorderColor: "#000000",
    position: "nw"
  },
  grid: {
    hoverable: true,
    borderWidth: 0,
    borderColor: "#633200",
    backgroundColor: {
      colors: ["#ffffff", "#EDF5FF"]
    }
  },
  colors: ["#296292", "#0022FF"]
};

function gd(year, month, day) {
  //var x = new Date(year, month, day).getTime(); 
  var x = new Date(Date.UTC(year, month-1, day)).getTime();
  return x;
}

$(document).ready(function() {
  $.plot($("#alertTrend_Canvas"), alertTrendDataset, alertTrendOptions);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<div id="alertTrend_Canvas" style="height: 300px;"></div>