1
I have a jsp page with the following code that uses google Charts and shows the Graphics 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>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="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 Controller Servlet:
@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 to convert this to use Spring with Thymeleaf but I can only display a json file on the page when the user clicks on the link, I wanted to show the Graphics and not the json file!
What I should do here is the excerpt from 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 believe my controller has the wrong configuration along with the way I call it in the javascript file. How to improve this?