creating a bar chart (in CSS)

A

Alex Hunsley

I'm looking for a way to show bart charts in HTML. I'm aware of the
method of using a 1x1 transparent gif and html tables to make it work,
but I'm quite attracted by the idea of doing it via CSS. A google showed
some partial or incomplete solutions, but nothing particularly complete.

Can anyone point me to any good source of info on doing bar charts or
similar in CSS? Failing that, I'm up for hearing about other ways of
doing it. I've ruled out server side processing so no asp or anything
like that... (and I want it pretty simple so have ruled out java/flash
as well).

In terms of look, I'm wanting to make something similar to the chart
shown at http://makeashorterlink.com/?B67E25BC8 - whereby you have title
text next to each bar.

thanks
alex
 
J

Jeff Thies

Alex said:
I'm looking for a way to show bart charts in HTML. I'm aware of the
method of using a 1x1 transparent gif and html tables to make it work,
but I'm quite attracted by the idea of doing it via CSS. A google showed
some partial or incomplete solutions, but nothing particularly complete.

Can anyone point me to any good source of info on doing bar charts or
similar in CSS? Failing that, I'm up for hearing about other ways of
doing it. I've ruled out server side processing so no asp or anything
like that... (and I want it pretty simple so have ruled out java/flash
as well).

In terms of look, I'm wanting to make something similar to the chart
shown at http://makeashorterlink.com/?B67E25BC8 - whereby you have title
text next to each bar.
Click to expand...

That appears to be in a table and that is just fine because it is
tabular data

#bar1{width:130px; height: 15px}

....

<tr><td>data 1</td><td><div id="bar1"></div></td></tr>

That is really simple.

Jeff
 
A

Alex Hunsley

Jeff said:
That appears to be in a table and that is just fine because it is
tabular data

#bar1{width:130px; height: 15px}

...

<tr><td>data 1</td><td><div id="bar1"></div></td></tr>

That is really simple.

Jeff
Click to expand...

ah yes, I see what you mean! This would work fine.
Any pointers on getting the % or count to appear next to each bar?

thanks!
alex
 
N

Nico Schuyt

Alex said:
Any pointers on getting the % or count to appear next to each bar?
Click to expand...

Try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Test</title>
<style type="text/css">
#bar1{width:130px; height: 15px; background: red; float: left; margin-right:
..5em}
</style>
<table>
<tr><td>data 1</td><td><div id="bar1">&nbsp;</div>68%</td></tr>
</table>

Regards, Nico
 
A

Alex Hunsley

[snip]

please disregard my last question about how to add text next to the bar,
I see how to do it now (a new table for each bar).

thanks
alex
 
N

Nico Schuyt

please disregard my last question about how to add text next to the
bar, I see how to do it now (a new table for each bar).
Click to expand...

No need at all for that:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Test</title>
<style type="text/css">
body, td {font-family: sans-serif}
div.bar {height: 15px; float: left; margin-right: .5em}
#bar1 {width:130px; background: red;}
#bar2 {width:100px; background: blue;}
#bar3 {width:70px; background: green;}
#bar4 {width:40px; background: yellow;}
</style>
<table>
<tr><td>data 1</td><td><div class="bar" id="bar1">&nbsp;</div>68%</td></tr>
<tr><td>data 2</td><td><div class="bar" id="bar2">&nbsp;</div>50%</td></tr>
<tr><td>data 3</td><td><div class="bar" id="bar3">&nbsp;</div>40%</td></tr>
<tr><td>data 4</td><td><div class="bar" id="bar4">&nbsp;</div>20%</td></tr>
</table>
 
J

Jeff Thies

Nico said:
No need at all for that:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Test</title>
<style type="text/css">
body, td {font-family: sans-serif}
div.bar {height: 15px; float: left; margin-right: .5em}
#bar1 {width:130px; background: red;}
#bar2 {width:100px; background: blue;}
#bar3 {width:70px; background: green;}
#bar4 {width:40px; background: yellow;}
</style>
Click to expand...

It looks like Nico went to the trouble of calculating out the right
percentages!

You can do this also and just use percentages (not fully tested):

..bar_container{width: 400px}
#bar1{width: 45%;color: blue}

<tr><td>data 1</td><td><div class="bar_container"><div class="bar"
id="bar1">&nbsp;</div>45%</div></td></tr>

You'd want to adjust that as 100% might clip the size off. You can
include the "size" in the bar just by replacing the "&nbsp;" with it.
 
M

m

Alex said:
I'm looking for a way to show bart charts in HTML. I'm aware of the
method of using a 1x1 transparent gif and html tables to make it work,
but I'm quite attracted by the idea of doing it via CSS. A google showed
some partial or incomplete solutions, but nothing particularly complete.

Can anyone point me to any good source of info on doing bar charts or
similar in CSS? Failing that, I'm up for hearing about other ways of
doing it. I've ruled out server side processing so no asp or anything
like that... (and I want it pretty simple so have ruled out java/flash
as well).

In terms of look, I'm wanting to make something similar to the chart
shown at http://makeashorterlink.com/?B67E25BC8 - whereby you have title
text next to each bar.

thanks
alex
Click to expand...

SVG would do what you want, but support is scarce right now.

Why *should* it be in CSS? Maybe because you have to change the info
often?

If so:
Then just automate a process on your local machine to make the graphic,
and upload the graphic, instead of uploading changed CSS which isn't
designed to be used for the purpose.

A small 2 color, 4 color or 16 color graphic will load quickly even
over phone lines, and look a hell of a lot better. There's no need to
resort to kludges.

Possible tools:

Perl or other scripting languages and the Image::Magick module.
Gimp scripting in Perl, Python, or Lisp.
SVG tools to create .png or .gif files to upload.
Lots of spreadsheets will create a graph.
Lots of tools will read text files and create a graph.

Google about.
 
M

m

m said:
SVG would do what you want, but support is scarce right now.

Why *should* it be in CSS? Maybe because you have to change the info
often?

If so:
Then just automate a process on your local machine to make the graphic,
and upload the graphic, instead of uploading changed CSS which isn't
designed to be used for the purpose.

A small 2 color, 4 color or 16 color graphic will load quickly even
over phone lines, and look a hell of a lot better. There's no need to
resort to kludges.

Possible tools:

Perl or other scripting languages and the Image::Magick module.
Gimp scripting in Perl, Python, or Lisp.
SVG tools to create .png or .gif files to upload.
Lots of spreadsheets will create a graph.
Lots of tools will read text files and create a graph.

Google about.
Click to expand...

A-and,
Lots of databases will make a graphic for you, too.

Even on a Winblow$ machine, you can schedule scripts to
run automatically. You could set up the script to
create the graphic, then ftp it to your site.
Most newer flavors have a "Task Scheduler" and you would use VBScript or
Active Perl.
 
T

Toby Inkster

Nico said:
Try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Test</title>
<style type="text/css">
#bar1{width:130px; height: 15px; background: red; float: left; margin-right:
.5em}
</style>
<table>
<tr><td>data 1</td><td><div id="bar1">&nbsp;</div>68%</td></tr>
</table>
Click to expand...

I prefer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Test</title>
<style type="text/css">
#bar1{ border-left: 136px solid red; padding-left: 0.5em; }
#bar2{ border-left: 120px solid blue; padding-left: 0.5em; }
</style>
<table>
<tr><th scope="row">data 1</th><td><var id="bar1">68%</var></td></tr>
<tr><th scope="row">data 2</th><td><var id="bar2">60%</var></td></tr>
</table>

It's a bit nicer semantically. See:
http://examples.tobyinkster.co.uk/bar-chart.html
 
N

Nico Schuyt

Toby said:
I prefer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Test</title>
<style type="text/css">
#bar1{ border-left: 136px solid red; padding-left: 0.5em; }
#bar2{ border-left: 120px solid blue; padding-left: 0.5em; }
</style>
<table>
<tr><th scope="row">data 1</th><td><var id="bar1">68%</var></td></tr>
<tr><th scope="row">data 2</th><td><var id="bar2">60%</var></td></tr>
</table>
It's a bit nicer semantically. See:
http://examples.tobyinkster.co.uk/bar-chart.html
Click to expand...

Interesting! I must admit the VAR element is new for me.
Thanks,
Nico
 
T

Toby Inkster

Nico said:
Interesting! I must admit the VAR element is new for me.
Click to expand...

TBH, I think that's the first time I've used it, though I've known of its
existance for ages. I don't tend to mark up code in any more detail than:

<pre><code>...</code></pre>

So have never really felt the need for <var>. I suppose technically the
percentages in the example are constants, not variables, so perhaps <var>
might not be the best choice of element. The HTML spec doesn't go into an
awful lot of depth about when its use is appropriate though, so I reserve
judgement on that one.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

RMagick is nice... bar chart 2
PIE/BAR CHART QUESTIONS?(creating them dynamically) 10
Re: CSS for positioning 334
Looking for a pure Python chart drawing module 23
CSS problem, creating a "tab control" layout 6
Frames and a navigation bar & CSS 26
Java / Tool bar 6
Would like tu insert a bar chart in each row of a Datagrid based on DB info 0

Members online

No members online now.
Total: 44 (members: 2, guests: 42)
Robots: 204

Forum statistics

Threads
473,764
Messages
2,569,565
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top