Using markings In Flot on a time axis

Question

I have a graph that monitors the traffic of people visiting a website and it currently shows all of it's data no problem:

Every month or so I update and send out a newsletter to people that are subscribed to me and I want to know if there is a way to show on that graph the time that those newsletters came out.

So if I was looking at the past week of site-traffic in my graph and my newsletter was sent out on Monday, a line would appear on that day on the graph:

I know I can sort of do this with markings, a way to add lines to a graph in flot that already exists

{ xaxis: { from: 1, to: 2 }, color: "#000000" } //Creates a vertical line from 1 to 2

But that doesn't seem to work the same when you have time mode enabled. E.g. The parameters I'm giving it for markings won't show up when time mode is on

So my question is: How do I add a marking to the graph that appears on a specific date with flot?

EDIT

$.plot("#chart_filled_blue", data1, $.extend(true, {}, Plugins.getFlotDefaults(), {
    xaxis: {
        min: start,
        max: end,
        mode: "time",
        tickSize: [1, type],
        tickLength: 0
    },
    series: {
        lines: {
            fill: true,
            lineWidth: 1.5
        },
        points: {
            show: true,
            radius:4,
            lineWidth: 1.1
        },
        grow: { active: true, growings:[ { stepMode: "maximum" } ] }
    },
    grid: {
        hoverable: true,
        clickable: true,
            markings: [{
                xaxis: {
                    from: 1530421200,
                    to: 1530507600
                },
                color: "#000000"
            }]
    },
    tooltip: true,
    tooltipOpts: {
        content: '%s: %y'
    }
    }));

Answer 1

Markings work just fine in flot with time axes. Can you post some code to help understand the issue better?

You'll have to set the marking from and to to the timestamp you want the marking to appear:

grid: {
  markings: [{
    xaxis: {
      from: 1336201200000,
      to: 1336201200000
    },
    color: "#ff0000"
  }]
}

This JSFiddle has a working example of a time series axis and markings.