Bar Graph Class (No GD Required - 100% CSS based)

Small, short code snippets that other people may find useful. Do you have a good regex that you would like to share? Share it! Even better, the code can be commented on, and improved.

Moderator: General Moderators

User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Ok, haven't has time to look/use the class but looking at the example provided it uses CSS background colours. Unfortunately this means it should be used with caution.

Most customers I know who use charts may require them to be printed and my understanding is that without browser option changes CSS backgrounds do not get printed. Changing the browser settings is not always acceptable in a company environment and is annoying to do anyway.

Sorry to put a dampener on what looks like a really nice class. I have run into this CSS background and printing issue before with both graphs and folder trees. I had never considered it before a customer asked "why doesn't it print" for something which I never thought would be printed.

Regards
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

CoderGoblin wrote:Ok, haven't has time to look/use the class but looking at the example provided it uses CSS background colours. Unfortunately this means it should be used with caution.

Most customers I know who use charts may require them to be printed and my understanding is that without browser option changes CSS backgrounds do not get printed. Changing the browser settings is not always acceptable in a company environment and is annoying to do anyway.

Sorry to put a dampener on what looks like a really nice class. I have run into this CSS background and printing issue before with both graphs and folder trees. I had never considered it before a customer asked "why doesn't it print" for something which I never thought would be printed.

Regards
I think there may be a CSS solution to this but I'm not 100%. I'll do some research. If it's unavoidable I'll mention it in "Known Issues" of some sort :)
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

d11wtq wrote:I think there may be a CSS solution to this but I'm not 100%. I'll do some research. If it's unavoidable I'll mention it in "Known Issues" of some sort :)
There is.

I'll be working on this class tonight if all goes well. Not sure yet if I'll have to branch it to two versions (one for php4 and one for php5), but my host uses php4, so I'll make it work either way ;)

When printing the output from this class, it *does* show the full graph, its just not colored/filled in. I do think I have a solution in css, and I'll try to include that in my work.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

Allright.

I've managed to create a php4 version, and got all three examples working.

However, the CSS (in both my version and the original) has errors, and I'm having a hard time debugging it. In the php4 version (the one in CVS), my columns no longer line up.

I only discovered them via firefox's javascript console, oddly enough. (Although its in the div tag's css statements).

http://www.kabal-invasion.com/cssg/ has the php4 version with examples up.. if anyone can clarify the issues with the css, I would appreciate the help.

I basically need to get the css lining up the columns again, and get the css to not give errors.

Once those happen, I'll work on the printable version, and that should make us all set!
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Roja wrote:Allright.

I've managed to create a php4 version, and got all three examples working.

However, the CSS (in both my version and the original) has errors, and I'm having a hard time debugging it. In the php4 version (the one in CVS), my columns no longer line up.

I only discovered them via firefox's javascript console, oddly enough. (Although its in the div tag's css statements).

http://www.kabal-invasion.com/cssg/ has the php4 version with examples up.. if anyone can clarify the issues with the css, I would appreciate the help.

I basically need to get the css lining up the columns again, and get the css to not give errors.

Once those happen, I'll work on the printable version, and that should make us all set!
I used the underscore hack to get things working in IE. When I do a rewrite I'd like to have the CSS in separate string. I guess an idea would be to enable/disable standard compliance mode for IE by doing something like $Graph->useIEConditionalComments(). One of the biggest known bugs is that when you bring the graph size down, and increase the number of bars greatly, things start to go wonky (the bars don't render in the right places). It's fixable though. The Axis calculations are very much based upon trial and error at present too. That needs fixing. :lol: See why I put it on SF? :P
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

d11wtq wrote:I used the underscore hack to get things working in IE. When I do a rewrite I'd like to have the CSS in separate string. I guess an idea would be to enable/disable standard compliance mode for IE by doing something like $Graph->useIEConditionalComments(). One of the biggest known bugs is that when you bring the graph size down, and increase the number of bars greatly, things start to go wonky (the bars don't render in the right places). It's fixable though. The Axis calculations are very much based upon trial and error at present too. That needs fixing. :lol: See why I put it on SF? :P
I just commited the latest changes to cvs, which removes the need for ie hacks entirely. :)

Its now functional on IE and FF, PHP4 and PHP5, and has compliant css.

I'm working on the title issue, and the print support next.

There were a large number of typos (like font-size; instead of font-size: ), and a few weirdo things in there (variable border size on a transparent div? huh?)

But I nailed all of that. :)

[[UPDATE]]
Hmm. It appears I was hasty.

This page: http://css-discuss.incutio.com/?page=PrintStylesheets explains that you cannot override the "no background/bg image" setting on print!

While I can set a printer stylesheet, I can't override it, so there isnt any point.

Not sure there is any way to get around that. Anyone have an idea?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Roja wrote:Not sure there is any way to get around that. Anyone have an idea?
Use really chunky borders on 1px divs? Hmm.. there has to be a way.

Glad someone's happy to help with this :) Cheers dude.
User avatar
AKA Panama Jack
Forum Regular
Posts: 878
Joined: Mon Nov 14, 2005 4:21 pm

Post by AKA Panama Jack »

BTW, you might want to add Opera to your browser list. :)

It works just fine with Opera.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

AKA Panama Jack wrote:BTW, you might want to add Opera to your browser list. :)

It works just fine with Opera.
Excellent! Ah the joys of browsers that support standards. :)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

I'll test it in Safari shortly :)
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

d11wtq wrote: This page: http://css-discuss.incutio.com/?page=PrintStylesheets explains that you cannot override the "no background/bg image" setting on print!
While I can set a printer stylesheet, I can't override it, so there isnt any point.
Not sure there is any way to get around that. Anyone have an idea?
Unfortunately I have looked into this in the past and never come up with anything. Would love someone to post a solution but this is why I originally mentioned it.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

CoderGoblin wrote:
d11wtq wrote: This page: http://css-discuss.incutio.com/?page=PrintStylesheets explains that you cannot override the "no background/bg image" setting on print!
While I can set a printer stylesheet, I can't override it, so there isnt any point.
Not sure there is any way to get around that. Anyone have an idea?
Unfortunately I have looked into this in the past and never come up with anything. Would love someone to post a solution but this is why I originally mentioned it.
The quote was Roja but yeah, equally I'd like to see a workaround.

I'm super-duper busy with work and other work and more work and work and other stuff right now 8O

For making a single bar what does this do?

Code: Select all

<div style="width: 0; height: 100px; border-right: 20px solid #FF0000; font-size: 0; overflow: hidden;">&nbsp;</div>
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

Just a suggestion.

If you added pie chart functionality to your graphing class I think it would be sweet as.

I have no idea how it would be done with CSS, but I wouldn't mind a pie chart class at my disposal and I think you're probably capable of it judging from this :)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

jayshields wrote:Just a suggestion.

If you added pie chart functionality to your graphing class I think it would be sweet as.

I have no idea how it would be done with CSS, but I wouldn't mind a pie chart class at my disposal and I think you're probably capable of it judging from this :)
It's possible... I've seen JS solutions to it using CSS ;) The class needs breaking down into more a library to acheive this though, with a graphing engine and controllers for each type of graph :)
darryladie
Forum Commoner
Posts: 62
Joined: Thu Mar 02, 2006 6:14 pm
Location: East Sussex, UK

Post by darryladie »

Hiya, this project is fantastic. However, the link to the PHP4 version is broken.

Anywhere else I can get hold a copy :P

My PHP is pretty amateur but my CSS isnt and I might be able to help with the backgrounds thing.

If you created two stylesheets, one for screen and the other for print then the code would be even better.

That way you could modifying styles without looking at the PHP.

Use media="screen" and media="print" in the CSS tags to define which stylesheet you want onscreen and what you want/ don't want to be seen on paper.
Post Reply