<?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 = "%"; //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 = "%"; //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>