Icontem

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 (5 years ago) RSS 2.0 feedNot enough user ratingsTotal: 240 All time: 187 This week: 4Up
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
Winner


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: 39
All time rank: 751 in Jordan Jordan
Week rank: 38 Up1 in Jordan Jordan Equal
Innovation award
Innovation award
Nominee: 1x

Winner: 1x

Details
SimpleChart
========

Small jQuery Plugin to display a Chart of Plotted Data


Usage:
======

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:

    $('#demo1').SimpleChart({
	
    	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
	
    });

Data(JavaScript):

    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
		
		},{
	
			values:[
		
				{
			
					X:1,
				
					Y:60
				
				},{
			
					X:6,
				
					Y:70
				
				}
			
			],
		
			color:"blue",
		
			title:"Blue Color",
		
			action: "alert('Blue Color');"
		
		}
	
	];



HTML:

    <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  
 100%
Total:240
This week:0
All time:187
This week:4Up