Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Recuperarn objetos json na pagina para gerar gráficos

Ola tudo bem? Eu preciso gerar gráficos nas minhas páginas jsp e escolhi usar a biblioteca chartjs para isso. Eu sei que preciso gerar objetos JSON do meu back-end para minhas páginas mas não encontrei uma maneira de recuperar esses dados no front , talvel pegando a url de retorno do controller e mandando gerar uma variável mais ou menos assim:

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: funcaojavascriptrecuperaJSON(minha/url/json),
.
.
.

é justamente essa funcaojavascriptrecuperaJSON(minha/url/json) que nao sei fazer !! Por onde devo começar??

6 respostas
solução!

Michel, você pode fazer uma requisição AJAX pro seu servidor. Se você estiver usando a biblioteca Jquery é possível utilizar a seguinte função:

$.ajax({
          method: "get",
          url: url_do_servidor
          contentType : 'application/json; charset=utf-8',
          success: function(jsonRetornado){
               console.log(jsonRetornado)
          }
    });

Além disso, seu servidor deve ser capaz de realizar o parse de objetos Java para objetos no formato JSON. Se vc utiliza Spring MVC com Mavem basta adicionar as seguintes dependências no pom.xml e anotar o método que é chamado do seu controller com @ResponseBody:

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.5.1</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.5.1</version>
</dependency>

Certo então basicamente na primeira opção eu teria algo como:

$.ajax({
          method: "get",
          url: url_do_servidor
          contentType : 'application/json; charset=utf-8',
          success: function(jsonData){

            var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: jsonData,
        .
        .
          }
    });

Mas e com relação ao ResponseBody me parece muito mais simples, no entanto estou com problemas em descobrir como recuperar esses dados em uma jsp ???

Não entendi sua dúvida Michel. Pode ser mais claro?

Com relação ao @ResponseBody ele devolve um json mas nao consigo recupera-lo na pagina, coloca-lo no gráfico, em todos os exemplos os dados recuperados são exibidos no console ou em formato json. Não consigo colocar algo assim, :

$.ajax({
          method: "get",
          url: url_do_servidor
          contentType : 'application/json; charset=utf-8',
          success: function(jsonData){

            var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: ${dadosRelatório},
        .
        .
          }
    });

Cara, o json que é retornado fica no success, nessa variável jsonData. Verifique se url do servidor se está correta. Você pode usar o postman também pra testar essas requisições. Se a resposta for status http 200 e você tiver um json no corpo, então o serviço está correto. Se não, da uma olhada melhor na documentação dessa api chartjs pra saber se vc está passando os dados de forma correta

Haaa, entendi agora, eu não tinha entendido que os dados retornados usando responsebody podiam ser recuperados no success com javascript !!!