13
respostas

Estou com dúvida no curso de Gráficos com Google Chart Tools, no exercício do capítulo Remote Data Source.

Estou usando o spring mvc e não estou conseguindo montar o gráfico a partir de uma lista JSON. O metodo que retorna JSON:

//Retorna Lista no formato JSON
    @RequestMapping(value = "ListaAlunoJson", method = RequestMethod.GET)
    @ResponseBody
    public List<Aluno> list() {
        List<Aluno> alunos = alunoDao.getLista(Aluno.class);
        return alunos;
    }

A pagina que estou tentando carregar o grafico:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <title>Home</title>

          <script type=text/javascript src=https://www.google.com/jsapi></script>
        <script type=text/javascript>
        google.load('visualization', '1', {packages:['corechart']});
        google.setOnLoadCallback(desenhaGrafico);

        function desenhaGrafico() {

          var wrapper = new google.visualization.ChartWrapper({
            dataSourceUrl:'ListaAlunoJson',
            chartType: 'AreaChart',
            containerId: 'meu_grafico',
            options:{width:900, height:300, curveType: 'function'}
          });
          wrapper.draw();
        }
        </script>
</head>
<body>
<div id="meu_grafico"></div>
<div id="msg"></div>
</body>
</html>

Por favor, peço aos tutores do curso que me ajudem nesse assunto.

13 respostas

Oi Tiago,

Qual erro aparece no console? Se você tenta acessar a URL, ela devolve a lista em JSON?

Já tentou colocar a URL completa ali no parâmetro dataSourceUrl para testar?

Um abraço!

Não apresenta nenhum erro no console, e quando eu acesso a url ela devolve a lista em JSON. Já coloquei a url completa no parâmetro dataSourceURL e também não foi. O que seria? Também já importei a dependência necessária para conversão em JSON:

<dependency>
        <groupId>org.codehaus.jackson</groupId>
        <artifactId>jackson-mapper-asl</artifactId>
        <version>1.7.1</version>
    </dependency>

Quando acesso a url no console ele me retorna tanto a lista completa de aluno ou se eu quiser mudo para retornar o aluno pelo nome, passando o nome como parâmetro. Por favor me ajudem.

Tiago,

Não aparece nada no Javascript Console do Firefox?

Tenta fazer lá $.get("sua url do json"); e veja se volta alguma coisa!

Vc deve estar tendo algum erro no javascript!

Fiz do jeito que você falou e obtive o seguinte retorno no console do firefox:

GET http://localhost:8080/spring/ListaAlunoJson [HTTP/1.1 200 OK 36 ms]

O mesmo retorno que recebo quando acesso a url diretamente no browser.

Segue abaixo o retorno de quando acesso a url pelo browser diretamente: Acesso na barra de endereço, passando o seguinte endereço:

http://localhost:8080/spring/ListaAlunoJson

E o retorno é esse:

[{"idalunos":5,"bairro":"Bela Vista","caminho":"Rafael Ruben Alves.jpg","cidade":"Itambé","cpf":"876.365.757-65","endereco":"Rua quincas","estado":"BA","foto":null,"nome":"Rafael Ruben Alves","telefone":"(77)9836-2576","telefoneresp":"(77)7657-6567","turmasIdturmas":2},{"idalunos":6,"bairro":"Centro","caminho":"Antonio Maciel.jpg","cidade":"Itambé","cpf":"083.827.687-68","endereco":"Rua Candido Sales","estado":"BA","foto":null,"nome":"Antonio Maciel","telefone":"(77)7657-3523","telefoneresp":"(77)2765-7575","turmasIdturmas":6},{"idalunos":7,"bairro":"Sidney Almeida","caminho":"Fabricio Dantas Candidio.jpg","cidade":"Itambé","cpf":"987.287.368-76","endereco":"Rua Maria Rodrigues","estado":"BA","foto":null,"nome":"Fabricio Dantas Candidio","telefone":"(77)3275-7657","telefoneresp":"(77)7757-6320","turmasIdturmas":6},{"idalunos":8,"bairro":"Centro","caminho":"Augusto Rafael Santos.jpg","cidade":"Itambé","cpf":"987.675.376-25","endereco":"Avenidade Central","estado":"BA","foto":null,"nome":"Augusto Rafael Santos","telefone":"(77)2757-6576","telefoneresp":"(77)3532-2222","turmasIdturmas":6},{"idalunos":9,"bairro":"Felipe Achy","caminho":"Marcus Vinicius Pires.jpg","cidade":"Itambé","cpf":"987.328.763-65","endereco":"Rua Castro Alves","estado":"BA","foto":null,"nome":"Marcus Vinicius Pires","telefone":"(77)2757-6576","telefoneresp":"(77)2757-5652","turmasIdturmas":6},{"idalunos":10,"bairro":"Sidney Almeida","caminho":"Mateus Soprano.jpg","cidade":"Itambé","cpf":"923.763.222-22","endereco":"Rua Vitor Alves","estado":"BA","foto":null,"nome":"Mateus Soprano","telefone":"(77)2757-6575","telefoneresp":"(77)5733-3333","turmasIdturmas":6},{"idalunos":11,"bairro":"Centro","caminho":"Vinicius Santos Amorim.jpg","cidade":"Itambé","cpf":"326.666.632-87","endereco":"Avenidade Central","estado":"BA","foto":null,"nome":"Vinicius Santos Amorim","telefone":"(77)3275-7657","telefoneresp":"(77)3298-9333","turmasIdturmas":6},{"idalunos":12,"bairro":"Felipe Achy","caminho":null,"cidade":"Itambé","cpf":"987.329.873-97","endereco":"Avenida Santo Antonio","estado":null,"foto":null,"nome":"Roberto Santos Pires","telefone":"(77)9888-9322","telefoneresp":"(77)3555-5555","turmasIdturmas":6},{"idalunos":13,"bairro":"Centro","caminho":"Jardel Rocha.jpg","cidade":"Itambé","cpf":"978.287.678-68","endereco":"Rua Almirante Barroso","estado":"BA","foto":null,"nome":"Jardel Rocha","telefone":"(77)3655-6576","telefoneresp":"(77)7575-7657","turmasIdturmas":6},{"idalunos":14,"bairro":"Bela Vista","caminho":null,"cidade":"Itambé","cpf":"290.827.948-76","endereco":"Rua 2 de julho","estado":null,"foto":null,"nome":"Sofia Bento","telefone":"(77)2757-6520","telefoneresp":"(77)3275-7657","turmasIdturmas":6},{"idalunos":15,"bairro":"Bela Vista","caminho":null,"cidade":"Itambé","cpf":"082.398.793-27","endereco":"Rua 2 de julho","estado":null,"foto":null,"nome":"Mariana Bento","telefone":"(77)2757-6576","telefoneresp":"(77)2657-5765","turmasIdturmas":6},{"idalunos":16,"bairro":"Humberto Lopes","caminho":null,"cidade":"Itambé","cpf":"398.937.289-79","endereco":"Rua luiz calmon","estado":null,"foto":null,"nome":"Flavia Bento","telefone":"(77)2989-8233","telefoneresp":"(77)2333-3333","turmasIdturmas":6},{"idalunos":17,"bairro":"Sidney Almeida","caminho":null,"cidade":"Itambé","cpf":"939.729.797-29","endereco":"Rua quincas","estado":null,"foto":null,"nome":"Benito Gusmão","telefone":"(77)2765-7657","telefoneresp":"(77)3765-7657","turmasIdturmas":2},{"idalunos":18,"bairro":"Centro","caminho":null,"cidade":"Itambé","cpf":"979.379.798-23","endereco":"Avenidade Central","estado":null,"foto":null,"nome":"Alexandro Coelho","telefone":"(77)2757-6532","telefoneresp":"(73)2909-7982","turmasIdturmas":2},{"idalunos":23,"bairro":"Centro","caminho":null,"cidade":"Itambé","cpf":"092.900.808-80","endereco":"Avenida Hollwood","estado":null,"foto":null,"nome":"Marlon Brando","telefone":"(77)3293-2979","telefoneresp":"(77)2938-9089","turmasIdturmas":7},{"idalunos":24,"bairro":"","caminho":null,"cidade":"","cpf":"092.080.982-30","endereco":"","estado":null,"foto":null,"nome":"Maiko Rocha","telefone":"","telefoneresp":"","turmasIdturmas":2},{"idalunos":25,"bairro":"Sidney Almeida","caminho":null,"cidade":"Itambé","cpf":"127.979.872-19","endereco":"Rua Alcerino Coelho","estado":null,"foto":null,"nome":"Maria Josefina Ferraz","telefone":"(77)2757-5765","telefoneresp":"(77)9828-9890","turmasIdturmas":6}]

Que estranho... A biblioteca do Google não dá erro nenhum pra você no console, e o JSON funciona...

Sem ter o projeto rodando aqui, ficou difícil agora. Você pode me mandar?

Posso enviar sim. Mas, eu envio para onde? Aqui não tem a opção de envio de arquivos. Como eu faço para enviar para você?

Manda no meu e-mail: mauricio.aniche@caelum.com.br

Eu já enviei para o email. Eu postei no dropBox e enviei o link para download para o email. Se não conseguiu baixar tente por esse link: Link para baixar o projeto

Maurício, estou aguardando resposta.

Oi Tiago,

Ainda estou olhando. Tive problemas com meu Mac, mas vou conseguir outra máquina pra testar!

Tiago,

Seu JSON volta a lista de alunos. Mas veja que no seu código Javascript, você não diz para o GCT quais colunas usar ou coisa do tipo, então ele não sabe desenhar o gráfico.

Minha sugestão é para que você, ou passe a instrução de seleção na instrução (como em https://developers.google.com/chart/interactive/docs/drawing_charts), ou monte o gráfico já escrevendo os dados a serem desenhados na própria JSP (através de um loop convencional).

Faz sentido?

Maurício, a minha grande dificuldade é que eu não sei tratar lista json. Por exemplo, eu recebo a lista no formato JSON, mas como eu faço para imprimir um item dessa lista ou a lista inteira. Por que eu poderia ter uma função para receber a lista e depois ir populando o gráfico com os dados que eu bem entender. Você poderia me ajudar nesse sentido. Como eu faço para pegar os dados dessa lista e popular o gráfico manualmente. Se você me ensinar a simplesmente como fazer para pegar os dados da lista e imprimir em uma jsp eu me viro para popular o gráfico. Penso em uma função parecida com essa:

$.getJSON("ListaAlunoJson", function(data){
   var nome = data.nome;
}

Agora eu pegaria a variável nome e iria popular o meu gráfico.

Maurício, na verdade eu consigo pegar a lista JSON normalmente mas não estou conseguindo popular o gráfico com essa lista: Para pegar a lista eu faço assim:

$.getJSON("ListaAlunoJson", function(data){
   for(var i =0; i<data.length; i++) {
      var nome = data[i].nome;
}
}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software