UNICEF's public fiddles
-
Map with Bubbles
As our mapping tool supports real life longitudes and latitudes, it is very easy to build a map with a bubble on each country, representing some value. The bubbles in the map above show the population of each country. You can also check our <a title="Motion map and motion chart" href="http://www.amcharts.com/inspiration/motion-chart/">motion-map demo</a> which shows how the population changed over the time.
-
Grouped countries map
You can group countries of the map into groups, fill them with the same color add mouse interaction for the whole group. The map can automatically detect the bounds of the group and zoom-in to it.
-
Zooming to Countries Map
Click on any country on the map - it will be zoomed-in so that all this country fits to the map area. Now click EDIT button and you will see that all this was done using 15 lines config! Our mapping tool can automatically calculate the zoom level and position which is required to zoom-in to the country. And even more - the country data like title is based in SVG map so you don't need to include each area in data provider, you only tell the map to read countries from SVG map by setting <strong>"getAreasFromMap": true</strong>. <h2>Small map tool</h2> A small map on top-right (you can adjust position to whatever you need) is useful to show current location when user zooms-in deeply. You can also use it for navigation - if you click on this small map (when zoomed-in) the map will jump to the clicked location.
-
FusionCharts - Global population density by continent - Gradient Legend
Created using FusionCharts Suite XT - www.fusioncharts.com
-
FusionCharts - Global sales tracker - Handling null entities
Created using FusionCharts Suite XT - www.fusioncharts.com
-
Capitals map
Our maps can be used with real life latitudes and longitudes. All the capitals on this map are placed using the actual coordinates of these cities.
-
100% Stacked Column Chart
You might noticed that data labels of smallest columns are not displayed. This is done automatically - chart checks if there is enough space for the label and does not display it if it's not. <h2>Hiding graphs with a legend</h2> The legend of the chart has a build-in feature (you can disable it, of course), which allows hiding graphs. Simply click on any legend entry and the chart will be redrawn, but without the graph you just clicked on. This is especially handy feature if you have a lot of graphs on your chart. To show this graph again, just click on the marker one more time.
-
LhxLa9p6
No-Library (pure JS), HTML, CSS, JavaScript