Liquid layout with resizable sparkline graphs

[Eric Lindsay]

I need to include some simple (sparkline style) graphs in a web page
that will have a liquid layout. Some viewers will be changing the font
size to suit their display (sizes range from 320 to 2560 pixels). I want
the graphs to change size proportional to the font enlargement viewers
use.

I did this sort of thing once before at
http://cyclonestudios.com.au/aboutus/projects.html
where the little colour patches under each project show which design and
building stages were handled, and the approximate project cost. This was
just done with divs sized using em.

e.g.
<dt>1997 Proserpine Hospital</dt>
<dd>Major Redevelopment in association with Peddle Thorp.
<!--
$7.5m
All stages
-->
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #d6ba1c #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #75fb78 #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #faba75 #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #54a4db #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #6cf0de #444;"></div>
</dd>

Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?

--
http://www.ericlindsay.com

[Jonathan N. Little]

Eric Lindsay wrote:

I need to include some simple (sparkline style) graphs in a web page
that will have a liquid layout. Some viewers will be changing the font
size to suit their display (sizes range from 320 to 2560 pixels). I want
the graphs to change size proportional to the font enlargement viewers
use.

I did this sort of thing once before at
http://cyclonestudios.com.au/aboutus/projects.html
where the little colour patches under each project show which design and
building stages were handled, and the approximate project cost. This was
just done with divs sized using em.

e.g.
<dt>1997 Proserpine Hospital</dt>
<dd>Major Redevelopment in association with Peddle Thorp.
<!--
$7.5m
All stages
-->
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #d6ba1c #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #75fb78 #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #faba75 #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #54a4db #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #6cf0de #444;"></div>
</dd>

Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?

I would use 1-color images that stretch to whatever you need

<img src="bar.gif" height="10" width="50" alt="50%">
<img src="bar.gif" height="10" width="23" alt="23%">...
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[dorayme]

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

I need to include some simple (sparkline style) graphs in a web page
that will have a liquid layout. Some viewers will be changing the font
size to suit their display (sizes range from 320 to 2560 pixels). I want
the graphs to change size proportional to the font enlargement viewers
use.

I did this sort of thing once before at
http://cyclonestudios.com.au/aboutus/projects.html
where the little colour patches under each project show which design and
building stages were handled, and the approximate project cost. This was
just done with divs sized using em.

Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?

You forgot to say what *you* found unsatisfactory about this approach.
Is that not something relevant? I have some ideas that will give you a
better result if you are concerned abut some particular problems. What
are the problems that concern you?

--
dorayme

[dorayme]

In article <73***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:

Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?

I would use 1-color images that stretch to whatever you need

<img src="bar.gif" height="10" width="50" alt="50%">
<img src="bar.gif" height="10" width="23" alt="23%">...

OP's question was not about the particular example.

--
dorayme

[Jonathan N. Little]

dorayme wrote:

In article <73***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:

>>Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?

I would use 1-color images that stretch to whatever you need

<img src="bar.gif" height="10" width="50" alt="50%">
<img src="bar.gif" height="10" width="23" alt="23%">...

OP's question was not about the particular example.

My point is what is wrong with what is simple and works. A bar graph is
a graphic, why not use a graphic? More options and can be very bandwidth
friendly...just don't like the use of empty DIVs...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Jeff]

dorayme wrote:

In article <73***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:

>>Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?

I would use 1-color images that stretch to whatever you need

<img src="bar.gif" height="10" width="50" alt="50%">
<img src="bar.gif" height="10" width="23" alt="23%">...

OP's question was not about the particular example.

Hmm, the OP did ask about a different method. Personally I prefer the
non image style as you can change the color with CSS, the image method
doesn't.

Now, I don't know much about styling lists cross browser, but this could
certainly be done with a list:

<style type="text/css">
ul{margin-left: 0;padding-left: 0;}
li{
background-color: black;
line-height: .5em;
list-style: none;
margin-top: .5em;
}
</style>

<ul>
<li style="width: 4em;background-color: #faba75">&nbsp;</li>
<li style="width: 6em;background-color: #54a4db">&nbsp;</li>
<li style="width: 0.25em">&nbsp;</li>
</ul>

I'd like it if someone would follow up and clean that up. Moz needs
the list to contain something (HENCE THE &NBSP;). Spacing is different
between Moz and IE.

Perhaps a definition list would be the semantically correct way. I
don't have a problem with divs as they have no inherent meaning.

Jeff

[Jonathan N. Little]

Jeff wrote:

dorayme wrote:

>In article <73***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:

>>>Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?

I would use 1-color images that stretch to whatever you need

<img src="bar.gif" height="10" width="50" alt="50%">
<img src="bar.gif" height="10" width="23" alt="23%">...

OP's question was not about the particular example.

Hmm, the OP did ask about a different method. Personally I prefer the
non image style as you can change the color with CSS, the image method
doesn't.

Now, I don't know much about styling lists cross browser, but this could
certainly be done with a list:

<style type="text/css">
ul{margin-left: 0;padding-left: 0;}
li{
background-color: black;
line-height: .5em;
list-style: none;
margin-top: .5em;
}
</style>

<ul>
<li style="width: 4em;background-color: #faba75">&nbsp;</li>
<li style="width: 6em;background-color: #54a4db">&nbsp;</li>
<li style="width: 0.25em">&nbsp;</li>
</ul>

I'd like it if someone would follow up and clean that up. Moz needs
the list to contain something (HENCE THE &NBSP;). Spacing is different
between Moz and IE.

Perhaps a definition list would be the semantically correct way. I
don't have a problem with divs as they have no inherent meaning.

Ah but now print it and see what you get! Oops no bar graph! Remember,
backgrounds are just decoration not content...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[dorayme]

In article <c7***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:

dorayme wrote:

In article <73***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:

>Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?

I would use 1-color images that stretch to whatever you need

<img src="bar.gif" height="10" width="50" alt="50%">
<img src="bar.gif" height="10" width="23" alt="23%">...

OP's question was not about the particular example.

My point is what is wrong with what is simple and works. A bar graph is
a graphic, why not use a graphic? More options and can be very bandwidth
friendly...just don't like the use of empty DIVs...

It did not seem to me that the OP's question was about *bar graphs* and
certainly not bar graphs in isolation from text...

--
dorayme

[Jeff]

Jonathan N. Little wrote:

Jeff wrote:

>dorayme wrote:

>>In article <73***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:

Is anyone familiar with a better approach to simple resizable
graphs than just styling divs (or spans probably in the new graphs)
with em sizes?
>
I would use 1-color images that stretch to whatever you need

<img src="bar.gif" height="10" width="50" alt="50%">
<img src="bar.gif" height="10" width="23" alt="23%">...

OP's question was not about the particular example.

Hmm, the OP did ask about a different method. Personally I prefer
the non image style as you can change the color with CSS, the image
method doesn't.

Now, I don't know much about styling lists cross browser, but this
could certainly be done with a list:

<style type="text/css">
ul{margin-left: 0;padding-left: 0;}
li{
background-color: black;
line-height: .5em;
list-style: none;
margin-top: .5em;
}
</style>

<ul>
<li style="width: 4em;background-color: #faba75">&nbsp;</li>
<li style="width: 6em;background-color: #54a4db">&nbsp;</li>
<li style="width: 0.25em">&nbsp;</li>
</ul>

I'd like it if someone would follow up and clean that up. Moz needs
the list to contain something (HENCE THE &NBSP;). Spacing is different
between Moz and IE.

Perhaps a definition list would be the semantically correct way. I
don't have a problem with divs as they have no inherent meaning.

Ah but now print it and see what you get! Oops no bar graph! Remember,
backgrounds are just decoration not content...

Well, you've got a good point there. That leaves you with either
images and a limited palette, or setting a border color on something.

Jeff

[Jonathan N. Little]

Jeff wrote:

>
Well, you've got a good point there. That leaves you with either
images and a limited palette, or setting a border color on something.

Well since an image is employing stretching a single-pixel or
single-pixel-column (if you want to shade your bars) images are very,
very small (a few bytes) so it does not load the page to have many
different images to "expand the palette" of your options.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Eric Lindsay]

In article <do**********************************@web.aioe.org >,
dorayme <do************@optusnet.com.auwrote:

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

I need to include some simple (sparkline style) graphs in a web page
that will have a liquid layout. Some viewers will be changing the font
size to suit their display (sizes range from 320 to 2560 pixels). I want
the graphs to change size proportional to the font enlargement viewers
use.

I did this sort of thing once before at
http://cyclonestudios.com.au/aboutus/projects.html
where the little colour patches under each project show which design and
building stages were handled, and the approximate project cost. This was
just done with divs sized using em.

Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?

You forgot to say what *you* found unsatisfactory about this approach.
Is that not something relevant? I have some ideas that will give you a
better result if you are concerned abut some particular problems. What
are the problems that concern you?

The approach I used worked fine in the context of the example I gave.
However it worries me because I can find relatively few examples done in
a similar manner. To me, this indicates that perhaps I have simply
failed to understand the problem adequately.

One obvious point is that in Opera when you magnify a page, the entire
contents get magnified. In Firefox and Safari you magnify the fonts, and
other elements styled in ems or as a percentage. In an iPod Touch, there
is no option to magnify fonts alone. Maybe the ability to magnify fonts
alone will disappear from browers.

Google provide their Charts api, that as far as I can see does not
provide any facility to let you magnify a graph after it is generated.
Who am I to say a smart outfit like Google have it wrong?
e.g.
<img border="0"
src="http://chart.apis.google.com/chart?cht=bvs&amp;chd=s:FLRABGLKJLLOH&a
mp;chf=bg,s,ffffde&amp;chco=0000ff&amp;chs=200x124 &amp;chbh=10&amp;chxt=y
&amp;chxr=0,0,62&amp;chtt=Cassettes each day" alt="cassette bar chart">

There is a set of sparkline code in PHP that is widely used. As far as I
can tell, it does not allow you to magnify the resulting sparkline. On
the other hand, I gather there is a variation of it for Wordpress that
does allow the end user to magnify the resulting graph.

Then there is the question of SVG. I have never found it much (well,
any) use, but the very title seems to address the problem I have -
making scalable graphics.

Basically I am worried that I am off somewhere at the end of a limb, and
a bunch of people are busy with saw and axe.

--
http://www.ericlindsay.com

[Jeff]

Jonathan N. Little wrote:

Jeff wrote:

>>
Well, you've got a good point there. That leaves you with either
images and a limited palette, or setting a border color on something.

Well since an image is employing stretching a single-pixel or
single-pixel-column (if you want to shade your bars) images are very,
very small (a few bytes) so it does not load the page to have many
different images to "expand the palette" of your options.

Agreed.

But neither one of us really knows what the OP wants, and there are
2^24 colors.

Jeff

[Jonathan N. Little]

Jeff wrote:

Jonathan N. Little wrote:

>Jeff wrote:

>>>
Well, you've got a good point there. That leaves you with either
images and a limited palette, or setting a border color on something.

Well since an image is employing stretching a single-pixel or
single-pixel-column (if you want to shade your bars) images are very,
very small (a few bytes) so it does not load the page to have many
different images to "expand the palette" of your options.

Agreed.

But neither one of us really knows what the OP wants, and there are
2^24 colors.

I can kinda of guess by his example, and I double that he would need all
2^24 colors.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Jonathan N. Little]

Jeff wrote:

Jonathan N. Little wrote:

>Jeff wrote:

>>>
Well, you've got a good point there. That leaves you with either
images and a limited palette, or setting a border color on something.

Well since an image is employing stretching a single-pixel or
single-pixel-column (if you want to shade your bars) images are very,
very small (a few bytes) so it does not load the page to have many
different images to "expand the palette" of your options.

Agreed.

But neither one of us really knows what the OP wants, and there are
2^24 colors.

BTW if is he is using PHP, he could generate the image on the fly is he
wished, with all 2^24 colors....

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[dorayme]

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

In article <do**********************************@web.aioe.org >,
dorayme <do************@optusnet.com.auwrote:

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

I need to include some simple (sparkline style) graphs in a web page
that will have a liquid layout. Some viewers will be changing the font
size to suit their display (sizes range from 320 to 2560 pixels). I want
the graphs to change size proportional to the font enlargement viewers
use.
>
I did this sort of thing once before at
http://cyclonestudios.com.au/aboutus/projects.html
where the little colour patches under each project show which design and
building stages were handled, and the approximate project cost. This was
just done with divs sized using em.
>
Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?

You forgot to say what *you* found unsatisfactory about this approach.
Is that not something relevant? I have some ideas that will give you a
better result if you are concerned abut some particular problems. What
are the problems that concern you?

The approach I used worked fine in the context of the example I gave.
However it worries me because I can find relatively few examples done in
a similar manner. To me, this indicates that perhaps I have simply
failed to understand the problem adequately.

OK, I will ask you another question, I have snipped all your other
worries for the moment because they touch on too much for a simple
martian like me! The question is this:

What have *you* found unsatisfactory about the approach you mention that
worked fine. Find something you want to do that is a reasonable thing to
want where you are *not* happy with this approach regarding images. And
we can discuss it. At the *very least*, we can commiserate together and
say stuff like: "Geez, pity it is no good, lets have a double bourbon..."

--
dorayme

[Bergamot]

Jeff wrote:

>
Personally I prefer the
non image style as you can change the color with CSS, the image method
doesn't.

Don't forget that CSS is supposed to be optional. What happens with your
method when CSS is disabled?

--
Berg