Pessoal, estou me enrrolando todo, nao consigo fazer graficos com o Vraptor e a api do google charts. alguem tem aulgum exemplo??? ou poderia me dar um tutorial… ou até mesmo dicas de como começar…
Vlw.
se eu não me engano você tem que gerar uma tabela, e o google charts se encarrega de gerar o gráfico, não é isso?
como você tentou gerar essa tabela?
Primeiro tenta dá uma estudada na api do google pra ver o q ela espara…
pra depois tentar fazer o vraptor gerar o que ela precisa.
Bom Lucas, vou te passar o que estou tentando fazer:
A tabela no bd esta assim:
quero contar a quantidade de uso de terrenos diferentes usos:
BCI
idUsoTerreno
| 1 |
| 1 |
| 2 |
| 1 |
UsoTerreno
id | uso
| 1 | CONSTRUIDO |
| 2 | VAGO |
e ter uma tabela + ou - assim.
VAGO | CONSTRUIDO
1 | 3
para gerar um grafico assim:
Até ai tudo bem nada de codigo… agora vamos.
Tenho o bci modelo assim
[code]
@Entity
public class Bci {
@Id
private Long inscricaoCadastral;
private String proprietario;
@ManyToOne
@JoinColumn(name = "idUsoTerreno")
private UsoTerreno usoTerreno;
// getters and setters
}[/code]
aki foi minha primeira empacada:
@SuppressWarnings("unchecked")
public List<Bci> usoTerrenos() {
Query query = em.createQuery(" ");// como que faço essa query...?????
return query.getResultList();
}o controller:
@Get @Path("/bcis/charts")
public List<Bci> charts() {
return dao.usoTerrenos();
}alguem pode me ajudar com a query para eu poder avançar…
prometo que se eu terminar esse grafiço faço um tutorial para ajudar todos que se depararem com essa situação.
vlw grande abraço.
vc quer fazer uma query que conte quantos existem de cada tipo, é isso?
isso mesmo, no mysql fiz um teste aki… que retornou algo proximo do que quero.
SELECT idUsoTerreno, COUNT(idUsoterreno) as total FROM bci GROUP by idUsoTerreno;mas como passo isso para o bciDAO???
bom, a query no dao é basicamente a mesma que vc faz no mysql, só trocando as colunas e tabelas por atributos e objetos…
o idUsoTerreno é equivalente a usoTerreno.id no java, certo?
em.createQuery("select bci.usoTerreno.id, count(bci.usoTerreno.id) from Bci bci group by bci.usoTerreno.id")isso funciona e te retorna uma List<Object[]>
você pode melhorar isso criando uma classe com construtor:
public class BcisPorTerreno {
public BcisPorTerreno(Long terrenoId, Long total) {
//joga em variaveis
}
}e na query chamar o construtor (sim, dá pra fazer isso ;))
em.createQuery("select new "+ BcisPorTerreno.class.getName() + "(bci.usoTerreno.id, count(bci.usoTerreno.id)) " +
"from Bci bci group by bci.usoTerreno.id")daí ele retorna uma List
vc pode tentar ao invés de usoTerreno.id usar usoTerreno, daí vc recebe o terreno já preenchido, não tenho certeza se funciona
Pow vlw Lucas!!!
a tabela com a sua ajuda eu ja consegui… mudei aquela parte para:
public List<Bci> usoTerrenos() {
Query query = em.createQuery("select new "+ BcisPorTerreno.class.getName() + "(bci.usoTerreno.uso, count(bci.usoTerreno.uso)) " +
"from Bci bci group by bci.usoTerreno.uso");
return query.getResultList();
}mudei para uso terreno e mudei no BcisPorTerreno para uma String e um Long Assim:
public class BcisPorTerreno {
private String uso;
private Long total;
public BcisPorTerreno(String uso, Long total) {
this.uso = uso;
this.total = total;
//getters e setters Só que eu sei que vou ter que usar Json para retornar esses dados da maneira que o google chart uso… mas nao tenho ideia de como fazer…
o google chart espera os dados assim.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['VAGO', 1],
['CONSTRUIDO', 3],
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
</script>
</head>data.addRows([
[‘VAGO’, 1],
[‘CONSTRUIDO’, 3],
como que eu posso passar as informações assim?
com o VRaptor é fácil fazer isso:
result.use(json()).withoutRoot().from(dao.usosPorTerreno()).serialize();e ele vai retornar algo assim:
[{uso: 'VAGO', total: 3}, {uso: 'CONSTRUIDO', total: 4}]se você usa o jquery, vc pode fazer:
$.getJSON('/url/da/logica', function(bcisPorTerreno) {
var rows = [];
$(bcisPorTerreno).each(function() {
rows.push( [this.uso, this.total] );
});
//...
data.addRows(rows);
});Parece ser fácil mesmo. estou com algumas dúvidas.
fiz assim no controller, nao sei se é isso mesmo…???
@Get @Path("/bcis/charts.json")
public void chartsJson(){
result.use(json()).withoutRoot().from(dao.usoTerrenos()).serialize();
}nessa function
$.getJSON('/bcis/charts.json', function(bcisPorTerreno) { pega as informacoes da classe: BcisPorTerreno.java, certo???
vc fez o from(dao.usoTerrenos()).
o que vai na variável bcisPorTerreno é a lista que vc retornou no dao. A variável poderia se chamar peteleco se vc quisesse 
basicamente o getJSON vai pegar o que o VRaptor serializou e jogar na variável que vc declarou na function
Agora entendi, ela não tem nada a ver com a classe, guardará apenas as informações que o dao.usoTerrenos trará… 
é que já estou confundindo as coisas…, já esta meio cedo. amanha volto a fazer… obrigado pela ajuda, vou ver se consigo gerar o gráfico… vlw
Pow vlw a ajuda Lucas, dessa maneira passando o json no jquery eu nao consegui, porem consegui uma api do google chart no site Jquery, que o cara a melhorou, simplificando o seu uso, bastado apenas criar uma simples tabela e no :
<table id="myTable"> passar o id, que já gera automatico…muito simples .
Assim que abri o post prometi fazer um tutorial… essa semana ainda posto aqui…
vlw obrigado…
Lucas,
depois de muito quebrar a cabeça, resolvi mandando o DataSource direto para a api do Google Chart.
Não consegui usar $.getJSON() do jQuery, já que ele fazia o eval do JSON e ele não vinha no padrão e não disparava o callback.
Depois vou testar o seu exemplo.
[]s
como vc estava gerando o json?
Primeiro com XStream, que gera JSON bonitinho. Só que no javascript, o DataTable não era populado.
Depois tentei usar o JsonRenderer deles, mas jQuery não aceitava no getJSON(), já que o formato não era padrão.
Puts cara estou com um problema parecido com o seu, estou tentando usa o JOFC2 da google e não sai nada.
Vc fez o tutorial? não acho nada muito claro sobre essa ferramenta para gráficos.
Cara, eu criei um View para retornar um datasource com o com.google.visualization.datasource.DataSourceHelper.generateResponse(DataTable, DataSourceRequest).
@Component
@RequestScoped
public class JsonRendererView implements View {
...
public void generateResponse(final DataTable table) {
response.append(DataSourceHelper
.generateResponse(table, DataSourceRequest.getDefaultDataSourceRequest(request)).toString());
response.setContentType("application/json");
}
}No controller, dei um result.use(), passando o DataTable populado para ele gerar o JSON do jeito que ele quer.
result.use(JsonRendererView.class).generateResponse(table);Com isso meu código em JS funcionou direitinho, usando o exemplo deles.
[]s
Então emiyasaki, vc pode nos passar como consegui fazer isso ??
Estou tendo dificuldades na geração do Json !!!
Obrigado…
Então, como um programador ocasional de 46 anos, seis meses é um tempo razoável para se esquecer como se faz a implementação disso.
Como o código é para uma ONG e não temos motivo para mante-lo sob sigilo (claro, tirando a vergonha pelo código), verei como liberar seu acesso no Github ao código.