{"id":14887,"date":"2022-05-12T15:34:11","date_gmt":"2022-05-12T15:34:11","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=14887"},"modified":"2022-08-13T11:11:17","modified_gmt":"2022-08-13T11:11:17","slug":"area-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/05\/12\/area-chart-js\/","title":{"rendered":"Building Area Chart with JavaScript"},"content":{"rendered":"

\"\"<\/a>If you are into data visualization<\/a>, one of the things that you might often need to do is represent a variable\u2019s values over time. Or, you might need to compare multiple datasets in terms of how they are changing during a certain period. This is where area charts can be helpful.<\/p>\n

Not sure how to build an elegant area chart? Now you will master a really easy way! In this step-by-step tutorial, we will be visualizing data on the military budgets of the USA and Russia over the past two decades in interactive area charts using JavaScript. All aboard!<\/p>\n

<\/p>\n

What Is an Area Chart?<\/h2>\n

An area chart is a graphical representation of data that shows how numeric values of one or more datasets change relative to a second variable, which is typically the time.<\/p>\n

The area chart type was introduced by William Playfair<\/a> in 1786, who is also credited for the invention of line, bar, and pie charts. It consists of a line with the underlying area filled with a color. In multi-series area graphs, as you can imagine, there are several lines with shaded areas.<\/p>\n

Area Chart That Will Be Created<\/h2>\n

In this tutorial, first, we will plot the military budget of the United States of America from the year 2000 to 2020. Then, we\u2019ll turn that single-series JS area chart into a multi-series by adding the same kind of data for the Russian Federation.<\/p>\n

Check out how the final JavaScript-based area chart will look, showing how many billions of dollars the two countries spent for defense purposes over the past two decades:<\/p>\n

\"\"<\/p>\n

How to Build a Basic JS Area Chart<\/h2>\n

Building an interactive area chart from scratch might be intimidating and time-consuming. But there are quite a few helpful JavaScript charting libraries<\/a> that can be helpful. Actually, no matter exactly which one you use, the entire process of creating any JS-based chart, including our area graph, can be split into four fundamental steps:<\/p>\n

    \n
  1. Create a basic web page in HTML.<\/li>\n
  2. Add the required JavaScript files.<\/li>\n
  3. Load the data.<\/li>\n
  4. Write some JavaScript code to draw the chart.<\/li>\n<\/ol>\n

    For an illustrative example in this tutorial, I opted for AnyChart<\/a>. This JavaScript library looks not difficult to get started with as there are quite thorough documentation<\/a> and many examples<\/a>, and it\u2019s free for any non-commercial use.<\/p>\n

    Although it\u2019s not necessary, some background knowledge of HTML, CSS, and JavaScript would help to understand the concepts faster. But no need to worry even if you are a complete beginner. We will go through each step in detail, and by the end of this tutorial, you will have learned to build a JS area chart even if you are a novice with limited coding experience.<\/p>\n

    1. Create a basic web page in HTML<\/h3>\n

    The first thing we need to do is create a basic HTML page for our area chart. We give it the title of \u201cJavaScript Area Chart.\u201d<\/p>\n

    On this page, we add an HTML block element, <div><\/code>. We give it a unique id attribute of \u201ccontainer\u201d so that we can reference it later in the code.<\/p>\n

    We also add some CSS rules in the <style><\/code> block to display our chart over the entire screen and define the width<\/code> and height<\/code> properties as 100% and margin and padding as 0. Feel free to define all that as per your need.<\/p>\n

    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Area Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    2. Add the required JavaScript files<\/h3>\n
    Next, we need to add the JavaScript files of the charting library in the <head><\/code> section. We can either download them locally or use a CDN (Content Delivery Network).<\/p>\n
    For this tutorial, let\u2019s add the necessary script files from AnyChart CDN<\/a>. AnyChart has a modular structure which makes it easy to only connect the chart types and features that we require at the moment, reducing the size of the running JavaScript code.<\/p>\n
    For the area chart type, for example, we can include just one Base<\/a> module.<\/p>\n
    Our HTML can now look something like this.<\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Area Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-base.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    3. Load the data<\/h3>\n
    As previously stated, we will visualize the military budget data and start with a JavaScript area chart for the United States. I found an appropriate dataset on Statista<\/a>.<\/p>\n
    In order to properly load the data into our chart, we create an array<\/a>, where each element of the array consists of two elements. The first one is the year, and the second one is the military budget of the USA in billion dollars.<\/p>\n
    For example, in the year 2000, the military budget of the USA was 320.09 billion dollars. So, our first array becomes [\"2000\", 320.09]<\/code>.<\/p>\n
    var dataSet = [\r\n  [\"2000\", 320.09],\r\n  [\"2001\", 331.81],\r\n  [\"2002\", 378.46],\r\n  [\"2003\", 440.53],\r\n  [\"2004\", 493],\r\n  [\"2005\", 533.2],\r\n  [\"2006\", 558.34],\r\n  [\"2007\", 589.59],\r\n  [\"2008\", 656.76],\r\n  [\"2009\", 705.92],\r\n  [\"2010\", 738.01],\r\n  [\"2011\", 752.29],\r\n  [\"2012\", 725.21],\r\n  [\"2013\", 679.23],\r\n  [\"2014\", 647.79],\r\n  [\"2015\", 633.83],\r\n  [\"2016\", 639.86],\r\n  [\"2017\", 646.75],\r\n  [\"2018\", 682.49],\r\n  [\"2019\", 731.75],\r\n  [\"2020\", 766.58]\r\n];<\/code><\/pre>\n
    4. Write some JavaScript code to draw the chart<\/h3>\n
    Now, just a few lines of JavaScript code to get our area chat up and running.<\/p>\n
    The first thing we do here is add the anychart.onDocumentReady()<\/code> function, which will enclose the whole JavaScript code of the area chart. This ensures that the code will not be executed till the page is fully loaded.<\/p>\n
    <script>\r\n\r\n\u00a0\u00a0anychart.onDocumentReady(function () {\r\n\u00a0\u00a0\u00a0\u00a0\/\/ The area chart's code will be written here.\r\n\u00a0\u00a0});\r\n\r\n<\/script><\/code><\/pre>\n
    Next, we add our data from Step 3.<\/p>\n
    anychart.onDocumentReady(function () {\r\n\r\nvar dataSet = [\r\n[\"2000\", 320.09],\r\n[\"2001\", 331.81],\r\n[\"2002\", 378.46],\r\n[\"2003\", 440.53],\r\n[\"2004\", 493],\r\n[\"2005\", 533.2],\r\n[\"2006\", 558.34],\r\n[\"2007\", 589.59],\r\n[\"2008\", 656.76],\r\n[\"2009\", 705.92],\r\n[\"2010\", 738.01],\r\n[\"2011\", 752.29],\r\n[\"2012\", 725.21],\r\n[\"2013\", 679.23],\r\n[\"2014\", 647.79],\r\n[\"2015\", 633.83],\r\n[\"2016\", 639.86],\r\n[\"2017\", 646.75],\r\n[\"2018\", 682.49],\r\n[\"2019\", 731.75],\r\n[\"2020\", 766.58]\r\n];\r\n\r\n});\r\n\r\n<\/script><\/code><\/pre>\n
    Then, we create our chart specifying the chart type as \u201carea\u201d and add the data.<\/p>\n
    var chart = anychart.area();\r\nchart.data(dataSet);<\/code><\/pre>\n
    Finally, we add a title, put the chart in the previously defined <div><\/code> container, and display it using the draw<\/code> command.<\/p>\n
    chart.title(\"Military Budget of the USA\");\r\nchart.container(\"container\");\r\nchart.draw();<\/code><\/pre>\n
    Eureka! Our area chart is ready.<\/p>\n