Flot: Add vertical line to grid and background on its right side

jquery flot
321X picture 321X · Sep 1, 2011 · Viewed 9.3k times · Source

I discovered Flot yesterday and I'm curious if I can add a vertical line to my graph and have a different background on the right side of the line.

This is my graph so far: http://jsfiddle.net/cncvL/1/ (evolved from Flot example)

For now I've added an extra line by adding data on the y-axis but that is not a desired solution.

Answer

Neil picture Neil · Sep 1, 2011

You can use the "markings" property of the "grid" property to have different colours either side of the line. e.g. edit your JSFIDDLE to say:

    grid: {
        backgroundColor:
        {
            colors: ["#FFF", "#DDD"]
        },
        markings: [
            {xaxis: {from:  1, to: 10}, yaxis: {from: -3, to: 12}, color: "#eeeeff"},
            {xaxis: {from: 10, to: 14}, yaxis: {from: -3, to: 12}, color: "#eeffee"},
            {xaxis: {from: 10, to: 10},                            color: "#0000bb"}
        ]
    },

You can also use it to draw a simple line the third 'xaxis' above, rather than doing it the way that you did (another series).

Related questions

How do I make a div full screen?

I am using Flot to graph some of my data and I was thinking it would be great to make this graph appear fullscreen (occupy full space on the monitor) upon clicking on a button. Currently, my div is as …

Read More
jquery flot xaxis time

In this example in xaxis will compare the days... $.plot($("#placeholder"), data, { yaxis: {}, xaxis: { mode: "time",minTickSize: [1, "day"],timeformat: "%d/%m/%y"},"lines": {"show": "true"},"points": {"show": "true"},clickable:true,hoverable: true }); How I can print time? This is the …

Read More
Any examples of Flot with floating tooltips?

I am currently working on a Flot graph, the API which seems pretty powerful overall, although examples of advanced use are not widely documented. The API suggests there are ways to set hoverable on the graph, not that I am …

Read More