JSP Scatter Charts with Custom Markers

<%@ 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", 23); map.put("y", 340); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 20); map.put("y", 292); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 21); map.put("y", 292); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 22); map.put("y", 292); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 23); map.put("y", 290); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 24); map.put("y", 321); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 25); map.put("y", 321); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 26); map.put("y", 321); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 27); map.put("y", 250); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 28); map.put("y", 390); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 29); map.put("y", 250); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 30); map.put("y", 400); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 31); map.put("y", 453); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 32); map.put("y", 405); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 33); map.put("y", 430); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 34); map.put("y", 380); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 35); map.put("y", 350); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 36); map.put("y", 380); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 37); map.put("y", 390); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 38); map.put("y", 405); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 39); map.put("y", 410); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 40); map.put("y", 415); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 41); map.put("y", 430); list.add(map);


String dataPoints1 = gsonObj.toJson(list);

list = new ArrayList<Map<Object,Object>>();
map = new HashMap<Object,Object>(); map.put("x", 19); map.put("y", 260); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 20); map.put("y", 250); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 21); map.put("y", 240); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 22); map.put("y", 250); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 23); map.put("y", 265); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 24); map.put("y", 330); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 25); map.put("y", 240); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 26); map.put("y", 360); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 27); map.put("y", 250); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 28); map.put("y", 240); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 29); map.put("y", 225); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 30); map.put("y", 330); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 31); map.put("y", 250); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 32); map.put("y", 290); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 33); map.put("y", 350); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 34); map.put("y", 390); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 37); map.put("y", 280); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 38); map.put("y", 285); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 40); map.put("y", 290); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 41); map.put("y", 295); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 43); map.put("y", 320); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 44); map.put("y", 340); list.add(map);
map = new HashMap<Object,Object>(); map.put("x", 42); map.put("y", 360); list.add(map);

String dataPoints2 = 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,
	theme: "dark2",
	title:{
		text: "Server Performance"
	},
	axisX: {
		title:"Server Load (in TPS)"
	},
	axisY:{
		title: "Response Time (in ms)",
		gridThickness: 0,
		lineThickness: 1
	},
	legend:{
		cursor: "pointer",
		itemclick: toggleDataSeries
	},
	data: [{
		type: "scatter",
		toolTipContent: "<b>{name}</b><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b> {y} ms",
		name: "Server 1",
		markerType: "circle",
		showInLegend: true,
		dataPoints: <%out.print(dataPoints1);%>
	},
	{
		type: "scatter",
		name: "Server 2",
		markerType: "triangle",
		showInLegend: true, 
		toolTipContent: "<b>{name}</b><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b> {y} ms",
		dataPoints: <%out.print(dataPoints2);%>
	}]
});
chart.render();

function toggleDataSeries(e){
	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	}
	else{
		e.dataSeries.visible = true;
	}
	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>