{"id":659,"date":"2019-08-20T00:00:00","date_gmt":"2019-08-20T00:00:00","guid":{"rendered":"https:\/\/wp3.geodatasource.com\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/"},"modified":"2026-01-15T05:12:12","modified_gmt":"2026-01-15T05:12:12","password":"","slug":"how-to-use-amcharts-with-country-region-dropdown-menu","status":"publish","type":"docs","link":"https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/","title":{"rendered":"How to Use amCharts with Country-Region DropDown Menu"},"content":{"rendered":"<h2>Intro<\/h2>\n<p>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.<\/p>\n<h2>Pre-requisites<\/h2>\n\n\n<p>Firstly, you will need to download the resources below:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>GeoDataSource Country-Region DropDown Menu at <a href=\"https:\/\/github.com\/geodatasource\/country-region-dropdown-menu\">https:\/\/github.com\/geodatasource\/country-region-dropdown-menu<\/a><\/li>\n<\/ol>\n\n\n\n<p>1.0 Add the below items in the GeoDataSource Country-Region DropDown Menu HTML code:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>amCharts resources links (this tutorial used the hosted version from CDN)<\/li>\n\n\n\n<li>division \u2018chartdiv\u2019 &amp; its style<\/li>\n<\/ol>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-f80749ea\"\n     id=\"betterdocs-code-snippet-f80749ea\"\n     data-language=\"html\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83c\udf10<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-f80749ea .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;Country-Region DropDown Menu&lt;\/title&gt;\n\n    &lt;script src=&quot;assets\/js\/geodatasource-cr.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;link rel=&quot;gettext&quot; type=&quot;application\/x-po&quot; ref=&quot;languages\/en\/LC_MESSAGES\/en.po&quot; \/&gt;\n    &lt;script type=&quot;text\/javascript&quot; src=&quot;assets\/js\/Gettext.js&quot;&gt;&lt;\/script&gt;\n   \n    &lt;!-- amChart Resources --&gt;\n    &lt;script src=&quot;https:\/\/www.amcharts.com\/lib\/3\/ammap.js&quot;&gt;&lt;\/script&gt;\n\n    &lt;style&gt;\n       #chartdiv {\n          width: 100%;\n          height: 500px;\n       }\t\n     &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div&gt;\n        Country: &lt;select class=&quot;gds-cr&quot; country-data-region-id=&quot;gds-cr-one&quot; data-language=&quot;en&quot;&gt;&lt;\/select&gt;\n        Region: &lt;select id=&quot;gds-cr-one&quot;&gt;&lt;\/select&gt;&lt;br&gt;&lt;div id=&quot;chartdiv&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-f80749ea');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<p>2.0 Next, add a function to display country-region maps below in Country-Region DropDown Menu Javascript code.<\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-0ae0b889\"\n     id=\"betterdocs-code-snippet-0ae0b889\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-0ae0b889 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>&lt;script&gt;\n\/\/Display amchart map when country and region being selected\nregionElement.onchange = function() {\n\n\/\/Get selected country code and region name from dropdown menu\nvar selectedCountryCode = country_region[selectedCountryIndex][0];\nvar selectedRegion = regionElement.options[regionElement.selectedIndex].value;\n\n\/\/Implement amChart Map function -- US will be demonstrate as an example \nvar countryMaps = {\n&quot;US&quot;: [&quot;usaHigh&quot;]\n\n\/\/You may add other countries as below based on SVG filename in amChart\n\/\/&quot;AF&quot;: [&quot;afghanistanHigh&quot;],\n\/\/&quot;AL&quot;: [&quot;albaniaHigh&quot;]\n};\n\nvar titles = [];\nvar amchart_id;\nif ( countryMaps[ selectedCountryCode ] !== undefined ) {\nvar currentMap = countryMaps[ selectedCountryCode ][ 0 ];\n}\n\n\/\/Use mapping file\n$.getJSON( &quot;plugins\/amcharts\/gds-amchart-mapping.json&quot;, function( json ) {\nfor (var i = 0; i &lt; json.length; i++) {\n\n\/\/Get data from mapping file\nvar country_code= json[i].geodatasource_country;\nvar region_name= json[i].geodatasource_region;\nvar region_code= json[i].amchart_id;\n\nif(selectedCountryCode == country_code &amp;&amp; selectedRegion == region_name){\n\namchart_id = region_code;\n\n\/\/Set up amChart map\nvar map = AmCharts.makeChart( &quot;chartdiv&quot;, {\n&quot;type&quot;: &quot;map&quot;,\n&quot;theme&quot;: &quot;none&quot;,\n&quot;dataProvider&quot;: {\n&quot;mapURL&quot;: &quot;https:\/\/www.amcharts.com\/lib\/3\/maps\/svg\/&quot; + currentMap + &quot;.svg&quot;,\n&quot;zoomLevel&quot;: 0.9,\n&quot;areas&quot;: [{\n&quot;id&quot;: amchart_id,\n&quot;showAsSelected&quot;: true\n}]\n},\n&quot;areasSettings&quot;: {\n&quot;autoZoom&quot;: true,\n&quot;balloonText&quot;: &quot;&lt;strong&gt;[[title]]&lt;\/strong&gt;&quot;,\n&quot;selectedColor&quot;: &quot;#397ea8&quot;\n},\n&quot;zoomControl&quot;: {\n&quot;minZoomLevel&quot;: 0.9\n},\n&quot;titles&quot;: titles\n});\n}\n}\n});\n};\n&lt;\/script&gt;<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-0ae0b889');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<p>3.0 That\u2019s all! You will be able to see a dropdown menu with country-region map displayed based on your country-region selection.<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"692\" src=\"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap-1024x692.png\" alt=\"Example of California Region of United States selected\" class=\"wp-image-181\" srcset=\"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap-1024x692.png 1024w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap-300x203.png 300w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap-768x519.png 768w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap-50x34.png 50w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap-920x621.png 920w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap-600x405.png 600w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap-320x216.png 320w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap.png 1303w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">California Selected<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"696\" src=\"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap2-1024x696.png\" alt=\"Example of New York Region of United States selected\" class=\"wp-image-195\" srcset=\"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap2-1024x696.png 1024w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap2-300x204.png 300w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap2-768x522.png 768w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap2-50x34.png 50w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap2-920x626.png 920w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap2-600x408.png 600w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap2-320x218.png 320w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap2.png 1288w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">New York Selected<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"698\" src=\"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap3-1024x698.png\" alt=\"Example of Texas Region of United States selected\" class=\"wp-image-196\" srcset=\"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap3-1024x698.png 1024w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap3-300x204.png 300w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap3-768x523.png 768w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap3-50x34.png 50w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap3-920x627.png 920w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap3-600x409.png 600w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap3-320x218.png 320w, https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap3.png 1293w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Texas Selected<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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 <a href=\"https:\/\/www.amcharts.com\/lib\/3\/maps\/svg\/afghanistanHigh.svg\">https:\/\/www.amcharts.com\/lib\/3\/maps\/svg\/afghanistanHigh.svg<\/a> . In your JavaScript code, you will need to add the country code and the SVG filename. E.g. \u201cAF\u201d:[\u201cafghanistanHigh\u201d] .<\/p>\n\n\n\n<p>List of countries which are not available in amCharts:<\/p>\n\n\n\n<p>Aland Island<br>Antarctica<br>British Indian Ocean Territory<br>French Southern Territories<br>Guernsey<br>Norfolk Island<br>Saint Barthelemy<br>South Georgia &amp; South Sandwich Island<br>US Minor Outlying Islands<\/p>\n\n\n\n<p><\/p>\n\n\n<p style=\"text-align: center;\"><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/c7x8gAoVE1k\" allowfullscreen=\"allowfullscreen\" width=\"560\" height=\"315\" frameborder=\"0\"><\/iframe><\/p>","protected":false},"excerpt":{"rendered":"<p>Intro amChart is a popular interactive data visualization tool that provides JavaScript-based charts and geographical maps. This article will demonstrate [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[21],"doc_tag":[],"class_list":["post-659","docs","type-docs","status-publish","hentry","doc_category-technical"],"year_month":"2026-05","word_count":282,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"hexasoft","author_nicename":"hexasoft","author_url":"https:\/\/www.geodatasource.com\/resources\/author\/hexasoft\/"},"doc_category_info":[{"term_name":"Technical","term_url":"https:\/\/www.geodatasource.com\/resources\/categories\/technical\/"}],"doc_tag_info":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use amCharts with Country-Region DropDown Menu |<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use amCharts with Country-Region DropDown Menu |\" \/>\n<meta property=\"og:description\" content=\"Intro amChart is a popular interactive data visualization tool that provides JavaScript-based charts and geographical maps. This article will demonstrate [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/geodatasource\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-15T05:12:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap-1024x692.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@_geodatasource\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/tutorials\\\/how-to-use-amcharts-with-country-region-dropdown-menu\\\/\",\"url\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/tutorials\\\/how-to-use-amcharts-with-country-region-dropdown-menu\\\/\",\"name\":\"How to Use amCharts with Country-Region DropDown Menu |\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/tutorials\\\/how-to-use-amcharts-with-country-region-dropdown-menu\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/tutorials\\\/how-to-use-amcharts-with-country-region-dropdown-menu\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/DropDownMap-1024x692.png\",\"datePublished\":\"2019-08-20T00:00:00+00:00\",\"dateModified\":\"2026-01-15T05:12:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/tutorials\\\/how-to-use-amcharts-with-country-region-dropdown-menu\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/tutorials\\\/how-to-use-amcharts-with-country-region-dropdown-menu\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/tutorials\\\/how-to-use-amcharts-with-country-region-dropdown-menu\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/DropDownMap.png\",\"contentUrl\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/DropDownMap.png\",\"width\":1303,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/tutorials\\\/how-to-use-amcharts-with-country-region-dropdown-menu\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorials\",\"item\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use amCharts with Country-Region DropDown Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/#website\",\"url\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/\",\"name\":\"GeoDataSource Articles & Tutorials\",\"description\":\"Resources About GeoDataSource Services\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/#organization\",\"name\":\"GeoDataSource.com\",\"url\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/logo-e1564122827936.png\",\"contentUrl\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/logo-e1564122827936.png\",\"width\":220,\"height\":27,\"caption\":\"GeoDataSource.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geodatasource.com\\\/resources\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/geodatasource\\\/\",\"https:\\\/\\\/x.com\\\/_geodatasource\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use amCharts with Country-Region DropDown Menu |","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/","og_locale":"en_US","og_type":"article","og_title":"How to Use amCharts with Country-Region DropDown Menu |","og_description":"Intro amChart is a popular interactive data visualization tool that provides JavaScript-based charts and geographical maps. This article will demonstrate [&hellip;]","og_url":"https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/","article_publisher":"https:\/\/www.facebook.com\/geodatasource\/","article_modified_time":"2026-01-15T05:12:12+00:00","og_image":[{"url":"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap-1024x692.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@_geodatasource","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/","url":"https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/","name":"How to Use amCharts with Country-Region DropDown Menu |","isPartOf":{"@id":"https:\/\/www.geodatasource.com\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/#primaryimage"},"image":{"@id":"https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap-1024x692.png","datePublished":"2019-08-20T00:00:00+00:00","dateModified":"2026-01-15T05:12:12+00:00","breadcrumb":{"@id":"https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/#primaryimage","url":"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap.png","contentUrl":"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/08\/DropDownMap.png","width":1303,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/www.geodatasource.com\/resources\/tutorials\/how-to-use-amcharts-with-country-region-dropdown-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.geodatasource.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Tutorials","item":"https:\/\/www.geodatasource.com\/resources\/tutorials\/"},{"@type":"ListItem","position":3,"name":"How to Use amCharts with Country-Region DropDown Menu"}]},{"@type":"WebSite","@id":"https:\/\/www.geodatasource.com\/resources\/#website","url":"https:\/\/www.geodatasource.com\/resources\/","name":"GeoDataSource Articles & Tutorials","description":"Resources About GeoDataSource Services","publisher":{"@id":"https:\/\/www.geodatasource.com\/resources\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.geodatasource.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.geodatasource.com\/resources\/#organization","name":"GeoDataSource.com","url":"https:\/\/www.geodatasource.com\/resources\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.geodatasource.com\/resources\/#\/schema\/logo\/image\/","url":"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/07\/logo-e1564122827936.png","contentUrl":"https:\/\/www.geodatasource.com\/resources\/wp-content\/uploads\/2019\/07\/logo-e1564122827936.png","width":220,"height":27,"caption":"GeoDataSource.com"},"image":{"@id":"https:\/\/www.geodatasource.com\/resources\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/geodatasource\/","https:\/\/x.com\/_geodatasource"]}]}},"_links":{"self":[{"href":"https:\/\/www.geodatasource.com\/resources\/wp-json\/wp\/v2\/docs\/659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.geodatasource.com\/resources\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.geodatasource.com\/resources\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.geodatasource.com\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.geodatasource.com\/resources\/wp-json\/wp\/v2\/comments?post=659"}],"version-history":[{"count":4,"href":"https:\/\/www.geodatasource.com\/resources\/wp-json\/wp\/v2\/docs\/659\/revisions"}],"predecessor-version":[{"id":717,"href":"https:\/\/www.geodatasource.com\/resources\/wp-json\/wp\/v2\/docs\/659\/revisions\/717"}],"wp:attachment":[{"href":"https:\/\/www.geodatasource.com\/resources\/wp-json\/wp\/v2\/media?parent=659"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.geodatasource.com\/resources\/wp-json\/wp\/v2\/doc_category?post=659"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.geodatasource.com\/resources\/wp-json\/wp\/v2\/doc_tag?post=659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}