amCharts & amMap Blog

JavaScript Charts v2.5 Milestone Release

2012-01-05T10:43:00.001+02:00

Good news, everyone! (subliminal reference to Futurama intended) There’s a massive update to our flagship product - JavaScript Charts. [Download]

Among various fixes and improvements there are some features that you’ve been eagerly waiting for. The charts now support Stacked Areas [Example], large/small number prefixes throughout all elements including legend and rollover balloons, you can set precision for value axis numbers, trend lines, axis and chart titles. Here’s the full list:

Important updates

Automatic margins
Margins of RectangularChart (Serial and XY charts) are calculated automatically now.
You can still work in old way by setting margins manually - set chart.autoMargins to
false.
Axis titles
Previously you had to use addLabel method in order to give name to the axis. Since
this version we introduced title property for AxisBase, so you can name both Category
and Value Axes now much more easily.
Chart title
Same as with axes titles - previously you had to use addLabel method to name a chart. Now you can add any number of titles using chart.addTitle(text, size, color, alpha, bold) method. Chart title is taken into account when calculating margins, also position of pie/radar center.
Please note that you can use chart.addTitle repeatedly to add multiple chart titles/subtitles.
Trend lines
Chart can display Trend lines now.
AmCharts.ready() method added so you don't need to use window.onload anymore. You can
use amCharts.ready as many times in one page as you want. In fact it’s the new preferred way to do things so just go ahead and update your code. It works the same way as jQuery.ready(). (although it in no way relies or uses jQuery – the only external library we’re depending on is raphael.js)

Less important updates

precision property added to ValueAxis
If chart.usePrefixes is set, prefixes will be used both in balloons and legend, not only
by valueAxis as before.

The rest of the flock

Default value of autoGridCount property of AxisBase changed to true
Default value of textClickEnabled of AmLegend changed to false
Default value of hideResizeGrips of ChartScrollbar changed to false
All margins of RectangularChart changed to 20, as they can still be used for sides
without axes

Important update regarding packaging

We no longer include Flash version of the charts nor the Fallback scripts in the main chart package. You can still separately download legacy Flash charts from our Download page.

Example page revamp

And finally (I promise I will let you go after this) to celebrate such a massive update we have revamped our Examples section of the site. Lots of new samples added. You can scroll through them more easily using Prev/Next navigation or the list below. You can also view the source of the sample easily by clicking “View sample source” right there below the actual sample.

Season Greetings from amCharts!

2011-12-25T11:57:00.001+02:00

What can we say – this has been quite a year for us. And boy, have we enjoyed every bit of it! With joy in our hearts we remember every time we could help you – our customers and users – with a product or feature addition or just some advice.

And with big anticipation we look forward to the coming year. There are some exciting services and products coming your way.

All the best and sincere wishes to the most important person in our business – You!

See you in 2012!

Click here for the live version of the chart above

Oh, and BTW, the Winter promotion is still on until the end of the year. Just use the coupon code WINTER when purchasing any amCharts or amMap product for a 15% discount. It’s a good opportunity to purchase a commercial license or upgrade the one you currently have.

All Maps Updated to Reflect Sudan and South Sudan Division

2011-12-16T10:45:00.001+02:00

We’re happy to announce that ALL World maps throughout amMap universe (yes, including Premium Maps) were updated to reflect the division of Sudan and South Sudan.

Make sure you grab the latest version of amMap (2.6.2) or Premium Map Pack (2.7) or Flex map pack to take advantage of these changes.

While we’re at it, as an added bonus Premium Map Pack now includes new exciting map: Pacific-centered World map. (fully Mercator-calibrated)

Enjoy!

amMap 2.6.1 (Flash) Released

2011-11-18T09:20:00.001+02:00

A minor update to amMap 2.6.1 (Flash) was just released. [Download]

Nothing groundbreaking, just some tweaks and fixes there and there:

TWEAK: now auto_zoom will use "zoom" attribute of the area if it's set instead of the autogenerated one.
BUG FIX: child movies were not appearing when used in conjunction with auto_zoom.
BUG FIX: the movies that had color_hover but no color defined remained in color_hover after mouse moved out.

Working with JavaScript Stock chart. Step By step tutorial.

2011-11-14T15:50:00.001+02:00

Download

To begin, download and unzip stock chart package. If you’re seasoned web developer and feeling brave, you could simply go to samples/javascript/ folder and analyze html files found there. Otherwise stay on this tutorial.

Setup working folder

Create some folder for your project and copy amcharts folder from downloaded package into it. Then, start with a new HTML file:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>My first stock chart</title>
    </head>
    <body>        
    </body>
</html>

Include required JavaScript and CSS files

Two JavaScript files must be included – amstock.js and raphael.js. These files are in amcharts/javascript folder. Add these lines to the <head> of you HTML:

<script src="amcharts/javascript/amstock.js" type="text/javascript"></script>
<script src="amcharts/javascript/raphael.js" type="text/javascript"></script>

As we’ll write some script in your HTML, you should also add these lines to the <head> while you’re at it:

<script type="text/javascript">
</script>

Stock chart also uses one CSS file, located in the same folder. You can include it or simply copy/paste contents of style.css to your own CSS file. To include our file, add this line to <head> of the document:

<link rel="stylesheet" href="amcharts/javascript/style.css" type="text/css">

Create a container for a chart

Chart should be placed inside a <div>. Add this line to the <body> of HTML and adjust width/height if you want to:

<div id="chartdiv" style="width:100%; height:400px;"></div>

Note, you should give unique id for this <div>.

Start coding JavaScript

Now it’s time to start writing some JavaScript. You should do it within <script type="text/javascript"> </script> tags in the head of HTML. To ensure all the scripts and HTML is loaded, we’ll use window.onload handler:

window.onload = function(){
   alert('page loaded');          
}

I added alert for the sole purpose of verifying that onload event is firing up properly. Now, if you open your HTML in the browser, you should get alert window saying “page loaded”. You can remove the line now.

Generate some data for the chart

In real life you’ll probably load data from some file or retrieve it using Ajax. You can check this tutorial on how to load external data. It’s about Serial chart, but the idea is 100% the same. We’ll not cover this topic here and will simply add some data so you could test your chart and understand what is the structure of chart data.

Chart data is an Array of objects. Each object should contain at least one field with Date object. And, if you want your chart to display some graph, at least one value field with some numerical value. Here is a most simple example of such object:

{date: new Date(2011, 5, 1, 0, 0, 0, 0), value:10}

Notice, date field has a Date object, not some date string. Date string can’t be used it, as chart won’t understand it. In case you have your dates as Strings, you should spilt it into sections, get value of year, month, etc and create Date object. Another important thing is that Date object in JavaScript uses zero-based months. This means that month “0” is January, 1 – February and so on. So the date in the example above is 1st of June (not May) of 2011.

Next, we’ll create some dummy data and add it to chartData array:

var chartData= [
    {date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10},
    {date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11},
    {date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12},
    {date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11},
    {date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10},
    {date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11},
    {date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13},
    {date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14},
    {date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17},
    {date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13}
];

Create chart object

Now, let’s go back to our onload handler and create a main chart object:

var chart = new AmCharts.AmStockChart();

As chart uses some images, we should indicate path to the images:

chart.pathToImages = "amcharts/javascript/images/";

Create a Data Set

Stock chart must have at least one data set. Data set is an object which main purpose is to tell the chart how the data in data provider should be treated. In case you have multiple data sets, your users will be able to choose which of them should be displayed, also compare one data set to another. This is quite common practice in stock charts. Here is an example of stock chart with multiple data sets. We’ll start with one data set:

var dataSet = new AmCharts.DataSet();

First, we set our chartData variable as a dataProvider of this data set:

dataSet.dataProvider = chartData;

Next, we have to tell the data set what are the names of fields in your data provider and give new or the same names which will be used later.

You might ask “why can’t we always use the same names as they are in data provider?”. The answer is simple. Let’s say you have two data sets but want to have only one data provider for both of them. In this case you’ll have fields like “value1” and “value2” in your data provider and you’ll map both these values to the same name.

DataSet object has fieldMappings property which accepts array of objects. Example of such object is below:

{fromField:"a", toField:"b"}

We have “val” in our data provider and it’s the only one value field we need to match:

dataSet.fieldMappings = [{fromField:"val", toField:"value"}];

We intentionally chose different names for “fromField” and “toField” so you could notice the difference later. Both these names can be any strings, it’s up to you how you name them. In case you’d have two value fields in your data provider, simply add another object to the array, for example:

dataSet.fieldMappings = [{fromField:"val", toField:"value"}, {fromField:"vol", toField:"volume"}];

Next, we have to tell data set which field in data provider is a “category” field. Category field of stock chart’s data should always contain date object. Name of such field in our dataProvider is date, so we set:

dataSet.categoryField = "date";

You can also set tile, color and some other properties for data set. Check the full list in DataSet class reference.

Lastly, we pass array of data sets to the chart:

chart.dataSets = [dataSet];

Create a stock panel

Stock chart can have one or more panels. You could also call these panels “charts”, but we call them panels in order not to mix with stock chart. These panels have the same category (date) axis and separate value axes.

This is example of stock chart with one panel and this one has two panels. And in this example you can add and remove panel at runtime.

OK, let’s create one first:

var stockPanel = new AmCharts.StockPanel();

and pass array of panels to the chart:

chart.panels = [stockPanel];

StockPanel is a class which extends AmSerialChart. So it can do everything this class can and some more things. Check StockPanel and AmSerialChart class references to see all the properties and methods they support. However don’t hurry to set all these properties on individual panels - as Stock chart can have multiple panels, and most of the settings will be the same for all panels, there is a separate class, PanelsSettings which you should use in order to control the look and behavior of your panels. For example:

var panelsSettings = new AmCharts.PanelsSettings();
panelsSettings.startDuration = 1;
chart.panelsSettings = panelsSettings;

The lines above will make the duration of initial animation equal to 1 second.

Create a graph

Panel should have at least one graph in order to display something. Let’s create stock graph:

var graph = new AmCharts.StockGraph();

StockGraph is a class which extends AmGraph class. Check both references to see the list of available properties.

The most important thing graph should know is the name of the field in your data set which it should use for it’s values. Scroll a bit up to check the part about field mappings. We have only one of them:

{fromField:"val", toField:"value"}

we should use the name we set for “toField”:

graph.valueField = "value";

Next, we should set graph type. Default graph type is “line”, but let’s set it to “column”:

graph.type = "column";

Possible graph types are "line", "column", "step", "smoothedLine", "candlestick" and "ohlc". Note, that if you set type to “candlestick” or “ohlc” you should have at least 4 value fields in your data provider and set openField, closeField, highField and lowField for you graph.

As we don’t want our columns to be transparent, we should set:

graph.fillAlphas = 1;

Let’s give our graph a title:

graph.title = "Value"

Finally, we should add this graph to the panel:

stockPanel.addStockGraph(graph);

Now we reached a place where we can finally test our script ant see the result. We should call write method to do this and pass id of a chart’s div:

chart.write("chartdiv");

And here is full source of what we’ve done so far:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>My first stock chart</title>
        <link rel="stylesheet" href="amcharts/javascript/style.css" type="text/css">
        
        <script src="amcharts/javascript/amstock.js" type="text/javascript"></script>
        <script src="amcharts/javascript/raphael.js" type="text/javascript"></script>
        
        <script type="text/javascript">
        
            var chartData = [
                {date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10},
                {date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11},
                {date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12},
                {date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11},
                {date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10},
                {date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11},
                {date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13},
                {date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14},
                {date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17},
                {date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13}
            ];        
            
            window.onload = function(){
                var chart = new AmCharts.AmStockChart();
                chart.pathToImages = "amcharts/javascript/images/";
                
                var dataSet = new AmCharts.DataSet();
                dataSet.dataProvider = chartData;
                dataSet.fieldMappings = [{fromField:"val", toField:"value"}];   
                dataSet.categoryField = "date";          
                chart.dataSets = [dataSet];
                
                var stockPanel = new AmCharts.StockPanel();
                chart.panels = [stockPanel];
                
                var panelsSettings = new AmCharts.PanelsSettings();
                panelsSettings.startDuration = 1;
                chart.panelsSettings = panelsSettings;   
                
                var graph = new AmCharts.StockGraph();
                graph.valueField = "value";
                graph.type = "column";
                graph.fillAlphas = 1;
                graph.title = "MyGraph"; 
                stockPanel.addStockGraph(graph);
                
                chart.write("chartdiv");
            }        
        </script>
    </head>
    <body>       
        <div id="chartdiv" style="width:100%; height:400px;"></div> 
    </body>
</html>

Now open your HTML in browser. This is what you should see:

From now on you can test your script after each step you make. Don’t forget to keep chart.write("chartdiv"); line in the bottom of your script.

What if I have hourly data?

In the example above we had one value every day. What if your data changes every hour. Let’s modify data provider a bit – change days to the same date and change hour value for every date object:

var chartData= [
    {date: new Date(2011, 5, 1, 10, 0, 0, 0), val:10},
    {date: new Date(2011, 5, 1, 11, 0, 0, 0), val:11},
    {date: new Date(2011, 5, 1, 12, 0, 0, 0), val:12},
    {date: new Date(2011, 5, 1, 13, 0, 0, 0), val:11},
    {date: new Date(2011, 5, 1, 14, 0, 0, 0), val:10},
    {date: new Date(2011, 5, 1, 15, 0, 0, 0), val:11},
    {date: new Date(2011, 5, 1, 16, 0, 0, 0), val:13},
    {date: new Date(2011, 5, 1, 17, 0, 0, 0), val:14},
    {date: new Date(2011, 5, 1, 18, 0, 0, 0), val:17},
    {date: new Date(2011, 5, 1, 19, 0, 0, 0), val:13}
];

If you open the chart in browser now, you will see only one column. This happened because chart needs to know what is the minimum period of your data. We didn’t set it before, as default minimum period is day.

To set it, we have to create CategoryAxesSettings object and set minPeriod property to “hh” (hours):

var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
categoryAxesSettings.minPeriod = "hh";
chart.categoryAxesSettings = categoryAxesSettings;

Now the chart should properly display all 10 columns. In next steps we’ll continue working with daily data, so you won’t find this line there.

What if I have gaps in my data but don’t want to display them?

Let’s say you don’t have data for weekends, only for workdays. And you don’t want gaps to be displayed in the chart. All you need to do is to set

categoryAxesSettings.equalSpacing = true;

Try to delete couple of data objects from your data provider and check the difference of how the chart will look with equalSpacing set to true and to false.

Adjusting look of axes and grids

In the previous step we introduced CategoryAxesSettings class. If you check the reference, you’ll see lot’s of properties which you can use to control the look of your category axis. The look of value axes can be controlled via ValueAxesSettings class. For example, let’s make all the grid lines dashed:

var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
categoryAxesSettings.dashLength = 5;
chart.categoryAxesSettings = categoryAxesSettings;

var valueAxesSettings = new AmCharts.ValueAxesSettings();
valueAxesSettings .dashLength = 5;
chart.valueAxesSettings  = valueAxesSettings;

If you open your HTML in browser you should see all the grid lines dashed.

Displaying graph in the scrollbar

As you most likely noticed, the scrollbar displayed in the bottom of the chart is currently empty. And in most of our examples it contains a graph. To set a graph to the scrollbar you should create ChartScrollbarSettings object and tell which of your graphs should be displayed there:

var chartScrollbarSettings = new AmCharts.ChartScrollbarSettings();
chartScrollbarSettings.graph = graph;
chartScrollbarSettings.graphType = "line";
chart.chartScrollbarSettings = chartScrollbarSettings;

Note, as we have only one graph with the same variable name, we set chartScrollbarSettings.graph = graph; If you gave a different variable name for your graph, let’s say myGraph, then you should set: chartScrollbarSettings.graph = myGraph;

We also changed graphType to “line”, as it’s quite common that graphs in scrollbars are line (or area) graphs. If you don’t set graphType, same graph type as your graph’s will be used.

Check reference of ChartScrollbarSettings to see all the available properties which will help you to change the look and behavior of your scrollbar.

Adding a legend to the panel

Most likely you noticed that our panel doesn’t display values anywhere. We can add a StockLegend to our panel in order to display the values. StockLegend extends AmLegend class and can do everything this class can. Let’s add the legend:

var legend = new AmCharts.StockLegend();
stockPanel.stockLegend = legend;

Now values will be displayed in the legend as you will roll-over the chart.

Displaying values in a tool-tip

Instead of displaying values in the legend, you might want to display them in the tool-tip (balloon). There is a class ChartCursorSettings which is responsible for turning this feature on. Here is how we do it:

var chartCursorSettings = new AmCharts.ChartCursorSettings();
chartCursorSettings.valueBalloonsEnabled = true;
chart.chartCursorSettings = chartCursorSettings;

Adding a period selector

All our examples on a web site have some buttons which enable selecting predefined periods, also date input fields. In order to add it, you should create PeriodSelector object and add it to the chart:

var periodSelector = new AmCharts.PeriodSelector();
chart.periodSelector = periodSelector;

If you view your HTML in browser, you will see only date input fields. Let’s add some period buttons to the selector:

periodSelector.periods = [
   {period:"DD", count:1, label:"1 day"}, 
   {period:"DD", selected:true, count:5, label:"5 days"},
   {period:"MM", count:1, label:"1 month"},
   {period:"YYYY", count:1, label:"1 year"},
   {period:"YTD", label:"YTD"},
   {period:"MAX", label:"MAX"}
];

Now you should see buttons with periods we specified. As you see, periods accept array of objects. Each of the object should have at least “period” and “label” properties. Most of them should also contain “count” (except with “MAX” and “YTD” periods). If you want one of these periods to be selected when the chart is displayed for the first time, you should add selected:true property to the period object.

The end

We covered most important things you should know when creating stock chart. In next tutorial we’ll explain how to work with multiple data sets and how they can be compared. Stay tuned! And here is full source of the HTML we produced:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>My first stock chart</title>
        <link rel="stylesheet" href="amcharts/javascript/style.css" type="text/css">
        
        <script src="amcharts/javascript/amstock.js" type="text/javascript"></script>
        <script src="amcharts/javascript/raphael.js" type="text/javascript"></script>
        
        <script type="text/javascript">
        
            var chartData= [
                {date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10},
                {date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11},
                {date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12},
                {date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11},
                {date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10},
                {date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11},
                {date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13},
                {date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14},
                {date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17},
                {date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13}
            ];
      
            
            window.onload = function(){
                var chart = new AmCharts.AmStockChart();
                chart.pathToImages = "amcharts/javascript/images/";
                
                var dataSet = new AmCharts.DataSet();
                dataSet.dataProvider = chartData;
                dataSet.fieldMappings = [{fromField:"val", toField:"value"}];   
                dataSet.categoryField = "date";          
                chart.dataSets = [dataSet];
                
                var stockPanel = new AmCharts.StockPanel();
                chart.panels = [stockPanel];
                
                var legend = new AmCharts.StockLegend();
                stockPanel.stockLegend = legend;                
                
                var panelsSettings = new AmCharts.PanelsSettings();
                panelsSettings.startDuration = 1;
                chart.panelsSettings = panelsSettings;   
                
                var graph = new AmCharts.StockGraph();
                graph.valueField = "value";
                graph.type = "column";
                graph.title = "MyGraph";
                graph.fillAlphas = 1;
                stockPanel.addStockGraph(graph);
                
                var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
                categoryAxesSettings.dashLength = 5;
                chart.categoryAxesSettings = categoryAxesSettings;
                
                var valueAxesSettings = new AmCharts.ValueAxesSettings();
                valueAxesSettings .dashLength = 5;
                chart.valueAxesSettings  = valueAxesSettings;
                
                var chartScrollbarSettings = new AmCharts.ChartScrollbarSettings();
                chartScrollbarSettings.graph = graph;
                chartScrollbarSettings.graphType = "line";
                chart.chartScrollbarSettings = chartScrollbarSettings;
                
                var chartCursorSettings = new AmCharts.ChartCursorSettings();
                chartCursorSettings.valueBalloonsEnabled = true;
                chart.chartCursorSettings = chartCursorSettings;
                
                var periodSelector = new AmCharts.PeriodSelector();
                periodSelector.periods = [{period:"DD", count:1, label:"1 day"},
                                          {period:"DD", selected:true, count:5, label:"5 days"},
                                          {period:"MM", count:1, label:"1 month"},
                                          {period:"YYYY", count:1, label:"1 year"},
                                          {period:"YTD", label:"YTD"},
                                          {period:"MAX", label:"MAX"}];                
                chart.periodSelector = periodSelector;
                
                chart.write("chartdiv");
            }        
        </script>
    </head>
    <body>       
        <div id="chartdiv" style="width:100%; height:400px;"></div> 
    </body>
</html>

And the final result should be this:

Fun Map Monday

2011-11-14T09:09:00.001+02:00

LOL. I guess we’re “not really into maps”.

Thanks xkcd from brightening up our days… every day.

amMap 2.6.0 Released

2011-11-04T12:10:00.001+02:00

We just released a significant feature-full update to amMap. [Download]

Here’s a scoop of what’s new.

Features

Auto zoom for areas. Either use <zoom><auto_zoom> in settings or "auto_zoom" property of <area> in data.
Additional option for <balloon><arrow>: "none"
New setting <export_as_image><background_color>. Sets the background color for the exported images.
Ability to automatically shift overlapping movies. Use <movie><overlap_shift_x> and <overlap_shift_y> to control by how much pixels the each subsequent movie with the exact same coordinates are shifted on the map.
Show amMap version in developer mode.
amRegisterRollout callback function.
amMap now supports "wrapped" longitude. This means that it is now possible to have Mercator-calibrated maps that span -180/180 longitude allowing for example Pacific-centered maps. To enable this just add long_wrap="true" into <map> header.

Bug fixes

The linked areas to selected area are reverted back to selected color rather then default color.
A workaround fix for the bug in latest Flash Player version. Please avoid adding "width" attribute to <label> positioned by lat/long.
Double "Error loading file" message.
Fixed weird behavior in amtimeline.swf.
Fixed a bug in value color calculation.

Maps

UPDATED MAPS: Libya, Iran.
NEW MAPS: Angola, Botswana, Republic of Congo, Democratic Republic of Congo, Lesotho, Malawi, Mozambique, Namibia, North Korea, Papua New Guinea, Swaziland, Zambia.

Introducing JavaScript Version of Stock Chart

2011-10-27T13:13:00.001+03:00

We have some great news – we’ve released beta version of Stock chart v.2 today, which includes brand new JavaScript Stock chart. And we are quite sure you’ll be impressed after seeing these examples:

Final release is expected in about a month. We do not expect a lot of bug’s to appear, as stock chart is based on serial chart of our amCharts bundle which has passed quite a lot of testing already. And of course, you can purchase and use v.2 of Stock chart already today, there won’t be any upgrade fees after final version will be released.

Stock chart + amCharts bundle for a price of Stock chart!

Another great news is that now, if you purchase any license of Stock chart, you’ll receive the same license of amCharts bundle for free!

Upgrading

If you already have a license of amStock v.1 and wish to upgrade, you should go to the downloads area – you’ll find a link to upgrade product there.

Download

As always, you can download, try and use our stock chart for free, it will display small link to amCharts website.

We would be happy to hear from you! Your feedback is highly appreciated.

amCharts Flash charts updated

2011-10-13T14:41:00.001+03:00

With it’s most recent Flash Player releases Adobe introduced some changes that caused amCharts lock up in Chrome and Firefox when setSettings API function was being called.

If you are experiencing the issue described above make sure you download the latest version of amCharts Flash files and replace the ones you’re currently using.

[ Download free version ] [ Download commercial version ]

Success Story: MailChimp uses amCharts

2011-09-14T09:40:00.001+03:00

When it comes to email communications with clients the de facto go-to service all over the world is MailChimp. Here at amCharts we also been loyally using MailChimp’s excellent no-nonsense service for quite some time now.

That’s why we were delighted to learn that MailChimp reciprocated by employing our JavaScript charting libraries in their reports as well. The compliance with HTML5/JavaScript standards allowed MailChimp to cater to the widest possible range of devices and platforms, including iOS devices.

Learn the full story about the switch to amCharts on this excellent MailChimp blog article.

P.S. we love hearing from our users. If you have a similar story feel free to post it online and please please please, let us know.