Creating custom maps for JavaScript amMap

Type tutorial

You can create your own custom maps and use them with amMap – a tool for creating interactive JavaScript maps for web sites. AmMap uses SVG maps. It can load SVG file or you can include JavaScript file with SVG data converted to JSON. This option is better as loading SVG might be problematic, depending […]

Your first amMap

Type tutorial

Psssst! Want to put together the config for your first map faster? Try our Pixel Map tool. JavaScript amMap is a piece of software for creating interactive maps for your web sites and applications. It’s quite different from mapping products like Google Maps, and so is its purpose. We do not provide deep-level maps like […]

Working with themes

Type tutorial

Version 3.3.0 of our charting packages and version 3.8.0 of our mapping package supports themes. This means that instead of setting every property for each graph or axis or any other object, you can set new defaults in a theme file. This will make devs’ life a lot easier! Take a quick look at this sample. No colors are […]

Interacting between JavaScript Charts and JavaScript Maps

Type tutorial

Say, you have a map on your page. Perfect. Now you want to add a little chart. Easy. Finally you want the chart to go over the map, and, to further complicate things, want the chart to update it’s data when user clicks particular countries on the map. It may be easier than you think. […]

Resizing chart for print

Type tutorial

Usually browsers use different resolution when printing web pages. If you have charts that are wider than ~600-700 pixels, they will print as cropped. To overcome this, use the following code to make the charts redraw using new dimensions before the page is printed: (function() { var beforePrint = function() { for(var i = 0; […]

Real-time data

Type tutorial

The charts can be configured to be updated at preset intervals with the new data. The idea is to periodically update chart.dataProvider (or chart.dataSet[x].dataProvider in case of Stock chart) with the new data points, then just call chart.validateData() for the chart to take in the new data. Here’s a working example. The data updates can be loaded […]

Images above or behind the chart/map

Type tutorial

You can display image or any other HTML element both above and behind the chart or map. Take a look at this rusty stock chart example. As you see, the chart is transparent and background is visible. Setting background for a page or div using background-image style is the most easy way of having something […]

Creating charts using JSON

Type tutorial

Since v 3.2.0 all charts and maps can now be created using JSON object, instead of JavaScript API. This means you might store chart configuration in a simple JSON object and use it whenever you need. Here is a basic example of bar chart made from JSON object: AmCharts.makeChart( “chartdiv”, { “type”: “serial”, “dataProvider”: [ […]

Force-show balloon over specific point

Type tutorial

There might be a situation, when you need to show balloon over some data point without a mouse, but based on user interaction outside the chart. Pie/Funnel chart For pie chart, this is quite straight forward, it has rollOverSlice(index) method. So if you know the number of a slice, you simply call this method. In […]