Documentation

Updating balloon (tool-tip) text on the fly

Type tutorial

Sometimes you might need to add some more information to the balloon of the graph in real time, depending on the value or some other thing. AmGraph has a property, called balloonFunction which can be used for that purpose. You should create some function (method) which will receive GraphDataItem and a reference to graph itself […]

Showing only one balloon for all graphs

Type tutorial

In case you have a lot of graphs in one chart, and use ChartCursor with value balloons enabled, showing a separate balloon for each graph might not work. So you have two options: #1 Show only one balloon, of the most close graph to the mouse cursor. This can be done by setting chartCursor.oneBalloonOnly = true; #2 […]

Creating Sparkline / Micro Charts

Type tutorial

Despite what you may have heard, JavaScript Charts from amCharts CAN be used to create inline sparkline or microcharts. This article will walk you through the steps needed to minify your charts. Let’s take some simple column chart as an example: The code for the above chart is here. Now let’s say I want to […]

Displaying bullets on specified points only

Type tutorial

In some cases you might need to show bullet only at a specific data point, not all of them. Or you might need to have  a different from default bullet for some points. To do this, you should first add bullet field in your data provider, for example: var chartData = [{ “date”: “2009-10-26”, “value”: […]

User defined min/max values of Value Axis

Type tutorial

You can use minimum and maximum properties of ValueAxis to set starting and ending value for your value axis. However, those are just “suggestions”. The chart will always struggle to adjust the scale of the value axis so that it displays “pretty” starting and ending values, as well as nice intermediate steps. So if you set, say, the scale […]

Combined stacked line/area graphs with non-stacked ones

Type tutorial

To prevent the line graph from stacking with another graphs on a stacked line/area chart, just set its stackable property to false. I.e.: graph.stackable = false; The above works for both regular JavaScript Charts and JavaScript Stock Charts.

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

Make the pie chart to take the whole space of the container

Type tutorial

In order for the pie to take the whole width/height of the container you will need to: 1) Disable callouts / labels; 2) Set all margins to zero; 3) Disable slice pullout functionality. Like this: chart.labelsEnabled = false; chart.autoMargins = false; chart.marginTop = 0; chart.marginBottom = 0; chart.marginLeft = 0; chart.marginRight = 0; chart.pullOutRadius = […]