Análise de Sistemas
Banco de Dados
Computação Gráfica
Diversos
Internet
Lógica
Programação
Redes
Computação
Informática Básica
FrameWorks
Matemática
Cadastre-se
CRIACAO DE GRAFICOS COM JAVASCRIPT


CLUBE DE AUTORES


CLUBE DE AUTORES


AMAZON


CLUBE DE AUTORES


MAGAZINE LUIZA

PHP-GENERATOR

CRIACAO DE GRAFICOS COM JAVASCRIPT

“Há homens que lutam um dia, e são bons; há homens que lutam por um ano, e são melhores; há homens que lutam por vários anos, e são muito bons; há outros que lutam durante toda a vida, esses são imprescindíveis.” (Bertold Brecht)

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 (74%)

alunos reprovados (26%)

Alunos aprovados e reprovados no 1º Técnico de Informática do Colégio Paraná no ano de 2013, período matutino.



WebMaster: PROFESSOR RONI MARCIO FAIS
Formação: Bacharel em Ciência da Computação e Especialista em Administração, Supervisão e Orientação Educacional
E-mail: rmfais@yahoo.com.br


Artigos



Criação de APP online