{"id":12083,"date":"2021-02-03T16:27:22","date_gmt":"2021-02-03T16:27:22","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=12083"},"modified":"2022-08-13T11:16:26","modified_gmt":"2022-08-13T11:16:26","slug":"angular-gauge-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/02\/03\/angular-gauge-javascript\/","title":{"rendered":"Creating JavaScript Angular Gauge"},"content":{"rendered":"

\"AngularWould you like to add\u00a0another really cool and interesting chart to your data visualization<\/a> portfolio? Follow this simple tutorial\u00a0and you’ll learn how to create a beautiful and interactive\u00a0Angular Gauge using JavaScript<\/strong>, with ease!<\/p>\n

An Angular Gauge, also\u00a0known<\/a> as a Circular Gauge, is a type of\u00a0gauge chart with a radial scale. Such visualizations\u00a0can nicely show a value within a range and are widely used in\u00a0various dashboards.<\/p>\n

The recent good news of vaccines feels like music to our ears. So, I\u00a0thought why not take some interesting music data for visualization in this tutorial! The 63rd annual Grammy Awards\u00a0ceremony\u00a0will be held in March 2021, and when I looked through the\u00a0list of the Record of the Year nominees, I\u00a0wondered how popular each of these songs is. To find out, I decided to look at the number of their streams on Spotify, one of the world’s leading music streaming platforms, and thought that a Solid Angular Gauge could work well in such a visual analysis. It also\u00a0resembles\u00a0a vinyl record, which makes it\u00a0an especially interesting chart\u00a0type to opt for when representing such data!<\/p>\n

So, along the tutorial, I will be visualizing Spotify stream counts\u00a0for each\u00a02021 GRAMMYs Record of the Year nominee song<\/strong> in\u00a0a JS Angular Gauge chart<\/strong>. That is going to be entertaining!\u00a0All aboard!<\/p>\n

<\/p>\n

Spoiler:\u00a0Angular Gauge To Be\u00a0Developed<\/h2>\n

Before we get down to the process, check out how the final interactive JavaScript angular gauge chart will look:<\/p>\n

\"JavaScript<\/p>\n

How to Build JS\u00a0Angular Gauge in 4\u00a0Basic\u00a0Steps<\/h2>\n

Skills with\u00a0web development and technologies like HTML and JavaScript are always helpful\u00a0in interactive data visualization. But in fact, here you don’t even need much technical knowledge and experience. The thing is, creating JS angular gauges\u00a0for\u00a0a web site or app is not rocket science.<\/p>\n

Basically, there are 4 fundamental steps to build an angular gauge using JavaScript:<\/p>\n

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

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

    The first thing to do is\u00a0to make an HTML page where the\u00a0angular gauge visualization will be rendered.<\/p>\n

    We add a div<\/code> element to hold the chart and\u00a0provide it with an id to\u00a0properly reference this div<\/code> later.<\/p>\n

    <!DOCTYPE html>\r\n<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Angular Gauge<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#container {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 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    <div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
    Here, the div<\/code> block element is given a width and height of 100% to make the\u00a0gauge chart\u00a0appear full screen. But it can be customized according to your requirements, of course.<\/p>\n
    2. Include the necessary JavaScript files<\/h3>\n
    The second step\u00a0is about referencing the necessary scripts you are going to use, in the <head> section.<\/p>\n
    Some\u00a0of the\u00a0JavaScript charting libraries <\/a>can make it really easy to create stunning graphics and diagrams visualizing data without much difficulty. In this tutorial, I am using AnyChart<\/a> which is a lightweight, flexible, and easy-to-use JavaScript\u00a0charting library. It supports angular gauges out of the box and\u00a0has extensive documentation<\/a>. In addition, AnyChart JS\u00a0provides a\u00a0cool\u00a0code playground<\/a> for testing out things.<\/p>\n
    So, let’s include the\u00a0necessary files from\u00a0this library’s\u00a0CDN<\/a>. To create an angular gauge, we need to add\u00a0the\u00a0core module<\/a> that is required for all types of charts and\u00a0the\u00a0specific module for angular gauges<\/a>.<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Venn Diagram<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-circular-gauge.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#container {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 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\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ All the code for the angular gauge chart will come here\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    3. Prepare and connect the data<\/h3>\n
    Step three is about data.<\/p>\n
    I created the data for this visualization manually by collating what I wanted from the official sources of the Grammys<\/a> website and\u00a0the\u00a0Spotify<\/a> app. I included the Song name, Artist name, Number of Spotify Streams, and Duration of each song.<\/p>\n
    I then sorted the data in descending order based on the number of streams and added a percentage field. The highest streamed record was given 100% and the percentage for the following records was calculated in comparison to the highest streamed record.<\/p>\n
    Finally, I created a JSON file which you can download here<\/a>.<\/p>\n
    Loading the JSON\u00a0data in AnyChart can be done with the help of the Data Adapter<\/a>, an additional helpful script available through the dedicated module. Let’s reference\u00a0it\u00a0along with all the JS scripts in\u00a0<head><\/code>.<\/p>\n
    Next, we use the loadJsonFile<\/code> method inside the <script><\/code> tag in the body of our HTML page to load\u00a0the\u00a0JSON file.<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Angular Gauge<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-circular-gauge.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-data-adapter.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#container {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 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\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0anychart.data.loadJsonFile('{JSON data file location here}<\/strong><\/em>', function (data) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ The angular gauge's JS code will come here\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
    Now that we have all the preliminary steps taken care of, let\u2019s amp up our excitement and start adding the code to\u00a0visualize the\u00a0data in\u00a0an interactive\u00a0JS-based\u00a0angular\u00a0gauge!<\/p>\n
    4. Add\u00a0the JS code for the gauge<\/h3>\n
    To build any\u00a0JS chart\u00a0or gauge, it is necessary to add a function enclosing all the code, which\u00a0will make sure that the entire code inside\u00a0of it will only execute once the page is ready.<\/p>\n
    The\u00a0solid angular gauge\u00a0we are creating right now is slightly more complicated to build than other chart types like a\u00a0bar<\/a>, pie<\/a>, or area<\/a>\u00a0chart. But, do not worry as all the code is commented and I will also\u00a0guide you through the code snippets. In case it still feels confusing, just follow the steps and you will be able to drum up a lovely chart in no time. Ask questions if any, in the\u00a0post comments.<\/p>\n
    To begin with, we extract the data values required for the radial bars, create the\u00a0angular gauge, and pass the extracted data to the chart.<\/p>\n
    <script>\r\n\r\n  anychart.onDocumentReady(function () {\r\n\r\n    anychart.data.loadJsonFile('https:\/\/gist.githubusercontent.com\/shacheeswadia\/9e4598a73bb86180f1726daf9de8062f\/raw\/b258e93e1f9db37da6847eb05a230afcb64446d5\/circularGaugeData.json', function (data) {\r\n\r\n      \/\/ Get the names of the records \r\n      var recordNames = data.map(function(d){\r\n        return d.Record;\r\n      });\r\n\r\n      \/\/ Get the percent values\r\n      var recordPercentValue = data.map(function(d){\r\n        return d.percent;\r\n      });\r\n\r\n      \/\/ Add the 100% value to signify the max value for each of the radial ring\r\n      recordPercentValue.push(100);\r\n\r\n      \/\/ Set the data to indicate the percent values\r\n      var dataSet = anychart.data.set(recordPercentValue);\r\n\r\n      \/\/ Create the angular gauge\r\n      var gauge = anychart.gauges.circular();\r\n\r\n      \/\/ Set the data for the angular gauge\r\n      gauge.data(dataSet);\r\n\r\n    });\r\n\r\n\u00a0\u00a0});\r\n\r\n<\/script>\r\n<\/code><\/pre>\n
    I want each data point to\u00a0have a different color. So, let’s up a color palette. Initially, we\u00a0can use the default<\/a> colors\u00a0of the AnyChart JavaScript charting library.<\/p>\n
    Next, we specify the attributes of the gauge and create the axis. I do not want to show the axis labels and ticks so\u00a0let’s hide those.<\/p>\n
    \/\/ Set the colors based on the default palette\r\nvar palette = anychart.palettes\r\n  .distinctColors()\r\n  .items([\r\n    '#64b5f6', '#1976d2', '#ef6c00', '#ffd54f', '#455a64', '#dd2c00', '#00838f', '#00bfa5', '#96a6a6', '#ffa000'\r\n  ]);\r\n\r\n\/\/ Specify the attributes of the angular gauge chart\r\ngauge\r\n  .fill('#fff')\r\n  .stroke(null)\r\n  .padding(25, 100, 25, 100)\r\n  .margin(0)\r\n  .startAngle(0)\r\n  .sweepAngle(270);\r\n\r\n\/\/ Create the angular gauge axis\r\nvar axis = gauge.axis().radius(100).width(1).fill(null);\r\n\r\n\/\/ Set the minimum and maximum values for the axis\r\naxis\r\n  .scale()\r\n  .minimum(0)\r\n  .maximum(100);\r\n\r\n\/\/ Hide the axis labels and ticks\r\naxis.labels().enabled(false);\r\naxis.ticks().enabled(false);\r\naxis.minorTicks().enabled(false);\r\n<\/code><\/pre>\n
    Now comes the main part of creating the radial bars of the angular gauge. We create a function that accepts the gauge, index of each radial bar along with the radius, and the width of the radial bar as the parameters. We then\u00a0build each bar based on the data point and also a background radial bar of each of those points.<\/p>\n
    Next, we set up the labels and align them to correspond to each radial bar. The last thing in the function is to return a gauge for each of the data points.<\/p>\n
    \/\/ Create a function to make radial bars for each data point\r\nvar makeBarWithBar = function (gauge, radius, i, width) {\r\n\r\n  \/\/ Create the radial bars based on the data\r\n  gauge\r\n    .bar(i)\r\n    .dataIndex(i)\r\n    .radius(radius)\r\n    .width(width)\r\n    .fill(palette.itemAt(i))\r\n    .stroke(null)\r\n    .zIndex(5);\r\n\r\n  \/\/ Create the background radial bars indicating the total value\r\n  gauge\r\n    .bar(i + 100)\r\n    .dataIndex(8)\r\n    .radius(radius)\r\n    .width(width)\r\n    .fill('#F5F4F4')\r\n    .stroke(null)\r\n    .zIndex(4);\r\n\r\n  \/\/ Set the labels based on each data point\r\n  gauge\r\n    .label(i)\r\n    .text(recordNames[i]);\r\n\r\n  \/\/ Align the labels \r\n  gauge\r\n    .label(i)\r\n    .hAlign('center')\r\n    .vAlign('middle')\r\n    .anchor('right-center')\r\n    .padding(0, 10)\r\n    .height(width \/ 2 + '%')\r\n    .offsetY(radius + '%')\r\n    .offsetX(0);\r\n\r\n  return gauge.bar(i);\r\n\r\n};\r\n<\/code><\/pre>\n
    Now that the function is created, we call the function for each of the data points that we have. In total, there are 8 data points. So we call the function 8 times. The radius values are 100 divided by the number of data points, and I keep the width of each bar as 11.<\/p>\n
    \/\/ Call the function to create the radial bars with specifications\r\nmakeBarWithBar(gauge, 100, 0, 11);\r\nmakeBarWithBar(gauge, 87.5, 1, 11);\r\nmakeBarWithBar(gauge, 75, 2, 11);\r\nmakeBarWithBar(gauge, 62.5, 3, 11);\r\nmakeBarWithBar(gauge, 50, 4, 11);\r\nmakeBarWithBar(gauge, 37.5, 5, 11);\r\nmakeBarWithBar(gauge, 25, 6, 11);\r\nmakeBarWithBar(gauge, 12.5, 7, 11);\r\n<\/code><\/pre>\n
    We then add a title to the chart. Finally, we reference the div<\/code> container and draw our angular gauge.<\/p>\n
    \/\/ Add the angular gauge chart title\r\ngauge.title('Comparing Popularity of 2021 GRAMMYs Record of the Year Nominations on Spotify');\r\n\r\n\/\/ Drawing the resulting angular gauge\r\ngauge.container('container');\r\ngauge.draw();\r\n<\/code><\/pre>\n
    There you have it – a fully functional and cool\u00a0JavaScript-based\u00a0Angular Gauge is ready! Or you can call it a Circular Gauge or a Radial Gauge – whichever you prefer.<\/p>\n