JQuery Simple Chart: jQuery plugin to display bar charts with HTML DIVs

Recommend this page to a friend!
  Info   View files View files (7)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2014-04-20 (6 years ago) RSS 2.0 feedNot enough user ratingsTotal: 242 All time: 191 This week: 5Up
Version License JavaScript version Categories
jquery-simple-chart 1.0.0MIT/X Consortium ...1.0jQuery, Graphics
Description Author

This is a jQuery plugin to display bar charts with HTML DIVs.

It can render a bar chart displaying different DIVs elements in given colors of calculated widths and heights to represent each bar in the chart.

The plugin can render a axis in given colors and use background images behind the chart bars to show a grid.

The colors of axis lines and the titles of the chart and bars are configurable parameters.

Innovation Award
JavaScript Programming Innovation award winner
April 2014

Prize: One year Codenvy Developer hosted cloud IDE premium plan
One simple way to render bars in HTML pages is to set the background color of a DIV element and adjust its width and height.

This jQuery plugin uses this approach to display bar charts using only DIV elements instead of canvas objects.

Manuel Lemos
  Performance   Level  
Name: Robert Haddad <contact>
Classes: 2 packages by
Country: Jordan Jordan
Age: 40
All time rank: 761 in Jordan Jordan
Week rank: 17 Up1 in Jordan Jordan Equal
Innovation award
Innovation award
Nominee: 1x

Winner: 1x


Small jQuery Plugin to display a Chart of Plotted Data


Include in Head Tag:

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

    <script type="text/javascript" src="js/jquery.SimpleChart.js"></script>

JavaScript / jQuery:

    	lineWidth: 2,				// Chart Line Width
		strokeColor: "#333",		// Axis Lines Color
		borderColor: "#333",		// Border Color
		borderWidth: 3,				// Border Width
		backgroundColor: "#FFF",	// Background color of chart
		backgroundImg: "css/jquery.SimpleChart/monthly_grid.png", // Background Image for chart (i.e Grid Layout)
		data: data,					// Default plot
		title: "Simple Chart",		// Default Title of chart
		titleFontSize: 16,			// Title Font size
		titleColor: "#FFF",			// Title Color
		showTitle: true,			// If True show title
		titleBGColor: '#006',		// Title Background Color
		xTitle: "",					// Title of X Axis
		yTitle: "",					// Title of Y Axis
		xTitleBGColor: '#006',		// Title X Axis background Color
		yTitleBGColor: '#006',		// Title Y Axis background Color
		xFontSize: 16,				// X Axis Title Font Size
		yFontSize: 16, 				// Y Axis Title Font Size
		xTitleColor: "#000",		// X Axis Title Color
		yTitleColor: "#000",		// Y Axis Title Color
		maxValX: 12,				// Maximum value of data XAxis
		maxValY: 100,				// Maximum value of data YAxis
		width: 500,					// Width of Graph
		height: 300,				// Height of Graph
		margin: 10,					// Margin between each graph
		showKey: true,				// Show chart key
		toolTip: ''					// If set, this will use jQuery Tooltip


    var data = [

			values:[						// Array of Plot Values
					X:5,					// X Coordinate of Point 1
					Y:50					// Y Coordinate of Point 1
					X:10,					// X Coordinate of Point 2
					Y:100					// Y Coordinate of Point 2
				}							// And So on
			color:"red",					// Color of the Line and Point
			title:"Red Color",				// Title of the line for the chart key
			action: "alert('Red Color');"	// Action if key is Clicked
			title:"Blue Color",
			action: "alert('Blue Color');"


    <div id="demo1"></div> 
  Files folder image Files  
File Role Description
Files folder imageimages (2 files)
Files folder imagejs (1 file)
Accessible without login Plain text file demo.html Example Demo
Accessible without login Plain text file LICENSE Lic. Auxiliary data
Accessible without login Plain text file README.md Doc. Auxiliary data
Accessible without login Plain text file SimpleChart.jquery.json Data Auxiliary data

  Files folder image Files  /  images  
File Role Description
  Accessible without login Image file monthly_grid.png Icon Icon image
  Accessible without login Image file weekly_grid.png Icon Icon image

  Files folder image Files  /  js  
File Role Description
  Plain text file jquery.SimpleChart.js Class Class source

 Version Control Unique User Downloads Download Rankings  
This week:0
All time:191
This week:5Up