If your website is data-intensive, then you will need to make that data easy to visualize, normally by means of a JavaScript charting library. However such libraries a dime a dozen and they all have slightly different capabilities, so how do you know which is the best fit for you?
In this article, I'm going to present AnyChart by way of 10 stylish, yet easy-to-implement examples. I’ll demonstrate how AnyChart is a great fit for your data visualization needs and the ease with which it can handle data in almost any format.
You can find all of the CodePen examples from this article in our AnyChart Collection. Link to come ...
Why AnyChart Stands out from the Crowd
The following points illustrate why AnyChart is a serious contender on the charting scene. They are far from marketing, just plain and simple facts.
AnyChart is Well-established
AnyChart is a commercial library, but it is free for any non-profit use. It is very well established and has been on the market for more than 10 years. Originally Flash-based, AnyChart has since moved over to pure JavaScript, with SVG/VML rendering.
The AnyChart API is very flexible and allows you to change almost any aspect of the chart on the fly, at runtime.
AnyChart is a Product Family
AnyChart is usually presented as a set of JS charting libraries, or — if you like — a product family. It comprises the following:
- AnyChart — designed for creating interactive charts of all basic types
- AnyStock — intended to visualize large date/time based data sets
- AnyMap — for geo maps and seat maps
- AnyGantt — for project and resource management solutions (Gantt, resource, PERT charts)
However, these libraries can be treated as one big JavaScript (HTML5) charting library. They all share the same API, all the charts are configured in pretty much the same way, they share common themes, settings and ways to load data.
AnyChart is Open
Earlier this year, AnyChart opened the source code for these libraries. It's important to point out here that AnyChart didn't go fully open-source — no Apache, MIT or any other license of this kind was introduced. But this is still great news if you are choosing a library for a long-term project. Also, AnyChart's rendering is based on the fully open-source JavaScript library GraphicsJS, maintained by AnyChart but open for any community requests and modifications. You can learn more about GraphicsJS in this SitePoint article.
As the Head of R&D at AnyChart, I could spend all day talking about this library, but now it's time to get down to business.
Up and Running: Quick Start with AnyChart
To start using AnyChart in your HTML page, you need to do just three simple things. The first two are including a link to the library's JavaScript file and providing a block-level HTML element. Here is a sample HTML template you can make use of:
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
html, body, #container {
width: 100%;
height: 100%;
}
</style>
<title>AnyChart Basic Example</title>
</head>
<body>
<div id="container"></div>
<script src="http://ift.tt/2q1bzLV"></script>
<script>
// AnyChart code here
</script>
</body>
</html>
The third is adding the JavaScript code that creates a simple, interactive single-series column chart:
anychart.onDocumentLoad(function() {
// create chart and set data
var chart = anychart.column([
["Winter", 2],
["Spring", 7],
["Summer", 6],
["Fall", 10]
]);
// set chart title
chart.title("AnyChart Basic Sample");
// set chart container and draw
chart.container("container").draw();
});
And that's all there is to it!
See the Pen AnyChart Basic Sample by SitePoint (@SitePoint) on CodePen.
Easy, right? But things get even easier and more flexible in AnyChart when it comes to setting the data. Let's proceed to the next section to take a closer look at that.
Getting Your Data into AnyChart
One of the things that makes AnyChart shine is the fact that it can work with data in a large variety of formats. Which one you choose will ultimately depend on the task at hand (and to some extent your personal preference), but AnyChart's flexible approach makes it a great fit for almost any project.
Array of Arrays
Actually, you have already seen the first way in the Quick Start with AnyChart section above. Using this method, you declare your data as an array of arrays and AnyChart does the rest. This method is concise, as well as easy to format and use.
anychart.onDocumentLoad(function() {
// create chart and set data
// as Array of Arrays
var chart = anychart.pie([
["Peter", 5],
["John", 7],
["James", 9],
["Jacob", 12]
]);
chart.title("AnyChart: Array of Arrays");
chart.container("container").draw();
});
See the Pen AnyChart Array of Arrays by SitePoint (@SitePoint) on CodePen.
Notice that changing the chart type is as simple as changing the method call from anychart.column() to anychart.pie(). I'll be demonstrating various other chart types throughout this article, but you can find a full overview here: Chart types and Combinations.
Array of Objects
The second way is pretty similar to the first one — setting data as array of objects. In fact, it is less compact but still very easy to format, read and understand. In addition, this format enables you to configure individual points from your data, which can also be handled in other ways but only with additional mappings.
Note: when you use data in objects in a similar situation, use appropriate names for argument and value fields. You can find comprehensive information on this in the AnyChart documentation for each chart (series) type. In most cases, the argument is x, and the value is usually placed in the value field.
anychart.onDocumentLoad(function() {
// create chart and set data
// as Array of Objects
// the biggest point is marked with individually conigured marker
var chart = anychart.line([
{x: "Winter", value: 5},
{x: "Spring", value: 9, marker: {enabled: true, type: "star5", fill: "Gold"}},
{x: "Summer", value: 7},
{x: "Fall", value: 1}
]);
chart.title("AnyChart: Array of Objects");
chart.container("container").draw();
});
See the Pen AnyChart Array of Objects Sample by SitePoint (@SitePoint) on CodePen.
Continue reading %Getting Started with AnyChart — 10 Practical Examples%
by Roman Lubushkin via SitePoint
No comments:
Post a Comment