Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

xikoo

[Resolvido] Barra de Porcentagem

Recommended Posts

Olá gostaria de uma ajudinha pq não sei mais ou menos por onde começar :D

eu vou pegar os resultados de uma tabela, e vou transformar eles em porcentagem

eu tenho que criar uma barra de porcentagem para quando for mostrar os resultados depois no detalhamento exemplo

100% a barra cheia

0% a barra vazia

50% a barra na metade e etc.

 

eu li algo do tipo:

 

<img src="barramidle.gif" width="<%=resultado%>%" height="10">

mas não tenho esse arquivo, nem achei algo parecido na net, se puderem dar uma forcinha :D

queria saber também se teria como fazer as barras em horizontal ou vertical, se isso depende do código ou de algum arquivo exemplo esse de cima que vai ser usado para eu apresentar das duas formas pro chefe escolher

Gratz []'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como valor numérico mesmo

vou criar uma lógica pra obter o número em porcentagem que é fácil

iria pegar a quantidade de horas que tiveram no mês pesquisado

e diminuir pelo numero de horas de ocorrência que o aplicativo ficou fora do ar

e mostrar uma barra de porcentagem de quanto tempo no mês ou período pesquisado o aplicativo ficou no ar

 

falando nisso se tiver alguma função que calcule a quantidade de horas de um período pesquisado considerando 1 dia = 24:00:00 ficaria grato tb

se o cara pesquisasse sei lá de 01/03/2009 até 31/03/2009

mostraria a porcentagem que o aplicativo ficou no ar, pegando esse total de horas e diminuindo pelo de ocorrências

 

numa primeira página eu pego a data inicial e final da pesquisa

na página seguinte eu mostro os resultados desse intervalo de tempo

vlw

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tente assim:

<div style="background-color: #FF0000; width:<%=resultado%>%; height=10px;"></div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

olha este exemplo:

 

<%
'---------------------Values-----------------
Dim Title(7) 'Grupo título, poderá ter tags HTML
Title(1) = "Graph 1"
Title(2) = "Graph 2"
Title(3) = "Graph 3"
Title(4) = "Graph 4"
Title(5) = "Graph 5"
Title(6) = "Graph 6"
Title(7) = "Graph 7"

Dim Values(7, 4)
Dim i(7, 4) 'i
i(1, 1) = 50000 
i(1, 2) = 45000
i(1, 3) = 45000
i(2, 1) = 50000
i(2, 2) = 45000
i(2, 3) = 45000
i(3, 1) = 40000
i(3, 2) = 35000
i(3, 3) = 45000
i(4, 1) = 30000
i(4, 2) = 25000
i(4, 3) = 45000
i(5, 1) = 20000
i(5, 2) = 15000
i(5, 3) = 45000
i(6, 1) = 10000
i(6, 2) = 5000
i(6, 3) = 45000
i(7, 1) = 50000
i(7, 2) = 30000
i(7, 3) = 45000


Maxvalue = 50000
TopPadding = 30
SidePadding = 100
GroupPadding = 91
BarPadding = 20
Barwidth = 30
LineLengths = 83
'---------Advanced-----------------------------

NumGroups = 6 'Deve ser igual ou inferior a i (x, 3)
		 'Deve ser igual ou inferior ao título (x)
		 'Deve atribuir valores

NumBars = 2  'Deve ser igual ou inferior a i (6, x)
		 'Deve ter cor (de 1 a numbars). Gif 
		 'Deve atribuir valores
%>

<HTML>
<HEAD>
<!--Posicionamento------------------------------------------------------------------------------------------------>
<%
'Conversões de valores em porcentagens, e depois para um valor entre 0 e 400------------------------------------
for x = 1 to numgroups
for a = 1 to numbars
i(x, a) = ((i(x, a) / Maxvalue) * 400) \ 1 
next
next

'Bars-----------------------------------------------------------------------------------------------------------
t = 0
PosLeft = SidePadding
For x = 1 to numgroups
For a = 1 to numbars
t = t + 1 
%>

<STYLE TYPE="text/css">
<!--
.Bargraph<%=t%> {
	position:absolute;
	<%if i(x, a) > 10 then%>
	top:<%=(400 - i(x, a) + TopPadding)%>px;
	<%else%>	
	top:<%=(400 - i(x, a) - (13 - i(x, a)) + TopPadding)%>px;
	<%end if%>
	left:<%=PosLeft%>px;
	z-index:2;
	visibility:visible;
	font: 10pt MS Comic Sans,arial,sans-serif;
	}
-->
</STYLE>
<!--Labels ---------------------------------------------------------------------------------->
<% If a = 1 then
t = t + 1
%>
<STYLE TYPE="text/css">
<!--
.Bargraph<%=t%> {
	position:absolute;
	top:<%=400 + 15 + TopPadding%>px;
	left:<%=PosLeft%>px;
	z-index:2;
	visibility:visible;
	font: 10pt MS Comic Sans,arial,sans-serif;
	}

-->
</STYLE>
<% End If
'--End Labels---------------------------------------------------------------------------------------------------
	PosLeft = PosLeft + BarPadding  
	Next
PosLeft = PosLeft - BarPadding
PosLeft = PosLeft + groupPadding
Next

'Tick Marks---------------------------------------------------------------------------------------
text = 9 
for a = 1 to 5
t = t + 1%>

<STYLE TYPE="text/css">
<!--
.Bargraph<%=t%> {
	position:absolute;
	top:<%=((TopPadding - text) + (100 * (5 - a)))%>px;
	left:<%=(10 + Sidepadding - (len(MaxValue) * 15))%>px;
	z-index:2;
	visibility:visible;
	font: 10pt MS Comic Sans,arial,sans-serif;
	}
-->
</STYLE>
<% text = 9
next%>
<!--End -------------------------------------------------------------------------------------------->
</HEAD>
<BODY>


<% t = 0
for x = 1 to numgroups
	for a = 1 to numbars
	t = t + 1
%>

	<DIV CLASS=Bargraph<%=t%>>
	<img src="color<%=a%>.gif" Height=<%=(i(x, a))%>  Alt="<%=Title(x)%>" Width=<%=Barwidth%>>
	</DIV>

<%If a = 1 then
	t = t + 1 %>
	<DIV CLASS=Bargraph<%=t%>>
	<%=Title(x)%>
	</DIV>
<%End If	
 	Next 
Next%>
<% for a = 1 to 5
t = t + 1 %>

<DIV CLASS=Bargraph<%=t%>>
<TT><%=((Maxvalue / 4) * (a - 1))%>
 <%For x = 1 to (LineLengths - len((Maxvalue / 4) * (a - 1)))%>-<%Next%>
</TT>
</DIV>
<%next%>

		
</BODY>
</HTML>

se quiser as imagens me mande um MP

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado galera! O seu exemplo é muito bom xanburzum, funciona como uma beleza, mas eu tenho um limite de banda imposta pelos canais globosat aqui onde trabalho, então o código tem que ser o mais resumido possível pois por aplicação inteira ou página eu tenho um limite bem pequeno, então usei o exemplo do amigo hargon, alterei de width pra height pra barra ficar na vertical.

Tá ótimo

 

valeu []'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

Resolvido então!

 

Acho que é mais ou menos como funcionam aqueles sistemas de enquete com barra...

É tranquilo de fazer mesmo ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.