Location: PHPKode > scripts > Horizontal Bar Chart > index.php
<?php
include "bar-chart-class.php";



/*
==========================EXAMPLE ONE===================
*/
$grafic = new bar_chart();

$bars	= array(	"Firefox"			=> "#FF4200" ,
					"Internet Explorer"	=> "blue" ,
					"Opera"				=> "red",
					"Safari"			=> "#C4C4C4",
					"Google Chrome"		=> "#2BAA33"
					);
$height	= "14px"; 	//the height of the bars. must include "px"
$units	= "&#37;";	//can be: kg, miles, km, etc. in this example this is the code for %  
$space_b_bars = "";	//distance between bars
	
$grafic -> set_bar($bars,  $space_b_bars, $height, $units);

$title 			= "Browser Statistics for the last six months"; //the title of the chart. will be displayed at the top
$title_style	= array("style" => "padding: 5px; font-family : Arial; font-size : 28px; font-weight : bold; color : #dd1212;	text-align : center; text-transform: uppercase; margin-bottom: 10px;");
$info 			= "*source:<br/> W3 Schools, Click <a href ='http://www.w3schools.com/browsers/browsers_stats.asp' style = 'color: #069' target='_blank' >here</a> to visit the page.";
$info_style		= "";
$number_of_gridlines = 5;


$grafic -> chart_settings($title, $title_style, $info, $info_style, $number_of_gridlines);


$data = array(	"January 2011" => array("Internet Explorer"	=> "26.60" ,
										"Firefox"			=> "42.80" ,
										"Google Chrome"		=> "23.80",
										"Safari"			=> "4.00",
										"Opera"				=> "2.50"
									),
				"December 2010" => array("Internet Explorer"=> "27.50" ,
										"Firefox"			=> "43.50" ,
										"Google Chrome"		=> "22.40",
										"Safari"			=> "3.80",
										"Opera"				=> "2.20"
									),
				"November 2010" => array("Internet Explorer"=> "28.60" ,
										"Firefox"			=> "44.00" ,
										"Google Chrome"		=> "20.50",
										"Safari"			=> "4.00",
										"Opera"				=> "2.30"
									),
									
				"October 2010"  => array("Internet Explorer"=> "29.70" ,
										"Firefox"			=> "44.10" ,
										"Google Chrome"		=> "19.20",
										"Safari"			=> "3.90",
										"Opera"				=> "2.20"
									),
									
				"September 2010"=> array("Internet Explorer"=> "31.10" ,
										"Firefox"			=> "45.10" ,
										"Google Chrome"		=> "17.30",
										"Safari"			=> "3.70",
										"Opera"				=> "2.20"
									),

				"August 2010"  => array("Internet Explorer"	=> "30.70" ,
										"Firefox"			=> "45.80" ,
										"Google Chrome"		=> "17.00",
										"Safari"			=> "3.50",
										"Opera"				=> "2.30"
									)			
						);
	
$reverse		= FALSE;	//show the data in reverse order
$show_legend	= TRUE;		//show the legend for this chart
$show_percentage= FALSE;	//show percentage for every item
$show_h_grid	= TRUE;		//show horizontal grid
$show_scale		= TRUE;		//show scale at the bottom of the chart
$max_width		= 700; 		//the width in pixels of the right side of the chart for the value of $scale 
$scale			= 100;		//maximum value on the scale


$grafic -> graph($data, $reverse, $show_legend, $show_percentage, $show_h_grid, $show_scale, $max_width, $scale);
$style = array("style" => "width: 950px; border: 5px solid #3B3B3B;");
$example_1 = $grafic -> output($style);







/*
==========================EXAMPLE TWO===================
*/
$grafic = new bar_chart();

$bars	= array(	"Facebook"			=> "#3B5998" ,
					"Youtube"			=> "#FF3333" ,
					"Yahoo"				=> "#7B0099",
					"Live.com"			=> "#4C93DA",
					"Wikipedia"			=> "#515151",
					"msn.com"			=> "#009AD9"
					);
					
					
$height			= "40px"; 		//the height of the bars. must include "px"
$units			= "million";	//can be: kg, miles, km, etc. in this example this is the code for %  
$space_b_bars 	= "5px";		//distance between bars
					
$grafic -> set_bar($bars, $space_b_bars, $height, $units);


$title 			= "Top Sites - Unique Visitors"; //the title of the chart. will be displayed at the top
$title_style	= array("style" => "padding: 5px; font-family : Arial; font-size : 28px; font-weight : bold; color : #dd1212;	text-align : center; text-transform: uppercase; margin-bottom: 10px;");
$info 			= "*source:<br/> Google, Click <a href ='http://www.google.com/adplanner/static/top1000/index.html' style = 'color: #069' target='_blank' >here</a> to visit the page.";
$info_style		= "";
$number_of_gridlines = 5;


$grafic -> chart_settings($title, $title_style, $info, $info_style, $number_of_gridlines);

$data = array(	"Year 2010" => array("Facebook"	=> "590",
									"Live.com"	=> "330", 
									"msn.com" 	=> "250", 
									"Yahoo"		=> "400",
									"Youtube"	=> "490",
									"Wikipedia"	=> "260")
															
									);
				

$reverse		= FALSE;	//show the data in reverse order
$show_legend	= TRUE;		//show the legend for this chart
$show_percentage= TRUE;		//show percentage for every item
$show_h_grid	= FALSE;	//show horizontal grid 
$show_scale		= TRUE;		//show scale at the bottom of the chart
$max_width		= 750; 		//the width (in pixels) of the right side of the chart for the value of $scale 
$scale			= 700;		//maximum value on the scale

$grafic -> graph($data, $reverse, $show_legend, $show_percentage, $show_h_grid, $show_scale, $max_width, $scale);
$style = array("style" => "width: 980px; border: 5px solid #1A5194;");
$example_2 = $grafic -> output($style);





/*
==========================EXAMPLE THREE===================
*/
$grafic = new bar_chart();

$bars	= array("Google Chrome"	=> "#2BAA33");
$height	= "20px"; 	//the height of the bars. must include "px"
$units	= "&#37;";	//can be: kg, miles, km, etc. in this example this is the code for %  
					
$grafic -> set_bar($bars,  "", $height, $units);


$title 			= "Google Chrome - Market Share"; //the title of the chart. will be displayed at the top
$title_style	= array("style" => "padding: 5px; font-family : Arial; font-size : 28px; font-weight : bold; color : #dd1212;	text-align : center; text-transform: uppercase; margin-bottom: 10px;");
$info 			= "*source:<br/> W3 Schools, Click <a href ='http://www.w3schools.com/browsers/browsers_stats.asp' style = 'color: #069' target='_blank' >here</a> to visit the page.";
$info_style		= "";
$number_of_gridlines = 5;

$grafic -> chart_settings($title, $title_style, $info, $info_style, $number_of_gridlines);

$data = array(	"January 2011"	=> array("Google Chrome"	=> "23.80"),
				"December 2010" => array("Google Chrome"	=> "22.40"),
				"November 2010" => array("Google Chrome"	=> "20.50"),
				"October 2010"  => array("Google Chrome"	=> "19.20"),
				"September 2010"=> array("Google Chrome"	=> "17.30"),
				"August 2010"	=> array("Google Chrome"	=> "17.00"),			
				"July 2010"		=> array("Google Chrome"	=> "16.70"),			
				"June 2010"		=> array("Google Chrome"	=> "15.90"),			
				"May 2010"		=> array("Google Chrome"	=> "14.50"),			
				"April 2010"	=> array("Google Chrome"	=> "13.60"),			
				"March 2010"	=> array("Google Chrome"	=> "12.30"),			
				"February 2010"	=> array("Google Chrome"	=> "11.60"),			
				"January 2010"	=> array("Google Chrome"	=> "10.80"));
				

$reverse		= FALSE;	//show the data in reverse order
$show_legend	= False;	//show the legend for this chart
$show_percentage= FALSE;		//show percentage for every item
$show_h_grid	= FALSE;	//show horizontal grid
$show_scale		= FALSE;	//show scale at the bottom of the chart
$max_width		= 950; 	//the width in pixels of the right side of the chart for the value of $scale 
$scale			= 50;		//maximum value on the scale

$grafic -> graph($data, $reverse, $show_legend, $show_percentage, $show_h_grid, $show_scale, $max_width, $scale);
$style = array("style" => "width: 780px; border: 5px solid #3B3B3B;");
$example_3 = $grafic -> output($style);








/*
==========================EXAMPLE FOUR===================
*/
$grafic = new bar_chart();

$bars	= array(	"Facebook"			=> "#3B5998" ,
					"Youtube"			=> "#FF3333" ,
					"Yahoo"				=> "#7B0099",
					"Live.com"			=> "#4C93DA",
					"Wikipedia"			=> "#515151",
					"msn.com"			=> "#009AD9"
					);
$height			= "40px"; 	//the height of the bars. must include "px"
$units			= "million";	//can be: kg, miles, km, etc. in this example this is the code for %  
$space_b_bars 	= "15px";
					
$grafic -> set_bar($bars, $space_b_bars, $height, $units);


$title 			= "Top Sites - Unique Visitors"; //the title of the chart. will be displayed at the top
$title_style	= array("style" => "padding: 5px; font-family : Arial; font-size : 28px; font-weight : bold; color : #dd1212;	text-align : center; text-transform: uppercase; margin-bottom: 10px;");
$info 			= "*source:<br/> Google, Click <a href ='http://www.google.com/adplanner/static/top1000/index.html' style = 'color: #069' target='_blank' >here</a> to visit the page.";
$info_style		= "";
$number_of_gridlines = 5;


$grafic -> chart_settings($title, $title_style, $info, $info_style, $number_of_gridlines);

$data = array(	"Facebook" => array("Facebook"		=> "590"),
				"Live.com" => array("Live.com"	=> "330"),
				"msn.com"  => array("msn.com" => "250"),
				"Yahoo"	   => array("Yahoo"		=> "400"),
				"Youtube"  => array("Youtube"	=> "490"),
				"Wikipedia"=> array("Wikipedia"	=> "260")
				);
$reverse		= FALSE;	//show the data in reverse order
$show_legend	= FALSE;	//show the legend for this chart
$show_percentage= TRUE;		//show percentage for every item
$show_h_grid	= FALSE;	//show horizontal grid 
$show_scale		= TRUE;		//show scale at the bottom of the chart
$max_width		= 600; 		//the width in pixels of the right side of the chart for the value of $scale 
$scale			= 700;		//maximum value on the scale


$grafic -> graph($data, $reverse, $show_legend, $show_percentage, $show_h_grid, $show_scale, $max_width, $scale);
$style = array("style" => "width: 780px; border: 5px solid #CA0533;");
$example_4 = $grafic -> output($style);


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Bar Chart</title>
</head>

<body>

<h1 style="margin-top: 40px;font-family: arial; border-bottom: 1px solid #069;">EXAMPLE ONE</h1> 
<h2 style="font-family: arial;">Chart with multiple items (August, September ... ) and multiple bars / item (Firefox, Opera ...)</h2>
<h4 style="font-family: arial;">Show Legend = TRUE | Show horizontal Grid = TRUE | Show Scale = TRUE</h4>
<?php echo $example_1; ?> 

<h1 style="margin-top: 40px;font-family: arial; border-bottom: 1px solid #069;">EXAMPLE TWO</h1>
<h2 style="font-family: arial;">Chart with one item (Year 2010) and multiple bars / item (Facebook, Youtube ...)</h2>
<h4 style="font-family: arial;">Show Legend = TRUE | Show horizontal Grid = FALSE | Show Scale = TRUE | Show Percentage = TRUE</h4>
<?php echo $example_2; ?> 

<h1 style="margin-top: 40px;font-family: arial; border-bottom: 1px solid #069;">EXAMPLE THREE</h1>
<h2 style="font-family: arial;">Chart with multiple items (January, February...) and one bar / item</h2>
<h4 style="font-family: arial;">Show Legend = FALSE | Show horizontal Grid = FALSE | Show Scale = FALSE</h4>
<?php echo $example_3; ?> 

<h1 style="margin-top: 40px;font-family: arial; border-bottom: 1px solid #069;">EXAMPLE FOUR</h1>
<h2 style="font-family: arial;">Chart with multiple items (Facebook, Live.com...) and multiple bars(different colors) but only one bar / item used</h2>
<h4 style="font-family: arial;">Show Legend = FALSE | Show horizontal Grid = FALSE | Show Scale = TRUE | Show Percentage = TRUE</h4>
<?php echo $example_4; ?> 


</body>
</html>
Return current item: Horizontal Bar Chart