JSP Bubble 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("x", .743); map.put("y", 5352); map.put("z", 17.11); map.put("label", "Chile"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 9.327); map.put("y", 66239); map.put("z", 1337); map.put("label", "China"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 9.09); map.put("y", 58345); map.put("z", 34.12); map.put("label", "Canada"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 8.45); map.put("y", 29817); map.put("z", 194.94); map.put("label", "Brazil"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 1.94); map.put("y", 26704); map.put("z", 113.42); map.put("label", "Mexico"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", .348); map.put("y", 33708); map.put("z", 81.77); map.put("label", "Germany"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 7.68); map.put("y", 8615); map.put("z", 22.29); map.put("label", "Australia"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 2.73); map.put("y", 25023); map.put("z", 40.41); map.put("label", "Argentina"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 2.97); map.put("y", 63974); map.put("z", 1224.61); map.put("label", "India"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 1.21); map.put("y", 22051); map.put("z", 49.99); map.put("label", "SA"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 9.14); map.put("y", 228513); map.put("z", 309.34); map.put("label", "US"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", .364); map.put("y", 20035); map.put("z", 127.45); map.put("label", "Japan"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", .547); map.put("y", 33608); map.put("z", 65.07); map.put("label", "France"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", .241); map.put("y", 31471); map.put("z", 62.23); map.put("label", "U.K"); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", .995); map.put("y", 5195); map.put("z", 81.12); map.put("label", "Egypt"); 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,
	title:{
		text: "Rail Roads vs Land Area and Population"
	},
	axisX: {
		title:"Land Area (million sq. km)",
		maximum: 10,
		minimum: -.1
	},
	axisY:{
		title: "Rail Lines (in km)",
		valueFormatString:"#,##0 km,.",
		interval: 50000
	},
	data: [{
		type: "bubble",
		name: "Size of Bubble Represents Population",
		showInLegend: true,
		toolTipContent: "<b>{label}</b><br/><b>Land Area:</b> {x}mn sq. km <br/><b>Rail Road:</b> {y} km<br/> <b>Population:</b>{z}mn",
		dataPoints : <%out.print(dataPoints);%>
	}]
});
chart.render();

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