By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,712 Members | 2,111 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,712 IT Pros & Developers. It's quick & easy.

make a bar chart?

P: n/a
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
Jul 23 '08 #1
Share this Question
Share on Google+
10 Replies


P: n/a
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
Jul 23 '08 #2

P: n/a
On Wed, 23 Jul 2008 01:56:28 -0700 (PDT), Bart Van der Donck
<ba**@nijlen.comwrote:
>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>');
Many thanks Bart!

Cheers

Geoff
Jul 23 '08 #3

P: n/a
In comp.lang.javascript message <69rd84pl98c2ooijmnveubgr15a0gtlhqd@4ax.
com>, Wed, 23 Jul 2008 09:36:35, Geoff Cox <gc**@freeuk.notcomposted:
>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.
Jul 23 '08 #4

P: n/a
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.notcomposted:
>>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)
Jul 24 '08 #5

P: n/a
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.notcomposted:
>>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
Jul 24 '08 #6

P: n/a
SAM
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%A7on nerie|Menuiserie|Plomberie|Divers>
Hop! et encore un truc dans la boite à malices :-)

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

--
sm
Jul 24 '08 #7

P: n/a
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.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 24 '08 #8

P: n/a
In comp.lang.javascript message <Xn********************@194.109.133.242>
, Thu, 24 Jul 2008 07:23:51, Evertjan. <ex**************@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.
Jul 24 '08 #9

P: n/a
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
Jul 25 '08 #10

P: n/a
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 <pfails in all of them and <tablein 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
Jul 26 '08 #11

This discussion thread is closed

Replies have been disabled for this discussion.