Add Charts to Our JavaScript App with Anychart

Anychart is an easy to use library that lets us add chart into our JavaScript web app.

In this article, we’ll look at how to create basic charts with Anychart.

Create Our First Chart

We can create our first chart by adding the script tag to add the Anychart library:

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>

Then we add a container element for the chart:

<div id="container" style="width: 500px; height: 400px;"></div>

We set the id which we’ll use later.

Then to create a pie chart, we write:

anychart.onDocumentLoad(() => {
   const chart = anychart.pie();
   chart.data([
     ["apple", 5],
     ["orange", 2],
     ["grape", 2],
   ]);
   chart.title("Most popular fruits");
   chart.container("container");
   chart.draw();
 });

We create a pie chart with anychart.pie() .

Then we call chart.data to add our data in an array.

chart.title sets the chart title.

chart.container sets the ID of the container to render the chart in.

chart.draw draws the chart.

Load Data from XML

We can load data from XML.

For instance, we can write the following HTML:

<div id="container" style="width: 500px; height: 400px;"></div>

And the following JavaScript code:

const xmlString = `
<xml>
 <chart type="pie" >
  <data>
   <point name="apple" value="1222"/>
   <point name="orange" value="2431"/>
   <point name="grape" value="3624"/>
  </data>
 </chart>
</xml>
`

anychart.onDocumentLoad(() => {
  const chart = anychart.fromXml(xmlString);
  chart.title("Most popular fruits");
  chart.container("container");
  chart.draw();
});

to add a pie chart that renders the given XML string.

We have the chart tag with the type attribute set to 'pie' .

The data tag has the point elements which have the data.

name has the keys and value has the value.

Load Data from JSON

To load data from JSON objects, we can use the anychart.fromJSON method.

We keep the same HTML as before, and we write the following JavaScript:

const json = {
  "chart": {
    "type": "pie",
    "data": [
      ["apple", 1222],
      ["orange", 2431],
      ["grape", 3624],
    ]
  }
};

anychart.onDocumentLoad(() => {
  const chart = anychart.fromJson(json);
  chart.title("Most popular fruits");
  chart.container("container");
  chart.draw();
});

We have the json object with the chart property that has the chart data.

type has the chart type to render.

data has an array of key-value arrays with the data.

Load Data from CSV

We can load chart data from CSV with the chart.title method.

For instance, we can write:

const csvString = `
  2009-02-06,6764n
  2009-02-07,7056n
  2009-02-08,7180n
`

anychart.onDocumentLoad(() => {
  const chart = anychart.area();
  chart.area(csvString);
  chart.title("Profit growth");
  chart.container("container");
  chart.draw();
});

We have the csvString variable that has a string with the CSV columns.

The first is the x-axis values.

The 2nd column is the y-axis values.

Then we pass csvString to chart.area to use csvString ‘s data to render our area chart.

Conclusion

We can render charts from various data sources easily with Anychart.