<%@ 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://cdn.canvasjs.com/canvasjs.min.js"></script> </body> </html>