#7811

by amcharts

HTML

<link rel="stylesheet" href="http://www.amcharts.com/lib/3/ammap.css" type="text/css">
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<script src="http://www.amcharts.com/lib/3/exporting/amexport.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/exporting/rgbcolor.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/exporting/canvg.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/exporting/filesaver.js" type="text/javascript"></script>
<div id="mapdiv"></div>

CSS

body {
    font-family: Verdana;
    font-size: 12px;
    padding: 10px;
}
#mapdiv {
	width	: 100%;
	height	: 500px;
}

JavaScript

AmCharts.makeChart("mapdiv", {
				type: "map",
    // I have replaced this for demo purposes only
				//pathToImages: "/infographics/ammap/images/",
    pathToImages: "http://www.amcharts.com/lib/3/images/",

				colorSteps: 10,

				dataProvider: {
					map: "usaLow",
					areas: [{
						id: "US-AL",
                        color: "#00cc00"
					}, {
						id: "US-AK",
                        color: "#00cc00",
                          description: "Brrrrr... cold!"
					}, {
						id: "US-AZ",
						color: "#00cc00"
					}, {
						id: "US-AR",
						color: "#00cc00"
					}, {
						id: "US-CA",
						color: "#00cc00"
					}, {
						id: "US-CO",
						color: "#00cc00"
					}, {
						id: "US-CT",
						color: "#00cc00"
					}, {
						id: "US-DE",
						color: "#00cc00"
					}, {
						id: "US-FL",
						color: "#00cc00"
					}, {
						id: "US-GA",
						color: "#00cc00"
					}, {
						id: "US-HI",
						color: "#00cc00"
					}, {
						id: "US-ID",
						color: "#00cc00"
					}, {
						id: "US-IL",
						color: "#00cc00"
					}, {
						id: "US-IN",
						color: "#00cc00"
					}, {
						id: "US-IA",
						color: "#cc0000"
					}, {
						id: "US-KS",
						color: "#cc0000"
					}, {
						id: "US-KY",
						color: "#cc0000"
					}, {
						id: "US-LA",
						color: "#cc0000"
					}, {
						id: "US-ME",
						color: "#cc0000"
					}, {
						id: "US-MD",
						color: "#cc0000"
					}, {
						id: "US-MA",
						color: "#cc0000"
					}, {
						id: "US-MI",
						color: "#cc0000"
					}, {
						id: "US-MN",
						color: "#cc0000"
					}, {
						id: "US-MS",
						color: "#cc0000"
					}, {
						id: "US-MO",
						color: "#cc0000"
					}, {
						id: "US-MT",
						color: "#cc0000"
					}, {
						id: "US-NE",
						color: "#cc0000"
					}, {
						id: "US-NV",
						color: "#cc0000"
					}, {
						id: "US-NH",
						color: "#cc0000"
					}, {
						id: "US-NJ",
						color: "#cc0000"
					}, {
						id: "US-NM",
						color: "#0000cc"
					},...