Multiple value axes on XY chart

Type tutorial

All our charts which have valueAxis can have multiple instances of this axis. This means you can have any number of value axes on XY chart and even radar chart can have several value axes. You just need to create additional ValueAxis (use position=”right” if you want to place it on the right), then assign some […]

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

Filling area between two lines

Type tutorial

It’s quite often scenario when we need to show some allowed value fluctuation on the chart. Different names are used for this kind of chart – difference chart, band graph, range graph etc. Here is a demo of such chart made with amCharts. To make fill between two lines you will need two graphs and so […]

Vertical or horizontal lines or fills

Type tutorial

Our charts can display lines or fills on category axis, also lines or fills on value axis. We call these lines and fills Guides. Adding a guide is easy. AxisBase has a property called guides and it should be array containing one or more guide: categoryAxis.guides = [{ category: “2001”, toCategory: “2003”, lineColor: “#CC0000”, lineAlpha: 1, […]

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

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

Formatting dates

Type tutorial

Our JavaScript Charts as well as JavaScript Stock Charts allows you to set custom formats of the dates it displays. I.e. on date-based category axis and some other places of the charts. You can set date formats for each displayed period (hour, day, month, etc.) using a number of options: either directly on CategoryAxis object or through CategoryAxesSettings (Stock […]

Handling mouse events on line graph

Type tutorial

For a better understanding of events model, check this tutorial. There are several issues that you need to look out for when employing user interaction events on line graphs. We’ll detail them here: Events fire only on bullets, not line itself No bullets – no events. But what if I don’t want to display bullets? […]