CRIAÇÃO
DE GRÁFICOS
Gráfico
é uma representação geométrica de um determinado conteúdo. Pode,
por exemplo, se referir à representação do resultado de uma
pesquisa por meio de linhas ou figuras.
Existem
diferentes tipos de gráficos como:
· Barras
horizontais;
· Barras
verticais;
· Pizza;
· Linhas.
Para
montar um gráfico, o primeiro passo, portanto, é escolher o tipo de
gráfico. Após isso atentar para elementos que são importantes à
sua leitura, ou seja, elementos que facilitem o entendimento do
gráfico. Dentre esses elementos destacam-se:
· Título
do gráfico;
· Descrição
das partes;
· Legenda;
· Valores
ou porcentagens;
· Notas
de rodapé;
TÍTULO
DO GRÁFICO
O
título é imprescindível, pois sintetiza o conteúdo do gráfico.
Ele deve ser claro e direto, fazendo com que o leitor possa
rapidamente saber com que objetivo o gráfico foi criado.
DESCRIÇÃO
DAS PARTES (RÓTULOS)
Um
gráfico pode ser constituído de diversas partes, por exemplo,
setores ou barras, onde cada parte representa a proporção exata de
dados levantados em uma determinada pesquisa. Para que o gráfico
tenha sentido é preciso descrever o significado das partes, ou
seja atribuir um rótulo para cada parte.
LEGENDA
Ao
se criar um gráfico, as partes podem ter diferentes cores. A legenda
nada mais é do que uma explicação dos significados dessas cores.
Nem sempre é necessária, pois em muitas situação se
torna uma informação redundante.
VALORES
E PORCENTAGENS
São
essenciais, pois detalham, matematicamente, as partes do gráfico.
Podem ser inteiros ou percentuais. Para o cálculo percentual, basta
utilizar a formula:
Percentual
= parte * 100 / total;
Onde
total, refere-se ao total de pessoas entrevistadas, parte, refere-se
a cada barra ou setor do gráfico.
NOTAS
DE RODAPÉ
Refere-se
a uma descrição da fonte dos dados esboçados no gráfico. Exemplo:
“Pesquisa realizada na cidade de Loanda/PR acerca da qualidade
da água, totalizando 100 entrevistados”.
CRIANDO
UM GRÁFICO COM JAVASCRIPT E HTML
O
primeiro passo para a criação do gráfico é possibilitar, via
programação, a coleta dos dados necessários. Isso pode ser feito
por meio de formulários HTML ou do comando javascript “prompt”.
EXEMPLO
DE CRIAÇÃO DE GRÁFICO COM O COMANDO JAVASCRIPT PROMPT
Em
um arquivo texto chamado gráfico.htm, digite o seguinte código.
<script>
//
DEFINICAO DE VARIAVEIS E COLETA DE DADOS
var titulo
= prompt("TITULO DO GRAFICO");
titulo =
titulo.toUpperCase(); // CONVERTENDO PARA LETRAS MAIUSCULAS
var r1
= prompt("ROTULO DA PRIMEIRA BARRA"); // ROTULO 1
var barra1
= prompt("VALOR DA PRIMEIRA BARRA");
var r2
= prompt("ROTULO DA SEGUNDA BARRA"); // ROTULO 2
var barra2
= prompt("VALOR DA SEGUNDA BARRA");
var rodape = prompt("NOTA
DE RODAPE");
//
TABULACAO DE VALORES PARA CALCULOS PERCENTUAIS
var total
= Math.abs(barra1) + Math.abs(barra2);
var p1
= barra1 * 100 / total; // PERCENTUAL 1
var p2
= barra2 * 100 / total; // PERCENTUAL 2
var p1
= Math.round(p1); // ARREDONDANDO NUMERO PARA INTEIRO
var p2
= Math.round(p2); // ARREDONDANDO NUMERO PARA INTEIRO
//GERACAO
DO GRAFICO UTILIZANDO OS DADOS COLETADOS
document.write("<b><p>",titulo,"<p>");
document.write("<table>");
document.write("<tr><td bgcolor=blue width=2",p1,"></td><td>",r1,"
(",p1,"%)</td></tr>");
document.write("</table>");
document.write("<table>");
document.write("<tr><td bgcolor=red width=2",p2,"></td><td>",r2,"
(",p2,"%)</td></tr>");
document.write("</table>");
document.write("<P>",rodape);
</script>
|
No
exemplo dado temos um programa que gera um gráfico simples, que
mostra apenas duas situações possíveis. Teste o programa
informando os seguintes dados:
· TITULO
DO GRÁFICO = GRAFICO DE APROVAÇÕES E REPROVAÇÕES;
· RÓTULO
DA PRIMEIRA BARRA = alunos aprovados;
· VALOR
DA PRIMEIRA BARRA = 26;
· RÓTULO
DA SEGUNDA BARRA = alunos reprovados;
· VALOR
DA SEGUNDA BARRA = 9;
· NOTA
DE RODAPÉ = Alunos aprovados e reprovados no 1º Técnico de
Informática do Colégio Paraná no ano de 2013, período matutino;
RESULTADO
DO GRÁFICO
GRAFICO
DE APROVAÇÕES E REPROVAÇÕES
Alunos
aprovados e reprovados no 1º Técnico de Informática do Colégio
Paraná no ano de 2013, período matutino.
|