Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

am5 Chart map not showing #1820

Open
hardikkukadiya opened this issue Jan 2, 2025 · 1 comment
Open

am5 Chart map not showing #1820

hardikkukadiya opened this issue Jan 2, 2025 · 1 comment
Labels

Comments

@hardikkukadiya
Copy link

Bug description
am5 Chart map not working on device andorid version of 13, 12, 11

https://prnt.sc/WTfuU-JRygzP

my map code is below:-

<style> #chartdiv { width: 100%; height: 500px; } </style> <script src="https://cdn.amcharts.com/lib/5/index.js"></script> <script src="https://cdn.amcharts.com/lib/5/map.js"></script> <script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script> <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> <script> am5.ready(function() { // Create root element // https://www.amcharts.com/docs/v5/getting-started/#Root_element var root = am5.Root.new("chartdiv"); // Set themes // https://www.amcharts.com/docs/v5/concepts/themes/ root.setThemes([ am5themes_Animated.new(root) ]); // Create the map chart // https://www.amcharts.com/docs/v5/charts/map-chart/ var chart = root.container.children.push(am5map.MapChart.new(root, { panX: "translateX", panY: "translateY", projection: am5map.geoMercator() })); // Create main polygon series for countries // https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/ var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, { geoJSON: am5geodata_worldLow, exclude: ["AQ"] })); polygonSeries.mapPolygons.template.setAll({ tooltipText: "{name}", toggleKey: "active", interactive: true }); polygonSeries.mapPolygons.template.states.create("hover", { fill: root.interfaceColors.get("primaryButtonHover") }); polygonSeries.mapPolygons.template.states.create("active", { fill: root.interfaceColors.get("primaryButtonHover") }); var previousPolygon; polygonSeries.mapPolygons.template.on("active", function (active, target) { if (previousPolygon && previousPolygon != target) { previousPolygon.set("active", false); } if (target.get("active")) { polygonSeries.zoomToDataItem(target.dataItem ); } else { chart.goHome(); } previousPolygon = target; }); // Add zoom control // https://www.amcharts.com/docs/v5/charts/map-chart/map-pan-zoom/#Zoom_control var zoomControl = chart.set("zoomControl", am5map.ZoomControl.new(root, {})); zoomControl.homeButton.set("visible", true); // Set clicking on "water" to zoom out chart.chartContainer.get("background").events.on("click", function () { chart.goHome(); }) // Make stuff animate on load chart.appear(1000, 100); }); // end am5.ready() </script>
@martynasma
Copy link
Collaborator

Since you're using an emulator, can you check if you are getting any console errors?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants