Gráfico é a tentativa de se expressar visualmente dados ou valores numéricos, de maneiras diferentes, assim facilitando a compreensão dos mesmos. (Wikipedia).

Existem várias formas de gráficos (linha, pizza, colunas, etc)…

Aqui vou demonstrar um exemplo para gerar gráficos de linha para sua aplicação web usando a Biblioteca HighCharts JS. (http://www.highcharts.com/)

Primeiro faça download da biblioteca http://www.highcharts.com/download para esse exemplo utilizei a versão 2.1.4. verifiquei agora está na versão 2.1.6.

Baixado o arquivo, copiei a pasta JS que contém as subpastas adapters, modules, themes e os arquivos highcharts.js e larguei na estrutura da minha aplicação.

Na pasta Adapters encontra-se os js de adaptação (necessários para funcionar os gráficos);

Na pasta Modules encontra-se os js de exportação dos gráficos, tem-se a opções de enviar o gráfico para impressão, ou baixá-lo como imagem nos formatos “.jpg”, “.png”, “.pdf” e “.svg”.

Na pasta Themes encontram-se alguns temas, o desenvolvedor escolhe o tema que quer usar e boa, mais além mostro isso ;) .

Na pasta do HighCharts encontram-se os arquivos de exemplo (Examples).

Eu simplismente copiei a estrutura HTML do line-basic.htm (çou racker) e criei uma página PHP chamada graphic_year.php e larguei o código lá dentro.

A estrutura do JS e possível alteração do tema encontra-se no código abaixo:

<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>

		<!-- 1a) Optional: add a theme file -->
		<!--
			<script type="text/javascript" src="js/themes/gray.js"></script>
		-->

		<!-- 1b) Optional: the exporting module -->
		<script type="text/javascript" src="js/modules/exporting.js"></script>

Como ele trás tudo pronto, verifique que pode-se escolher o tema pelo js… nesse caso usei o /themes/gray.js.

Com isso declarei umas variáveis em PHP. e passei os valores para o JS. Ex:

na linha title passei um Período de verificação entre $dataInicio e $dataFinal.

title: {
						text: 'Período Entre $dataInicio e $dataFinal',
						x: -20 //center
					},

Logo abaixo alterei mais umas linhas (O principal acredito).

o series contem as linhas e os valores.

Nesse caso (caso específico), passo os valores de agendamentos para cada variável de mês, como pode ser visualizado abaixo.:

series: [{
						name: 'ITAI',
						data: [$janI, $fevI, $marI, $abrI, $maiI, $junI, $julI, $agoI, $setI, $outI, $novI, $dezI]
					}, {
						name: 'FPTI',
						data: [$janF, $fevF, $marF, $abrF, $maiF, $junF, $julF, $agoF, $setF, $outF, $novF, $dezF]
					}, {
						name: 'Utilizada',
						data: [$janT, $fevT, $marT, $abrT, $maiT, $junT, $julT, $agoT, $setT, $outT, $novT, $dezT]
					}, {
						name: 'Não Utilizada',
						data: [$janN, $fevN, $marN, $abrN, $maiN, $junN, $julN, $agoN, $setN, $outN, $novN, $dezN]
					}]

E o resultado? sai aqui…

Ai está o gráfico de Line-Basic adaptado para uma necessidade real.

Se clicar em dois títulos ex: Cliquei nos títulos Utilizado e Não Utilizado. Veja a diferença:

Quer mais? clica nos Ícones no canto superior direito.

Mande imprimir o gráfico ou exporte ele para os formatos que falei acima…

Próximos Posts pretendo mostrar as outras opções de gráficos…

se caso eu não fizer isso, seja curioso você mesmo e veja os examples que se encontram na pasta do HighCharts.
Espero que até minha mãe entenda esse post :) .

Usar o HighCharts é mais fácil que roubar doce de criança no circo. AEuheauheauheauhea

Até a próxima.

Posts similares:

    None Found