AjaxMGraph

XHTML - CSS Graph | Now with multiple graphs support

Demo

* Random data 10-1000

* predefined data

• Download AjaxMGraph (zip, 15KB)
• More Info and comments

Graph 1:

Graph 2:

ABOUT

As you can see this is simple bar-graph that shows data by month. Soon I'll release other graph to complete this package (daily, and hourly graph).
Also I will release one universal graph that plots any given data. Stay tuned for more...

HOW TO SETUP

• Download Archive
• Extract files to some remote or local directory
• Include agGraph.css file in your page

<link rel="stylesheet" type="text/css" media="screen" href="agGraph.css" />

• Download and include prototype.js file in your page
• Include graphM.prototype.js file in your page

<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='graphM.prototype.js'></script>

• Define destination DIV, and write note title and text

<script type='text/javascript'>

	var graph1={
		divID:'resultDiv1',
		ShowNote:'yes',
		NoteTitle:'Note',
		NoteText:'Little note about this graph goes here...'
	}
	
	var graph2={
		divID:'resultDiv2',
		ShowNote:'yes',
		NoteTitle:'Note',
		NoteText:'Now with multiple graphs :)'
	}

</script>

• Add onclick="draw();" to some element

<input type="button" value="Generate Graph" id="startButton" onclick="draw();" />

• Edit number_generator.php, and enter your values there *

*or provide data from database, xml, remote file....

CHANGE LOG

V0.96 - January 16. 2008.

• Added Option to draw two or more graphs
• code modified to be more user friendly, and up to date with modern standards

V0.95 - April 10. 2007.

• Added Option to add a note⁽¹⁾
• Added Transparency
• Visual style changed

V0.90 - March 31. 2007.

• Initial version released.

notes:
(1) - you can pass HTML as note text, so basicaly you can add picture, link or anything else here :)