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

Usage

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"><div id="chartdiv"></div></select>
    </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.   

California Selected
California Selected

 

New York Selected
New York Selected

 

Texas 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 country-region map for other countries like Afghanistan, you will need to add the data for Afghanistan in 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:

  1. Aland Island
  2. Antarctica
  3. British Indian Ocean Territory
  4. French Southern Territories
  5. Guernsey
  6. Norfolk Island
  7. Saint Barthelemy
  8. South Georgia & South Sandwich Island
  9. US Minor Outlying Islands

 

Was this article helpful?

Related Articles