Flot line chart issue

Question

I need to create a line chart like in the image:

What I have achieved till now is

 var line_opt = {
        series: {
            lines: { show: true },
            points: { show: true }
        },
        grid: {
            hoverable: true,
            clickable: true
        },
        yaxis: {
            min: 0,
            max: 6,
            autoscaleMargin: .5,
            labelWidth: -15,
            tickLength: 0,
            tickFormatter: function suffixFormatter(val, axis) {
                return (val.toFixed(0));
            }
        },
        xaxis: {
            tickSize: 1
        }
    };

var lineData = [
        [1, 5], [2, 4], [3, 4], [4, 4], [5, 3], [6, 4], [7, 4], [8, 3], [9, 4], [10, 3],
        [11, 3], [12, 4], [13, 4], [14, 3], [15, 3], [16, 3], [17, 3], [18, 3], [19, 4], [20, 3],
        [21, 3], [22, 3], [23, 3], [24, 2], [25, 2], [26, 3], [27, 2], [28, 2], [29, 2]
    ];

Is there any way that the X axis lines start from the bottom of the chart and end where the point is (like in the first image) and also hide the x axis labels without the lines?

Answer 1

This can be achieved with different options (removing the gridlines) and using markings to fake the gridline only up to the chart:

Code (see this fiddle for the working demo):

var line_opt = {
  series: {
    lines: {
      show: true
    },
    points: {
      show: false
    }
  },
  grid: {
    backgroundColor: { colors: ["#fff", "#ddd"] },
    hoverable: true,
    clickable: true,
    borderWidth: 0,
    markings: []
  },
  yaxis: {
    min: 0,
    max: 6,
    autoscaleMargin: .5,
    //labelWidth: -15,
    tickLength: 0,
    tickFormatter: function suffixFormatter(val, axis) {
      return (val.toFixed(0));
    }
  },
  xaxis: {
    ticks: false,
    autoscaleMargin: .01,
    tickSize: 1,
    tickLength: 0 // only needed if ticks is not false
  }
};

var lineData = [ ... ];

for (var i=0; i < lineData.length; i++){
  line_opt.grid.markings.push({ 
    xaxis: { from: lineData[i][0], to: lineData[i][0] }, 
    yaxis: { from: 0, to: lineData[i][1] },
    lineWidth: 1,
    color: "#aaaaaa"
  });  
}

Answer 2

Reading the API documentation , it should be possible.

For the lines ending where the point is, use the grid options, the aboveData :

grid: {
    show: boolean
    aboveData: boolean
    color: color
    backgroundColor: color/gradient or null
    labelMargin: number
    axisMargin: number
    markings: array of markings or (fn: axes -> array of markings)
    borderWidth: number
    borderColor: color or null
    minBorderMargin: number or null
    clickable: boolean
    hoverable: boolean
    autoHighlight: boolean
    mouseActiveRadius: number
  }

You shouldn't need an xaxis for anything at that point, you can just hide it:

xaxis, yaxis: {
    show: null or true/false