Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

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;
}
}