[code]
function drawChart() {
var inicio = $(“select[name=‘inicio.id’]”).val(); inicio = 2; inicio /= 2;
var fim = $(“select[name=‘fim.id’]”).val(); fim = 2; fim /= 2;
var anoInicio = $(“select[name=‘anoInicio’]”).val();
var anoFim = $(“select[name=‘anoFim’]”).val();
if(anoFim - anoInicio > 1){
alert(‘No máximo 24 meses de diferença!’);
} else {
var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Mês’);
data.addColumn(‘number’, ‘Geração’);
data.addColumn(‘number’, ‘Destinação’);
if(anoInicio != anoFim) {
fim += 12;
}
for(var i = inicio; i <= fim; i++){
/ Logica que transforma numero i em mẽs e guarda na variavel printMes/
data.addRows([
[printMes, i, i*2], //Quero colocar no lugar de i, o valor vindo de um metodo ou banco de dados.
]);
}
/* define titulo, tamanho, etc */
var chart = new google.visualization.ColumnChart(document.getElementById(‘chart_div’));
chart.draw(data, options);
}
}[/code]
O código acima estou usando para criação de gráficos, esta é a API do google, Chart. Queria saber de vocês mestre dos scripts se há, de alguma forma, como eu pegar o valor de um método, ou mesmo do banco de dados e adiciona-lo no local citado para que o gráfico utilize valores reais e então, seja útil. Não sei se consegui me expressar bem, qualquer coisa só falar … Valeu
Olá,
Tem sim, neste seu método você deve fazer uma chamada via ajax para um controller que irá retornar os dados provenientes do banco de dados, esses dados você pode retornar em um json
e então usar o metodo abaixo para alimentar os atributos do google chart.
Outra forma é rederizer seu cabeçalho usando sua linguagem de template como jsp, velocity, freemaker etc, desta forma você não precisaria fazer chamadas ajax.
[code]
function drawChart() {
var inicio = $(“select[name=‘inicio.id’]”).val(); inicio *= 2; inicio /= 2;
var fim = $(“select[name=‘fim.id’]”).val(); fim *= 2; fim /= 2;
var anoInicio = $(“select[name=‘anoInicio’]”).val();
var anoFim = $(“select[name=‘anoFim’]”).val();
if(anoFim - anoInicio > 1){
alert(‘No máximo 24 meses de diferença!’);
} else {
var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Mês’);
data.addColumn(‘number’, ‘Geração’);
data.addColumn(‘number’, ‘Destinação’);
if(anoInicio != anoFim) {
fim += 12;
}
/converte numero i em mes/
/*titulo, legenda, tamho, etc */
var chart = new google.visualization.ColumnChart(document.getElementById(‘chart_div’));
chart.draw(data, options);
}
}[/code]
Metodo ajax
@RequestMapping("/testAjax")
public void testAjax(int id, int mes,
HttpServletResponse response) throws IOException {
EntityManager em = new JPAUtil().getEntityManager();
GeracaoDAO dao = new GeracaoDAO(em);
int valGeracao = 0;
for (Geracao g : dao.getLista()) {
if (g.getResiduo().getId().equals(id)) {
if (g.getMes() == mesInicio) {
valGeracao += g.getQuantidade();
}
}
}
String printa = String.valueOf(valGeracao);
response.setContentType("text/html");
response.getWriter().write(printa);
}
Nunca me dei bem com ajax mais fiz testei, porém tive um problema, o valor está vindo correto. porém para todos os meses do gráfico vem o valor apenas do primeiro mês, por exemplo: tenho uma geração em janeiro que vale 10, uma em fevereiro que vale 20 e uma em março que vale 15, ao selecionar de janeiro a março, todos os meses meu gráfico vem com valor 10 (janeiro). Seria um problema com meu FOR ? Alguma ideia de como resolver isso?
Cara, muito obrigado, obrigado mesmo, eu nem sei se vai funcionar, agora estou em um outro computador sem acesso ao código, mas se conseguir retornar um Json já sera um GRANDE avanço na minha vida, muitas vezes precisei usar e não consegui fazer funcionar. Assim que tiver com o código (creio que amanha bem cedo) vou testar e posto aqui os resultados. De qualquer forma muito obrigado pela força!
Cara, funcionou perfeitamente o Json, muito obrigado mesmo! Você já fez muito por mim me ajudando com o ajax, mais se puder me dar só mais uma forcinha …
Fiz com o Json e ficou desta forma:
linhas = fim - inicio; linhas *= 2; linhas /= 2;
data.addRows((linhas + 1));
for(var i = 0; i <= linhas; i++) {
$.ajax({
type: "POST",
url: "testeGson",
data: {}
}).done(function( meses ) {
mes = meses[i].mes;
valor = meses[i].valor; valor *= 2; valor /= 2;
});
data.setValue(i, 0, mes);
data.setValue(i, 1, valor);
data.setValue(i, 2, 20);
}
O problema aqui é, desta forma ele imprime apenas os valores de janeiro, o que é estranho que se eu fazer um alerto do valor de i antes do data.setValue ele imprime corretamente o valor referente a cada mês, sabe por que isso acontece?
Desta forma você esta fazendo N requisições para pegar os dados no servidor, porem vc não passa parametro para saber qual o mes que o seu controller
deve enviar como resposta.
O ideal seria vc retornar todos os meses como eu mostrei em uma mensagem anterior, mas, se você quiser fazer N chamadas você pode passar um parametro para o server
para você fazer a query somente daquele mês, sacou!?
Você pode colocar no post da sua função js o parametro mês, ficaria assim:
