Getting Started with AnyChart — 10 Practical Examples

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>
      // 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.

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() {
  // create chart and set data
  // as Array of Arrays
  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() {
  // create chart and set data
  // as Array of Objects
  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">
  <!-- Normal table markup here -->
</table>

<!-- Include the AnyChart library and data adapter -->
<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() {
  // create chart and set data
  var chart = anychart.column();
  // parse table
  var tableData = anychart.data.parseHtmlTable("#htmlTable");

  chart.data(tableData);
  chart.legend(true);
  // set chart container and draw
  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>

<!-- Include the AnyChart library and data adapter -->
<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() {
  // create a chart and set the data
  var chart = anychart.column();

  var tableData = anychart.data.parseHtmlTable(
    ".table", ".row", ".cell p", ".heading .cell p", ".title"
  );

  chart.data(tableData);
  chart.legend(true);
  // set chart container and draw
  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() {
  // JSON data
  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"
    }
  };

  // set JSON data
  chart = anychart.fromJson(json);
  // draw chart
  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() {
  // XML settings and data
  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>';

  // Set settings and data as XML
  chart = anychart.fromXml(xml);
  // draw chart
  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) {
    // create chart from loaded data
    chart = anychart.bar(data);
    // set title
    chart.title("AnyChart from CSV File");
    // draw chart
    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.

Useful Links

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

Frequently Asked Questions (FAQs) about Getting Started with AnyChart Examples

What is AnyChart and how does it work?

AnyChart is a flexible JavaScript (HTML5) based solution that allows developers to embed highly customizable interactive charts and dashboards into any web, standalone or mobile project. Whether you need to enhance your website with better reporting, embed dashboards into your on-premises and SaaS systems, or build an entirely new product, AnyChart covers all your data visualization needs.

How can I get started with AnyChart?

To get started with AnyChart, you need to include the AnyChart library into your project. You can do this by downloading the library from the official AnyChart website or by using a CDN. Once the library is included, you can start creating charts by creating a chart instance, setting the data, and then drawing the chart on a container on your webpage.

What types of charts can I create with AnyChart?

AnyChart supports a wide variety of charts including line, bar, pie, area, column, scatter, bubble, and many more. It also supports advanced chart types like heat maps, box plots, error bars, and technical indicators. This makes it a versatile tool for all your data visualization needs.

Can I customize the look and feel of my charts?

Yes, AnyChart provides a wide range of customization options. You can customize the colors, fonts, tooltips, labels, and even the animation of your charts. This allows you to create charts that match the look and feel of your project or brand.

How can I add interactivity to my charts?

AnyChart allows you to add various interactive features to your charts such as tooltips, crosshairs, and selection. You can also add event listeners to your charts to handle user interactions like clicks or mouse movements.

Can I use AnyChart with my preferred programming language?

AnyChart is a JavaScript-based library, so it can be used with any programming language that can interact with JavaScript. This includes popular languages like Python, PHP, Ruby, and .NET.

How can I handle large datasets with AnyChart?

AnyChart is designed to handle large datasets efficiently. It uses advanced data aggregation and data processing techniques to ensure that your charts remain responsive and accurate even when dealing with large amounts of data.

Can I export my charts for offline use?

Yes, AnyChart allows you to export your charts in various formats including PNG, JPG, PDF, and SVG. This makes it easy to share your charts or use them in presentations or reports.

Is there any support or documentation available for AnyChart?

Yes, AnyChart provides comprehensive documentation and API reference on their official website. They also have a dedicated support team that can assist you with any issues or questions you may have.

Can I use AnyChart for free?

AnyChart offers a free version of their library for non-commercial use. For commercial use, they offer various licensing options to suit different needs and budgets.