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 are 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 on CodePen.

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 = " https://cdn.anychart.com/js/latest/anychart-bundle.min.js " > </ script > < script > </ script > </ body > </ html >

The third is adding the JavaScript code that creates a simple, interactive single-series column chart:

anychart . onDocumentLoad ( function ( ) { var chart = anychart . column ( [ [ "Winter" , 2 ] , [ "Spring" , 7 ] , [ "Summer" , 6 ] , [ "Fall" , 10 ] ] ) ; chart . title ( "AnyChart Basic Sample" ) ; 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 ( ) { 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 ( ) { 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.

Creating Multiple Series Charts

Multiple series charts are charts which allow you to plot the highs and lows of multiple datasets while also comparing them. When creating multiple series charts with AnyChart, you can use the previously introduced Array of Array and Array of Object methods, but additionally specify the names of your series. The AnyChart engine will take care of everything else.

Multiple Series: Array of Arrays

Here is how it can be done if you want to use simple arrays:

anychart . onDocumentLoad ( function ( ) { var chart = anychart . line ( ) chart . data ( { header : [ "#" , "Euro (€)" , "USD ($)" , "Pound (£)" ] , rows : [ [ "Winter" , 5 , 7 , 4 ] , [ "Spring" , 7 , 9 , 6 ] , [ "Summer" , 9 , 12 , 8 ] , [ "Fall" , 12 , 15 , 9 ] ] } ) ; chart . title ( "AnyChart: Multi-Series Array of Arrays" ) ; chart . legend ( true ) ; chart . container ( "container" ) . draw ( ) ; } ) ;

And here’s a basic sample of a multi-series chart in AnyChart created from an array of arrays (on CodePen):

See the Pen AnyChart Easy Multi-Series: Arrays by SitePoint (@SitePoint) on CodePen.

Multiple Series: Array of Objects

Now, let’s see how you can create a multi-series chart using an array of objects.

Note: when you use objects like this, you can apply any field names for values.

Here’s how it can be done:

anychart . onDocumentLoad ( function ( ) { var chart = anychart . column ( ) ; chart . data ( { header : [ "#" , "Euro (€)" , "USD ($)" , "Pound (£)" ] , rows : [ { x : "Winter" , usd : 5 , eur : 4 , pound : 3 } , { x : "Spring" , usd : 3 , eur : 3 , pound : 3 } , { x : "Summer" , usd : 2 , eur : 5 , pound : 3 } , { x : "Fall" , usd : 4 , eur : 2 , pound : 3 } ] } ) ; chart . title ( "Array of Objects" ) ; chart . legend ( true ) ; chart . container ( "container" ) . draw ( ) ; } ) ;

See the Pen AnyChart Easy Multi-Series: Objects by SitePoint (@SitePoint) on CodePen.

Displaying Data From an HTML Table

Another way to load data into AnyChart is to use a table that already exists on the page. This can be an extremely effective way of visualizing the key points of an otherwise boring list of figures. To make this work, you’ll need to include a data adapter script along with the charting library.

Then there are two options, you can pull in data from tables created with the <table> tag or with <div> tags and CSS. Let’s look at both.

Table Tag

If you decide to implement the table tag option, your code might look like this:

< table id = " htmlTable " > </ table > < script src = " https://cdn.anychart.com/js/latest/anychart-bundle.min.js " > </ script > < script src = " https://cdn.anychart.com/js/latest/data-adapter.min.js " > </ script >

With the following JavaScript:

anychart . onDocumentLoad ( function ( ) { var chart = anychart . column ( ) ; var tableData = anychart . data . parseHtmlTable ( "#htmlTable" ) ; chart . data ( tableData ) ; chart . legend ( true ) ; chart . container ( "container" ) . draw ( ) ; } ) ;

And here’s what that looks like in practice. Pretty neat, I’m sure you’ll agree.

See the Pen AnyChart HTML Table Parsing by SitePoint (@SitePoint) on CodePen.

Data Displayed Using Regular Markup

Now, let’s look at how it works when you create a table with <div> tags and CSS:

< div class = " table " > < div class = " heading " > < div class = " cell " > < p > Date </ p > </ div > ... </ div > < div class = " row " > < div class = " cell " > < p > 01/01 </ p > </ div > ... </ div > </ div > < script src = " https://cdn.anychart.com/js/latest/anychart-bundle.min.js " > </ script > < script src = " https://cdn.anychart.com/js/latest/data-adapter.min.js " > </ script >

With the following JavaScript:

anychart . onDocumentLoad ( function ( ) { var chart = anychart . column ( ) ; var tableData = anychart . data . parseHtmlTable ( ".table" , ".row" , ".cell p" , ".heading .cell p" , ".title" ) ; chart . data ( tableData ) ; chart . legend ( true ) ; chart . container ( "container" ) . draw ( ) ; } ) ;

You see it is possible to set CSS selectors for the table rows, heading and title. Basically, you don’t need to tune up the table itself — you can adjust the script and get the data from the markup.

See the Pen AnyChart HTML Div Table Parsing by SitePoint (@SitePoint) on CodePen.

Working With JSON Data

AnyChart charts have no problem in dealing with data in pure JSON format. In fact AnyChart works so well with JSON, that they even provides their own JSON schemas. JSON is a great data format if, for example, you want to store settings and data together. AnyChart also has a number of JSON serialization methods that can help with export.

This is how you would create a column and spline combination chart from JSON data. This (and the following examples) require the data adapter script mentioned previously.

anychart . onDocumentReady ( function ( ) { var json = { "chart" : { "type" : "column" , "title" : "AnyChart: Data from JSON" , "series" : [ { "seriesType" : "Spline" , "data" : [ { "x" : "P1" , "value" : "128.14" } , { "x" : "P2" , "value" : "112.61" } , { "x" : "P3" , "value" : "163.21" } , { "x" : "P4" , "value" : "229.98" } , { "x" : "P5" , "value" : "90.54" } ] } , { "seriesType" : "Column" , "data" : [ { "x" : "P1" , "value" : "90.54" } , { "x" : "P2" , "value" : "104.19" } , { "x" : "P3" , "value" : "150.67" } , { "x" : "P4" , "value" : "120.43" } , { "x" : "P5" , "value" : "200.34" } ] } ] , "container" : "container" } } ; chart = anychart . fromJson ( json ) ; chart . draw ( ) ; } ) ;

See the Pen AnyChart JSON Settings Sample by SitePoint (@SitePoint) on CodePen.

Working with XML Data

And if you don’t like JSON, you can stick to XML because AnyChart charts also have no problem dealing with data in XML format. As with JSON, AnyChart also provides their own XML schemas. XML is also a good fit whenever you are going to store the settings and data altogether. And again, AnyChart has a number of XML serialization methods available, which can be helpful with export.

Here’s the sample code of a multi-series polar chart created from XML settings:

anychart . onDocumentReady ( function ( ) { var xml = '<?xml version="1.0" encoding="utf-8"?>' + '<anychart xmlns="https://cdn.anychart.com/schemas/latest/xml-schema.xsd">' + '<chart type="polar" container="container">' + '<series_list>' + '<series series_type="area">' + '<data>' + '<point x="0" value="0"/>' + '<point x="50" value="100"/>' + '<point x="100" value="0"/>' + '</data>' + '</series>' + '<series series_type="line" stroke="red">' + '<data>' + '<point x="50" value="0"/>' + '<point x="100" value="100"/>' + '<point x="50" value="0"/>' + '</data>' + '</series>' + '</series_list>' + '<x_scale maximum="100"/>' + '</chart>' + '</anychart>' ; chart = anychart . fromXml ( xml ) ; chart . draw ( ) ; } ) ;

You can take a look at the AnyChart XML Settings sample on CodePen:

See the Pen AnyChart XML Settings Sample by SitePoint (@SitePoint) on CodePen.

Working with Data Stored in CSV Format

The last thing I would like to demonstrate is how you can work with data stored in comma-separated values (CSV) format. AnyChart supports this out of the box, with some additional configuration options (for example, what is used as a separator). CSV is well-known and frequently used format. It is good for big data sets and provides the opportunity to save bandwidth. You can load data from CSV (as demonstrated below), map it and then implement it in your charts.

The easiest way to load a CSV file into an AnyChart JS chart is if the file is actually comma separated, contains an argument in the first column, and has no header, i.e. looks something like this:

Eyeshadows,249980 Eyeliner,213210 Eyebrow pencil,170670 Nail polish,143760 Pomade,128000 Lip gloss,110430 Mascara,102610 Foundation,94190 Rouge,80540 Powder,53540

Loading such a CSV file into your chart can be as easy as follows:

anychart . onDocumentReady ( function ( ) { anychart . data . loadCsvFile ( "https://cdn.anychart.com/charts-data/data_csv.csv" , function ( data ) { chart = anychart . bar ( data ) ; chart . title ( "AnyChart from CSV File" ) ; chart . container ( "container" ) . draw ( ) ; } ) ; } ) ;

I’ve put a sample of loading CSV in AnyChart (on CodePen) for illustration:

See the Pen AnyChart from CSV File by SitePoint (@SitePoint) on CodePen.

If the fields in your CSV file are ordered in a different way, data can be loaded into a data set and remapped (I’ll explain how that works in a future article covering more advanced uses of the AnyChart library). You can also fine-tune separators during the process of loading data into a data set.

Conclusion

In this article I have introduced you to the AnyChart JavaScript charting library. I have outlined its strengths and demonstrated how easy it is to harness its power to create complex and visually appealing charts in just a few lines of code. I have also demonstrated a number of ways of getting data into AnyChart, ranging from hard-coded data structures to the ability to load more complicated files over the network.

As mentioned, I’m the Head of R&D at AnyChart and would be glad to hear any feedback, questions, or ideas for improvement you may have in the comments.

If you enjoyed this article, you might also like our screencast Creating an Illustration in Sketch and Exporting it as a SVG over on SitePoint Premium