PHP: Gráfico de Barras com CSS

admin 10 de maio de 201327 de agosto de 2020 8 Comments CSS, gráfico

Aprenda como criar um gráfico de barras, usando PHP e CSS.

— index.php
PHP

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grafico de Barras com CSS</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
  // definindo porcentagem
  $width1 = '28%';
  $width2 = '49%';
  $width3 = '33%';
  $width4 = '13%';
  $total  = 4; // total de barras
?>
<div id="principal">
  <p>Porcentagem de Acessos</p>
  <?php
    for($i=1;$i <= $total;$i++){
	$width = ${'width' . $i};
  ?>
	<div id="barras">
          <div class="barra<?=$i?>" style="width:<?=$width ?>" ><?=$width ?></div>
	</div>
  <?php } ?>
</div>
</body>
</html>

— estilo.css

#principal{
  width:500px;
  height:60px;
  margin-left:10px;
  font-family:Verdana, Helvetica, sans-serif;
  font-size:14px;
}
#barras{
  width:428px;
  height:30px;
  float:left;
  margin: 2px 0;
}
.barra1, .barra2, .barra3, .barra4{ 	
  color:#FFF;
  padding-left:10px;
  height:30px;
  line-height:30px;
}
.barra1{ background-color: #FF0000; }
.barra2{ background-color: #0000FF; }
.barra3{ background-color: #FF6600; }
.barra4{ background-color: #009933; }

RESULTADO

8 thoughts on “PHP: Gráfico de Barras com CSS”

Pedro

22 de outubro de 2013 em 23:07

Olá notei que as barras aumentam com porcentagem, como eu faria pra que ela aumentasse com números vindo do bd, mas números normais?

Abs,
Resposta
Pierre Boschetto

27 de setembro de 2016 em 8:35

Muito bom! Um dos melhores sites que já tive a oportunidade de conhecer, agregando conhecimento na vida dos iniciantes e mais experientes programadores! Parabéns!
Resposta
Lila Lima

11 de maio de 2018 em 6:57

E seu quiser a barra do gráfico na vertical ?
Resposta
renan

29 de novembro de 2019 em 14:38

perfeito, simples e funcional!
teria como deixar eles na vertical ? eu vou tentar criar alguma condição para que ela mude de cor de acordo com a porcentagem, mas a parte de deixar vertical eu nao sei.

obrigado
Resposta
- Tiago
  
  17 de dezembro de 2019 em 14:07
  
  Renan,
  
  Criei um post explicando como criar um gráfico de barras na vertical. Acesse aqui!
  Resposta
Sergio Renato

14 de dezembro de 2019 em 8:48

Ola..
Deu erro…

Porcentagem de Acessos

( ! ) Notice: Undefined variable: i in C:\wamp64\www\PHP\Barras\index.php on line 23 Call Stack #TimeMemoryFunctionLocation 10.0080401944{main}( )…\index.php:0 ” style=”width:
( ! ) Notice: Undefined variable: width in C:\wamp64\www\PHP\Barras\index.php on line 23
Call Stack
# Time Memory Function Location
1 0.0080 401944 {main}( ) …\index.php:0
” >
( ! ) Notice: Undefined variable: width in C:\wamp64\www\PHP\Barras\index.php on line 23
Call Stack
# Time Memory Function Location
1 0.0080 401944 {main}( ) …\index.php:0
Resposta
Sergio Renato Steglich

14 de dezembro de 2019 em 8:50

Olá…
Deu um erro…

Porcentagem de Acessos

( ! ) Notice: Undefined variable: i in C:\wamp64\www\PHP\Barras\index.php on line 23 Call Stack #TimeMemoryFunctionLocation 10.0080401944{main}( )…\index.php:0 ” style=”width:
( ! ) Notice: Undefined variable: width in C:\wamp64\www\PHP\Barras\index.php on line 23
Call Stack
# Time Memory Function Location
1 0.0080 401944 {main}( ) …\index.php:0
” >
( ! ) Notice: Undefined variable: width in C:\wamp64\www\PHP\Barras\index.php on line 23
Call Stack
# Time Memory Function Location
1 0.0080 401944 {main}( ) …\index.php:0
Resposta
- Tiago
  
  17 de dezembro de 2019 em 10:13
  
  Fala Sergio,
  
  Veja se o wampp está configurado para suportar a forma simplificada do php ( Resposta

Você pode gostar também

PHP: Removendo ponto, traço e barra de CPF ou CNPJ

PHP: $_SERVER[‘PHP_SELF’] Remover conteúdo da URL

Dica de Site: Flexbox – Gerador de Layout

8 thoughts on “PHP: Gráfico de Barras com CSS”

Deixe um comentário Cancelar resposta