Help me with this code

dailydee · February 15, 2010, 12:34pm

Hi guys, I’m completely a noob with Javascript or scripting in general. I wanted to find a simple graph script and came across this script. It works great but I want to add link URL to the title of each bar (ie CNN) how do I do this?

Thanks!

var graphimageP="poll.gif"

//DEFINE GRAPH VALUES [Item name, Percentage value]
var graphv=new Array()
graphv[0]=["CNN","28%"]
graphv[1]=["MSNBC","36%"]
graphv[2]=["ABC News","11%"]
graphv[3]=["BBC News","25%"]

//YOU CAN DEFINE MULTIPLE GRAPHS, eg:
//var graphz=new Array()


function graphitP(g,gwidth){

outputP='<table border="0" cellspacing="0" cellpadding="0">'
for (i=0;i<g.length;i++){
calwidthP=gwidth*(parseInt(g[i][1])/100)
outputP+='<tr><td>'+g[i][0]+'&nbsp;</td><td><img src="'+graphimageP+'" width="'+calwidthP+'" height="10"> '+g[i][1]+'</td></tr>'
}
outputP+='</table>'
document.write(outputP)
}

//CALL GRAPHIT FUNCTION
//graphitP(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)
graphitP(graphv,200)
</script>

Raffles · February 15, 2010, 1:18pm

This bit shows the title for the bar:

<td>'+g[i][0]+'&nbsp;</td>

g[i][0] is the title name (e.g. CNN)

Think about how you might add a link to that. It’s just a case of adding the link HTML.

Stomme_poes · February 15, 2010, 2:03pm

I looked at it, and decided I would try to add to where the array got defined.

However is that the smartest way? Having HTML in a string like that? Would it be smarter to actually create an anchor with JS instead? If so, that would be kinda complicated, wouldn’t it?

Raffles · February 15, 2010, 2:27pm

That’s a better idea. It’s pretty simple:

var graphimageP="poll.gif"

//DEFINE GRAPH VALUES [Item name, Percentage value]
var graphv=new Array()
graphv[0]=["CNN","http://cnn.com","28&#37;"]
graphv[1]=["MSNBC","http://msnbc.com","36%"]
graphv[2]=["ABC News","http://abc.com","11%"]
graphv[3]=["BBC News","http://news.bbc.co.uk","25%"]

//YOU CAN DEFINE MULTIPLE GRAPHS, eg:
//var graphz=new Array()


function graphitP(g,gwidth){

outputP='<table border="0" cellspacing="0" cellpadding="0">'
for (i=0;i<g.length;i++){
calwidthP=gwidth*(parseInt(g[i][1])/100)
outputP+='<tr><td><a href="'+g[i][1]+'">'+g[i][0]+'</a></td><td><img src="'+graphimageP+'" width="'+calwidthP+'" height="10"> '+g[i][2]+'</td></tr>'
}
outputP+='</table>'
// document.write(outputP)  // document.write is frowned upon
document.getElementById('graph_container').innerHTML = outputP; // better
}

//CALL GRAPHIT FUNCTION
//graphitP(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)
graphitP(graphv,200)

Of course, using document.write is a horrible, ancient way of doing this and using innerHTML would be better (see code).

Stomme_poes · February 15, 2010, 2:30pm

Oooh… I didn’t think of adding it to the second array like that (I was thinking of adding it as an HTML string which isn’t something I feel can be Good).

…Isn’t innerHTML frowned upon by the same folks who frown upon document.write?

Raffles · February 15, 2010, 2:41pm

No, not really. innerHTML is seen as Less Bad than document.write. DOM methods would be best, but I don’t really feel like rewriting the above code. There is some argument as to whether innerHTML is actually better than DOM methods, because it’s faster (especially for big loops or giant chunks of HTML) and less verbose. jQuery uses it quite a lot.

That said, I like the DOM methods because they help build the tree of what I’m doing in my head. And of course it can do things that innerHTML can’t do without messy string manipulations.

Stomme_poes · February 15, 2010, 2:51pm

[ot]Yes… I saw a video where Crockford stated that innerHTML was created by MS because… there was nothing like it in the DOM specs and should’ve been created so it’s no wonder the other browsers adopted it… and that it’s not Good but sometimes in some situations just makes more sense due to the speed issues (so long as one is also aware of the security issues), and that the worst thing about it might be that it’s proprietary.

I’ve also seen some other things that MS really got more-right, and it would be nice if the W3 specs were revised to include/revise these.[/ot]

Raffles · February 15, 2010, 3:06pm

Microsoft-bashing is a very popular pastime, but they do get some things right. For example, they invented the XMLHttpRequest that everyone loves so much nowadays, they just kept it as an ActiveX object for a bit too long. Same with clientHeight and offsetHeight - introduced by IE and later added by the others. Very useful properties and not in any standard.

innerHTML is a part of the HTML5 standard, so now that it’s a part of a standard there’s no doubting its legitimacy!

dailydee · February 16, 2010, 5:02am

Raffles - I tried this code and it didn’t work. It came out something like this

CNN |http://cnn.com

RLM2008 · February 16, 2010, 6:24am

A simple mistake

calwidthP=gwidth*(parseInt(g[i][2])/100)

g[i][1] is the url

dailydee · February 16, 2010, 6:32am

RLM2008 - can you clarify? how do I add a link to the CNN text?

RLM2008 · February 16, 2010, 6:42am

Apologies dailydee, I think crosswires there. I just checked out the code, and found the above posted error.

What with my novice status, probably best if I leave you in Raffles capable hands. (that doesn’t sound dodgy does it?)

Edit: in the little test I did it does add a link???

dailydee · February 16, 2010, 6:50am

Raffles - I dint copy all your code thats why I got that issue. I copied all your code this time but its just shows up blank.

RLM2008 · February 16, 2010, 7:06am

It’s still early in the UK.

Recommendation. Install firebug for firefox, it will really help with debugging.

Just a guess but try this (forgive me Raffles)


<script type="text/javascript">
var graphimageP="poll.gif"
 
//DEFINE GRAPH VALUES [Item name, Percentage value]
var graphv=new Array()
graphv[0]=["CNN","http://cnn.com","28&#37;"]
graphv[1]=["MSNBC","http://msnbc.com","36%"]
graphv[2]=["ABC News","http://abc.com","11%"]
graphv[3]=["BBC News","http://news.bbc.co.uk","25%"]
 
//YOU CAN DEFINE MULTIPLE GRAPHS, eg:
//var graphz=new Array()
 
 
function graphitP(g,gwidth){
 
outputP='<table border="0" cellspacing="0" cellpadding="0">'
for (i=0;i<g.length;i++){
calwidthP=gwidth*(parseInt(g[i][2])/100)
outputP+='<tr><td><a href="'+g[i][1]+'">'+g[i][0]+'</a></td><td><img src="'+graphimageP+'" width="'+calwidthP+'" height="10"> '+g[i][2]+'</td></tr>'
}
outputP+='</table>'
// document.write(outputP)  // document.write is frowned upon
document.getElementById('graph_container').innerHTML = outputP; // better
}
 
//CALL GRAPHIT FUNCTION
//graphitP(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)
window.onload = function(){graphitP(graphv,200)};
</script>

In the graphit function you’re accessing a DOM element
document.getElementById(‘graph_container’).innerHTML = outputP;

In order to do that you first have to wait for the page to load, otherwise document.getElementById just returns null.

I’ve taken out the function call graphitP(graphv,200) and assigned it to window.onload.

window.onload = function(){graphitP(graphv,200)};

Hopefully that works

RLM

dailydee · February 16, 2010, 7:07am

RLM2008 - can you paste the whole code?

Edit: hehe you’re fast. Will try this

dailydee · February 16, 2010, 7:11am

argg… shows up as blank still

RLM2008 · February 16, 2010, 7:28am

Have you made a div in the body?

Like this

<body>
<div id="graph_container"></div>
</body>

Do you have a Poll.gif in the same folder as your html file? A 10x10 pixel gif image will do.

Here’s a very garish example. Complete code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Default</title>
<style type="text/css">
td {background: red;}
</style>
<script type="text/javascript">
var graphimageP="poll.gif"
 
//DEFINE GRAPH VALUES [Item name, Percentage value]
var graphv=new Array()
graphv[0]=["CNN","http://cnn.com","28%"]
graphv[1]=["MSNBC","http://msnbc.com","36%"]
graphv[2]=["ABC News","http://abc.com","11%"]
graphv[3]=["BBC News","http://news.bbc.co.uk","25%"]
 
//YOU CAN DEFINE MULTIPLE GRAPHS, eg:
//var graphz=new Array()
 
 
function graphitP(g,gwidth){
 
outputP='<table border="0" cellspacing="0" cellpadding="0">'
for (i=0;i<g.length;i++){
calwidthP=gwidth*(parseInt(g[i][2])/100)
outputP+='<tr><td><a href="'+g[i][1]+'">'+g[i][0]+'</a></td><td><img src="'+graphimageP+'" width="'+calwidthP+'" height="10"> '+g[i][2]+'</td></tr>'
}
outputP+='</table>'
// document.write(outputP)  // document.write is frowned upon
document.getElementById('graph_container').innerHTML = outputP; // better
}
 
//CALL GRAPHIT FUNCTION
//graphitP(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)
window.onload = function(){graphitP(graphv,200)};
</script>
</head>
<body>
<div id="graph_container"></div>
</body>
</html>

And a Poll.gif http://www.pixel-shack.com/critter/Poll.gif to copy to the same folder as your html file.

dailydee · February 16, 2010, 7:38am

Perfect! it works now. I didn’t know you need to add the div id.

Thanks so much RLM2008! and Raffles too!

RLM2008 · February 16, 2010, 7:39am

Glad to help:)

Raffles · February 16, 2010, 11:50am

Whoops, looks like I added quite a bit of trouble. Thanks RLM2008.

Topic		Replies	Views
Beginner - Help w/ Linking Text to Pics JavaScript	1	304	April 11, 2010
How can i add a link to every image in this script? JavaScript	3	848	October 10, 2014
I'm lost, Could anyone help me with my cw please JavaScript	2	1249	October 8, 2014
Simple Path Problem JavaScript	3	483	October 19, 2010
Javascript text help JavaScript	3	1086	December 18, 2011

Help me with this code

Related topics