Graficos com FusionCharts + JQuery

[Fabyo 66]

Gerando Graficos com FusionCharts + JQuery

 

Ola pessoal

 

demorei mas aqui estou eu com mais um script basico para ajudar a comunidade

 

minha idéia na criação desse exemplo era mostrar um jeito pratico e simples de criação de um XML, sem fazer gambiarras

pois criar XML concatenando tags, e conteúdo igual a um txt é gambiarra, pois existe a classe DOM e é com ela que irei mostrar como gerar um XML valido e perfeito, hoje o XML está na moda ainda mais do que antes, pois a nota fiscal eletrônica passou a valer dia 01/04/2009, e toda transação é feita em XML.

 

dai nada melhor que mostrar um exemplo pratico, então aproveitei e criei uns exemplos de XML usados nos graficos da ferramenta FusionChartsFree http://www.fusioncharts.com/free/ , como existe muitos exemplos, eu apenas criei alguns, mas quem pegar os exemplos consegue criar apartir dele qualquer outro XML, outra coisa do FusionCharts só estou usando mesmo os swf, porque o resto to usando PHP e Jquery

 

pie.php

<?php

require_once '../class/graph.php';

$array = array(
array("name" => "Brazil", "value" => "4432"),
array("name" => "USA", "value" => "1234"),
array("name" => "France", "value" => "4321"),
array("name" => "India", "value" => "4132"),
array("name" => "England", "value" => "1432"),	
array("name" => "Irland", "value" => "3432"),
array("name" => "Italy", "value" => "3241")
);

$pie = new graph();
$pie->_graph->setAttribute("caption", "Titulo 2D");
$pie->_graph->setAttribute("subCaption", "SubTitulo 2D");

foreach($array as $dados){
$campos  = array_keys($dados);
$valores = array_values($dados);

$pie->setAttribute($campos[0], $valores[0]);
$pie->setAttribute($campos[1], $valores[1]);
$pie->appendChild();
}	

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Content-Type: application/xml; charset=iso-8859-1");
header("Vary: Accept");

echo $pie->saveXML();
?>

 

esse exemplo gera esse XML:

<graph showPercentageInLabel="1" pieYScale="60" pieBorderAlpha="55" pieFillAlpha="60" pieSliceDepth="10" pieRadius="85" bgColor="F1f1f1" showPercentageValues="0" baseFontSize="9" baseFontColor="000000" numberPrefix="R$ " chartTopMargin="1" chartLeftMargin="5" chartRightMargin="5" chartBottomMargin="20" formatNumber="1" formatNumberScale="0" decimalPrecision="2" decimalSeparator="," thousandSeparator="." caption="Titulo3d" subCaption="SubTitulo3d">
<set name="Brazil" value="4432"/>
<set name="USA" value="1234"/>
<set name="France" value="4321"/>
<set name="India" value="4132"/>
<set name="England" value="1432"/>
<set name="Irland" value="3432"/>
<set name="Italy" value="3241"/>
</graph>

 

como podem perceber eu nao criei o XML na mão, nem adicionei tag por tag, tudo foi criado atraves da classe DOM

e vejam como ela fecha certinho todas as tags, nao me preocupo em ficar abrindo tag e fechando a mesma no final

e fora outras funcionalidades praticas, como por exemplo formatar ou nao a saida XML, como os graficos recebem o XML só para exibição, não a necessidade em formatar o XML, mas caso precise basta setar formatOutput = true;

 

e usei dados diretos em array, mas nada impede de voce usar os dados vindos de um banco de dados.

 

simples não é mesmo?

 

OBS: Quando forem criar XML sejam profissionais usem o DOM

 

exemplos online:

 

http://extjs.com.br/exemplos/graph/graficos/column3D.html

http://extjs.com.br/exemplos/graph/graficos/msline.html

 

http://extjs.com.br/exemplos/graph/

 

download do script e do FusionChartsFree :

 

graph.zip

http://extjs.com.br/exemplos/FusionChartsFree.zip

[patricias 0]

Bom dia Fabyo,

 

Vim nesse tópico por indicação tua...

 

Com o FusionCharts, eu consigo criar gráficos pegando dados da tabela do banco?

 

Minha intenção, é que o grafico seja dinamico.

 

Obrigada desde já.

[Fabyo 66]

Sim com certeza, nesse exemplo usei dados em array gerando o xml dinamicamente

 

mas é muito facil fazer o xml ser gerado por dados vindo do banco de dados

 

se quiser eu te ajudo a montar um exemplo com banco de dados

[patricias 0]

Fabyo, gostaria sim,

Eu baixei o Fusion, to aqui quebrando a cabeça rs ,

 

Obrigada

[Fabyo 66]

você viu que o fusion vem com varios exemplo usando banco de dados?

 

mas se nao conseguir fazer nada, me fale qual grafico você ta querendo montar que eu mostro um exemplo dele usando banco de dados

[patricias 0]

Bom vamos la,

 

Eu quero o FCF_Pie3D .

 

Bom não sei por onde começo, a unica coisa que fiz foi configurar o arquivo de conf do banco, certo?

 

Eu preciso criar outro banho (um só pro fusion?)

 

obrigada

[Fabyo 66]

Nao precisa criar outro banco, você só precisa pegar os dados que você tem e passar para o grafico

 

Montei um exemplo simples do Pie 3D usando banco de dados Mysql, e usando a classe Mysqli (PHP5)

 

baixe meu exemplo desse topico e só acrescente esses arquivos:

 

base.sql

 

DROP TABLE IF EXISTS Paises;
CREATE TABLE Paises (
ID_Pais SMALLINT ( 5 ) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
Pais VARCHAR ( 100 ) UNIQUE NOT NULL
) TYPE = innodb; 

DROP TABLE IF EXISTS Faturamento;
CREATE TABLE Faturamento (
ID_Faturamento SMALLINT ( 5 ) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
valor DECIMAL (10,2) NOT NULL,
ID_Pais SMALLINT ( 5 ) UNSIGNED NOT NULL,
FOREIGN KEY ( ID_Pais ) REFERENCES Paises ( ID_Pais )
) TYPE = innodb;

 

pie3DDB.html

graficos/pie3DDB.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR" lang="pt-BR">
<head>
<title>Pie 3D com Banco de dados</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="pt-BR" />
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Content-Encoding" content="gzip" />
<script language="JavaScript" src="../js/jquery.js"></script>
<script language="JavaScript" src="../js/jquery.flash.js"></script>
<script type="text/javascript">
$(function(){
	$('#chartdiv').flash({ 
		  src: '../charts/FCF_Pie3D.swf',
		  width: 400,
		  height: 300,
		  flashvars: { dataURL: 'pie3DDB.php' }
		}			
	);
});	
</script>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>

 

pie3DDB.php

graficos/pie3DDB.php

 

<?php

require_once '../class/graph.php';

$pie = new graph();
$pie->_graph->setAttribute("caption", "Usando Banco de Dados");
$pie->_graph->setAttribute("subCaption", "Mysql");

$mysqli = new mysqli('localhost', 'usuario', 'senha', 'grafico');
if (mysqli_connect_errno()) {
printf("Conexao falhou: %s\n", mysqli_connect_error());
exit();
}

if ($result = $mysqli->query("SELECT Pais, Valor FROM Paises INNER JOIN Faturamento ON Paises.ID_Pais = Faturamento.ID_Pais")) {
if($result->num_rows > 0){
	while($obj = $result->fetch_object()){
		$pie->setAttribute('name', $obj->Pais);
		$pie->setAttribute('value', $obj->Valor);
		$pie->appendChild();
	}
}
$result->close();
}
$mysqli->close();

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Content-Type: application/xml; charset=iso-8859-1");
header("Vary: Accept");

echo $pie->saveXML();
?>

 

só nao posso te mostrar o funcionamento online, porque no momento estou sem servidor com banco de dados disponivel

[patricias 0]

me diz só uma coisa, esses arquivos eu preciso por na pasta do fusion?

Necessariamente eu preciso ter a pasta do fusion ?

Outra coisa, ali você coloca uma base.sql, isso só no caso de eu não ter nenhuma, certo?

 

Bem, so poderei testar amanha, la na empresa, assim que eu chegar, farei isso, e te aviso aqui, ok?

 

Obrigada por enquanto

[Fabyo 66]

Esses arquivos que eu te passei é para colocar junto com o exemplo que deixei nesse topico

mas olhando o exemplo você monta do seu jeito depois

 

os arquivos que eu coloquei estao funcinando, basta você criar um banco de teste e incluir esse sql que eu deixei configurar os dados de conexao e pronto

[patricias 0]

Bom dia Fabyo,

 

 

Pois bem, fiz o teste como você passou, deu certo, criei la aquela tabelinha paises e faturamento, acrescentei uns valores, tive uns erros no começo e fui acertando....

 

Bem agora, tentando fazer de modo q seja pego os dados da minha tabela, eu não to conseguindo....

 

veja:

base.sql

CREATE TABLE `bunge` (
  `idcliente` int(10) unsigned NOT NULL auto_increment,
  `cliente` text NOT NULL,
  `servidor` text NOT NULL,
  `ambiente` text NOT NULL,
  `datahora` text NOT NULL,
  `updown` text NOT NULL,
  `fsbarra` varchar(64) NOT NULL,
  `fsusr` text NOT NULL,
  `fsvar` text NOT NULL,
  `fsvarrun` text NOT NULL,
  `fstmp` text NOT NULL,
  `fsopt` varchar(64) NOT NULL,
  `fswebsphere` varchar(64) NOT NULL,
  `fsoutputgis` varchar(64) NOT NULL,
  `fsplaneta` text NOT NULL,
  `db00` text NOT NULL,
  `db01` text NOT NULL,
  `db02` text NOT NULL,
  `db03` text NOT NULL,
  `db04` text NOT NULL,
  `outros` text NOT NULL,
  `acao` varchar(250) NOT NULL,
  `comentario` varchar(250) NOT NULL,
  `analyst` varchar(40) NOT NULL,
  PRIMARY KEY  (`idcliente`),
  UNIQUE KEY `cliente` (`idcliente`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=26;

O que eu gostaria de ter no grafico?

bem gostaria de ter apenas o nome do servidor e os itens fs´s , ou seja, os file system das maquinas, para que seja verificado o consumo do disco.

 

Como dou esse select?

 

Obrigada,

[Fabyo 66]

todos fs?

cada fs siginifica uma coisa você quer listar os fs como exemplo dos paises no grafico pizza?

e o servidor seria o que?

 

é o grafico PIE 3D que você quer usar mesmo?

[patricias 0]

todos fs?

cada fs siginifica uma coisa você quer listar os fs como exemplo dos paises no grafico pizza?

e o servidor seria o que?

 

é o grafico PIE 3D que você quer usar mesmo?

Isso,

 

Os fs são FileSystem, e servidor o servidor correspondente aos fs

então terei um grafico por exemplo do servidor X e como estão distribuidos os fs

 

fs = 10%

fstmp = 20%

 

e assim vai,

 

sim, a ideia é no grafico pizza, não necessáriamente em 3D, mas que seja pizza

 

brigada

[Fabyo 66]

Entendi os FS e os valores estão no servidor?

 

você vai somar a quantidade por algum periodo?

[patricias 0]

Sim os valores estão no servidor,

 

Não, não irei somar, quero apenas que ele me mostre o uso de cada fs de acordo com os dados fornecidos.

 

Todos os dias é feito uma checagem desses file systems...

 

 

hj um fs tem 25% o outro 30% amanhã ele pode mudar esse valor, quero só que ele va mostrando os valores....

[Fabyo 66]

Entao mas o servidor tera 1 valor e onde esta os outros valores?

[patricias 0]

Entao mas o servidor tera 1 valor e onde esta os outros valores?

 

Sim, tem um valor, o nome dele

 

Servidor 1 , 2 , 3, 4 , 5 (total de 5 servidores cada um com seu nome)

 

e os fs serão

/ (barra) = valor%

/var = valor%

/var/run = valor%

/tmp = valor%

/opt = valor%

/apl = valor%

 

 

eu fiz assim no excel...

[Fabyo 66]

Então sua modelagem nao esta muito boa, por isso pode causar problemas ou ter que fazer gambiarra

 

você precisa entender como você quer pegar os dados e montar o grafico

 

no caso você vai confrontar o que? ta meio confuso esses dados, seria melhor você separar essas tabelas

[patricias 0]

Então sua modelagem nao esta muito boa, por isso pode causar problemas ou ter que fazer gambiarra

 

você precisa entender como você quer pegar os dados e montar o grafico

 

no caso você vai confrontar o que? ta meio confuso esses dados, seria melhor você separar essas tabelas

 

É que todos os dados já estão nessa tabela,

 

hj me mostra na tela os valores que são colocados lá diariamente....

 

Se dessa forma não tiver como fazer, eu deixo pra uma outra ocasião com mais calma, ai usamos o metodo de forma correta....

 

Obrigada pelo auxilio Fabyo

[neo_soro 0]

 

Noss véio matou a pau esse script!!! Muito show de bola.

 

Valew []'s Rodrigo Nascimetno

[Fabyo 66]

Obrigado, fico contente que meu script esteja sendo util