Publicado em 13 de abr.

Graficos com FusionCharts + JQuery

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

Discussão (28)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

patricias· 29 de abr.

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· 29 de abr.

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· 29 de abr.

Fabyo, gostaria sim,

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

Obrigada

Fabyo· 29 de abr.

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· 29 de abr.

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· 29 de abr.

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· 29 de abr.

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· 29 de abr.

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· 4 de mai.

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· 4 de mai.

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· 4 de mai.

>
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· 4 de mai.

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

você vai somar a quantidade por algum periodo?

patricias· 4 de mai.

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· 4 de mai.

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

patricias· 4 de mai.

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· 4 de mai.

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· 5 de mai.

>
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· 1 de jul.

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

Valew []'s Rodrigo Nascimetno

Fabyo· 2 de jul.

Obrigado, fico contente que meu script esteja sendo util

Bonne· 13 de jul.

Obrigado, fico contente que meu script esteja sendo util

Boa Fabyo, estou trabalhando com phpcharts e estou tendo um grande problema, gostaria de saber se você poderia me ajudar com algumas dicas.

Assim, criamos um sistema quer gera formulário para satisfação do cliente ( avaliação de nosso serviço ), em nosso sistema, a criação dos campos é dinâmica (voce escolhe se é select, radio, text, nº, telefone, cep, data), sendo que cada formulário criado corresponde a uma nova tabela no banco ( ex. Formulário X = Tabela X, Formulário XYZ = Tabela XYZ ).

Sendo assim, as entidades dentro dessa tabela pode ser excluidas ou até mesmo duplicadas para criação de outros campos de formulário, oque implicaria e novas entidades nas tabelas, até ai tudo bem.

Tenho uma sessão no Admin que mostra todas entradas, vamos dizer que temos 3 itens (campos radio), 3 campos select e um campo de texto no Formulário X com seus respectivos resultados. Gostaria de pegar apenas os resultados dos 3 campos radio e jogar em um gráfico ou pegar apenas os 3 select e jogar no gráfico. Sendo que o nome das entidades e do formulário, ambos são dinâmicos e podem ser alterados.

 

Como faria para geral um gráfico selecionando apenas os campos que quero( ou radio ou select mas nunca texto ) e como poderia pegar esses valores sem saber qual o nome dos campos que o usuário vai criar?

Muito obrigado pela atenção.

Abraços!

Fabyo· 13 de jul.

você quer pegar os campos depois do submit ou do banco de dados?

Bonne· 13 de jul.

Eu estava pensando em colocar check ao lado do título e quando clicado ele retornasse os valores do banco para o respectivo item escolhido.

(ou quem sabe fazer em ajax para assim que selecionado ele já abra no navegador).

Fabyo· 13 de jul.

se voce pegar direto do submit tem como você separar os tipos dos campos se é radio, select etc..

mas se ja foram gravados no banco, pra pegar você teria que criar na tabela os campos referentes ao que o cliente escolheu

Bonne· 13 de jul.

Olá Fabyo, até ai tudo bem, os valores eu consigo retornar facilmente, só não sei como passar todos os valores da tabela de campo "radio" para o PhpCharts.

Porque se não me engano, você precisa passar os valores por um xml para ai ele montar a estrutura do gráfico enviar para o swf e assim mostrar ao usuário o resultado.

Precisaria saber como pegar esses valores do banco e enviar para o PhpCharts e gerar um gráfico de todas entradas que forem gravadas no banco.

Abs.

Brayan Rastelli· 9 de jun.

E ai fabyo beleza ? funcionoo perfeito.. thanks http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

desenterrando o tópico .. :huh:

como eu faço pra por uma legenda ?

tipo.. em baixo do gráfico, colocar um quadrado com a cor e na frente o name:

$pie->setAttribute('value', $obj->Valor);
?

outra coisa.. tem algum jeito de pegar uma snapshot do gráfico (dinamicamente)? quero isso pq preciso do gráfico tambem para impressão, ou alguma outra forma para tal.

legal tbm se desse pra alterar a cor de fundo.. ou senão removê-la.. aquele cinza nao combina com a interface do sistema =|

valeuu