Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

make a bar chart?

1 view
Skip to first unread message

Geoff Cox

unread,
Jul 23, 2008, 4:36:35 AM7/23/08
to
hello,

Is it possible to present values gained via Javascript as a bar chart?

If, yes, wouild appreciate a pointer to how to do this or to some
sample code.

Cheers,

Geoff

Bart Van der Donck

unread,
Jul 23, 2008, 4:56:28 AM7/23/08
to
Geoff Cox wrote:

> Is it possible to present values gained via Javascript as a bar chart?
> If, yes, wouild appreciate a pointer to how to do this or to some
> sample code.

Maybe something like this could get you started:

var data = [ ['jan', 104], ['feb', 99], ['mar', 111] ];
document.write('<table border="0"><tr>');
for (var i=0; i<data.length; ++i)
document.write('<td align="center" valign="bottom">'
+ data[i][1]
+ '<div style="background:red;width:20px;height:'
+ data[i][1] + 'px">&nbsp;</div>'
+ data[i][0]+'</td>');
document.write('</tr></table>');

--
Bart

Geoff Cox

unread,
Jul 23, 2008, 5:23:16 AM7/23/08
to

Many thanks Bart!

Cheers

Geoff

Dr J R Stockton

unread,
Jul 23, 2008, 4:08:48 PM7/23/08
to
In comp.lang.javascript message <69rd84pl98c2ooijmnveubgr15a0gtlhqd@4ax.
com>, Wed, 23 Jul 2008 09:36:35, Geoff Cox <gc...@freeuk.notcom> posted:

>Is it possible to present values gained via Javascript as a bar chart?
>
>If, yes, wouild appreciate a pointer to how to do this or to some
>sample code.

<URL:http://www.merlyn.demon.co.uk/js-misc1.htm#BC>. It uses sized
DIVs, so works with the resolution of the screen. It works in IE,
Safari, Opera, and Firefox; but in Firefox it needs a little adjustment.

--
(c) John Stockton, nr London UK. ?@merlyn.demon.co.uk DOS 3.3, 6.20; WinXP.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links.
PAS EXE TXT ZIP via <URL:http://www.merlyn.demon.co.uk/programs/00index.htm>
My DOS <URL:http://www.merlyn.demon.co.uk/batfiles.htm> - also batprogs.htm.

Evertjan.

unread,
Jul 24, 2008, 3:23:51 AM7/24/08
to
Dr J R Stockton wrote on 23 jul 2008 in comp.lang.javascript:

> In comp.lang.javascript message <69rd84pl98c2ooijmnveubgr15a0gtlhqd@4ax.
>com>, Wed, 23 Jul 2008 09:36:35, Geoff Cox <gc...@freeuk.notcom> posted:
>>Is it possible to present values gained via Javascript as a bar chart?
>>
>>If, yes, wouild appreciate a pointer to how to do this or to some
>>sample code.
>
> <URL:http://www.merlyn.demon.co.uk/js-misc1.htm#BC>. It uses sized
> DIVs, so works with the resolution of the screen. It works in IE,
> Safari, Opera, and Firefox; but in Firefox it needs a little adjustment.
>

or try:

http://devrijehuisarts.org/test/jsgraph.asp

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Laurent vilday

unread,
Jul 24, 2008, 5:22:03 AM7/24/08
to
Evertjan. a écrit :

> Dr J R Stockton wrote on 23 jul 2008 in comp.lang.javascript:
>
>> In comp.lang.javascript message <69rd84pl98c2ooijmnveubgr15a0gtlhqd@4ax.
>> com>, Wed, 23 Jul 2008 09:36:35, Geoff Cox <gc...@freeuk.notcom> posted:
>>> Is it possible to present values gained via Javascript as a bar chart?
>>>
>>> If, yes, wouild appreciate a pointer to how to do this or to some
>>> sample code.
>> <URL:http://www.merlyn.demon.co.uk/js-misc1.htm#BC>. It uses sized
>> DIVs, so works with the resolution of the screen. It works in IE,
>> Safari, Opera, and Firefox; but in Firefox it needs a little adjustment.
>>
>
> or try:
>
> http://devrijehuisarts.org/test/jsgraph.asp

Is JS really indispensable to render charts ?

I use the google chart API when I need chart, JS (with XHR usually) is
only used to populate the datas.
http://code.google.com/apis/chart/

--
laurent

SAM

unread,
Jul 24, 2008, 9:31:44 AM7/24/08
to
Laurent vilday a écrit :

>
> I use the google chart API when I need chart, JS (with XHR usually) is
> only used to populate the datas.
> http://code.google.com/apis/chart/

Ha ! oui ! super !
works very fine !
<http://chart.apis.google.com/chart?chtt=Chantier+DURAND&cht=p3&chd=t:7,40,20,13,20&chs=386x200&chl=Electtricit%C3%A9%7CMa%C3%A7onnerie|Menuiserie|Plomberie|Divers>
Hop! et encore un truc dans la boite ą malices :-)

And there is somewhere a form to fix, arrange, the url ?

--
sm

Evertjan.

unread,
Jul 24, 2008, 11:07:17 AM7/24/08
to
Laurent vilday wrote on 24 jul 2008 in comp.lang.javascript:

>> http://devrijehuisarts.org/test/jsgraph.asp

btw, this was coded in 2003.

> Is JS really indispensable to render charts ?

That was not the Q, as I saw it,
but if it can be done with clienside js.

Ofcourse there are miriads of other ways to make a chart,
like scanning the one handdrawn by a neighbouring wizkid,
but that is OT.

Dr J R Stockton

unread,
Jul 24, 2008, 3:10:47 PM7/24/08
to
In comp.lang.javascript message <Xns9AE55F8C...@194.109.133.242>
, Thu, 24 Jul 2008 07:23:51, Evertjan. <exjxw.ha...@interxnl.net>
posted:
>
>or try:
>
>http://devrijehuisarts.org/test/jsgraph.asp

At first sight, it appears that the points on the waves are GIFs. Could
they be small sized DIVs instead?

--
(c) John Stockton, nr London UK. ??@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
In MS OE, choose Tools, Options, Send; select Plain Text for News and E-mail.
Don't quote more than is needed, and respond after each quoted part.

Bart Van der Donck

unread,
Jul 25, 2008, 4:42:28 AM7/25/08
to
Laurent vilday wrote:

> I use the google chart API when I need chart, JS (with XHR usually) is
> only used to populate the datas. http://code.google.com/apis/chart/

Now THAT is a wonderful tool. Thanks for the link!

--
Bart

Dr_Kra...@nyc.rr.com

unread,
Jul 26, 2008, 7:27:21 PM7/26/08
to
There are several ways.

A horizontal line such as
<hr id="red" style="height: .8em; background-color: red; color: red;
margin-left: 0; text-align: left" />
and then use:
document.getElementById("red").width= <computed width in px or %>

N.B.: A width set in the style is not changeable!


An solid image (previously defined)
<img src="blu.gif" height="12" alt="blue" id="blu" />
and then use:
document.getElementById("blu").width= <computed width in px>


Both seem to work in FF3, IE7, Opera9 and Safari(windows). Other units may
work.

Using a <p> fails in all of them and <table> in FF.

Percent is nice because it scales with the user's display. Unfortunately
'em' does not always work. It would be prudent to initialize the width
'onload'.

HTH

0 new messages