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? //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

' } output+='

'+calpercentage+'%

' document.write(output+'
Total participants: '+total+'') } //CALL GRAPHIT FUNCTION //graphit(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS) graphit(graphx,200)

This free script provided by
JavaScript Kit

Percentage values version:

What is your favorite news site? //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='

' for (i=0;i' } outputP+='

'+g[i][1]+'

' document.write(outputP) } //CALL GRAPHIT FUNCTION //graphitP(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS) graphitP(graphv,200)

This free script provided by
JavaScript Kit

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