Need help in using bar graph

phudz · Apr 17, 2018

Mga lodi na expert sa programming at petmalu yung experience sa coding... need ko po ng help ninyo.
Newbie palang ako sa PHP, CSS and HTML. Need ko lang magkaroon ng output na may graph based sa value ng percentage sa data ko.

View attachment 342304

Kaya lang naka-set na kase yung value ng width nyan. Ang gusto ko sanang mangyari, ma-update yung width ng bar graph based sa value ng data ko.

<?php
$con = mysqli_connect('localhost','root','','color');

// Check connection
if (mysqli_connect_errno())
{
echo "Failed to Connect to MYSQL:" .mysqli_connect_errno();
}

mysqli_select_db($con,"color");

$sql="SELECT colorname, colorvalue, ROUND((colorvalue * 100 / (select sum(colorvalue) FROM colorcode)),2) AS colorvote
FROM colorcode";

$result=mysqli_query($con,$sql);

?>

<html>

<head>
<title>My Favorite Primary Color</title>
</head>

<style>
p {
color: red;
}

pb {
line-height: 10px;
background: lightgreen;
width:$perwid%;
}

.bargraph {
list-style: none;
padding-top: 20px;
width:560px;
}

ul.bargraph li {
height: 35px;
color: black;
text-align: left;
font-style: italic;
font-weight:bolder;
font-size: 14px;
line-height: 35px;
padding: 0px 20px;
margin-bottom: 5px;
}

ul.bargraph li.red {
background: red;
width:60%;
}

ul.bargraph li.blue {
background: blue;
width:30%;
}

ul.bargraph li.yellow {
background: yellow;
width:10%;
}

</style>

<body>
<h2>Voting Result</h2>
<table width="300" border="1" cellpadding="2" cellspacing="1">
<tr>
<th><p>Color</p></th>
<th><p>Votes</p></th>
<th><p>Percentage</p></th>
<tr>

<ul class="bargraph">
</ul>

<ul class="bargraph">
<li class="red">RED</li>
<li class="blue">BLUE</li>
<li class="yellow">YELLOW</li>
<li class="xaxis"></li>
</ul>

<?php

while ($row=mysqli_fetch_assoc($result)) {

$perwid = $row['colorvote'];

echo "<tr>";

echo "<td>".$row['colorname']."</td>";

echo "<td>".$row['colorvalue']."</td>";

echo "<td><pb>".$perwid."%</pb></td>";
// echo "<td>".$row['colorvote']."%</td>";

echo "</tr>";

}//end while

?>

</body>
</html>

Yan po yung current code ko. Sana po matulungan nyo ako, hindi ko alam kung pano maa-update yung width ng bar graph based sa value ng percentage (colorvote) ng data ko. Thanks po in advance.

jskhulitz · Apr 17, 2018

Maraming php plugins para makagawa ng graph. Kung hindi ka familiar, or mas gusto mo gumawa ng sarili mo graph, you may test the codes below. Pero kung gusto mo mas mapadali ang trabaho mo, search for graph plugins.

Just copy and paste, then run.

Code:

<style type="text/css">
	span{ display: block; }
	.graphHolder{ display: block; border: 1px solid #d0d0d0; width: 600px; height: 30px; }
	.indiGraph{ display: block; height: 100%; }
</style>
<?php
	// vote values
	$contents = array('Group 1' => array(97, 'red'), 'Group 2' => array(172, 'blue'), 'Group 3' => array(63, 'green'), 'Group 4' => array(125, 'brown'));
	
	// get vote toal
	$total = 0;
	foreach($contents as $key => $content){ $total += $contents[$key][0]; }
	
	foreach($contents as $key => $content){
		$value = $contents[$key][0]; // get value for each record
		$color = $contents[$key][1]; // get color for each record
		$percentage = (($value / $total) * 100 == 0) ? '0.00' : number_format(($value / $total) * 100, 2, '.', ','); // compute for the percentage for each value
		echo '<span>' . $key . ' - ' . $percentage . ' %</span>'; // display the title and the corresponding percentage
		echo '<div class="graphHolder"><div class="indiGraph" style="width: ' . $percentage . '%; background: ' . $color . ';"></div></div>';
		// draw and color the graph
	}
?>

Need help in using bar graph

More options

phudz

Novice

Attachments

jskhulitz

Symbianize Shaman

Similar threads