We here love Wordpress. And we love our products (shocker). But most of all we love when our users do some exciting and useful things with them.
Everyone meet amMap user amellie, who used amMap to create a Wordpress plugin to easily add visited countries map to your pages or posts.
Here’s the direct link to the plugin page and here’s the demo.
Good job!
It’s finally here! JavaScript Charts and JavaScript Stock Charts 2.6 are available now. [Download]
The most invisible and probably the most significant feature since the creation of the product itself is the shiny new graphics engine, built 100% in-house. That’s right – we will be no longer relying on any 3rd party libraries.
Don’t get us wrong, RaphaelJS is a great library and it was a perfect solution for us when we wanted to get JavaScript charts to you as fast as possible. However, as we moved forward, we felt that fully home-brewed solution made more sense. Here are improvements this new development is bringing to the table:
Enjoy!
We just released a minor version update to amMap 2.6.4 [Download]
Here’s the usual scoop:
This is a bit off topic, but if you have little kids, you should definitely check this iPod/iPhone game, called “Pepi Bath”. Our team members took part in creating it and we are very proud with the result. Our kids worked as beta-testers and they loved it. Pepi Bath is a role-play game where children learn about hygiene in a fun way. The app has 4 parts as different situations in which this cute character Pepi – a boy or a girl to choose – appears: at the sink, washing clothes, going to a toilet and taking a bath. More information can be found on PepiPlay website. We would greatly appreciate if you could share this link between your friends. If you have iPad or iPhone, a review in appStore would help us a lot. This game is free for a limited time!
And back to the charts now: next week we will release a new version of JavaScript charts. These charts will use new drawing engine and will be a lot faster!
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:
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.
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.
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.
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)
![[Screenshot-2011-12-16_10.20.31%255B3%255D.png]](http://lh5.ggpht.com/-yW7QQdm2sgE/TusDcPWRy_I/AAAAAAAAt7w/BhAb-KPiuGc/s1600/Screenshot-2011-12-16_10.20.31%25255B3%25255D.png)
Enjoy!
A minor update to amMap 2.6.1 (Flash) was just released. [Download]
Nothing groundbreaking, just some tweaks and fixes there and there:
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.
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>
Only one JavaScript file must be included – amstock.js. This file is in amcharts/javascript folder. Add this line to the <head> of you HTML:
<script src="amcharts/javascript/amstock.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">
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>.
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.
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} ];
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/";
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];
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.
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 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.
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.
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.
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.
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.
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.
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;
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.
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 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:
