<%@ 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", "Nigeria"); map.put("y", 73884); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "India"); map.put("y", 391672); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Indonesia"); map.put("y", 134556); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Thailand"); map.put("y", 51949); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Iran"); map.put("y", 46182); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Argentina"); map.put("y", 54178); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Turkey"); map.put("y", 67259); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Colombia"); map.put("y", 35610); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "China"); map.put("y", 843061); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Brazil"); map.put("y", 95558); list.add(map); String dataPoints1 = gsonObj.toJson(list); list = new ArrayList<Map<Object,Object>>(); map = new HashMap<Object,Object>(); map.put("label", "Nigeria"); map.put("y", 106676); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "India"); map.put("y", 580755); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Indonesia"); map.put("y", 441307); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Thailand"); map.put("y", 132801); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Iran"); map.put("y", 167410); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Argentina"); map.put("y", 166328); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Turkey"); map.put("y", 212356); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Colombia"); map.put("y", 152044); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "China"); map.put("y", 4899531); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Brazil"); map.put("y", 484870); list.add(map); String dataPoints2 = gsonObj.toJson(list); list = new ArrayList<Map<Object,Object>>(); map = new HashMap<Object,Object>(); map.put("label", "Nigeria"); map.put("y", 226634); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "India"); map.put("y", 1280813); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Indonesia"); map.put("y", 365090); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Thailand"); map.put("y", 205842); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Iran"); map.put("y", 198748); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Argentina"); map.put("y", 320736); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Turkey"); map.put("y", 476101); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Colombia"); map.put("y", 212462); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "China"); map.put("y", 6463471); list.add(map); map = new HashMap<Object,Object>(); map.put("label", "Brazil"); map.put("y", 1189171); list.add(map); String dataPoints3 = 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", { theme: "light2", title: { text: "GDP by Sectors - 2015" }, subtitles: [{ text: "in Million Dollars" }], toolTip: { shared: true }, data: [{ type: "stackedBar100", name: "Agricultural Sector", showInLegend: true, yValueFormatString: "$#,##0 mn", dataPoints: <%out.print(dataPoints1);%> }, { type: "stackedBar100", name: "Industrial Sector", showInLegend: true, yValueFormatString: "$#,##0 mn", dataPoints: <%out.print(dataPoints2);%> }, { type: "stackedBar100", name: "Service Sector", showInLegend: true, yValueFormatString: "$#,##0 mn", dataPoints: <%out.print(dataPoints3);%> }] }); 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>