I am including the graph as an ajax response using spring mvc
The controller code:
@RequestMapping(value = {"/welcome"}, method = RequestMethod.GET)
public ModelAndView defaultPages(HttpServletRequest request, HttpSession session) {
ModelAndView model = new ModelAndView();
Gson gsonObj = new Gson();
Map<Object, Object> map = null;
List<Map<Object, Object>> list = new ArrayList<Map<Object, Object>>();
map = new HashMap<Object, Object>();
map.put("label", "Australia");
map.put("y", 81000);
list.add(map);
map = new HashMap<Object, Object>();
map.put("label", "China");
map.put("y", 47000);
list.add(map);
map = new HashMap<Object, Object>();
map.put("label", "Brazil");
map.put("y", 32500);
list.add(map);
map = new HashMap<Object, Object>();
map.put("label", "Guinea");
map.put("y", 19300);
list.add(map);
map = new HashMap<Object, Object>();
map.put("label", "India");
map.put("y", 19000);
list.add(map);
map = new HashMap<Object, Object>();
map.put("label", "Jamaica");
map.put("y", 9800);
list.add(map);
map = new HashMap<Object, Object>();
map.put("label", "Kazakhstan");
map.put("y", 5500);
list.add(map);
map = new HashMap<Object, Object>();
map.put("label", "Russia");
map.put("y", 5300);
list.add(map);
map = new HashMap<Object, Object>();
map.put("label", "Others");
map.put("y", 15060);
list.add(map);
String dataPoints = gsonObj.toJson(list);
model.addObject("dataPoints", dataPoints);
model.setViewName("home");
return model;
}
The view
<c:set var="points" value="${dataPoints}"></c:set>
<c:out value="${dataPoints}"></c:out>
<div id="getPointsForMe">${dataPoints}</div>
<div id="chartContainer" style="height: 370px; width: 100%">
</div>
<script type="text/javascript">
window.onload = function() {
console.log("got here");
var thePoints = $('#getPointsForMe').html();
console.log(thePoints);
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title: {
text: "World Bauxite Production"
},
subtitles: [{
text: "in tonnes"
}],
data: [{
type: "doughnut",
yValueFormatString: "#,##0",
indexLabel: "{label}: {y}K",
toolTipContent: "{y}K tonnes",
dataPoints : thePoints
}]
});
chart.render();
};
</script>
ajax call:
function goTo(link) {
var url = ‘${pageContext.request.contextPath}/’ + link;
$(‘#result1’).html(spinner);
$.get(url, function (result) {
$(‘#result1’).html(result);
});
}
.
