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