amCharts & amMap Blog

Extraordinary game made by developers of amCharts

2013-05-07T18:23:00.001+03:00

Well, you might say it’s off-topic, and yes, it is, but we don’t feel very bad by posting it. Our lead developer, Antanas, developed a game for iOS/Android, called The Howler. And as it is really awesome, we dare to promote it here. Download for iOS or Android.

JavaScript Charts / JavaScript Stock Charts 2.10.0 Released

2013-03-26T20:21:00.001+02:00

Good news. We have just released the new versions 2.10.0 of both JavaScript Charts and JavaScript Stock Charts. [ Download | Reference ]

This version features mostly functionality that was suggested by amCharts users. Thanks, guys and gals!

Here’s what’s new:

New Features

categoryFunction property added to CategoryAxis. It specifies a method that returns the value that should be used as categoryValue for current item. If this property is set, the return value of the custom data function takes precedence over categoryField. When a chart calls this method, it passes category value, data item from chart's data provider and reference to categoryAxis: categoryFunction(category, dataItem, categoryAxis);

This method can be used both when category axis parses dates and when it doesn't. If axis parses dates, your categoryFunction should return Date object.
labelFunction added to AxisBase. You can use it to format both Value and Category axis labels. If this function is set for ValueAxis, it is called and these parameters are passed: labelFunction(value, valueText, valueAxis);

Where value is numeric value, valueText is formatted string and valueAxis is a reference to ValueAxis object.

If this function is set for CategoryAxis, then it is called with the following parameters passed:

if dates are not parsed: labelFunction(valueText, serialDataItem, categoryAxis)
if dates are parsed: labelFunction(valueText, date, categoryAxis)

fontSize property added to Guide.
position property added to Guide.
useMarkerColorForValues property added to AmLegend.
rightClickSlice event added to AmPieChart.
Some minor bugs fixed.

STOCK CHART EXCLUSIVES

usePeriod added to ChartScrollbarSettings. This is very important feature for those, who work with large data sets. You can tell ChartScrollbar what period it should use for it's graph and save a lot of time for rendering of this graph. For example, if your minPeriod is "DD" (days), set usePeriod = "WW" (weeks) and you will have 7 times less data points in scrollbar's graph.
balloonColor added to StockEventsSettings.
Data parsing performance increased!

Make sure you update and make use of the new, especially performance-enhancing, features!

JavaScript Maps 3.2.0 Released

2013-03-26T20:02:00.001+02:00

IMPORTANT CHANGE IN MAP AREA IDs

All included maps were updated to follow ISO country and region codes. All world maps use two-digit ISO codes. All country-level maps use country code dash region code notation, i.e. US-AK. Please note that this is different from the codes we had previously which used underscores.

Map files for consistency were also renamed to correspond to the map entity names, i.e. usaLow.js and AmCharts.maps.usaLow.

NEW FEATURES

lines have bigger hit area;
selectedLabelColor property added to MapImage and ImagesSettings;
balloonLabelFunction added to AmMap;
allowClickOnSelectedObject added to AmMap, default value true.

FIXES

lines and some other objects had hand cursor even if they were not clickable.

[ Download ]

New 2.9.x version of JavaScript Charts and JavaScript Stock Charts released

2013-03-01T17:13:00.001+02:00

In the past few weeks we had a cluster of important releases throughout our JavaScript charting product line. Here’s the quite lengthy scoop of what’s new and hot: (brace yourselves – we’re gonna throw a lot of letters at you)

New features:

AxisBase.minGap property added. It allows to set the minimum size of interval between grid lines, works only for horizontal axis and only when autoGridCount is set to true.
“selected” event of ChartCursor was added. It is fired when selectWithoutZooming is set to true and
user makes selection.
labelColorField added to AmGraph, it allows setting different color for individual data labels.
forceShowField added to CategoryAxis. It allows setting which of the categories should always be displayed. Works only when categoryAxis.parseDates = false
rightClickGraphItem event added to AmCoordinateChart.
"changed" event of chart cursor has a new property, called mostCloseGraph. It is set if you are using chartCursor.oneBalloonOnly = true.
labelRadiusField property added to AmPieChart. It allows specifying the distance from pie to data label manually. Note, if you set labelRadiusField, the chart won't try to arrange labels so that they won't overlap.
Default behavior change: when setting zooming date-based chart, you have to set exact "to" date. For example, if you want the chart to display one day only, set from date as 2012,1,1 (first of February) and the to date as new Date(2012,1,2) or new Date(2012,1,1,23,59,59). Previously you could set the same date for start and end dates and the chart used to select one "minPeriod" automatically, however this caused a lot of problems for charts displaying monthly or yearly data.
AmCharts.clear method added. Call this method if you want completely to remove all charts from a page.
Above property added to Guide. If you set it to true, guides will be displayed above graphs.
You can set a customly created div element as a container of your legend. To do this, you should pass id or reference of the div in this method: chart.addLegend(legend, divID)

Bug fixes:

IE used to hide legend of pie chart after validateNow() method was called.
Memory leak fixed.
Fixed XY chart external zoom (with valueAxis.zoomToValues() method).
Problem with lines not visible on XP+IE8 fixed.
Last item was not displayed if minPeriod was bigger than day.
Switch of legend marker was in wrong position when marker size was quite small.
validateData() method caused error when fillToGraph property was set.
If valueAxis.minimum was set and values were smaller than this minimum, columns were not displayed.
align property wasn't working when using external container for the legend.
Balloon could be wrongly positioned in marginTop style was added directly to <html> element.
chart.animateAgain() worked only if validateNow() method was called after.
In some specific cases scrollbar could act incorrectly on IE8/IE7.
When panEventsEnabled was set to true, balloons over bullets were not shown.
Text in balloons was not properly vertically aligned if verticalSpacing was set to some different than default value.
Balloon wasn't positioned properly if chart was in a scrollable div.
“init” event wasn't fired by AmPieChart.
Step line's corners sometimes were not perfect (one extra pixel could be added in the end of horizontal line)
You couldn't change panEventsEnabled of AmChart class after the chart was initialized.
You couldn't change legend's position after the chart was initialized.
Step line chart was not correctly filled if Value axis was of some stacked type.
Some other minor bugs fixed.

Changes related to Stock Chart only:

If user changes date in period selector, the new date is applied right when he clicks away from the
input field.
"rendered" event added to AmStockChart. Fired each time the chart is rebuild.

Make sure you grab the latest version.

Visited Countries and Visited States widgets updated

2013-02-26T09:37:00.001+02:00

Just wanted to let you know that our underappreciated Visited Countries and Visited States embeddable widgets were updated with the latest JavaScript version of amMap and are eagerly waiting for your love.

Both websites can be used to easily create a code for transparent copy-and-paste inclusion into any page.

No programming skills required.

Just select the countries or states you have set your foot on, tweak appearance to match that of your website and let the bragging begin.

Creating custom maps for JavaScript amMap

2013-01-31T16:24:00.001+02:00

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 on user browser and sometimes on your server.

SVG structure

AmMap will not work with any SVG map, it should meet some structure requirements. To understand SVG structure, open any of the maps available in ammap/maps/svg/ folder with some text editor. As you see, the structure which amMap understands is this:

<svg>
   <g>
      <path/>
   </g>
</svg>

You can have any number of "paths” – areas or countries, you can call them as you wish. All of them should be in one group – between <g> and </g> nodes. This is the main rule of SVG suitable for amMap. Deeper levels of groups will be ignored, if you won’t group paths, they will also be ignored, all other elements except paths will be ignored. Each path should have at least "id” attribute and “d” attribute. “d” attribute contains coordinates of your areas. Optionally it can have “title” attribute. “class” attribute is only used when viewing this SVG file directly on browser.

Most likely you also noticed <defs> node with some info in it. <defs> has <style> with some colors set. These colors are only used when viewing SVG file in browser, amMap doesn’t care about them. However it cares about <amcharts:ammap> node with projection and boundary latitudes/longitudes. AmMap will work even without <defs> node, but you won’t be able to use real life latitudes/longitudes without it. We will come back to this later.

What if you have SVG file with some other structure? Well, it won’t work with amMap. You should modify your SVG so that it would meet amMap structure.

Creating SVG from GIS data

Note, the following tutorials might not work with all GIS data. You might need to do some manual work.

In most cases you won’t have SVG map which you can modify, but you might have raw GIS data. There are plenty of resources with free GIS data online, Natural Earth Data is one of the best. Let’s download small scale World map with county borders and unzip the package. You’ll find some files there with extensions like .shp, .shx etc. We need to convert them to SVG format.

Option 1 – use Indie mapper online service

This option doesn’t require any expensive software, however you will miss some of the possibilities.

Navigate to the mapper app and click on “Browse for KML/SHP/GPX” button and browse to the folder where you unzipped GIS data, select .shp file from there. Then click on “Browse for DBF” file and select the .dbf file from the same folder and click “Load”. Once the map is loaded, you can go to “projection” and set projection to the one you wish. If you wish to use real life longitudes/latitudes with your map, you should choose “Mercator”. Next, click “export” button, select “layered SVG”, select “include data attributes in SVG” option, type some name and click “Generate file” button and “Export to your Computer” a bit later. Now you have SVG file – open it with your browser, you should see the map. Open the file with text editor – the structure is quite close to what we need, it only has some unnecessary information. We need the second <g> node with all data in it (you can try to delete the other nodes and open file in browser again to be sure you left the countries only). Delete all atributes of <g> except “transform”. Then copy everything between <g> and </g> (including). Now you can scroll down to the using amMap parser section or study the second option.

Option 2 – use Avenza map publisher and Adobe Illustrator

This method it is quite expensive, as requires both Adobe illustrator and Avenza plugin. However you can try both of them for free. This will also require some manual work.

Install Adobe illustrator and then Avenza map publisher for illustrator. Launch illustrator, click File->Import Map Data –> Advanced. In the window opened, click “Add”, then “Browse” near “Dataset”, locate your .shp file, click “OK”. Then select “Create new” radio button, click “editor” and click on Destination Coordinate System link. Locate WGS84 / World Mercator system (you can use any other system if you don’t care about real life latitudes/longitudes). Click OK for 3 times and you should see the map now.

The dark side: We couldn’t find a way to export id and title of an object to SVG (let us know if you’ll find it). So the only way to keep id/title is to go to layers and manually name each layer. You should name them like this: US#USA or BR#Brasil – our map parser will understand this format.

Click file->Save As and save the map as SVG. Open the saved file in your browser – you should see a map. Now open it with some text editor – you’ll see some empty <g> nodes and one should have a lot of <polygon> and <path> elements. This is the one we need. Copy all this node (including <g> and </g> to the clipboard and proceed to the next part of the tutorial.

Using amMap map parser to prepare SVG for amMap

We have prepared a map parser - tool which parses data generated both by Indie mapper or Adobe illustrator. It also reduced file size a lot. It is always in a “beta” stage, so sorry for some bugs which might appear. Paste everything you copied to the left window, enter map name, variable name latitudes/longitudes of the map borders) and click “parse” button at the bottom. If you did everything right (cleaning <g> from unnecessary elements is crucial) then a amMap ready SVG code and SVG compiled to JSON should appear in the output windows. Copy (by clicking copySVG button) the generated SVG and try to view it in a browser. If not all the map is visible, don’t worry – amMap will handle this. Copy JSON code (by clicking copy JSON button) to clipboard, paste it to an empty file and try with amMap.

Finding top, bottom latitudes and right, left longitudes

If you don’t have illustrator and Map Publisher, go to this service, click on the map point which is most top/bottom/right/left of your map and copy latitude or longitude. This won’t be very accurate, so we recommend adding some points to your map (using amMap) and then do the fine tuning by adjusting these values.

It’s a bit easier with illustrator – click on the “map info” icon of the Map publisher toolbar and move the mouse to the extremes of your map. The latitude/longitude will be displayed in a separate window. Use them when parsing your map with amMap parser.

JavaScript feature-rich update to 2.8.0/2.8.1

2012-11-15T12:59:00.001+02:00

We’re so fired up on adding new features and releasing updates we’ve missed the the announcement for one. Here it goes.

We’ve recently released a feature-rich update to 2.8.0 and subsequently to 2.8.1. [Download]

Here’s a scoop of what’s new:

2.8.1

New features:

hideXScrollbar and hideYScrollbar properties added to AmXYChart. This will allow you to selectively hide vertical or horizontal scrollbars

Stock chart-specific changes:

hideOutOfScopePeriods property added to PeriodSelector, with default value true. This will hide period buttons which periods are longer than data available.
problem with periodSelector buttons fixed - several buttons could be marked as selected if a button's period was bigger than data available.

2.8.0

New features:

In additional to Date object you can now also pass dates as timestamps.
ChartCursor.selectWithoutZooming property added which allows marking desired area with chart cursor without zooming-in. This allows subsequent handling of it via events.
graph.fillToGraph property added. This allows creating band or range graphs.
The area between graph and fillToGraph will be filled with a color if graph.fillAlphas is set to > 0 value. Works with "line" graph type only.

Bug fixes:

Blurry lines on all browsers fixed.
Right/bottom grid line was hidden if marginRight/marginBottom were set to 0.
Category balloon was shifted a bit since last version.
Background image was incorrectly sized.

Getting started with JavaScript Maps

2012-11-14T12:51:00.001+02:00

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 Google Maps does. We offer world map, continents map and a lot of country maps with district borders. We do not offer city maps or satellite images, our maps consist of pure country/district areas. Here are some examples of our mapping tool in use:

» United States Heat Map
» Interactive Flight Route Map
» Drill-down map
» Grouped countries map
» World capitals map
» Zooming to countries map

Our tool uses SVG to render maps. We do not offer VML which would be needed to support Internet Explorer browses version 8 and older. VML is simply too slow to handle this amount of vector data. Sorry legacy browser lovers ;)

Creating your first map

Download amMap package, unzip it to some folder and copy “ammap” folder to your working directory. Now open your HTML file (I will assume that it is in the same level where you copied ammap folder). First, you should include ammap.js into header of your HTML:

<script src="ammap/ammap.js" type="text/javascript"></script>

In case you are using our amcharts js file in the same page, you can insert ammap_amcharts_extension.js instead of ammap.js – this will save you ~50 kilobytes. Remember, you have to insert ammap_amcharts_extension.js after amcharts.js (or amstock.js) file!

Next, you have to insert map file too. Actually there are two ways of using maps – you can load SVG files at runtime or insert maps as .js files. We recommend inserting maps as .js files as it is much more reliable - some servers do not like SVG format. Also you will not be able to test maps without web server if you load them as SVG.

To insert map file as .js file simply add this line to your HTML (after the line where you inserted ammap.js file!):

<script src="ammap/maps/js/world_low.js" type="text/javascript"></script>

You can use any other map – just go to the ammap/maps/js folder and check the available maps (we are adding new maps constantly).

Side note: we include two versions of each map – high detail and low detail. Normally you should always use maps with “_low” suffix as they are faster and less resource-intensive. If your particular purpose calls for for greater detail and you’re willing to potentially sacrifice some performance for it, go with the “_high” version.

In case you wish to load maps as SVG files – read on, we’ll cover this a bit later.

Next, you should create a div which will hold your map. Add this to your HTML body:

<div id="mapdiv" style="width: 600px; height: 400px;"></div>

Now we’ll do some JavaScripting. Below is a script with comments which should produce a simple World map:

    // add all your code to this method, as this will ensure that page is loaded
    AmCharts.ready(function() {
        // create AmMap object
        var map = new AmCharts.AmMap();
        // set path to images
        map.pathToImages = "ammap/images/";
        
        /* create data provider object
         mapVar tells the map name of the variable of the map data. You have to
         view source of the map file you included in order to find the name of the 
         variable - it's the very first line after commented lines.
         
         getAreasFromMap indicates that amMap should read all the areas available
         in the map data and treat them as they are included in your data provider.
         in case you don't set it to true, all the areas except listed in data
         provider will be treated as unlisted.
        */
        var dataProvider = {
            mapVar: AmCharts.maps.worldLow,
            getAreasFromMap:true                    
        }; 
        // pass data provider to the map object
        map.dataProvider = dataProvider;
    
        /* create areas settings
         * autoZoom set to true means that the map will zoom-in when clicked on the area
         * selectedColor indicates color of the clicked area.
         */
        map.areasSettings = {
            autoZoom: true,
            selectedColor: "#CC0000"
        };
    
        // let's say we want a small map to be displayed, so let's create it
        map.smallMap = new AmCharts.SmallMap();
    
        // write the map to container div
        map.write("mapdiv");               
        
    });

Now, if you open your HTML file in a browser, you should see this:

Try to click on any country – the map will zoom-in on it. You can also drag, pan the map or click on a small map to move the big one to the desired position. In case you don’t see the map, check error console – most likely it will show some errors. It’s a first to-do if something is not working.

Loading SVG maps

In case you wish to load SVG maps instead of including them as .js file, all you need to do is to change mapVar of your data provider to mapURL and specify path to the SVG map, foe example:

mapURL: "ammap/maps/svg/world_low.svg",

However, as we mentioned, it’s not as reliable as including maps as .js files.

Manipulating areas (countries)

Let’s say we want to change color of some of the countries. This should be done by adding these countries to data provider and specifying color of your choice. Map data provider is an instance of MapData object, check our docs to find more of what it is capable of.

Each country/area has an id. For world map we use ISO country codes like US, UK, DE for id’s. For countries administrative areas we use id’s like AU_WA where AU is ISO code of the country (Australia in this case) and WA is id of the administrative area. All the available areas are listed in each map’s .js and .svg files, in JavaScript array which you can copy/paste directly to data provider. I left only some of the countries, as I don’t need them all:

var dataProvider = {
      mapVar: AmCharts.maps.worldLow,
      areas:[{id:"AU"},{id:"US"},{id:"FR"}]                    
};

Note, I deleted getAreasFromMap:true from data provider, as now I want all the areas except those three to be inactive. The result is this:

All the areas except listed are now grey. This color is set via AreasSettings unlistedAreasColor property. You can also control opacity, outline color and opacity of unlisted areas.

The three areas we included are colored with color set via color property of AreasSettings. Check all the available properties to get impression of what else you can change. As you have correctly guessed, the settings you set for AreasSettings are applied for all listed areas, but only if you don’t set some property of the area explicitly.

Each country/area object listed in your data provider is an instance of MapArea. Check docs to see list of available properties. Let’s say we want each of the three countries to be filled with a different color. The property responsible for this is “color” (surprise!). So we modify data provider by adding color with some HEX color code to each country:

var dataProvider = {
    mapVar: AmCharts.maps.worldLow,
    areas:[{id:"AU", color:"#CC0000"},{id:"US", color:"#00CC00"},{id:"FR", color:"#0000CC"}]                    
};

And the result is now:

You can modify color, opacity, title (titles are hardcoded in a map, but you can simply change them using “title” property), add description which will popup if user clicks on a country and do a lot more.

Adding an image to a map

Let’s say I want to add some icon on the map in the place where New York City is. This will also be done via data provider, images property. Images are instances of MapImage object. Images can be placed in two ways – by setting it’s position using left/top/right/bottom properties or by setting latitude and longitude. If you set latitude and longitude, the image will be bound to the map position – it will move together with it. Otherwise the image will stay in the same place. As I want to mark New York City, I need to set latitude and longitude. So I went to Wikipedia and found that latitude is 40.3951 and longitude is -73.5619.

MapImage has “type” property which can be set to one of the three values: circle, rectangle and bubble. I choose “bubble” this time and set its color to velvet:

var dataProvider = {
    mapVar: AmCharts.maps.worldLow,
    images:[{latitude:40.3951, longitude:-73.5619, type:"circle", color:"#6c00ff"}]                    
};

Note, I deleted areas so that they wouldn’t steal your attention. And here is the result:

As you can see, there is a red circle in the place where New York City is! Most of the maps we provide are calibrated, so real world latitudes and longitudes can be used. Only some of the maps for some technical reasons can not be calibrated (for example map of US where Alaska an Hawaii are shifted so that they would be close to mainland).

You can still find longitudes/latitudes (and also a lot more information required to build maps) both for calibrated and non-calibrated maps using developer mode. Check developerMode.html example in samples folder to see it in action.

Now I want to change the red circle to some more interesting picture. You can load gif, png, jpg or svg files by setting imageURL for your image with path to the image. However loaded images have limitations – you can not change colors, set outline and some more. The recommended way of adding single-color images to the map would be creating variable of SVG path and setting it via svgPath property of MapImage. I recommend visiting Raphael’s icons set page to get SVG paths for a lot of nice icons. Simply choose the icon you like and copy the path. Then you can create variable (so you could use it more than once) and set this variable as svgPath of your image:

var icon= "M21.25,8.375V28h6.5V8.375H21.25zM12.25,28h6.5V4.125h-6.5V28zM3.25,28h6.5V12.625h-6.5V28z";       
       
var dataProvider = {
    mapVar: AmCharts.maps.worldLow,
    images:[{latitude:40.3951, longitude:-73.5619, svgPath:icon, color:"#CC0000", scale:0.5, label:"New York", labelShiftY:2}]                    
};

Note, I deleted type (we don’t need it anymore) and set scale to 0.5 so that the icon wouldn’t be too big, I also added “label” property with value “New York” and adjusted label’s vertical position by 2 pixels so that it would fit better. And the result (after I manually zoomed in) is:

Adding some interactivity

Now I want to make the New York icon clickable and I want the map to zoom-in and display some more information when user clicks on it. MapImage has all the properties you need to do that: value set as description will be displayed in a popup window, zoomLevel will tell how much do you want to zoom-in:

var icon= "M21.25,8.375V28h6.5V8.375H21.25zM12.25,28h6.5V4.125h-6.5V28zM3.25,28h6.5V12.625h-6.5V28z";       
       
var dataProvider = {
    mapVar: AmCharts.maps.worldLow,
    images:[{latitude:40.3951, longitude:-73.5619, svgPath:icon, color:"#CC0000", scale:0.5, label:"New York", labelShiftY:2, zoomLevel:5, title:"New York", description:"New York is the most populous city in the United States and the center of the New York Metropolitan Area, one of the most populous metropolitan areas in the world."}]                    
};

Now, after you click on “New York” icon, the map will zoom in and display description:

That’s it for this tutorial. You can do a lot more – drill-down maps, heat maps. Not only you can display images but also draw lines on top of the map. You can use amMap together with amCharts and create stunning data visualizations. Good luck!

Exporting JavaScript Charts / Maps as image

2012-09-20T11:36:00.001+03:00

Exporting JavaScript Charts as image was one of the widely requested feature. The trouble is that it’s quite complicated. Or so we thought until avid amCharts user Benjamin Maertz (make sure you check out his website) came up with a clever way to do so.

We’re not gonna keep you waiting. Here’s how to do the magic, in Ben’s own words.

After i crawled the internet for few hours i have found canvg, its a pretty nice SVG parser and renderer which allows us to convert the charts to a canvas element from which we can extract the imagery to a simple data URL.

You need only to follow following instruction to make this work.

#1 - Download canvg
#2 - Include the canvg.js, rbgcolor.js, amcharts.js and of course following extension

   1:  // Extend AmCharts object

   2:  AmCharts.getExport = function(id) {

   3:      var wrapper       = document.getElementById(id);

   4:      var svgs          = wrapper.getElementsByTagName('svg');

   5:      var options       = {

   6:          ignoreAnimation :   true,

   7:          ignoreMouse     :   true,

   8:          ignoreClear     :   true,

   9:          ignoreDimensions:   true,

  10:          offsetX         :   0,

  11:          offsetY         :   0

  12:      };

  13:      var canvas        = document.createElement('canvas');

  14:      var context       = canvas.getContext('2d');

  15:      var counter       = {

  16:          height            : 0,

  17:          width             : 0

  18:      }

19:

  20:      // Nasty workaround until somebody figured out to support images

  21:      function removeImages(svg) {

  22:          var startStr    = '<image';

  23:          var stopStr     = '</image>';

  24:          var stopStrAlt  = '/>';

  25:          var start       = svg.indexOf(startStr);

  26:          var match       = '';

27:

  28:          // Recursion

  29:          if ( start != -1 ) {

  30:              var stop = svg.slice(start,start+1000).indexOf(stopStr);

  31:              if ( stop != -1 ) {

  32:                  svg = removeImages(svg.slice(0,start) + svg.slice(start + stop + stopStr.length,svg.length));

  33:              } else {

  34:                  stop = svg.slice(start,start+1000).indexOf(stopStrAlt);

  35:                  if ( stop != -1 ) {

  36:                      svg = removeImages(svg.slice(0,start) + svg.slice(start + stop + stopStr.length,svg.length));

  37:                  }

  38:              }

  39:          }

  40:          return svg;

  41:      };

42:

  43:      // Setup canvas

  44:      canvas.height     = wrapper.offsetHeight;

  45:      canvas.width      = wrapper.offsetWidth;

  46:      context.fillStyle = '#FFFFFF';

  47:      context.fillRect(0,0,canvas.width,canvas.height);

48:

  49:      // Add SVGs

  50:      for( i = 0; i < svgs.length; i++ ) {

  51:          var container = svgs[i].parentNode;

  52:          var innerHTML = removeImages(container.innerHTML); // remove images from svg until its supported

53:

  54:          options.offsetY = counter.height;

55:

  56:          counter.height += container.offsetHeight;

  57:          counter.width = container.offsetWidth;

58:

  59:          canvg(canvas,innerHTML,options);

  60:      }

61:

  62:      // Return output data URL

  63:      return canvas.toDataURL();

  64:  }

65:

  66:  // Sample dump function

  67:  function exportDat(id) {

  68:      var output = AmCharts.getExport(id);

  69:      var image  = document.createElement('img');

  70:      var link   = document.createElement('a');

71:

  72:      // Add image data

  73:      image.src = output;

74:

  75:      // Create download link with the image

  76:      link.appendChild(image);

  77:      link.href     = output;

  78:      link.download = 'AmChartsExport.png';

  79:      link.title    = 'Just download that awesome export ;)';

80:

  81:      // Return output into doc

  82:      document.getElementById('output').innerHTML = '';

  83:      document.getElementById('output').appendChild(link);

  84:  }

#4 - Execute the extension like following

   1:  AmCharts.getExport(); // Returns all charts in the global AmCharts instance

   2:  AmCharts.getExport(<id or element or array of those>) // Returns all charts within the given container

Please note that getExport returns a universal embed url. You can use it as an src property of an <img> tag, or you can link to it using <a href>. (add “download” property to <a href> tag to force download of the image)

#5 – Examples

Stockchart: http://jsfiddle.net/amcharts/8JJdY/
Map: http://jsfiddle.net/amcharts/Hg6dg/

You might wonder why i called it AmExport, well ... it can even export the brand new JavaScript Maps as shown in the second example :)

Canvg Fix for that replace typerror which might appear

   1:  // Search for that ( line 111 )

   2:  svg.compressSpaces = function(s) { return s.replace(/[\s\r\t\n]+/gm,' '); }

3:

   4:  // Replace it by this ...

   5:  svg.compressSpaces = function(s) {

   6:      return s?s.replace(/[\s\r\t\n]+/gm,' '):'';

   7:  }

Thanks Bny!

Beta version of JavaScript Maps is available NOW!

2012-09-06T16:25:00.001+03:00

Ever since web development scene took shift from Flash to JavaScript there was an overwhelmingly popular demand for pure JavaScript interactive mapping product. So I’m extremely happy to announce that the first Beta version of our JavaScript Maps is available for download now!

The new JavaScript Maps Beta works on any SVG-compatible browser which basically means any modern browser (sorry no IE8 and down) including iOS flock.

Oh, and there’s even more good news. All original amMap 2.0 purchases made from the beginning of 2012 June, will be upgraded for free. For the rest of you a reasonably priced upgrade options will be offered.

Please also note that, during Beta period we won’t be able to provide support. However we do encourage to let us know if you find any bugs or encounter any road bumps along the way.

So if you’re feeling brave or can’t wait for production release (due later this month) here are the next steps you may take:

Check out these examples on jsFiddle:
Download JavaScript Maps 3.0 Beta
Visit class reference (it’s still a work in progress so please be careful as to not step on any unattended work tools or debris)
Report bugs and discuss features in our forum

You can also contact us directly at info@ammap.com

Happy mapping!