phpsvfchart.php

<?php
$data = array(
	array('Mon',30,'title a','link a'),
	array('Tue',15,'title b','link b'),
	array('Wed',40,'title c','link c'),
	array('Thu',25,'title d','link d'),
	array('Fri',50,'title e','link e'),
	array('Sat',35,'title f','link f'),
	array('Sat',35,'title f','link f'),
	array('Mon',20,'title a','link h')
);
function psvg($data,$name='',$width='',$height=''){
	$output = $offset = $count = array();
	$r = $tnum = '';
	$size = array('x'=>'720','y'=>'240');
	if($width>300) $size['x'] = $width;
	if($height>120) $size['y'] = $height;
	$zero = array('x'=>'20','y'=>'');
	if(empty($name)) $zero['y'] = $zero['x'];
	else $zero['y'] = 30;
	$main = array('x'=>$size['x']-2*$zero['x'],'y'=>$size['y']-$zero['y']-$zero['x']);
	$axis = array('left'=>$zero['x']-10,'bottom'=>$zero['y']+15+$main['y']);
	$count['x'] = count($data)-1;
	$offset['x'] = ceil($main['x']/$count['x']);
	$max = $tnum = 0;
	foreach($data as $d){
		if($d[1]>$max) $max = $d[1];
	}
	$count['y'] = 5;
	$offset['y'] = ceil($main['y']/$count['y']);
	$tnum = ceil($max/$count['y']);
	$tnum = ceil($tnum/5)*5;
	$max = $tnum*$count['y'];
	for($i=0;$i<=$count['x'];$i++){
		$names['x'][$i] = array('x'=>$axis['bottom'],'y'=>($zero['x']+$main['x']-$i*$offset['x']),'name'=>$data[($count['x']-$i)][0]);
		if($names['x'][$i]['y']<$zero['x']) $names['x'][$i]['y'] = $zero['x'];
	}
	for($i=$count['y'];$i>=0;$i--){
		$names['y'][$i] = array('x'=>$axis['left'],'y'=>($zero['y']+$main['y']-$i*$offset['y']),'name'=>$tnum*$i);
	}
	foreach(array_keys($data) as $k){
		$tx = $ty = 0;
		$tx = $count['x']-$k;
		$ty = $zero['y']+$main['y']-ceil(($data[$k][1]/$max)*$main['y']);
		$names['p'][$k] = array('x'=>$names['x'][$tx]['y'],'y'=>$ty,'name'=>$data[$k][2],'link'=>$data[$k][3]);
	}
	foreach(array_keys($names['x']) as $k){
		$k = $count['x']-$k;
		$t = $names['x'][$k];
		$output['x'][$k] = '<text x="'.$t['y'].'" y="'.$t['x'].'">'.$t['name'].'</text>';
	}
	foreach(array_keys($names['y']) as $k){
		$k = $count['y']-$k;
		$t = $names['y'][$k];
		$output['y'][$k] = '<text x="'.$t['x'].'" y="'.($t['y']+2).'">'.$t['name'].'</text>';
	}
	foreach(array_keys($names['p']) as $k){
		$t = $names['p'][$k];
		$output['p'][$k] = '<a xlink:href="'.$t['link'].'" xlink:title="'.$t['name'].'"><use x="'.$t['x'].'" y="'.$t['y'].'" xlink:href="#link" /></a>';
	}
	$output['gird'] = $output['back'] = $output['line'] = '';
	foreach(array_keys($names['y']) as $k){
		$t = $names['y'][$k];
		$output['gird'] = ' '.$t['y'].'h'.$main['x'].'M'.$zero['x'].$output['gird'];
	}
	$output['gird'] = 'M'.$zero['x'].$output['gird'];
	foreach(array_keys($names['x']) as $k){
		$t = $names['x'][$k];
		$output['gird'].= ' '.$zero['y'].'v'.$main['y'].'M'.$t['y'];
	}
	$output['back'] = 'M'.$zero['x'].' '.($zero['y']+$main['y']).'L';
	foreach(array_keys($names['p']) as $k){
		$t = $names['p'][$k];
		$output['back'].= $t['x'].' '.$t['y'].' ';
		$output['line'].= $t['x'].' '.$t['y'].' ';
	}
	$output['gird'] = $output['gird'].' '.$zero['y'].'v'.$main['y'];
	$output['back'].='L'.($zero['x']+$main['x']).' '.($zero['y']+$main['y']).'z';
	$output['line'] = 'M'.$output['line'];
	$output['xaxis'] = 'M'.($zero['x']-2).' '.($zero['y']+$main['y']).'h'.($main['x']+4);
	$output['yaxis'] = 'M'.$zero['x'].' '.($zero['y']-2).'v'.($main['y']+4);
	$r.= '<svg width="'.$size['x'].'" height="'.$size['y'].'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">'."\r\n";
	$r.= '<defs>'."\r\n";
	$r.= '<clipPath id="main"><rect x="'.$zero['x'].'" y="'.$zero['y'].'" width="'.$main['x'].'" height="'.$main['y'].'" /></clipPath>'."\r\n";
	$r.= '<symbol><circle id="link" cursor="pointer" stroke="#ff9900" stroke-width="1.5" fill="#ffffff" r="5" /></symbol>'."\r\n";
	$r.= '<linearGradient id="back" x1="0" x2="0" y1="0" y2="100%"><stop offset="0%" stop-color="#f3f8fa" /><stop offset="100%" stop-color="#BCDEEF" /></linearGradient>'."\r\n";
	$r.= '</defs>'."\r\n";
	$r.= '<rect width="100%" height="100%" fill="#FFFFFF" stroke-width="0" />'."\r\n";
	if(!empty($name)) $r.= '<text font-size="15px" text-anchor="middle" fill="#333333" x="'.($main['x']/2+$zero['x']).'" y="'.($zero['y']/2).'">'.$name.'</text>'."\r\n";
	$r.= '<g clip-path="url(#main)">'."\r\n";
	$r.= '<path stroke="none" fill="url(#back)" d="'.$output['back'].'" />'."\r\n";
	$r.= '<path stroke="#FF9900" fill="none" stroke-width="1.5" d="'.$output['line'].'" />'."\r\n";
	$r.= '</g>'."\r\n";
	$r.= '<path d="'.$output['gird'].'" stroke="#b3b3b3" stroke-dasharray="5,5" stroke-width="0.5" />'."\r\n";
	$r.= '<g stroke-width="1" stroke="#A0A0A0">'."\r\n";
	$r.= '<path d="'.$output['xaxis'].'" />'."\r\n";
	$r.= '<path d="'.$output['yaxis'].'" />'."\r\n";
	$r.= '</g>'."\r\n";
	$r.= '<g font-size="12px" fill="#777777">'."\r\n";
	$r.= '<g text-anchor="end">'."\r\n".implode("\r\n",$output['y'])."\r\n";
	$r.= '</g>'."\r\n";
	$r.= '<g text-anchor="middle">'."\r\n".implode("\r\n",$output['x'])."\r\n";
	$r.= '</g>'."\r\n";
	$r.= '</g>'."\r\n".implode("\r\n",$output['p'])."\r\n";
	$r.= '</svg>'."\r\n";
	return $r;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ramkumar Ramachandra Timeline</title>
</head>
<body>
<?php echo psvg($data); ?>
</body>
</html>