amcharts's public fiddles
-
Step Line Chart
The Step line chart type is similar to regular line chart, but it does not use the shortest distance to connect two data points. Instead, this chart type uses vertical and horizontal lines to connect the data points in a series forming a step-like progression. You can easily make Step-area chart by simply setting opacity of a fill to some bigger than zero value. <h2>Axis labels - both inside and outside</h2> Value /category labels of our axes can be displayed both outside and inside chart's plot area. This might save some expensive area, if you need it.
-
Step Line Chart
The Step line chart type is similar to regular line chart, but it does not use the shortest distance to connect two data points. Instead, this chart type uses vertical and horizontal lines to connect the data points in a series forming a step-like progression. You can easily make Step-area chart by simply setting opacity of a fill to some bigger than zero value. <h2>Axis labels - both inside and outside</h2> Value /category labels of our axes can be displayed both outside and inside chart's plot area. This might save some expensive area, if you need it.
-
Clone data and compare with current dataset
jQuery Compat (edge), HTML, CSS, JavaScript
-
Dynamically manage datasets and panels
jQuery Compat (edge), HTML, CSS, JavaScript
-
Dynamically manage datasets and panels
jQuery Compat (edge), HTML, CSS, JavaScript
-
Show chart in tab
jQuery Compat (edge), HTML, CSS, JavaScript
-
Open custom URLs in Fancybox modal on country click
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.
-
Toggle opacity of map group item
No-Library (pure JS), HTML, CSS, JavaScript
-
Toggle opacity of map group item
No-Library (pure JS), HTML, CSS, JavaScript
-
#9518
No-Library (pure JS), HTML, CSS, JavaScript
-
Cylinder gauge
Cylinder gauge is actually a simple serial chart with a single series and two column graphs stacked on each other. The only trick which is made here - <strong>showOnAxis</strong> property of both graphs is set to true. This makes the cylinder center to start on the 0 value of the axis (by default front of a cylinder is placed there).
-
Custom hardcoded items in chart legend
No-Library (pure JS), HTML, CSS, JavaScript
-
#9435
jQuery (edge), HTML, CSS, JavaScript
-
#9431
No-Library (pure JS), HTML, CSS, JavaScript
-
Custom images on value axis
No-Library (pure JS), HTML, CSS, JavaScript
-
Custom images on value axis
No-Library (pure JS), HTML, CSS, JavaScript
-
Custom images on value axis
No-Library (pure JS), HTML, CSS, JavaScript
-
Linking pie chart with column chart for drill-down data display
No-Library (pure JS), HTML, CSS, JavaScript
-
Automatic legend value width for pie chart
No-Library (pure JS), HTML, CSS, JavaScript
-
Weather map
No-Library (pure JS), HTML, CSS, JavaScript