{"id":10080,"date":"2020-04-06T11:21:14","date_gmt":"2020-04-06T11:21:14","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=10080"},"modified":"2022-08-13T09:16:20","modified_gmt":"2022-08-13T09:16:20","slug":"javascript-column-bar-charts","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2020\/04\/06\/javascript-column-bar-charts\/","title":{"rendered":"Creating JavaScript Column and Bar Charts on COVID-19\u00a0Data"},"content":{"rendered":"

\"LaptopNeed compelling JS charts for your website or app? Start with the basics! Complete this quick data visualization tutorial and you’ll learn how to easily create JavaScript column<\/a> and bar charts<\/a> that will look great in any HTML5-based project, allowing for easy comparisons.<\/strong><\/p>\n

Chart examples to be built and demonstrated in this tutorial will be visualizing the latest novel coronavirus cases data from JHU CSSE<\/a> as COVID-19 is the most topical issue nowadays.<\/p>\n

Keep reading and you’ll see JS charting is actually very simple. Especially if you have at least a very basic understanding of programming (more than that is awesome but far from necessary).<\/p>\n

<\/p>\n

How to Build Basic JavaScript Column\u00a0Chart<\/h2>\n

Generally, it takes four simple steps to make a JS chart of almost any basic type, and a column chart is not an exception:<\/p>\n

    \n
  1. Create a web page.<\/li>\n
  2. Reference necessary files.<\/li>\n
  3. Set the data.<\/li>\n
  4. Code the chart.<\/li>\n<\/ol>\n

    Let’s take them now one by one and then proceed to a bit more advanced customization for better illustration.<\/p>\n

    1. Create a web\u00a0page<\/h3>\n

    First, create an HTML page where you want to build the chart.<\/p>\n

    Add a block-level HTML element that will be a container for the chart and specify its ID.<\/p>\n

    To make the chart fill the entire page, set the width<\/code> and height<\/code> parameters at 100%.<\/p>\n

    So the entire HTML page can look like this:<\/p>\n

    <!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>JavaScript Chart on COVID-19 Data<\/title>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\" style=\"width: 100%; height: 100%;\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    2. Reference necessary files<\/h3>\n
    Second, include all necessary scripts to build the chart\u200a\u2014 in the <script><\/code> tag inside of the <head><\/code> section.<\/p>\n
    The chart being built along this tutorial will be powered by the AnyChart<\/a> JavaScript charting library which is easy to use and flexible and has a detailed documentation<\/a> with many samples. So, include its base module from the CDN right there.<\/p>\n
    The chart code itself will go to the <script><\/code> tag inside of the <body><\/code> section.<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>JavaScript Chart on COVID-19 Data<\/title>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.7.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      \/\/ The chart code will be written here.\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    3. Set the\u00a0data<\/h3>\n
    Third, you should add the data you want to visualize.<\/p>\n
    Basically, there are many ways<\/a> to load data to charts. This tutorial describes how to create a simple chart so let’s arrange simple data.<\/p>\n
    Currently, the novel coronavirus pandemic is the number one topic all over the world. Let’s make a JavaScript column chart visualizing the top 10 countries with the highest number of confirmed COVID-19 cases as of yesterday, April 5, 2020<\/strong>. Data will be taken from the data repository<\/a> of the Johns Hopkins University Center for Systems Science and Engineering (JHU CSSE) known to contain trustful statistics. According to it, the list of top 10 countries by confirmed COVID-19 cases as of April 5 looks as follows:<\/p>\n
    Country\u200a\u2014\u200aNumber of cases<\/strong><\/em><\/p>\n
    United States\u200a\u2014\u200a337,072<\/em>
    \nSpain\u200a\u2014\u200a131,646<\/em>
    \nItaly\u200a\u2014\u200a128,948<\/em>
    \nGermany\u200a\u2014\u200a100,123<\/em>
    \nFrance\u200a\u2014\u200a93,773<\/em>
    \nChina\u200a\u2014\u200a82,602<\/em>
    \nIran\u200a\u2014\u200a58,226<\/em>
    \nUnited Kingdom\u200a\u2014\u200a48,436<\/em>
    \nTurkey\u200a\u2014\u200a27,069<\/em>
    \nSwitzerland\u200a\u2014\u200a21,100<\/em><\/p><\/blockquote>\n
    Let’s convert this data into a JavaScript object with a data array and header settings:<\/p>\n
    var data = {\r\n  header: [\"Country\", \"Number of cases\"],\r\n  rows: [\r\n    [\"United States\", 337072],\r\n    [\"Spain\", 131646],\r\n    [\"Italy\", 128948],\r\n    [\"Germany\", 100123],\r\n    [\"France\", 93773],\r\n    [\"China\", 82602],\r\n    [\"Iran\", 58226],\r\n    [\"United Kingdom\", 48436],\r\n    [\"Turkey\", 27069],\r\n    [\"Switzerland\", 21100]\r\n]};<\/code><\/pre>\n
    4. Code the\u00a0chart<\/h3>\n
    Finally, now that you’ve got a page, scripts and data, you are all set for the final step\u200a\u2014\u200astart coding.<\/p>\n
    Remember to include the chart code inside of the <script><\/code> tag in the <body><\/code> section of the HTML page.<\/p>\n
    To begin with, add the anychart.onDocumentReady()<\/code> function so the chart loads when the page is ready:<\/p>\n
    <script>\r\n  anychart.onDocumentReady(function() {\r\n    \/\/ The main chart code goes here.\r\n  });\r\n<\/script><\/code><\/pre>\n
    Then, add the data:<\/p>\n
    anychart.onDocumentReady(function() {\r\n\r\n  var data = {\r\n    header: [\"Country\", \"Number of cases\"],\r\n    rows: [\r\n      [\"United States\", 337072],\r\n      [\"Spain\", 131646],\r\n      [\"Italy\", 128948],\r\n      [\"Germany\", 100123],\r\n      [\"France\", 93773],\r\n      [\"China\", 82602],\r\n      [\"Iran\", 58226],\r\n      [\"United Kingdom\", 48436],\r\n      [\"Turkey\", 27069],\r\n      [\"Switzerland\", 21100]\r\n  ]};\r\n\r\n});<\/code><\/pre>\n
    Next, define the chart type. (You can find the full list of the chart types available in AnyChart out of the box in the list of Supported Charts<\/a>.) In this chart, the column chart type is to be picked, with the data specified in the data<\/code> variable:<\/p>\n
    \/\/ create the column chart\r\nvar chart = anychart.column();\r\n \r\n\/\/ add the data\r\nchart.data(data);<\/code><\/pre>\n
    Let’s also add a title for the chart to show what it is about at a glance:<\/p>\n
    chart.title(\"Top 10 Countries with the Most Cases of COVID-19\");<\/code><\/pre>\n
    The last thing to do is to set the container and command to draw the chart:<\/p>\n
    \/\/ set the container\r\nchart.container(\"container\");\r\n\r\n\/\/ draw the chart\r\nchart.draw();<\/code><\/pre>\n
    Done! Check out the result below.<\/strong> Hover over the columns and tooltips with the exact numbers will show up:<\/p>\n