JSP Drilldown Charts & Graphs

Download JSP Chart Samples 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
  2. <%@ page import="java.util.*" %>
  3. <%@ page import="com.google.gson.Gson"%>
  4. <%@ page import="com.google.gson.JsonObject"%>
  5.  
  6. <%
  7. Gson gsonObj = new Gson();
  8. Map<Object,Object> map = null;
  9. int totalVisitors = 883000;
  10. List<Map<Object,Object>> list = new ArrayList<Map<Object,Object>>();
  11.  
  12. map = new HashMap<Object,Object>(); map.put("y", 519960); map.put("name", "New Visitors"); map.put("color", "#E7823A"); list.add(map);
  13. map = new HashMap<Object,Object>(); map.put("y", 363040); map.put("name", "Returning Visitors"); map.put("color", "#546BC1"); list.add(map);
  14.  
  15. String newVsReturningVisitorsDataPoints = gsonObj.toJson(list);
  16.  
  17. list = new ArrayList<Map<Object,Object>>();
  18. map = new HashMap<Object,Object>(); map.put("x", 1420050600000L); map.put("y", 33000); list.add(map);
  19. map = new HashMap<Object,Object>(); map.put("x", 1422729000000L); map.put("y", 35960); list.add(map);
  20. map = new HashMap<Object,Object>(); map.put("x", 1425148200000L); map.put("y", 42160); list.add(map);
  21. map = new HashMap<Object,Object>(); map.put("x", 1427826600000L); map.put("y", 42240); list.add(map);
  22. map = new HashMap<Object,Object>(); map.put("x", 1430418600000L); map.put("y", 43200); list.add(map);
  23. map = new HashMap<Object,Object>(); map.put("x", 1433097000000L); map.put("y", 40600); list.add(map);
  24. map = new HashMap<Object,Object>(); map.put("x", 1435689000000L); map.put("y", 42560); list.add(map);
  25. map = new HashMap<Object,Object>(); map.put("x", 1438367400000L); map.put("y", 44280); list.add(map);
  26. map = new HashMap<Object,Object>(); map.put("x", 1441045800000L); map.put("y", 44800); list.add(map);
  27. map = new HashMap<Object,Object>(); map.put("x", 1443637800000L); map.put("y", 48720); list.add(map);
  28. map = new HashMap<Object,Object>(); map.put("x", 1446316200000L); map.put("y", 50840); list.add(map);
  29. map = new HashMap<Object,Object>(); map.put("x", 1448908200000L); map.put("y", 51600); list.add(map);
  30.  
  31. String newVisitorsDataPoints = gsonObj.toJson(list);
  32.  
  33. list = new ArrayList<Map<Object,Object>>();
  34. map = new HashMap<Object,Object>(); map.put("x", 1420050600000L); map.put("y", 22000); list.add(map);
  35. map = new HashMap<Object,Object>(); map.put("x", 1422729000000L); map.put("y", 26040); list.add(map);
  36. map = new HashMap<Object,Object>(); map.put("x", 1425148200000L); map.put("y", 25840); list.add(map);
  37. map = new HashMap<Object,Object>(); map.put("x", 1427826600000L); map.put("y", 23760); list.add(map);
  38. map = new HashMap<Object,Object>(); map.put("x", 1430418600000L); map.put("y", 28800); list.add(map);
  39. map = new HashMap<Object,Object>(); map.put("x", 1433097000000L); map.put("y", 29400); list.add(map);
  40. map = new HashMap<Object,Object>(); map.put("x", 1435689000000L); map.put("y", 33440); list.add(map);
  41. map = new HashMap<Object,Object>(); map.put("x", 1438367400000L); map.put("y", 37720); list.add(map);
  42. map = new HashMap<Object,Object>(); map.put("x", 1441045800000L); map.put("y", 35200); list.add(map);
  43. map = new HashMap<Object,Object>(); map.put("x", 1443637800000L); map.put("y", 35280); list.add(map);
  44. map = new HashMap<Object,Object>(); map.put("x", 1446316200000L); map.put("y", 31160); list.add(map);
  45. map = new HashMap<Object,Object>(); map.put("x", 1448908200000L); map.put("y", 34400); list.add(map);
  46.  
  47. String returningVisitorsDataPoints  = gsonObj.toJson(list);
  48. %>
  49.  
  50. <!DOCTYPE HTML>
  51. <html>
  52. <head>
  53. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  54. <script type="text/javascript">
  55. window.onload = function () {
  56.  
  57. var totalVisitors = <%out.print(totalVisitors);%>;
  58. var visitorsData = {
  59. 	"New vs Returning Visitors": [{
  60. 		click: visitorsChartDrilldownHandler,
  61. 		cursor: "pointer",
  62. 		explodeOnClick: false,
  63. 		innerRadius: "75%",
  64. 		legendMarkerType: "square",
  65. 		name: "New vs Returning Visitors",
  66. 		radius: "100%",
  67. 		showInLegend: true,
  68. 		startAngle: 90,
  69. 		type: "doughnut",
  70. 		dataPoints: <%out.print(newVsReturningVisitorsDataPoints);%>
  71. 	}],
  72. 	"New Visitors": [{
  73. 		color: "#E7823A",
  74. 		name: "New Visitors",
  75. 		type: "column",
  76. 		xValueType: "dateTime",
  77. 		dataPoints: <%out.print(newVisitorsDataPoints);%>
  78. 	}],
  79. 	"Returning Visitors": [{
  80. 		color: "#546BC1",
  81. 		name: "Returning Visitors",
  82. 		type: "column",
  83. 		xValueType: "dateTime",
  84. 		dataPoints: <%out.print(returningVisitorsDataPoints);%>
  85. 	}]
  86. };
  87.  
  88. var newVSReturningVisitorsOptions = {
  89. 	animationEnabled: true,
  90. 	theme: "light2",
  91. 	title: {
  92. 		text: "New VS Returning Visitors"
  93. 	},
  94. 	subtitles: [{
  95. 		text: "Click on Any Segment to Drilldown",
  96. 		backgroundColor: "#2eacd1",
  97. 		fontSize: 16,
  98. 		fontColor: "white",
  99. 		padding: 5
  100. 	}],
  101. 	legend: {
  102. 		fontFamily: "calibri",
  103. 		fontSize: 14,
  104. 		itemTextFormatter: function (e) {
  105. 			return e.dataPoint.name + ": " + Math.round(e.dataPoint.y / totalVisitors * 100) + "%";  
  106. 		}
  107. 	},
  108. 	data: []
  109. };
  110.  
  111. var visitorsDrilldownedChartOptions = {
  112. 	animationEnabled: true,
  113. 	theme: "light2",
  114. 	axisX: {
  115. 		labelFontColor: "#717171",
  116. 		lineColor: "#a2a2a2",
  117. 		tickColor: "#a2a2a2"
  118. 	},
  119. 	axisY: {
  120. 		gridThickness: 0,
  121. 		includeZero: false,
  122. 		labelFontColor: "#717171",
  123. 		lineColor: "#a2a2a2",
  124. 		tickColor: "#a2a2a2",
  125. 		lineThickness: 1
  126. 	},
  127. 	data: []
  128. };
  129.  
  130. var chart = new CanvasJS.Chart("chartContainer", newVSReturningVisitorsOptions);
  131. chart.options.data = visitorsData["New vs Returning Visitors"];
  132. chart.render();
  133.  
  134. function visitorsChartDrilldownHandler(e) {
  135. 	chart = new CanvasJS.Chart("chartContainer", visitorsDrilldownedChartOptions);
  136. 	chart.options.data = visitorsData[e.dataPoint.name];
  137. 	chart.options.title = { text: e.dataPoint.name }
  138. 	chart.render();
  139. 	$("#backButton").toggleClass("invisible");
  140. }
  141.  
  142. $("#backButton").click(function() { 
  143. 	$(this).toggleClass("invisible");
  144. 	chart = new CanvasJS.Chart("chartContainer", newVSReturningVisitorsOptions);
  145. 	chart.options.data = visitorsData["New vs Returning Visitors"];
  146. 	chart.render();
  147. });
  148.  
  149. }
  150. </script>
  151. <style>
  152.   #backButton {
  153. 	border-radius: 4px;
  154. 	padding: 8px;
  155. 	border: none;
  156. 	font-size: 16px;
  157. 	background-color: #2eacd1;
  158. 	color: white;
  159. 	position: absolute;
  160. 	top: 10px;
  161. 	right: 10px;
  162. 	cursor: pointer;
  163.   }
  164.   .invisible {
  165.     display: none;
  166.   }
  167. </style>
  168. </head>
  169. <body>
  170. <div id="chartContainer" style="height: 370px; width: 100%;"></div>
  171. <button class="btn invisible" id="backButton">&lt; Back</button>
  172. <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
  173. <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  174. </body>
  175. </html>