Liquid layout with resizable sparkline graphs

Shopify provides a reliable Ecommerce platform so you focus on selling online! Integrated hosting, shopping cart and Ecommerce payment solution all in one!

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.

<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

Create an Ecommerce Website and Sell Online! Ecommerce Software by Shopify

**dorayme** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

In article
<NOwebmasterSPA M-F803BC.06424520 042008@freenews .iinet.net.au>,
Eric Lindsay <NOwebmasterSPA M@ericlindsay.c omwrote:

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

Shopify provides a reliable Ecommerce platform so you focus on selling online! Integrated hosting, shopping cart and Ecommerce payment solution all in one!

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** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

In article <7341d$480a607d $40cba7b2$10611 @NAXS.COM>,
"Jonathan N. Little" <lws4art@centra l.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** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

dorayme wrote:

In article <7341d$480a607d $40cba7b2$10611 @NAXS.COM>,
"Jonathan N. Little" <lws4art@centra l.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

**Jeff** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

dorayme wrote:

In article <7341d$480a607d $40cba7b2$10611 @NAXS.COM>,
"Jonathan N. Little" <lws4art@centra l.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">  </li>
<li style="width: 6em;background-color: #54a4db">  </li>
<li style="width: 0.25em"> </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** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

Jeff wrote:

dorayme wrote:

>In article <7341d$480a607d $40cba7b2$10611 @NAXS.COM>,
> "Jonathan N. Little" <lws4art@centra l.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">  </li>
<li style="width: 6em;background-color: #54a4db">  </li>
<li style="width: 0.25em"> </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

**dorayme** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

In article <c7bb2$480a984d $40cba7b2$14277 @NAXS.COM>,
"Jonathan N. Little" <lws4art@centra l.netwrote:

dorayme wrote:

In article <7341d$480a607d $40cba7b2$10611 @NAXS.COM>,
"Jonathan N. Little" <lws4art@centra l.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** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

Jonathan N. Little wrote:

Jeff wrote:

>dorayme wrote:

>>In article <7341d$480a607d $40cba7b2$10611 @NAXS.COM>,
>> "Jonathan N. Little" <lws4art@centra l.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">  </li>
><li style="width: 6em;background-color: #54a4db">  </li>
><li style="width: 0.25em"> </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** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

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

Create an Ecommerce Website and Sell Online! Ecommerce Software by Shopify

**Eric Lindsay** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

In article <doraymeRidTh is-A6D968.08540020 042008@web.aioe .org>,
dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article
<NOwebmasterSPA M-F803BC.06424520 042008@freenews .iinet.net.au>,
Eric Lindsay <NOwebmasterSPA M@ericlindsay.c omwrote:
>

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

Shopify provides a reliable Ecommerce platform so you focus on selling online! Integrated hosting, shopping cart and Ecommerce payment solution all in one!

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.goog le.com/chart?cht=bvs&a mp;chd=s:FLRABG LKJLLOH&a
mp;chf=bg,s,fff fde&chco=00 00ff&chs=20 0x124&chbh= 10&chxt=y
&chxr=0,0,6 2&chtt=Cass ettes 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.

--

Eric Lindsay's domain. Contents of ericlindsay.com

http://www.ericlindsay.com

Eric Lindsay's web sites, featuring Airlie Beach diving, sailing tourist area, Psion Epoc computers, Gegenschein Science fiction fanzine.

**Jeff** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

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** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

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

**Jonathan N. Little** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

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

Create an Ecommerce Website and Sell Online! Ecommerce Software by Shopify

**dorayme** · Jun 27 '08, 07:17 PM

Re: Liquid layout with resizable sparkline graphs

In article
<NOwebmasterSPA M-3E7F8C.19571321 042008@freenews .iinet.net.au>,
Eric Lindsay <NOwebmasterSPA M@ericlindsay.c omwrote:

In article <doraymeRidTh is-A6D968.08540020 042008@web.aioe .org>,
dorayme <doraymeRidThis @optusnet.com.a uwrote:
>

In article
<NOwebmasterSPA M-F803BC.06424520 042008@freenews .iinet.net.au>,
Eric Lindsay <NOwebmasterSPA M@ericlindsay.c omwrote:

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