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. […]

Working with Stock Chart as with Serial chart (important!)

Type tutorial

Our Stock chart can display multiple StockPanels. And Stock Panel inherits all properties and methods of AmSerialChart. This means that pretty much everything you can do with serial chart – add multiple value axes, guides, trend lines, you can also do with Stock panel. Same is with StockGraph – as it extends AmGraph, it can […]

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; […]

Moving average indicators for Stock Chart

Type tutorial

Normally JavaScript Stock Chart does not support automatically-calculated “moving average” graphs or other indicators. However, it’s quite easy to add such functionality yourself. Here’s a code for “moving average”: (it should be included after amstoock.js) // MOVING AVERAGE PLUGIN FOR JAVASCRIPT STOCK CHARTS FROM AMCHARTS // AmCharts.averageGraphs = 0; AmCharts.addMovingAverage = function (dataSet, panel, field) […]

Pages with base-href (i.e. AngularJS)

Type tutorial

If your web page is using the <base href> header make sure you include the following line before initializing the chart/map: AmCharts.baseHref = true; It will ensure the common SVG problems related to base href are avoided.

Drill-down column chart

Type tutorial

Let’s implement a very basic drill-down scenario for the column charts. First of all, let’s set up the data: var chartData = [ { country: “USA”, visits: 4025 }, { country: “China”, visits: 1882 }, { country: “Japan”, visits: 1809}, { country: “Germany”, visits: 1322} ]; Now let’s add a second-level of the data to […]

Multiple data sets with regular charts

Type tutorial

Sometimes you find yourself in a situation where you need one chart to display several sets of data. You also need your user to be able to switch them dynamically, without reloading the page. However, the charts do not support this functionality out of the box. Fortunately it’s very easy to implement using some custom […]