{"id":12275,"date":"2021-03-02T11:24:46","date_gmt":"2021-03-02T11:24:46","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=12275"},"modified":"2022-08-13T11:04:19","modified_gmt":"2022-08-13T11:04:19","slug":"diverging-bar-chart-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/03\/02\/diverging-bar-chart-javascript\/","title":{"rendered":"How to Create Diverging Bar Chart with JavaScript"},"content":{"rendered":"

\"\"This article is a step-by-step guide that’ll show you how to build an interactive JavaScript range chart that visualizes 20 years of the LA Lakers\u2019 performance with Kobe Bryant.<\/em><\/strong><\/p>\n

The year 2020 was pretty poignant for obvious reasons. But even before the pandemic, the year started on a sad note with the death of basketball legend Kobe Bryant<\/a>. He was a star NBA athlete who had played for 20 years with one and only one team \u2014 the Los Angeles Lakers.<\/p>\n

Remembering Kobe one year after that horrible crash, I wondered how the Lakers had performed in his two-decade era. So, I visualized that in an interactive Diverging Bar Chart with the help of pure JavaScript.<\/p>\n

Thinking that this project might be helpful for those new to web charting, I also logged the entire process and made a tutorial. Check it out!<\/p>\n

<\/p>\n

What Is a Diverging Bar Chart?<\/h2>\n

First things first, I will give you a brief explanation about what diverging bar charts are and then we’ll dive into the tutorial. <\/p>\n

A diverging bar chart shows two or more measures that are plotted from a middle baseline, extending either to the right and left (horizontal range bars) or top and bottom (vertical range columns).<\/p>\n

The key point of data visualization in such diverging charts is to facilitate the comparison of multiple categories by means of displaying them against a bifurcating midpoint.<\/p>\n

In this tutorial, I use the diverging bar chart technique to showcase the wins and losses of the LA Lakers through the 20 years of Kobe Bryant\u2019s career.<\/p>\n

Here’s a sneak peek at the final chart to get you ready for the start of the game! Follow along with me to learn how I create this beautiful range bar chart with JavaScript.<\/p>\n

\"HTML5<\/p>\n

How to Build a JavaScript Diverging Bar Chart in 4 Basic Steps<\/h2>\n

There are multiple<\/a> JavaScript libraries out there providing pre-written JS code for commonly needed functions that can make the interactive data visualization process quite quick and straightforward.<\/p>\n

I picked one called AnyChart<\/a> to create this diverging bar chart. This JS charting library appeared to support (particularly useful in this case) range charts out of the box and was also flexible enough to do what I wanted.<\/p>\n

Also, it is quite easy to get started with AnyChart even for beginners because there are many ready-to-use examples and it has intensive documentation<\/a>.<\/p>\n

Of course, having good HTML and JavaScript skills gives you an edge when visualizing data on the web. But anyway, the best part about making use of good charting libraries is that they make it quite uncomplicated to create interactive charts even without much experience.<\/p>\n

The entire process of creating literally any JS chart, including a diverging bar chart like this one, can be broken down into four fundamental steps:<\/p>\n

    \n
  1. Create an HTML page.<\/li>\n
  2. Reference the necessary JS files.<\/li>\n
  3. Set the data.<\/li>\n
  4. Write the JS code for the chart.<\/li>\n<\/ol>\n

    Let’s go through each step in detail now.<\/p>\n

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

    The first thing we need to do is create a basic HTML page. Let\u2019s give it a title and create an HTML block element to hold the chart. To identify this <div><\/code> later in the code, we should also give it an id attribute (let it be \u201ccontainer\u201d).<\/p>\n

    <html>\r\n  <head>\r\n    <title>JavaScript Diverging Bar Chart<\/title>\r\n    <style type="text\/css">      \r\n        html, body, #container { \r\n            width: 100%; height: 100%; margin: 0; padding: 0; \r\n        } \r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id="container"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    Note that it is possible to specify the width and height parameters inside the <style><\/code> block to modify the space that your chart will occupy. I have put 100% in both parameters so the chart fills the whole page.<\/p>\n
    2. Include the necessary JavaScript files<\/h3>\n
    Next, we need to add the charting library scripts that will help create the data visualization. Since we are working with the AnyChart library here, let\u2019s include the corresponding files from its CDN<\/a>. (Keep in mind that you can always download the scripts if you want.)<\/p>\n
    For the diverging bar chart, we need the base module script<\/a> which is to be added to the <head><\/code> section of the HTML page.<\/p>\n
    <html>\r\n  <head>\r\n    <title>JavaScript Diverging Bar Chart<\/title>\r\n    <script src="https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-base.min.js" type="text\/javascript"><\/script>\r\n    <style type="text\/css">\r\n      html,\r\n      body,\r\n      #container {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>  \r\n    <div id="container"><\/div>\r\n    <script>\r\n      \/\/ All the code for the JS diverging bar chart will come here\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    3. Add the data<\/h3>\n
    I wanted to visualize the number of wins and losses of the LA Lakers team across all seasons from 1996 to 2016. So, I got the data from the NBA website<\/a> and created an array with the year, wins, and losses.<\/p>\n
    Since the amount of data is not huge, we can add it just like that:<\/p>\n
    var winlossData = [\r\n  [65, 17, \"2015-16\"],\r\n  [61, 21, \"2014-15\"],\r\n  [55, 27, \"2013-14\"],\r\n  [37, 45, \"2012-13\"],\r\n  [25, 41, \"2011-12\"],\r\n  [25, 57, \"2010-11\"],\r\n  [25, 57, \"2009-10\"],\r\n  [17, 65, \"2008-09\"],\r\n  [25, 57, \"2007-08\"],\r\n  [40, 42, \"2006-07\"],\r\n  [37, 45, \"2005-06\"],\r\n  [48, 34, \"2004-05\"],\r\n  [26, 56, \"2003-04\"],\r\n  [32, 50, \"2002-03\"],\r\n  [24, 58, \"2001-02\"],\r\n  [26, 56, \"2000-01\"],\r\n  [15, 67, \"1999-00\"],\r\n  [19, 31, \"1998-99\"],\r\n  [21, 61, \"1997-98\"],\r\n  [26, 56, \"1996-97\"]\r\n];<\/code><\/pre>\n
    Now that the stage is set, let\u2019s start playing around by adding the JavaScript code that will create the interactive Diverging Bar Chart!<\/p>\n
    4. Write the JavaScript code for your chart<\/h3>\n
    Before anything else, we need to add a function enclosing all the JS code, which makes sure that the entire code inside of it will only execute once the page is loaded.<\/p>\n
    <script>\r\n  anychart.onDocumentReady(function() {\r\n    \/\/ The place for the JS diverging bar chart code\r\n  });\r\n<\/script><\/code><\/pre>\n
    In general, a JS diverging bar chart is pretty simple to create and I will walk you through each action. So get ready to wiggle, block, and shoot!<\/p>\n
    Firstly, we create a bar chart and enter the data, all inside the enclosing anychart.onDocumentReady()<\/code> function.<\/p>\n
    \/\/ create a bar chart\r\nvar chart = anychart.bar();\r\n\r\n\/\/ data\r\nvar winlossData = [\r\n  [65, 17, \"2015-16\"],\r\n  [61, 21, \"2014-15\"],\r\n  [55, 27, \"2013-14\"],\r\n  [37, 45, \"2012-13\"],\r\n  [25, 41, \"2011-12\"],\r\n  [25, 57, \"2010-11\"],\r\n  [25, 57, \"2009-10\"],\r\n  [17, 65, \"2008-09\"],\r\n  [25, 57, \"2007-08\"],\r\n  [40, 42, \"2006-07\"],\r\n  [37, 45, \"2005-06\"],\r\n  [48, 34, \"2004-05\"],\r\n  [26, 56, \"2003-04\"],\r\n  [32, 50, \"2002-03\"],\r\n  [24, 58, \"2001-02\"],\r\n  [26, 56, \"2000-01\"],\r\n  [15, 67, \"1999-00\"],\r\n  [19, 31, \"1998-99\"],\r\n  [21, 61, \"1997-98\"],\r\n  [26, 56, \"1996-97\"]\r\n];<\/code><\/pre>\n
    Next, we create a function that accepts two parameters \u2014 a column number and a name. The column number indicates the column in the dataset and the name indicates the series. In our case, we have two series \u2014 one for the number of wins and one for the number of losses.<\/p>\n
    Since we want a diverging bar chart, let\u2019s take the center and plot the bars for wins to the right and bars for losses to the left. Then, we should prepare the dataset by adding all the required values through a ‘for’ loop.<\/p>\n
    Don\u2019t worry if this sounds a bit complicated. It is just about making our data ready to be plotted, and when you look into the code below, you\u2019ll likely see that it’s all completely logical.<\/p>\n
    There are two more things we need to include in the function. We define a series with the rangeBar<\/code> function and add a line to indicate the names of the series and a separator line between the left and right bars.<\/p>\n
    var createSeries = function (columnNumber, name) {\r\n  var data = [];\r\n  for (var i = 0; i < winlossData.length; i++) {\r\n    var value = winlossData[i][columnNumber];\r\n    var center = 0;\r\n    if (name === \"Wins\") {\r\n      data.push({\r\n        x: winlossData[i][2],\r\n        low: center,\r\n        high: center + value,\r\n        value: value\r\n      });\r\n    } else {\r\n      data.push({\r\n        x: winlossData[i][2],\r\n        low: -center,\r\n        high: -center - value,\r\n        value: value\r\n      });\r\n    }\r\n  }\r\n    \r\n  var series = chart.rangeBar(data);\r\n  series.name(name);\r\n};<\/code><\/pre>\n
    Now, we create the two series with the desired arguments using the function just defined.<\/p>\n
    createSeries(0, \"Losses\");\r\ncreateSeries(1, \"Wins\");<\/code><\/pre>\n
    It\u2019s halftime and the most complicated parts are over! Now we just have the setup of the chart.<\/p>\n
    Add the title to the diverging bar chart:<\/p>\n
    chart\r\n  .title()\r\n  .enabled(true)\r\n  .text(\"20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)\");<\/code><\/pre>\n
    And enable the chart\u2019s legend:<\/p>\n
    chart\r\n  .legend()\r\n  .enabled(true);<\/code><\/pre>\n
    To make the wins and losses for each year show up adjacent to each other, we should convert the multi-series bar chart into a stacked bar chart. Next, to emphasize divergence, let\u2019s add a line marker at 0. Finally, we assign the container div and draw the chart:<\/p>\n
    \/\/ create a stacked bar chart from the multi-series bar chart\r\nchart.yScale().stackMode(\"value\");\r\n\r\n\/\/ set a container id for the chart\r\nchart.container(\"container\");\r\n  \r\n\/\/ initiate chart drawing\r\nchart.draw();<\/code><\/pre>\n
    That\u2019s the whistle and there you have it \u2014 a very basic, yet fully functional interactive diverging bar chart built with JavaScript!<\/p>\n