How to Use amCharts with Country-Region DropDown Menu

Intro

amChart is a popular interactive data visualization tool that provides JavaScript-based charts and geographical maps. This article will demonstrate how to integrate the country-region maps in amCharts with GeoDataSource Country-Region DropDown Menu. It will highlight the corresponding state in the United States on the fly upon the selection on the dropdown list.

Pre-requisites

Firstly, you will need to download the resources below:

  1. GeoDataSource Country-Region DropDown Menu at https://github.com/geodatasource/country-region-dropdown-menu

1.0 Add the below items in the GeoDataSource Country-Region DropDown Menu HTML code:

  1. amCharts resources links (this tutorial used the hosted version from CDN)
  2. division ‘chartdiv’ & its style
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Country-Region DropDown Menu</title>

    <script src="assets/js/geodatasource-cr.min.js"></script>
    <link rel="gettext" type="application/x-po" ref="languages/en/LC_MESSAGES/en.po" />
    <script type="text/javascript" src="assets/js/Gettext.js"></script>
   
    <!-- amChart Resources -->
    <script src="https://www.amcharts.com/lib/3/ammap.js"></script>

    <style>
       #chartdiv {
          width: 100%;
          height: 500px;
       }	
     </style>
  </head>
  <body>
    <div>
        Country: <select class="gds-cr" country-data-region-id="gds-cr-one" data-language="en"></select>
        Region: <select id="gds-cr-one"></select><br><div id="chartdiv"></div>
    </div>
  </body>
</html>

2.0 Next, add a function to display country-region maps below in Country-Region DropDown Menu Javascript code.

<script>
//Display amchart map when country and region being selected
regionElement.onchange = function() {

//Get selected country code and region name from dropdown menu
var selectedCountryCode = country_region[selectedCountryIndex][0];
var selectedRegion = regionElement.options[regionElement.selectedIndex].value;

//Implement amChart Map function -- US will be demonstrate as an example 
var countryMaps = {
"US": ["usaHigh"]

//You may add other countries as below based on SVG filename in amChart
//"AF": ["afghanistanHigh"],
//"AL": ["albaniaHigh"]
};

var titles = [];
var amchart_id;
if ( countryMaps[ selectedCountryCode ] !== undefined ) {
var currentMap = countryMaps[ selectedCountryCode ][ 0 ];
}

//Use mapping file
$.getJSON( "plugins/amcharts/gds-amchart-mapping.json", function( json ) {
for (var i = 0; i < json.length; i++) {

//Get data from mapping file
var country_code= json[i].geodatasource_country;
var region_name= json[i].geodatasource_region;
var region_code= json[i].amchart_id;

if(selectedCountryCode == country_code && selectedRegion == region_name){

amchart_id = region_code;

//Set up amChart map
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"theme": "none",
"dataProvider": {
"mapURL": "https://www.amcharts.com/lib/3/maps/svg/" + currentMap + ".svg",
"zoomLevel": 0.9,
"areas": [{
"id": amchart_id,
"showAsSelected": true
}]
},
"areasSettings": {
"autoZoom": true,
"balloonText": "<strong>[[title]]</strong>",
"selectedColor": "#397ea8"
},
"zoomControl": {
"minZoomLevel": 0.9
},
"titles": titles
});
}
}
});
};
</script>

3.0 That’s all! You will be able to see a dropdown menu with country-region map displayed based on your country-region selection.

Example of California Region of United States selected

California Selected

Example of New York Region of United States selected

New York Selected

Example of Texas Region of United States selected

Texas Selected

Conclusion

You might notice some discrepancies between the regions recognized in GeoDataSource and amCharts, therefore a mapping file was provided to link the information. Please note that this demo only loads the country-region map for the United States.

If you would like to load a country-region map for other countries like Afghanistan, you will need to add the data for Afghanistan in the Javascript code above based on the amChart SVG Map filename. For instance, the amChart link for Afghanistan SVG map is https://www.amcharts.com/lib/3/maps/svg/afghanistanHigh.svg . In your JavaScript code, you will need to add the country code and the SVG filename. E.g. “AF”:[“afghanistanHigh”] .

List of countries which are not available in amCharts:

Aland Island
Antarctica
British Indian Ocean Territory
French Southern Territories
Guernsey
Norfolk Island
Saint Barthelemy
South Georgia & South Sandwich Island
US Minor Outlying Islands

Was this article helpful?

Yes No

Related Articles