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

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.

Two or more charts on one page

Type tutorial

You can have any number of charts on one page. To do this, you have to set unique id for each div which should contain chart: <div id=”chart1div” style=”width:500px;height:300px;”></div> <div id=”chart2div” style=”width:500px;height:300px;”></div> Note, first div has id “chart1div” and the id of the second is “chart2div”. When writing chart to container, you should use these […]

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