DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Page Used To Dynamically Create A Graph In Javascript Using The JqPlot Library

07.08.2009
| 8121 views |
  • submit to reddit
        
<?php

session_start();

$return_to_root_page	= '../../';

require($return_to_root_page.'Connections/mysql.php');
require($return_to_root_page.'Connections/globalFunctions.php');
require($return_to_root_page.'classes/audit.class.php');
require($return_to_root_page.'Connections/mdyscript.php');

$unacceptable_rating_variable	= 10;
$some_dev_rating_variable	= 30;
$meeting_rating_variable        = '';
$ee_rating_variable	        = 10;
$ep_rating_variable	        = 5;

$reporting_level	= $_GET['reporting_level'];
$day_from		= 1;
$month_from		= $_GET['month_from'];
$year_from		= $_GET['year_from'];
$day_to			= 28;
$month_to		= $_GET['month_to'];
$year_to		= $_GET['year_to'];
$contact_type		= $_GET['contact_type'];
$remonitor		= $_GET['remonitor'];
$contracts		= $_GET['contracts'];
$contract_id		= $_GET['contract_id'];
$section_id		= $_GET['section_id'];
$team			= $_GET['team'];
$media_type 		= $_GET['media_type'];
$contact_type		= $media_type;

$start_timestamp = mktime(00,00,00, $month_from_num, $day_from, $year_from);
$end_timestamp   = mktime(23,59,59, $month_to_num, $day_to, $year_to);

$reporting_period = $pma -> findMonthsAndYearsBetweenTimestamp($start_timestamp, $end_timestamp);

$pma -> createPageHeader($return_to_root_page, false, '» Reports » Performance Tracker');

$contracts_query = "SELECT * FROM contract_data";
$contracts_result= mysql_query($contracts_query);

while($contracts_row = mysql_fetch_array($contracts_result, MYSQL_ASSOC)){
	$contract_details[$contracts_row['contract_id']] = $contracts_row['contract_name'].' | '.$contracts_row['contract_sub_name'];
}

$section_query = "SELECT * FROM section_details";
$section_result= mysql_query($section_query);

while($section_row = mysql_fetch_array($section_result, MYSQL_ASSOC)){
	$section_name[$section_row['idpk']] = $section_row['section'];
}


?>
<!--[if IE]><script language="javascript" type="text/javascript" src="<?php echo $return_to_root_page; ?>js_jQplot/excanvas_r3/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9dGV4dC9qYXZhc2NyaXB0+/excanvas.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="<?php echo $return_to_root_page; ?>js_jQplot/jquery.jqplot.css" />
<script language="javascript" type="text/javascript" src="<?php echo $return_to_root_page; ?>js_jQplot/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9dGV4dC9qYXZhc2NyaXB0+/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $return_to_root_page; ?>js_jQplot/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9dGV4dC9qYXZhc2NyaXB0+/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $return_to_root_page; ?>js_jQplot/plugins/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9dGV4dC9qYXZhc2NyaXB0+/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $return_to_root_page; ?>js_jQplot/plugins/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9dGV4dC9qYXZhc2NyaXB0+/jqplot.categoryAxisRenderer.js"></script>
<style type="text/css" media="screen">
* {
	color: 				#333333;
	font-family: 		"lucida grande", tahoma, verdana, arial, sans-serif;
}

.jqplot-axis {
	font-size: 0.70em;
}
.jqplot-legend {
	margin-top: 	-5px;
	margin-left: 	370px;
	font-size: 		1.10em;
	font-weight: 	bold;
}

.jqplot-title {
	font-weight: bold;
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
	
	<?php

	foreach($contracts as $contract_id){
	
		echo 'var curr_contract_'.$contract_id.' = "'.$contract_details[$contract_id].'";
		';
		
		$line_1_string[$contract_id] = 'line1_'.$contract_id.' = [';
		$line_2_string[$contract_id] = 'line2_'.$contract_id.' = [';
		$line_3_string[$contract_id] = 'line3_'.$contract_id.' = [';
		$line_4_string[$contract_id] = 'line4_'.$contract_id.' = [';
		$line_5_string[$contract_id] = 'line5_'.$contract_id.' = [';
		
		$reporting_period_size = count($reporting_period);
				
		$iteration = 1;
		
		$data_ticks = '';
		
		foreach($reporting_period as $current_month_and_year){
		
			$current_iteration = $iteration++;
		
			$current_date = explode(",", $current_month_and_year);
			
			$curr_month = $current_date[0];
			$curr_year  = $current_date[1];
		
			$U_query = "SELECT * FROM cc_scores WHERE month = '".$curr_month."' AND year = '".$curr_year."' AND contract_id = ".$contract_id." AND answer = 1";
			$U_result= mysql_query($U_query);
			$U_num   = mysql_num_rows($U_result);
			
			$SDN_query = "SELECT * FROM cc_scores WHERE month = '".$curr_month."' AND year = '".$curr_year."' AND contract_id = ".$contract_id." AND answer = 2";
			$SDN_result= mysql_query($SDN_query);
			$SDN_num   = mysql_num_rows($SDN_result);
			
			$ME_query = "SELECT * FROM cc_scores WHERE month = '".$curr_month."' AND year = '".$curr_year."' AND contract_id = ".$contract_id." AND answer = 3";
			$ME_result= mysql_query($ME_query);
			$ME_num   = mysql_num_rows($ME_result);
			
			$EE_query = "SELECT * FROM cc_scores WHERE month = '".$curr_month."' AND year = '".$curr_year."' AND contract_id = ".$contract_id." AND answer = 4";
			$EE_result= mysql_query($EE_query);
			$EE_num   = mysql_num_rows($EE_result);
			
			$EP_query = "SELECT * FROM cc_scores WHERE month = '".$curr_month."' AND year = '".$curr_year."' AND contract_id = ".$contract_id." AND answer = 5";
			$EP_result= mysql_query($EP_query);
			$EP_num   = mysql_num_rows($EP_result);
			
			$TOTAL_query = "SELECT * FROM cc_scores WHERE month = '".$curr_month."' AND year = '".$curr_year."' AND contract_id = ".$contract_id."";
			$TOTAL_result= mysql_query($TOTAL_query);
			$TOTAL_num   = mysql_num_rows($TOTAL_result);
			
			@$U_perc_num	= $U_num / $TOTAL_num * 100;
			@$SDN_perc_num	= $SDN_num / $TOTAL_num * 100;
			@$ME_perc_num	= $ME_num / $TOTAL_num * 100;
			@$EE_perc_num	= $EE_num / $TOTAL_num * 100;
			@$EP_perc_num	= $EP_num / $TOTAL_num * 100;
			
			if($current_iteration < $reporting_period_size){
				$line_1_string[$contract_id] .= $U_perc_num.',';
				$line_2_string[$contract_id] .= $SDN_perc_num.',';
				$line_3_string[$contract_id] .= $ME_perc_num.',';
				$line_4_string[$contract_id] .= $EE_perc_num.',';
				$line_5_string[$contract_id] .= $EP_perc_num.',';
			}else{
				$line_1_string[$contract_id] .= $U_perc_num;
				$line_2_string[$contract_id] .= $SDN_perc_num;
				$line_3_string[$contract_id] .= $ME_perc_num;
				$line_4_string[$contract_id] .= $EE_perc_num;
				$line_5_string[$contract_id] .= $EP_perc_num;
			}
			
			$data_ticks .= '"'.substr($curr_month, 0, 3).' '.substr($curr_year, 2).'",';
			
		}
		
		substr_replace($data_ticks ,"",-1);
		
		$line_1_string[$contract_id] .= '];';
		$line_2_string[$contract_id] .= '];';
		$line_3_string[$contract_id] .= '];';
		$line_4_string[$contract_id] .= '];';
		$line_5_string[$contract_id] .= '];';
	
	}
	
	foreach($contracts as $contract_id){
	?>
	
	<?php echo $line_1_string[$contract_id]; ?>
	
	<?php echo $line_2_string[$contract_id]; ?>
	
	<?php echo $line_3_string[$contract_id]; ?>
	
	<?php echo $line_4_string[$contract_id]; ?>
	
	<?php echo $line_5_string[$contract_id]; ?>
	
		plot<?php echo $contract_id; ?> = $.jqplot('chart<?php echo $contract_id; ?>', [line1<?php echo '_'.$contract_id; ?>, line2<?php echo '_'.$contract_id; ?>, line3<?php echo '_'.$contract_id; ?>, line4<?php echo '_'.$contract_id; ?>, line5<?php echo '_'.$contract_id; ?>], {
			stackSeries: true,
			legend: {
				show: true,
				location: 'nw',
				xoffset: 5,
				yoffset: 5
			},
			title: curr_contract_<?php echo $contract_id; ?>,
			seriesDefaults: {
				renderer: $.jqplot.BarRenderer,
				rendererOptions: {
					barPadding: 2,
					barMargin: 40
				}
			},
			series: [{
				label: 'U',
				color: '#C90404'
			},
			{
				label: 'SDN',
				color: '#FFF1A2'
			},
			{
				label: 'ME',
				color: '#FFFFFF'
			},
			{
				label: 'EE',
				color: '#C9F1B9'
			},
			{
				label: 'EP',
				color: '#3CAF00'
			}],
			axes: {
				xaxis: {
					ticks: [<?php echo $data_ticks; ?>],
					renderer: $.jqplot.CategoryAxisRenderer,
						rendererOptions: {
						tickRenderer: $.jqplot.CanvasAxisTickRenderer,
						tickOptions: {
							formatString: '%b %#d, %Y',
							fontSize: '7pt',
							fontFamily: 'Tahoma',
						}
					},
				},
				yaxis: {
					min: 0, 
					max: 100,
					numberTicks:11,
					tickOptions: {
						formatString: '%.0f%',
						fontSize: '7pt',
						fontFamily: 'Tahoma'
					}
				}
			}
		});
	<?php } ?>
});
  </script>
  </head>
  <body>
  <?php echo $pma -> application_title; ?>
	<?php
	foreach($contracts as $contract_id){
	?>
		<div id="chart<?php echo $contract_id; ?>" style="margin-top:20px; margin-left:20px; width:400px; height:400px;"></div>
    <?php
	}
	?>
  </body>
</html>