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