{"id":5024,"date":"2017-10-28T16:30:47","date_gmt":"2017-10-28T16:30:47","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=5024"},"modified":"2022-08-13T10:27:16","modified_gmt":"2022-08-13T10:27:16","slug":"create-javascript-area-chart","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2017\/10\/28\/create-javascript-area-chart\/","title":{"rendered":"How to Create JavaScript Area Chart"},"content":{"rendered":"

\"HowWant to know how to build a JavaScript area chart<\/a>? This article will show you how to do that and tell you who invented area charts in the late 18th century.<\/p>\n

The area chart is one of the basic charts used to show changes in data over time<\/a>. The key feature of this chart type is a colored area between the horizontal X-axis and the line marking the changing value. It can be filled with a color, gradient color, or with a hatch fill.<\/p>\n

Look at the chart on the title image. That’s the data visualization\u00a0being created along the tutorial. Such a JavaScript-based area chart will be interactive and good-looking in any browser, on any website and in any app in HTML5. All samples used in the article are available in our collection on CodePen<\/a>.<\/p>\n

<\/p>\n

Building JavaScript Area Chart<\/h2>\n

Basically, there are four steps you should do to create a chart of any type. Look through this section and follow the simple steps to learn how to make an interactive HTML5 area chart like this using JavaScript:<\/p>\n

\"JavaScript<\/p>\n

1. Create an HTML page<\/h3>\n

First of all, it is necessary to create a page where your chart will be put in. The following code demonstrates how it should look like:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>JavaScript Area Chart<\/title>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\" style=\"width: 100%; height: 100%\"><\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
The container that you see in the <body><\/code> section creates a container for the chart on the page. If you don’t want the chart to fill the whole HTML page, change\u00a0the\u00a0width<\/code> and height<\/code> parameters.<\/p>\n
2. Reference all necessary files<\/h3>\n
The second step is about adding links into the <head><\/code> section. It is necessary to link\u00a0a JavaScript charting library and create a tag where the code of\u00a0the chart will be inserted:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n      <title>JavaScript Area Chart<\/title>\r\n      <script src=\"https:\/\/cdn.anychart.com\/releases\/8.0.1\/js\/anychart-base.min.js\"><\/script>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\" style=\"width: 100%; height: 100%\"><\/div>\r\n    <script>\r\n        <!-- chart code will be here -->\r\n    <\/script>\r\n  <\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
3. Put together the data<\/h3>\n
The most important part of any chart is data. Scottish engineer and political economist William Playfair is credited as the first person in history to\u00a0implement area charts<\/a>. Playfair used\u00a0them to show the changes of Interest of the National Debt and Imports and Exports to and from England.<\/p>\n
Let’s do what he did, and\u00a0visualize the Interest Expense on the Debt Outstanding<\/b> according to the data from TreasuryDirect<\/a>:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Interest Expense on the Debt Outstanding<\/b><\/td>\n<\/tr>\n
Year<\/b><\/td>\nInterest Expense on the Debt<\/b>,
\nUS dollars<\/td>\n<\/tr>\n
2007<\/td>\n$429,977,998,108.20<\/td>\n<\/tr>\n
2008<\/td>\n$451,154,049,950.63<\/td>\n<\/tr>\n
2009<\/td>\n$383,071,060,815.42<\/td>\n<\/tr>\n
2010<\/td>\n$413,954,825,362.17<\/td>\n<\/tr>\n
2011<\/td>\n$454,393,280,417.03<\/td>\n<\/tr>\n
2012<\/td>\n$359,796,008,919.49<\/td>\n<\/tr>\n
2013<\/td>\n$415,688,781,248.40<\/td>\n<\/tr>\n
2014<\/td>\n$430,812,121,372.05<\/td>\n<\/tr>\n
2015<\/td>\n$402,435,356,075.49<\/td>\n<\/tr>\n
2016<\/td>\n$432,649,652,901.12<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 
\nNow, let’s create the data<\/code> object:<\/p>\n
\/\/ set the data\r\nvar data = {\r\n  header: [\"Year\", \"Interest Expense on the Debt\"],\r\n  rows: [\r\n    [2007, 429977998108.20],\r\n    [2008, 451154049950.63],\r\n    [2009, 383071060815.42],\r\n    [2010, 413954825362.17],\r\n    [2011, 454393280417.03],\r\n    [2012, 359796008919.49],\r\n    [2013, 415688781248.40],\r\n    [2014, 430812121372.05],\r\n    [2015, 402435356075.49],\r\n    [2016, 432649652901.12]\r\n]};\r\n<\/code><\/pre>\n
4. Write the code for the chart<\/h3>\n
This is the last step of creating a simple interactive area chart. As you can see, building charts in JavaScript is not a big deal.<\/p>\n
You only need to add the onDocumentReady<\/code> function, like shown below:<\/p>\n
<script>\r\nanychart.onDocumentReady(function() {\r\n    \/\/ the code to create an area chart will be here\r\n});\r\n<\/script>\r\n<\/code><\/pre>\n
Now, add the data into the function, create the chart and draw it into a container, and the chart is ready.<\/p>\n
anychart.onDocumentReady(function() {\r\n  \/\/ set the data\r\n  var data = {\r\n    header: [\"Year\", \"Interest Expense on the Debt, USD bln.\"],\r\n    rows: [\r\n      [2007, 429],\r\n      [2008, 451],\r\n      [2009, 383],\r\n      [2010, 413],\r\n      [2011, 454],\r\n      [2012, 359],\r\n      [2013, 415],\r\n      [2014, 430],\r\n      [2015, 402],\r\n      [2016, 432]\r\n  ]};\r\n\r\n  \/\/ create the chart\r\n  var chart = anychart.area();\r\n\r\n  \/\/ add the data\r\n  chart.data(data);\r\n\r\n  chart.container('container');\r\n  chart.draw();\r\n});  \r\n<\/code><\/pre>\n
That’s how it looks:<\/p>\n
See the Pen Creating a JavaScript Area Chart: Basic Example<\/a> by AnyChart JavaScript Charts (@AnyChart<\/a>) on CodePen<\/a>.<\/p>\n