1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2<html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 7 <title>amCharts Data Loader Example</title> 8 <link rel="stylesheet" href="http://www.amcharts.com/lib/3/ammap.css" type="text/css"> 9 <script src="http://www.amcharts.com/lib/3/ammap.js"></script> 10 <script src="http://www.amcharts.com/lib/3/maps/js/usaLow.js"></script> 11 <script src="../dataloader.min.js"></script> 12 <style> 13 body, html { 14 font-family: Verdana; 15 font-size: 12px; 16 } 17 #chartdiv { 18 width: 100%; 19 height: 500px; 20 } 21 </style> 22 <script> 23 /** 24 * We will use Data Loader's function to load data "externally" 25 * then create a map when it's loaded 26 */ 27 AmCharts.loadFile( "data/map_areas.json", {}, function( areas ) { 28 29 // now that we loaded our areas, let's create the map 30 var map = AmCharts.makeChart( "chartdiv", { 31 "type": "map", 32 "colorSteps": 10, 33 "dataProvider": { 34 "map": "usaLow", 35 "areas": AmCharts.parseJSON( areas ) 36 }, 37 "areasSettings": { 38 "autoZoom": true 39 }, 40 "valueLegend": { 41 "right": 10, 42 "minValue": "little", 43 "maxValue": "a lot!" 44 } 45 } ); 46 47 } ); 48 </script> 49 </head> 50 51 <body> 52 <div id="chartdiv"></div> 53 </body> 54 55</html>