anychart.onDocumentReady(function () {
// create area chart
var chart = anychart.area();
// turn on chart animation
chart.animation(true);
// set chart title text settings
chart.title()
.enabled(true)
.useHtml(true)
.text('WebSite Metrics 2014<br/>' +
'<span style="color:#212121; font-size: 13px;">(unique visitors)</span>');
// axis title
chart.yAxis().title('Number of Visitors');
// create a logarithmic scale
var logScale = anychart.scales.log();
logScale.minimum(1) // set scale minimum value
.maximumGap(0.2); // increase scale maximum gap
logScale.ticks().count(6); // set fixed major ticks count
logScale.minorTicks().mode('logarithmic'); // set minor ticks to use logarithmic mode
// set scale for the chart
// it force to use passed scale in all scale dependent entries such axes, grids, crosshairs etc
chart.yScale(logScale);
// create area series on passed data
var series = chart.area([
['Jan', 112],
['Feb', 163],
['Mar', 229],
['Apr', 990],
['May', 4104],
['Jun', 3250],
['Jul', 5720],
['Aug', 43],
['Sep', 61],
['Oct', 34],
['Nov', 45],
['Dec', 122]
]);
// set series data labels settings
series.labels()
.enabled(true)
.fontColor('#212121')
.position('center-top')
.anchor('center-bottom');
// turn on series markers
series.markers(true);
// set series name
series.name('Number of Visitors');
// set up tooltips and interactivity settings
series.tooltip()
.position('center-top')
.positionMode('point')
.anchor('left-top')
.offsetX(5)
.offsetY(5);
chart.interactivity().hoverMode('by-x');
// set container for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
Area Charts are
similar to the Line Charts: they are intended to represent the data that can be
arranged in a table on a worksheet, they use standard two-dimensional coordinate system and both are mostly
used to show continuous changes. By having an area between the zero line and the series line colored, Area
Charts emphasize the magnitude of change over a period of time and draw attention to a total value across a
trend.
This Area chart has only one series, which shows the number of unique site visitors during a year.
Categories on the X axis are months; Y axis holds the values. One important thing about the vertical scale:
the values spread along the vertical axis look special, that’s because the Y scale type is
changed from the default (ordinal) to logarithmic. Logarithmic scale helps when there is a large range
of values in the data, it reduces the difference and makes the chart easier to read.
All data points are marked and all area labels are enabled, so you can see each point’s value even without hovering any
of them. But tooltips are
enabled as well; when you hover anywhere above a category, the tooltip of the point that belongs to this
category is shown. Tooltips show the category and the number of visits, this is a default tooltips
formatting: series name and point value, formatting can be changed in a number of ways.