{"id":14503,"date":"2022-02-03T21:43:43","date_gmt":"2022-02-03T21:43:43","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=14503"},"modified":"2022-08-13T11:08:39","modified_gmt":"2022-08-13T11:08:39","slug":"error-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/02\/03\/error-chart-js\/","title":{"rendered":"Creating Error Chart in JavaScript"},"content":{"rendered":"

\"JavaScript<\/a>Need a cool interactive error chart<\/a>\u00a0visualization for\u00a0your web page or app? Let me be your guide!\u00a0Follow this tutorial and you’ll learn how to\u00a0easily create elegant interactive error charts using JavaScript.<\/p>\n

Here, I will be visualizing data on COVID-19 threat\u00a0perceptions in the United States during the first six months of the pandemic, by political affiliation. So you will also be able to\u00a0explore the divergence in those attitudes between Democrats and Republicans. The data originates from the article “COVID-19 and vaccine hesitancy: A longitudinal study”<\/a>\u00a0published in the Plos One<\/em> journal.<\/p>\n

<\/p>\n

What Is Error Chart<\/h2>\n

Before I begin, I’d like to make sure\u00a0we are on the same page in understanding what an error chart\u00a0actually is and how it works.<\/p>\n

An error chart is a type of data visualization commonly used to show\u00a0uncertainty or variability of data with the help of so-called error bars. The latter\u00a0can be added on top of\u00a0the main graph\u00a0to represent value ranges in addition to\u00a0average (mean) values plotted\u00a0in the form of lines, columns, bars, areas, markers, or other types of series.<\/p>\n

Error Chart Preview<\/h2>\n

Now, let me show you how the final error chart will look to get you all even more excited about learning how to create one yourself!<\/p>\n

So, I am going to represent the perceived threat of COVID-19\u00a0among the American population by political affiliation over\u00a0time, from March to August 2020. Precisely, I will show the results<\/a> of the longitudinal survey conducted by Ariel Fridman, Rachel Gershon, and Ayelet Gneezy in the following way. Mean responses of\u00a0self-identified Democrats and Republicans will be visualized in\u00a0two line charts<\/a>, and the error bars will represent the 95% confidence intervals. In the survey, the scale for the responses was from 1 to 7, where 1\u00a0is\u00a0the minimum perceived threat and 7 is the\u00a0maximum.<\/p>\n

\"JS<\/p>\n

Basic JS Error Chart in 4 Simple Steps<\/h2>\n

An error chart is pretty simple to create with a\u00a0good JavaScript charting library. Here, I am going to use AnyChart<\/a>,\u00a0which is a flexible and easy-to-use one. It has great documentation<\/a>, a lot of useful examples<\/a>, and a playground<\/a> to\u00a0experiment with the data visualization code on your own.<\/p>\n

Basic knowledge of web technologies is always good to have. But when it comes to creating interactive\u00a0JavaScript-based graphs like this, everything\u00a0is quite straightforward even without much of such background.<\/p>\n

The process of building a JS error chart can be split into the following four basic steps:<\/p>\n

    \n
  1. Create an HTML page.<\/li>\n
  2. Include JavaScript files.<\/li>\n
  3. Add data.<\/li>\n
  4. Write\u00a0some JS charting code.<\/li>\n<\/ol>\n

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

    The first thing I am going to do is create a\u00a0basic HTML page to hold my error chart. There, I define a block element with an id attribute (let it be \u201ccontainer\u201d). Next, I\u00a0add the style attributes in the <head><\/code> section, where I set the width and height of the <div><\/code>\u00a0as 100% so that my chart renders over the whole page.<\/p>\n

    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Error 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%; height: 100%; margin: 0; padding: 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. Include JavaScript files<\/h3>\n
    Then, I need to include all necessary scripts. I\u00a0am going to use them from the CDN,<\/a>\u00a0but you can\u00a0also download the files if you want.<\/p>\n
    For\u00a0an error chart, all I need is the base<\/a>\u00a0module. I reference it\u00a0in the <head><\/code> section of the\u00a0web page.<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Error 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\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\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\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ All the JS error chart code will be here.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    3. Set the data<\/h3>\n
    There are\u00a0multiple ways to load data<\/a>. In this case, the\u00a0amount of data I want to visualize is pretty small. So I\u00a0can just go ahead and put it\u00a0right there in the code.<\/p>\n
    I am going to plot two series, for Democrats and Republicans. So I add the data like this:<\/p>\n
    var data1 = anychart.data\r\n  .set([\r\n    ['Mar', 4.26, 0.1, 0.1],\r\n    ['Apr', 4.46, 0.11, 0.11],\r\n    ['May', 4.36, 0.126, 0.126],\r\n    ['June', 4.29, 0.132, 0.132],\r\n    ['July', 4.49, 0.124, 0.124],\r\n    ['Aug', 4.47, 0.124, 0.124]\r\n  ])\r\n  \r\nvar data2 = anychart.data\r\n  .set([\r\n    ['Mar', 3.9, 0.144, 0.144],\r\n    ['Apr', 4.09, 0.172, 0.172],\r\n    ['May', 3.71, 0.196, 0.196],\r\n    ['June', 3.54, 0.198, 0.198],\r\n    ['July', 3.78, 0.196, 0.196],\r\n    ['Aug', 3.7, 0.194, 0.195]\r\n  ])<\/code><\/pre>\n
    Now that all the background work\u00a0has been sorted out, let\u2019s get to the main part of creating a JavaScript error chart. Well, it takes only a few\u00a0more lines of code.<\/p>\n
    4. Write\u00a0some JS\u00a0charting\u00a0code<\/h3>\n
    To begin with, I add a function that encloses all the JavaScript charting code to ensure that the page is ready before executing anything. Inside this function, I create\u00a0a line chart and\u00a0provide it with a title.<\/p>\n
    \/\/ create a line chart\r\nvar chart = anychart.line();\r\n\r\n\/\/ add a chart title \r\nchart.title('Perceived threat of COVID-19 by political affiliation (March\u2013August 2020)');\r\n<\/code><\/pre>\n
    Next, I set the data for both series in the form of an array as described in the previous step. And I use the mapAs<\/code> function to map what each element of my array corresponds to.<\/p>\n
    \/\/ create a dataset (democrats)\r\nvar data1 = anychart.data\r\n  .set([\r\n    ['Mar', 4.26, 0.1, 0.1],\r\n    ['Apr', 4.46, 0.11, 0.11],\r\n    ['May', 4.36, 0.126, 0.126],\r\n    ['June', 4.29, 0.132, 0.132],\r\n    ['July', 4.49, 0.124, 0.124],\r\n    ['Aug', 4.47, 0.124, 0.124]\r\n  ])\r\n  \/\/ map the data\r\n  .mapAs({\r\n    x: 0,\r\n    value: 1,\r\n    valueLowerError: 2,\r\n    valueUpperError: 3\r\n  });\r\n\r\n\/\/ create a dataset (republicans)\r\nvar data2 = anychart.data\r\n  .set([\r\n    ['Mar', 3.9, 0.144, 0.144],\r\n    ['Apr', 4.09, 0.172, 0.172],\r\n    ['May', 3.71, 0.196, 0.196],\r\n    ['June', 3.54, 0.198, 0.198],\r\n    ['July', 3.78, 0.196, 0.196],\r\n    ['Aug', 3.7, 0.194, 0.195]\r\n  ])\r\n  \/\/ map the data\r\n  .mapAs({\r\n    x: 0,\r\n    value: 1,\r\n    valueLowerError: 2,\r\n    valueUpperError: 3\r\n  });<\/code><\/pre>\n
    Since all the data values lie within a range, I\u00a0configure the Y-axis accordingly using the yScale<\/code> function.<\/p>\n
    var yScale = chart.yScale();\r\nyScale.minimum(3.2);\r\nyScale.maximum(4.8);<\/code><\/pre>\n
    Finally, I create a line series for\u00a0each dataset, set the container reference, and draw the resulting error graphics.<\/p>\n
    \/\/ create a line series for the first dataset\r\nvar series1 = chart.line(data1);\r\n\r\n\/\/ create a line series for the second dataset\r\nvar series2 = chart.line(data2);\r\n\r\n\/\/ set a container id for the chart\r\nchart.container('container');\r\n\r\n\/\/ command to draw the chart\r\nchart.draw();<\/code><\/pre>\n
    Aha \u2014 a lovely interactive error chart is right there on the page!<\/p>\n