Usando a API de gráficos do Yahoo Flash
Hoje faremos um gráfico usando PHP, MySql e Yahoo Astra API (gráficos).
A lista de livros que podem ser usados como referência dependendo do nível de conforto pode ser encontrada abaixo.
Nossa enquete usará PHP como linguagem de script, um banco de dados MySql e o Yahoo Dev Network Flash API.
Algum nível de conforto com javascript ajudaria, mas não é necessário.
Usando seu console MySql ou como você cria seus bancos de dados e tabelas, você pode executar esta consulta simples:
CREATE TABLE chartTbl (
‘chartId’ INT NOT NULL AUTO_INCREMENT,
‘chartVal’ INT NOT NULL,
‘chartStamp’ DATETIME NOT NULL,
PRIMARY KEY ( chartId
)
) ENGINE = MYISAM COMMENT = ‘Sample Chart Table’
Depois de criar a tabela, execute o seguinte:
INSERÇÃO EM chartTbl
( chartId
, chartVal
, chartStamp
) VALUES
(1, 1, ‘2009-04-02 16:14:03’),
(2, 2, ‘2009-04-02 16:14:07’),
(3, 2, ‘2009-04-02 16:14:21’),
(4, 1, ‘2009-04-02 16:14:28’),
(5, 1, ‘2009-04-02 16:14:32’ ),
(6, 3, ‘2009-04-02 16:14:39’),
(7, 1, ‘2009-04-02 16:14:44’);
Agora o que fizemos acima é criar um banco de dados e uma tabela que conterá os resultados da nossa enquete.
Agora podemos nos conectar a ele e exibir as informações, mas antes de fazermos isso, precisamos criar um pequeno formulário que irá inserir os resultados da enquete no banco de dados (db).
Formulário:
<form action = “<? = $ SERVER [‘PHP SELF’];?>” Method = “post” />
<ul>
<li> <input type = “radio” id = “like 1″ name = “pbj” value = “1” /> Ah, sim </li>
<li> <input type = “radio” id = “like 2″ name = “pbj” value = “2” /> De jeito nenhum </li>
<li> <input type = “radio” id = “like_3” name = “pbj” value = “3” /> É legal … </li>
</ul>
<div align = “center”>
<input type = “enviar” name = “Enviar” value = “Mostrar do que você gosta!” />
</div>
</ form
Curto, simples e agradável, você pode estilizar o formulário e o conteúdo da forma que quiser, e existem os estilos incluídos no arquivo fonte (src).
Agora, a primeira coisa que você quer é algum tipo de validação, nenhum valor de formulário VAZIO no banco de dados.
É assim que fazemos isso:
if (vazio ($ _ POST [‘pbj’])) {
Observe em negrito que $ _POST é o mesmo nome do botão de rádio, o motivo é que podemos relacionar esse valor a outro quando processamos o formulário.
Não se tudo correr como planejado para o snippet acima, o formulário será mostrado novamente, com algum feedback, agora você pode fazer muitas coisas com javascript, CSS, mas neste exemplo em particular estamos usando o PHP para verificar as coisas antes de inserir os valores.
Se o valor que procuramos estiver preenchido (botão de opção), podemos iniciar a inserção.
$ sql = “inserir nos valores chartTbl (chartVal, chartStamp) (‘”. $ _POST [‘ pbj ‘]. “‘, now ())”;
Observe as coisas em negrito começando da esquerda para a direita:
The name of the table chartTbl
There is the name of the radio button
NOW(), this is just a function that will give the record a stamp, this can be used to show when the record was created, and if you track users to show the stamp etc.
Agora no nosso exemplo se tudo correr bem com o nosso script, uma nova mensagem vai aparecer na tela, “Acho que você gostou!”, Faça o que quiser com isso, é a lógica disso que é importante.
Junto com a mensagem, o formulário será mostrado, junto com um link para mostrar os resultados da votação.
Com nosso exemplo, os resultados da enquete são mostrados usando uma string de consulta, o valor é: $ _GET [‘showMePoll’].
Observe a barra de endereço depois de enviar o formulário.
Você verá algo assim:
diadde (ponto) com / test / charts / chartTest (ponto) php? ShowMePoll = true
E é tudo o que procuramos para o demonstrar.
<? php if (isset ($ _ GET [‘showMePoll’])) {?>
Ele lê; se estiver definido, faça o que estiver abaixo e entre o código, que é apenas isso.
<div id = “chart”> </div>
Essa é a tag do elemento div que contém todo o código da yahoo dev api:
Aqui está:
<! – insira o material do gráfico do yahoo aqui ->
<script type = “text / javascript”>
YAHOO.widget.Chart.SWFURL = yui.yahooapis (ponto) com / 2.7.0 / build / charts / assets / charts ( ponto) swf;
YAHOO.example.pbj =
[
{resposta: “Sim”, conta: <? = $ Row [‘sim’];?>},
{Resposta: “Não”, conta: <? = $ Linha [‘não’] ;?>},
{resposta: “Talvez”, conte: <? = $ row [‘talvez’];?>}
]
var subData = new YAHOO.util.DataSource (YAHOO.example.pbj);
subData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
subData.responseSchema = {campos: [“resposta”, “contagem”]};
var mychart = new YAHOO.widget.PieChart (“chart”, subData,
{
dataField: “count”,
categoryField: “response”,
style:
{
padding: 20,
legend:
{
display: “right”,
padding: 10,
espaçamento : 5,
fonte:
{
family: “Arial”,
size: 13
}
}
},
// necessária apenas para instalação expressa do flash player
expressInstall: “assets / expressinstall.swf”
});
</script>
Este é o mesmo código da biblioteca do yahoo que é gratuito para todos, agora no código acima observe o seguinte:
{resposta: “Sim”, contagem: <? = $ Row [‘sim’];?>},
{Resposta: “Não”, contar: <? = $ Row [‘no’];?>},
{Resposta: “Talvez”, contar: <? = $ Row [‘talvez’];?>}
Em negrito estão os resultados de uma consulta no topo de nossa página que está dando os valores ao texto do script, aqui está a consulta:
if (isset ($ _ GET [‘showMePoll’])) {
// isso é para o gráfico
$ sql = “selecionar distinto (selecionar contagem (chartVal) de chartTbl onde chartVal = 1) como sim,”;
$ sql. = “(selecione a contagem (chartVal) de chartTbl onde chartVal = 2) como não,”;
$ sql. = “(selecione a contagem (chartVal) de chartTbl onde chartVal = 3) como talvez”;
$ sql. = “do chartTbl”;
$ resultado = consulta
mysql ($ sql); $ row = mysql fetch_assoc ($ result);
// echo $ sql;
//Retorna;
}
Olhe bem no topo desse script em negrito, se ativo, o motivo pelo qual estou usando isso é porque, se chamarmos a página usando a string de consulta novamente, então quero fazer a consulta, não antes, estar ciente das coisas em seu aplicativo ou página, você não quer consultas desnecessárias ou widgets em execução sem a necessidade deles.
Esta linha aqui (do script)
$ row = mysql fetch assoc ($ result);
É onde atribuímos o valor à variável $ row.
Isso é um pouco complicado, mas posso explicar em outro tutorial com um pouco mais de detalhes, estamos usando subconsultas neste trecho de código.
Faça o seguinte:
$ sql = “select different (select count (chartVal) from chartTbl onde chartVal = 1) como yes,”;
$ sql. = “(selecione a contagem (chartVal) de chartTbl onde chartVal = 2) como não,”;
$ sql. = “(selecione a contagem (chartVal) de chartTbl onde chartVal = 3) como talvez”;
Observe que eles estão usando o mesmo nome de coluna chartVal, em nossa inserção não importa qual valor veio do formulário que colocamos no banco de dados, uma vez que esses são valores diferentes que precisamos separar por tipo:
1 = sim
2 = não
3 = talvez
Simples, a sub-consulta cuida disso junto com a atribuição de um alias (como sim para 1) para que a consulta não tenha problemas para terminar, caso contrário, pararia e iniciaria um erro; não queremos isso, só queremos nosso gráfico flash.
De qualquer forma, após a execução dessa consulta, ela preenche as variáveis que estão sendo chamadas dentro do script do yahoo, sem dor.
Agora, muitos outros gráficos podem ser usados da mesma maneira que este, você deve ler a página de desenvolvimento do yahoo ou escrever minha página de ensaio para mim e ver o que funciona para sua situação.
Além disso, este é apenas um exemplo e, de longe, não a maneira como você pode montar ou gerenciar algum aplicativo ou página, existem maneiras mais elegantes de fazer isso.
Pegue-o e fique confortável e ansioso para ter você lendo meus artigos novamente.