Cut & Paste JavaScript Graph-it!

Home / Free JavaScripts / Images & Music / Here

Cut & Paste JavaScript Graph-it!

Credit: JavaScript Kit

Description: Create graphs out of raw data using Graph It! Just input the name/value pairs of the involved graph elements, and leave the rest to the script. The values can be either absolute or percentage (using two versions of script).

Graph-it allows you to render more than one graph on the same page simply by invoking the key function multiple times.

Example:

Example 1 (using absolute values)

What is your favorite news site?

Example 2 (using percentage values)

What is your favorite news site?

Since Example 1 is created using absolute values, the script also displays the total value (participants) at the end.

Directions

Step 1: Below contains two versions of Graph It!, the first requiring that the graph values be absolute (ie: 35, 123), while the second, in percentage (ie: 25%, 75%). Choose ONE of the below scripts, and add it to the BODY section of your page:

Absolute values version:

What is your favorite news site? <script language="JavaScript1.2"> //JavaScript Graph-it! (Absolute)- by javascriptkit.com //Visit JavaScript Kit (http://javascriptkit.com) for script //Credit must stay intact for use var graphimage="poll.gif" //DEFINE GRAPH VALUES [Item name, absolute value] var graphx=new Array() graphx[0]=["CNN",60] graphx[1]=["MSNBC",75] graphx[2]=["ABC News",24] graphx[3]=["BBC News",52] //YOU CAN DEFINE MULTIPLE GRAPHS, eg: //var graphy=new Array() function graphit(g,gwidth){ total=0 for (i=0;i<g.length;i++) total+=parseInt(g[i][1]) output='<table border="0" cellspacing="0" cellpadding="0">' for (i=0;i<g.length;i++){ calpercentage=Math.round(g[i][1]*100/total) calwidth=Math.round(gwidth*(calpercentage/100)) output+='<tr><td>'+g[i][0]+' </td><td><img src="'+graphimage+'" width="'+calwidth+'" height="10"> '+calpercentage+'%</td></tr>' } output+='</table>' document.write(output+'<br />Total participants: <b>'+total+'</b>') } //CALL GRAPHIT FUNCTION //graphit(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS) graphit(graphx,200) </script> <p align="center">This free script provided by<br /> <a href="http://www.javascriptkit.com">JavaScript Kit</a></p>

Percentage values version:

What is your favorite news site? <script language="JavaScript1.2"> //JavaScript Graph-it! (Percentage)- by javascriptkit.com //Visit JavaScript Kit (http://javascriptkit.com) for script //Credit must stay intact for use 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]+' </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> <p align="center">This free script provided by<br /> <a href="http://www.javascriptkit.com">JavaScript Kit</a></p>

Step 2: Save the following image (by right clicking, and selecting "save as"), and upload to your web site. It's the image used by the script to create the bars:

(enlarged for easier download).

Follow the comments inside script to input your own data.

Enjoy!

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info