Problem generating javascript graph using Spring

Question

Problem generating javascript graph using Spring

Navigation

#1 by (2 votes)

3

I'm implementing graphics in a web application I'm developing in Spring. I have already done my API, is bringing Json with all the information of my Cart object, but the graph is not being generated in the html page. Can someone help me solve this problem? It does not display any errors on the console.

html page, where the user chooses the month he wants to see the chart.

Myservice.

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

My 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>

API response:

api javascript java html spring

asked by anonymous 21.07.2018 / 22:00

1 answer

Function that receives another function as a parameter in C # How do I use Google's reCAPTCHA to block a particular part of a page?

score 2 · Accepted Answer

The service is apparently ok. So, according to the question, I evaluated the front and would like to recommend some fixes.

You have not made the css available and if you do not know it is necessary to put the dimensions in the div, because without them the graphic does not appear

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

Relating the graph to represent eggs by neighborhood, you should put the dataProvider. In the question you put the return of the service directly and it was difficult to understand.

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><scriptsrc="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script><linkrel="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><divid="chartdiv1"></div>

If you want other information in the chart, change the categoryField and ValueField with the service json key.