JSP Box And Whisker Charts & Graphs

Download JSP Chart Samples 
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="com.google.gson.Gson"%>
<%@ page import="com.google.gson.JsonObject"%>

<%
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", "Doughnut"); map.put("y", new Double[] {340.0, 382.0, 430.0, 452.0, 417.0}); list.add(map);
map = new HashMap<Object,Object>(); map.put("label", "Pie"); map.put("y", new Double[] {204.0, 260.0, 484.0, 531.0, 316.0}); list.add(map);
map = new HashMap<Object,Object>(); map.put("label", "Pop-Tarts"); map.put("y", new Double[] {363.0, 390.0, 399.5, 440.0, 394.0}); list.add(map);
map = new HashMap<Object,Object>(); map.put("label", "Pancakes"); map.put("y", new Double[] {194.0, 224.5, 342.0, 384.0, 251.0}); list.add(map);
map = new HashMap<Object,Object>(); map.put("label", "Cake"); map.put("y", new Double[] {252.0, 346.0, 409.0, 437.0, 374.5}); list.add(map);
map = new HashMap<Object,Object>(); map.put("label", "Bread"); map.put("y", new Double[] {179.0, 256.0, 300.0, 418.0, 274.0}); list.add(map);
map = new HashMap<Object,Object>(); map.put("label", "Biscuit"); map.put("y", new Double[] {236.0, 281.5, 336.5, 428.0, 313.0}); list.add(map);
map = new HashMap<Object,Object>(); map.put("label", "Bagels"); map.put("y", new Double[] {241.0, 255.0, 276.5, 294.0, 274.5}); list.add(map);
map = new HashMap<Object,Object>(); map.put("label", "Cookies"); map.put("y", new Double[] {345.0, 449.5, 500.0, 558.0, 471.5}); list.add(map);

String dataPoints = gsonObj.toJson(list);
%>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
window.onload = function() { 

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2",
	title:{
		text: "Energy in Baked Foods"
	},
	axisY: {
		title: "Energy Per 100 g (kcal/100g)"
	},
	data: [{
		type: "boxAndWhisker",
		yValueFormatString: "#,##0.# \"kcal/100g\"",
		dataPoints: <%out.print(dataPoints);%>
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>