Scatter Chart with highlighted area

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/xy.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
	"type": "xy",
	"pathToImages": "http://www.amcharts.com/lib/3/images/",
	"marginBottom": 60,
	"marginLeft": 64,
	"chartCursor": {},
	"chartScrollbar": {},
	"trendLines": [
		{
			"finalValue": 11,
			"finalXValue": 12,
			"id": "TrendLine-1",
			"initialValue": 2,
			"initialXValue": 1,
			"lineColor": "#FF6600"
		},
		{
			"finalValue": 19,
			"finalXValue": 12,
			"id": "TrendLine-2",
			"initialValue": 1,
			"initialXValue": 1,
			"lineColor": "#FCD202"
		}
	],
	"graphs": [
		{
			"balloonText": "x:[[x]] y:[[y]]",
			"bullet": "triangleUp",
			"id": "AmGraph-1",
			"lineAlpha": 0,
			"lineColor": "#FF6600",
			"xField": "ax",
			"yField": "ay"
		},
		{
			"balloonText": "x:[[x]] y:[[y]]",
			"bullet": "triangleDown",
			"id": "AmGraph-2",
			"lineAlpha": 0,
			"lineColor": "#FCD202",
			"xField": "bx",
			"yField": "by"
		},
		{
			"columnWidth": 0,
			"fillAlphas": 0.32,
			"fillColors": "#B0DE09",
			"fontSize": 1,
			"id": "Highlighted Area",
			"lineColor": "#B0DE09",
			"xField": "hx",
			"yField": "hy"
		}
	],
	"guides": [],
	"valueAxes": [
		{
			"id": "ValueAxis-1",
			"position": "bottom",
			"axisAlpha": 0,
			"dashLength": 1,
			"title": "X Axis"
		},
		{
			"id": "ValueAxis-2",
			"axisAlpha": 0,
			"dashLength": 1,
			"title": "Y Axis"
		}
	],
	"allLabels": [],
	"balloon": {},
	"titles": [],
	"dataProvider": [
		{
			"ax": 1,
			"ay": 0.5,
			"bx": 1,
			"by": 2.2,
			"hx": "1",
			"hy": "2"
		},
		{
			"ax": 2,
			"ay": 1.3,
			"bx": 2,
			"by": 4.9,
			"hx": "1",
			"hy": "1"
		},
		{
			"ax": 3,
			"ay": 2.3,
			"bx": 3,
			"by": 5.1,
			"hx": "1",
			"hy": "1"
		},
		{
			"ax": 4,
			"ay": 2.8,
			"bx": 4,
			"by": 5.3,
			"hx": "1",
			"hy": "1"
		},
		{
			"ax": 5,
			"ay": 3.5,
			"bx": 5,
			"by": 6.1,
			"hx": "1",
			"hy": "1"
		},
		{
			"ax": 6,
			"ay": 5.1,
			"bx": 6,
			"by": 8.3,
			"hx": "1",
			"hy": "1"
		},
		{
			"ax": 7,
			"ay": 6.7,
			"bx": 7,
			"by": 10.5,
			"hx":...