Adding multiple value axis to a Stock Charts panel

Type tutorial

In Stock chart, each StockPanel is an instance of AmSerialChart. So you can add ValueAxis objects to it like you would normally add to a regular chart. Each StockGraph is an instance os AmGraph so it has valueAxis property. So adding multiple value axes to a stock panel is just like adding them to a […]

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

Disabling cursor / scrollbar in Stock Chart

Type tutorial

To hide the chart cursor in JavaScript Stock Chart just simply set enabled to false in ChartCursorSettings: chart.chartCursorSettings.enabled = false; To hide the scrollbar in JavaScript Stock Chart just simply set enabled to false in ChartScrollbarSettings: chart.chartScrollbarSettings.enabled = false;  

Disabling or enabling value axis recalculation to percents

Type tutorial

When there’s a single DataSet selected, the chart shows real values on the value axis. Now, when you select at least one another DataSet for comparison, the chart goes into “percent” mode redrawing all the graphs and value axes to show percent change from datapoint to datapoint rather than real values. It’s a standard practice […]

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

Your first Stock chart

Type tutorial

To begin, download and unzip stock chart package. If you’re seasoned web developer and feeling brave, you could simply go to samples/ 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 […]

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