Flot Grid Styling

[Jonathan]

Hi all,

I am fairly new to Flot Graphs, but from what I can see so far it
looks great. I have one quick question however that I cant find in the
API or within any Google Search.

Is it possible to remove the horizontal lines on the grid (y-axis grid
lines), on which the graph is plotted?

Additionally, with the x-axis grid lines (vertical), is it possible to
apply a fill colour between every other vertical line.

Thanking you all in advance for any help you may be able to offer.

Cheers

Jon

[George Roberts]

From: "Jonathan" <jonatha...@gmail.com>

> Is it possible to remove the horizontal lines on the grid (y-axis grid
> lines), on which the graph is plotted?

Yes. Trivial. Search for "tick" instead of "grid". The lines are called ticks. You can make the lines invisible but keep the
text for each line visible.

> Additionally, with the x-axis grid lines (vertical), is it possible to
> apply a fill colour between every other vertical line.

No - I don't think so. The flot source code is pretty easy to read and change though.

- George Roberts
http://gr5.org

[Tom]

>> Additionally, with the x-axis grid lines (vertical), is it possible to
>> apply a fill colour between every other vertical line.

You should take a look at this example with the weekends shaded:

http://people.iola.dk/olau/flot/examples/visitors.html

Combined with custom ticks it should be very simple to fill between
every other vertical line.

--tom

[Jonathan]

Hi guys, thanks for this info,

It makes sense now when looking at Ticks rather than Grid . . . was
not overly sure what a tick was until now. Many thanks for clearing
up.

I have seen that example before but could not see the shaded weekends
until now, I have been looking at it on a pretty bad monitor . . .
looks good . . . thanks for the tip off.

Cheers

Jon

On Jun 28, 3:10 pm, "George Roberts" <gr-googlegrp...@spamarrest.com>
wrote:
> From: "Jonathan" <jonathanmal...@gmail.com>

[Jonathan]

Hi there,

I have been looking in the 'tick' issue, and I cant seem to find out
whether its possible to hide the y axis ticks, but retain the y axis
labels? Everywhere I look says that this is not possible?

Cheers

Jon


On Jun 28, 3:10 pm, "George Roberts" <gr-googlegrp...@spamarrest.com>
wrote:
> From: "Jonathan" <jonathanmal...@gmail.com>
>

[George Roberts]

Damn - you are right - you can't do it without editing the code (which is easy by the way). I got flot confused with flotr (again)
as I use both quite a bit. In flotr the option is here:
grid: {
color: '#545454', // => primary color used for outline and labels
backgroundColor: null, // => null for transparent, else color
tickColor: '#DDDDDD', // => color used for the ticks
labelMargin: 3, // => margin in pixels
verticalLines: true, // => whether to show gridlines in vertical direction
horizontalLines: true, // => whether to show gridlines in horizontal direction
outlineWidth: 2 // => width of the grid outline/border in pixels
},

- George Roberts
http://gr5.org

----- Original Message -----
From: "Jonathan" <jonatha...@gmail.com>
To: "Flot graphs" <flot-...@googlegroups.com>
Sent: Monday, June 28, 2010 2:13 PM
Subject: Re: Flot Grid Styling

Hi there,

I have been looking in the 'tick' issue, and I cant seem to find out
whether its possible to hide the y axis ticks, but retain the y axis
labels? Everywhere I look says that this is not possible?

Cheers

Jon

On Jun 28, 3:10 pm, "George Roberts" <gr-googlegrp...@spamarrest.com>
wrote:
> From: "Jonathan" <jonathanmal...@gmail.com>
>

[Phillip Howell]

I haven't tested this, but it seems like you could make tickColor transparent and then customize the tick labels with the 'tickLabel' CSS class.

-pkh