{"id":13821,"date":"2021-10-20T09:48:37","date_gmt":"2021-10-20T09:48:37","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=13821"},"modified":"2022-08-13T11:09:12","modified_gmt":"2022-08-13T11:09:12","slug":"linear-gauge-chart-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/10\/20\/linear-gauge-chart-javascript\/","title":{"rendered":"Creating Linear Gauge Chart in JavaScript \u2014 Tutorial"},"content":{"rendered":"

\"A<\/a>This article presents an easy-to-follow guide for building an interactive linear gauge chart in JavaScript.<\/em><\/strong><\/span><\/p>\n

We\u2019ll show how to quickly create a cool and interactive linear gauge chart that highlights Covid-19 vaccination data around the world. Our chart will allow us to visualize the status of Covid-19 vaccination at the time of writing, and will display two types of data \u2014 showing how far away we are from the halfway target of both partially and fully vaccinating the global population.<\/p>\n

<\/p>\n

What Is a Linear Gauge Chart?<\/h2>\n

Data visualization<\/a> is an invaluable tool, given the vast amount of data being created and numerous possibilities for gleaning information from data. Data visualization is particularly useful for identifying trends, interpreting patterns, and communicating complex ideas to the target audience.<\/p>\n

A linear gauge<\/a> chart represents a vertical or horizontal linear scale that shows the required values, with a color scale along with single or multiple pointers. The minimum and maximum values of the data range can be set over the axes according to the data being represented. The pointer position indicates the current value of the metric.<\/p>\n

A gauge chart can display a single value or multiple values using an individual pointer or a combination of markers. The pointer can be a needle or a line with a marker of any shape like a circle, square, rectangle or triangle.<\/p>\n

The linear gauge chart type is an effective visual representation for displaying how close or far the values are from the desired data point.<\/p>\n

Types of linear gauges<\/h3>\n

The several types of linear gauges are thermometer chart, bullet chart, tank chart and LED chart. The mercury thermometer \u2014 consisting of minor ticks that displays the temperature with the pointer value \u2014 is a classic example of a linear gauge chart.<\/p>\n

The linear gauge visualization we\u2019ll be building<\/h3>\n

Here\u2019s a sneak peek at the final linear gauge chart. Follow this tutorial to learn how we build this interesting and informative linear gauge chart with JavaScript.<\/p>\n

\"Final<\/p>\n

The Four Steps to Building a JavaScript Linear Gauge<\/h3>\n

It\u2019s always useful to have some skills with technologies like HTML and JavaScript. But in this tutorial, we\u2019re using a JS charting library that makes it easier to create compelling charts like the linear gauge even with minimal technical knowledge.<\/p>\n

There are several JavaScript charting libraries<\/a> for visualizing data with ease, and here we\u2019re creating the linear gauge chart with AnyChart<\/a>. This library is flexible, with extensive documentation<\/a>, and it consists some great examples<\/a>. Moreover, it has a playground<\/a> for experimenting with code and is free for non-commercial use. If you want to buy a licensed version, you can check out the available options<\/a>, and if you\u2019re an educational or not-for-profit organization, you can get in touch for a free license here<\/a>.<\/p>\n

The Steps for Making a JavaScript Linear Gauge<\/h2>\n

These are the basic steps for creating a linear gauge chart:<\/p>\n

    \n
  1. Create a basic HTML page.<\/li>\n
  2. Include the necessary JavaScript files.<\/li>\n
  3. Add the data.<\/li>\n
  4. Write the JavaScript code for the chart.<\/li>\n<\/ol>\n

    Let\u2019s look through each of these steps in detail below.<\/p>\n

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

    The first thing we need to do is make an HTML page that will hold our visualization. We add a <div><\/code> block element and give it an ID so we can reference it later:<\/p>\n

    <html lang=\"en\">\r\n  <head>\r\n    <title>JavaScript Linear Gauge<\/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
    The width and height attributes of the <div><\/code> are set to 100% so that the chart is rendered across the entire screen. These attributes can be modified according to requirements.<\/p>\n
    2. Include the necessary JavaScript files<\/h3>\n
    The next step is to reference the JS links in the HTML page. We\u2019ll use the AnyChart library for this tutorial, so let\u2019s include the corresponding files from their CDN<\/a>.<\/p>\n
    To create a linear gauge chart, we\u2019ll need to add three scripts: the core module<\/a>, the linear gauge module<\/a>, and the table module<\/a>:<\/p>\n
    <html lang=\"en\">\r\n  <head>\r\n    <title>JavaScript Linear Gauge<\/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    <script>\r\n      \/\/ All the code for the JS linear gauge will come here\r\n    <\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-linear-gauge.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-table.min.js\"><\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    3. Add the data values<\/h3>\n
    The data for the linear gauge chart is collected from Our World in Data<\/a> and included in the code. On that site, we can see the percentage of the people having received one and two Covid vaccine doses<\/a> for each continent in the whole world.<\/p>\n
    Because (at the time of writing) none of the numbers is greater than 50%, we\u2019ve kept the maximum limit of the axis of all the linear gauges as 50%, and we compare how far away from that mark each continent is, as well as the global figure. We indicate at least partially vaccinated figures with LED representation, and the fully vaccinated numbers with a bar pointer. We\u2019ll see how the data is added in the last step.<\/p>\n
    So then, our initial steps are all done, and now let\u2019s add the code to make a linear gauge chart with JavaScript!<\/p>\n
    4. Write the JavaScript code for the chart<\/h3>\n
    Before adding any code, we enclose everything in a function that makes sure that the entire code inside it executes only once the page is loaded.<\/p>\n
    Creating a linear gauge chart involves a couple of steps and is a bit more complex than the other basic chart types. But that doesn\u2019t mean it\u2019s very difficult, and we\u2019ll go through each step to understand how the chart is made.<\/p>\n
    Defining the Linear Scale and Axis for the Gauge Chart<\/h4>\n
    We have multiple pointers in our chart. So, let\u2019s start with making a function that accepts two values: one for the bar pointer, and one for the LED gauge. We\u2019ll then create a gauge, set the data, and specify the layout as horizontal. Next, we\u2019ll set the range of the scales and the axes. We\u2019ll make a linear scale with the minimum and maximum ranges. For the axis, we\u2019ll define the attributes and set the orientation:<\/p>\n
    function drawGauge(value, settings) {\r\n  \/\/ Create gauge with settings\r\n  const gauge = anychart.gauges.linear();\r\n  gauge.data([value, settings.value]);\r\n  gauge.layout('horizontal');\r\n\r\n  \/\/ Set scale for gauge\r\n  const scale = anychart.scales.linear();\r\n  scale.minimum(0).maximum(settings.maximum).ticks({ interval: 2 });\r\n\r\n  \/\/ Set axis for gauge\r\n  const axis = gauge.axis(0);\r\n  axis.width('1%').offset('43%').scale(scale).orientation('bottom');\r\n}<\/code><\/pre>\n
    Setting the Bar Pointer and the Label<\/h4>\n
    Now, we\u2019ll create the bar pointer and the label for the bar series. The label is given an offset to avoid overlap with the pointer:<\/p>\n
    \/\/ Create and set bar point\r\nconst barSeries = gauge.bar(0);\r\n\r\nbarSeries\r\n  .scale(scale)\r\n  .width('4%');\r\n\r\n\/\/ Create and set label with actual data\r\nconst labelBar = barSeries.labels();\r\nlabelBar\r\n  .enabled(true)\r\n  .offsetY('-15px');<\/code><\/pre>\n
    Creating the LED Pointer and Setting the Color Attribute<\/h4>\n
    In the LED points, we\u2019ll specify the gap between the points and use the dimmer property to set the color of the residual LED points to indicate a non-lit effect. We\u2019ll also declare the color scale of the lit LED points:<\/p>\n
    \/\/ Create and set LED point\r\nconst ledPointer = gauge.led(1);\r\n\r\nledPointer\r\n  .offset('10%')\r\n  .width('30%')\r\n  .count(settings.maximum)\r\n  .scale(scale)\r\n  .gap(0.55)\r\n  .dimmer(function () {\r\n    return '#eee';\r\n  });\r\n\r\nledPointer.colorScale().colors(['#63b39b', '#63b39b']);<\/code><\/pre>\n
    Declaring the Gauges with the Target Value of Each Data Point<\/h4>\n
    For making the linear gauge for each continent, we\u2019ll call the above defined function for every region with its data. The first number indicates the target value data, and the second variable is an object with the LED data. The maximum<\/code> remains a constant 50, while value<\/code> is the percent value of fully vaccinated population for each data point. This value will be displayed by the pointer:<\/p>\n
    \/\/ Create gauges\r\nconst world = drawGauge(13.68, { maximum: 50, value: 27.13 });\r\nconst europe = drawGauge(36.98, { maximum: 50, value: 47.28 });\r\nconst nAmerica = drawGauge(36.77, { maximum: 50, value: 46.53 });\r\nconst sAmerica = drawGauge(22.8, { maximum: 50, value: 40.54 });\r\nconst asia = drawGauge(10.14, { maximum: 50, value: 27.16 });\r\nconst oceania = drawGauge(9.75, { maximum: 50, value: 22.12 });\r\nconst africa = drawGauge(1.56, { maximum: 50, value: 3.04 });<\/code><\/pre>\n
    Setting the Layout of the Linear Gauges<\/h4>\n
    To display each of the linear gauges one under the other, we\u2019ll define a table and add the title along with each data point as a separate row. We\u2019ll add the various properties of the layout, such as the alignment and font size. We\u2019ll also define parameters for the first row, since it\u2019s the title, and set the width attribute of first column to 100% since we don\u2019t need any more columns:<\/p>\n
    \/\/ Create table to place gauges\r\nconst layoutTable = anychart.standalones.table();\r\nlayoutTable\r\n  .hAlign('right')\r\n  .vAlign('middle')\r\n  .fontSize(14)\r\n  .cellBorder(null);\r\n\r\n\/\/ Put gauges into the layout table\r\nlayoutTable.contents([\r\n  [null, 'Covid-19 Vaccination - How far are we from the halfway mark?'],\r\n  ['World', world],\r\n  ['Europe', europe],\r\n  ['North America', nAmerica],\r\n  ['South America', sAmerica],\r\n  ['Asia', asia],\r\n  ['Oceania', oceania],\r\n  ['Africa', africa]\r\n]);\r\n\r\n\/\/ Set height for first row in layout table\r\nlayoutTable\r\n  .getRow(0)\r\n  .height(50)\r\n  .fontSize(22)\r\n  .hAlign('center');\r\n\r\n\/\/ Set the first column to 100% width\r\nlayoutTable.getCol(0).width(100);<\/code><\/pre>\n
    Drawing the Chart<\/h4>\n
    The last step is to reference the <div><\/code> container that we added in the previous step, and to draw the chart:<\/p>\n
    \/\/ Set container id and initiate drawing\r\nlayoutTable.container('container');\r\nlayoutTable.draw();<\/code><\/pre>\n
    And that\u2019s it. We now have a fully functional and beautiful JavaScript linear gauge chart! The code for this initial version of the linear gauge can be viewed on CodePen<\/a> [and on AnyChart Playground<\/a>].<\/p>\n