JSP Stacked Bar 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. List<Map<Object,Object>> list = new ArrayList<Map<Object,Object>>();
  10.  
  11. map = new HashMap<Object,Object>(); map.put("label", "2010"); map.put("y", 1828); list.add(map);
  12. map = new HashMap<Object,Object>(); map.put("label", "2011"); map.put("y", 1723); list.add(map);
  13. map = new HashMap<Object,Object>(); map.put("label", "2012"); map.put("y", 1511); list.add(map);
  14. map = new HashMap<Object,Object>(); map.put("label", "2013"); map.put("y", 1571); list.add(map);
  15. map = new HashMap<Object,Object>(); map.put("label", "2014"); map.put("y", 1569); list.add(map);
  16. map = new HashMap<Object,Object>(); map.put("label", "2015"); map.put("y", 1350); list.add(map);
  17. map = new HashMap<Object,Object>(); map.put("label", "2016"); map.put("y", 1241); list.add(map);
  18.  
  19. String dataPoints1 = gsonObj.toJson(list);
  20.  
  21. list = new ArrayList<Map<Object,Object>>();
  22. map = new HashMap<Object,Object>(); map.put("label", "2010"); map.put("y", 399); list.add(map);
  23. map = new HashMap<Object,Object>(); map.put("label", "2011"); map.put("y", 409); list.add(map);
  24. map = new HashMap<Object,Object>(); map.put("label", "2012"); map.put("y", 493); list.add(map);
  25. map = new HashMap<Object,Object>(); map.put("label", "2013"); map.put("y", 444); list.add(map);
  26. map = new HashMap<Object,Object>(); map.put("label", "2014"); map.put("y", 444); list.add(map);
  27. map = new HashMap<Object,Object>(); map.put("label", "2015"); map.put("y", 527); list.add(map);
  28. map = new HashMap<Object,Object>(); map.put("label", "2016"); map.put("y", 547); list.add(map);
  29.  
  30. String dataPoints2 = gsonObj.toJson(list);
  31.  
  32. list = new ArrayList<Map<Object,Object>>();
  33. map = new HashMap<Object,Object>(); map.put("label", "2010"); map.put("y", 43); list.add(map);
  34. map = new HashMap<Object,Object>(); map.put("label", "2011"); map.put("y", 37); list.add(map);
  35. map = new HashMap<Object,Object>(); map.put("label", "2012"); map.put("y", 30); list.add(map);
  36. map = new HashMap<Object,Object>(); map.put("label", "2013"); map.put("y", 34); list.add(map);
  37. map = new HashMap<Object,Object>(); map.put("label", "2014"); map.put("y", 37); list.add(map);
  38. map = new HashMap<Object,Object>(); map.put("label", "2015"); map.put("y", 35); list.add(map);
  39. map = new HashMap<Object,Object>(); map.put("label", "2016"); map.put("y", 33); list.add(map);
  40.  
  41. String dataPoints3 = gsonObj.toJson(list);
  42. %>
  43.  
  44. <!DOCTYPE HTML>
  45. <html>
  46. <head>
  47. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  48. <script type="text/javascript">
  49. window.onload = function() { 
  50.  
  51. var chart = new CanvasJS.Chart("chartContainer", {
  52. 	title: {
  53. 		text: "Carbon Dioxide Emissions from Energy Consumption"
  54. 	},
  55. 	axisY: {
  56. 		title: "Million Metric Tons of Carbon Dioxide"
  57. 	},
  58. 	legend: {
  59. 		verticalAlign: "top"
  60. 	},
  61. 	toolTip: {
  62. 		shared: true
  63. 	},
  64. 	data: [{
  65. 		type: "stackedBar",
  66. 		name: "Coal",
  67. 		showInLegend: true,
  68. 		dataPoints: <%out.print(dataPoints1);%>
  69. 	},
  70. 	{
  71. 		type: "stackedBar",
  72. 		name: "Natural Gas",
  73. 		showInLegend: true,
  74. 		dataPoints: <%out.print(dataPoints2);%>
  75. 	},
  76. 	{
  77. 		type: "stackedBar",
  78. 		name: "Others",
  79. 		showInLegend: true,
  80. 		dataPoints: <%out.print(dataPoints3);%>
  81. 	}]
  82. });
  83. chart.render();
  84.  
  85. }
  86. </script>
  87. </head>
  88. <body>
  89. <div id="chartContainer" style="height: 370px; width: 100%;"></div>
  90. <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  91. </body>
  92. </html>