4

Estou implementando graficos em uma aplicação web que estou desenvolvendo em Spring. Já fiz minha API, está trazendo o Json com todas as informaçoes do meu objeto Carrinho, porem o gráfico não está sendo gerado na pagina html. Alguem pode me ajudar a resolver este problema? Ele não apresenta nenhum erro no console.

Pagina html, onde o usuário escolhe o mes que ele quer ver o gráfico. inserir a descrição da imagem aqui

Meu serviço.

@RequestMapping(value = "/vendas", method = RequestMethod.GET)
public ResponseEntity<?> vendas(Long id, int valor) throws ParseException {
    Usuario user = userService.findByEmail(SecurityContextHolder.getContext().getAuthentication().getName());
    List<Carrinho> carrinhos = carrinhoService.findByRelatorioVenda(user.getId(), valor);
    if (carrinhos.isEmpty()) {
        return new ResponseEntity(new CustomErrorType("400"), HttpStatus.NOT_FOUND);
    }
    System.out.println(carrinhos);
    return new ResponseEntity<List<Carrinho>>(carrinhos, HttpStatus.OK);
}

Meu html:

<section class="dashboard-header">
                    <div class="bar-chart-example card">
                        <div class="card-header d-flex align-items-center">
                            <h3 class="h4">Estatística anual</h3>
                        </div>
                        <div id="chartdiv1" class="chartdiv narrow float"></div>
                    </div>
                </section>
 <script type="text/javascript">
$(function() {
    $("#btRelUm").click(function(e) {
        e.preventDefault();

        $.ajax({
            method : "GET",
            url : "/api/vendas",
            data : {
                valor : $("#mes").val()
            }
        }).done(function(data) {
            /**
             * TERCEIRO chart
             */
            var chart = AmCharts.makeChart("chartdiv1", {
                "theme" : "light",
                "type" : "serial",
                "startDuration" : 2,
                "dataProvider" : data,
                "valueAxes" : [ {
                    "position" : "left",
                    "title" : "Visitors"
                } ],
                "graphs" : [ {
                    "balloonText" : "[[category]]: <b>[[value]]</b>",
                    "fillColorsField" : "color",
                    "fillAlphas" : 1,
                    "lineAlpha" : 0.1,
                    "type" : "column",
                    "valueField" : "qtdovos"
                } ],
                "depth3D" : 20,
                "angle" : 30,
                "chartCursor" : {
                    "categoryBalloonEnabled" : false,
                    "cursorAlpha" : 0,
                    "zoomable" : false
                },
                "categoryField" : "bairro",
                "categoryAxis" : {
                    "gridPosition" : "start",
                    "labelRotation" : 0
                },
                "titles" : [ {
                    "text" : "Quantidade de ovos por bairro"
                } ],
                "export" : {
                    "enabled" : true,
                    "menu" : []
                }

            });
        }).fail(function(jqXHR, textStatus) {

        });

    });
});
</script>

Resposta da API: inserir a descrição da imagem aqui

4
  • 1
    O que você quer mostrar no gráfico? tem varias informações sendo retornadas no serviço, e vc está colocando tudo no gráfico "dataProvider" : data
    – N. Dias
    23/07/2018 às 22:11
  • 1
    quero pegar somente os items dataEntrega e localEntrega 23/07/2018 às 22:15
  • 1
    Eu entendi que vc quer a qntidade de ovos por bairro certo?
    – N. Dias
    23/07/2018 às 22:23
  • 1
    Quantos graficos vc tem na mesma tela? Pode ser que esteja assossiando multiplos graficos na mesma variavel. uma forma simples, seria vc pegar o resultado da sua request (data/dataProvider) e colar ele em alguma demo do proprio AmCharts e ver se sua estrutura esta certa. O funcionamento do AmChart eh muito simples, e a maior parte das vezes o problema esta na estrutura dos dados, ou alguma configuracao do grafico que esta utilizando.
    – Caio Koiti
    24/07/2018 às 6:16

1 Resposta 1

2
+50

O serviço aparentemente está ok. Logo, de acordo com a pergunta, avaliei o front e gostaria de recomendar algumas correções.

  1. Vc não disponibilizou o css e caso não saiba é necessário colocar as dimenções na div, pq sem elas o gráfico nao aparece

    #chartdiv1 { width: 100%; height: 500px; }

  2. Relacionando o gráfico para representar ovos por bairro, vc deve colocar o dataProvider. Na pergunta vc colocou o retorno do serviço diretamente e ficou dificil de entender.

var dataProvider = [
  {
    'bairro': 'centro',
    'qtdovos': 5
  },
  {
    'bairro': 'lapa',
    'qtdovos': 10
  },
  {
    'bairro': 'Copacabana',
    'qtdovos': 16
  }
];

var chart = AmCharts.makeChart("chartdiv1", {
    "theme" : "light",
    "type" : "serial",
    "startDuration" : 2,
    "dataProvider" : dataProvider,
    "valueAxes" : [ {
    	"axisAlpha": 0,
      "position" : "left",
      "title" : "quantidade"
    }],
    "graphs" : [ {
      "balloonText" : "[[category]]: <b>[[value]]</b>",
      "fillColorsField" : "color",
      "fillAlphas" : 1,
      "lineAlpha" : 0.1,
      "type" : "column",
      "valueField" : "qtdovos"
    } ],
    "depth3D" : 20,
    "angle" : 30,
    "chartCursor" : {
      "categoryBalloonEnabled" : false,
      "cursorAlpha" : 0,
      "zoomable" : false
    },
    "categoryField" : "bairro",
    "categoryAxis" : {
      "gridPosition" : "start",
      "labelRotation" : 0
    },
    "titles" : [{
      "text" : "Quantidade de ovos por bairro"
    }],
    "export" : {
      "enabled" : true,
      "menu" : []
    }
});
#chartdiv1 {
  width: 100%;
  height: 500px;
}

.amcharts-export-menu-top-right {
  top: 10px;
  right: 0;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv1"></div>													

Caso queira outras informações no gráfico altere a categoryField e o ValueField com a key do json do serviço.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .