With loading a google chart using Spring MVC

1

I have a jsp page with the following code that uses google charts and shows the graphs on the jsp page. When I use a servlet as a controller it works perfectly.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Google Chart in JSP-Servlet</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scripttype="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript">
            $(document).ready(
                    function () {

                    $.ajax({
                    url: "ChartController", //vem lá do serlet
                            dataType: "JSON",
                            success: function (result) {
                            google.charts.load('current', {
                            'packages': ['corechart']
                            });
                                    google.charts.setOnLoadCallback(function () {
                                    drawChart(result);
                                    });
                            }
                    });
                            function drawChart(result) {
                            var data = new google.visualization.DataTable();
                                    data.addColumn('string', 'Name');
                                    data.addColumn('number', 'Quantity');
                                    var dataArray = [];
                                    $.each(result, function (i, obj) {
                                    dataArray.push([obj.name, obj.quantity]);
                                    });
                                    data.addRows(dataArray);
                                    var piechart_options = {
                                    title: 'Pie Chart : How Much Products Sold By  Last Night',
                                            width: 400,
                                            height: 300
                                    };
                                    var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
                                    piechart.draw(data, piechart_options);
                                    var barchart_options = {
                                    title: 'Barchart : How Much Products Sold By Last Night',
                                            width: 400,
                                            height: 300,
                                            legend: 'none'
                                    };
                                    var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
                                    barchart.draw(data, barchart_options);
                                    var lineChart_options = {
                                    title: 'LineChart : How Much Products Sold By Last Night',
                                            width: 400,
                                            height: 300,
                                            legend: 'none'
                                           // curveType: 'function',
                                           // legend: { position: 'bottom' }
                                    };
                                    var candlestickChart = new google.visualization.LineChart(document.getElementById('lineChart_div'));
                                    candlestickChart.draw(data, lineChart_options);
                            }
                    });

        </script>
    </head>
    <body>
        <table class="columns">
            <tr>
                <td><div id="piechart_div" style="border: 1px solid #ccc"></div></td>
                <td><div id="barchart_div" style="border: 1px solid #ccc"></div></td>
                <td><div id="lineChart_div" style="border: 1px solid #ccc"></div></td>
            </tr>          
        </table>

    </body>
</html>

And has the following servlet controller:

@WebServlet(name="ChartController", urlPatterns={"/ChartController"})  
public class ChartController extends HttpServlet {

        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
            ProductModel productModel = new ProductModel();
            Gson gson = new Gson();
            String jsonString = gson.toJson(productModel.findAll());
            response.setContentType("application/json");
            PrintWriter out = response.getWriter();
            out.println(gson.toJson(productModel.findAll()));

   } 

}

I tried converting this to use Spring with thymeleaf but I can only display a json file on the page when the user clicks the link, I wanted to show the graphics and not the json file!

What should I do here is the section of my controller:

  @RequestMapping(value = "/chart", method = RequestMethod.GET, produces = "application/json")
    public @ResponseBody
    String showChart(HttpServletRequest request) {

        Gson gson = new GsonBuilder().setPrettyPrinting().create();
        String json2 = gson.toJson(productService.findAll());

        return json2;
    }

And I tried to do so in the javascript file to call my spring controller:

    $(document).ready(
                    function () {

                    $.ajax({
                    url: "/springsecurity/product/chart",
                            dataType: "JSON",
                            success: function (result) {
                            google.charts.load('current', {
                            'packages': ['corechart']
                            });
                                    google.charts.setOnLoadCallback(function () {
                                    drawChart(result);
                                    });
                            }
                    });

...

I think my controller is in the wrong configuration along with the way I call it in the javascript file. How can I improve this?

    
asked by anonymous 09.05.2017 / 21:05

0 answers