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 […]
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 […]
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 […]
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 […]
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, […]
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 […]
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 […]
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? […]
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 […]
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”: [ […]