{"id":13798,"date":"2021-11-11T13:47:35","date_gmt":"2021-11-11T13:47:35","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=13798"},"modified":"2022-08-13T11:09:02","modified_gmt":"2022-08-13T11:09:02","slug":"javascript-polar-chart","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/11\/11\/javascript-polar-chart\/","title":{"rendered":"How to Make JavaScript Polar Chart"},"content":{"rendered":"

\"A<\/a>Polar charts often look impressive, which makes\u00a0some people think that creating them is a tricky process demanding plenty of skills and expertise. Well, I am going to debunk this myth right now! Let me show you how to easily visualize data in a beautiful interactive JavaScript Polar Chart.<\/p>\n

Fundamentally, a\u00a0polar chart<\/a> is a variation of\u00a0a circular graph drawn with polar coordinates. It\u00a0can also work\u00a0well\u00a0to visualize some sorts of categorical data for comparisons, which is exactly the case I want to demonstrate now. In this tutorial, I will build a column polar chart, with the bars growing from the center of the diagram to represent values with their length.<\/p>\n

Data Visualization Society<\/a> (DVS) conducts an\u00a0annual State of\u00a0the Industry<\/a>\u00a0survey of data viz practitioners, and\u00a0I thought it could be a great opportunity to play with some of its\u00a0latest data. In particular, I wanted to look at the\u00a0most popular technologies used for data visualization based on the responses. So\u00a0here, I will produce a JS polar chart\u00a0that plots the top\u00a015 ones, making up a cool illustrative real-world example.<\/p>\n

It will be fun \u2014 come along, everyone!<\/p>\n

<\/p>\n

JS Polar Chart Preview<\/h2>\n

Take a sneak peek at what the final JavaScript polar chart will look like:<\/p>\n

\"The<\/p>\n

Building JavaScript Polar Chart in 4 Simple Steps<\/h2>\n

To create\u00a0a polar chart here, I will use a JavaScript charting library. Such libraries are equipped with pre-written code for basic functions, which makes it easier and quicker to create a data visualization.<\/p>\n

For this tutorial, I\u2019ve\u00a0picked\u00a0the AnyChart JavaScript library<\/a> since it is\u00a0simple\u00a0to\u00a0use, flexible, and free for non-commercial use. Also, it is a great library to start with because of a lot of examples<\/a> and good documentation<\/a>.<\/p>\n

Generally speaking, it is possible to split the entire process of creating any JS\u00a0graph including a polar chart into four fundamental steps or\u00a0stages. They are:<\/p>\n

    \n
  1. Create a basic\u00a0web page in HTML.<\/li>\n
  2. Reference the required\u00a0JavaScript files.<\/li>\n
  3. Add\u00a0the data.<\/li>\n
  4. Write some JS code to draw the chart.<\/li>\n<\/ol>\n

    Join me in following these steps to\u00a0make an awesome interactive JavaScript-based polar chart visualization!<\/p>\n

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

    To begin with, I create a basic HTML page and a block element that will hold the polar chart:<\/p>\n

    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Polar 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
    As you see the <div><\/code> element is given an id so that I can refer\u00a0to it later in the code. Also, the width and height of the <div><\/code>\u00a0block are specified as 100% to make the\u00a0polar chart render over the whole page.<\/p>\n
    2.\u00a0Reference the required JavaScript files<\/h3>\n
    Next, in the <head><\/code> section of the page, I\u00a0reference the specific scripts of the charting library being used.<\/p>\n
    Here, I am\u00a0working with AnyChart, so I will\u00a0include the required files from its\u00a0CDN<\/a>. The library\u00a0is modular, and for the polar chart, all I need is the handy\u00a0core<\/a> and polar<\/a> modules.<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Polar Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-polar.min.js\"><\/script>\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\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ All the JS polar chart code will come here.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    3.\u00a0Add the data<\/h3>\n
    To get a dataset for my future polar chart, I filtered DVS’s Data Visualization Census Survey 2020 data<\/a> and identified the 15 most commonly used technologies as answered by the respondents.<\/p>\n
    Now, to\u00a0properly add\u00a0this data\u00a0to the chart, I create an array<\/a>\u00a0with the category name as the x<\/code> parameter, as we are plotting on the X-axis, and the measure of each of the categories as the value<\/code> parameter.<\/p>\n
    \/\/ add data as an array of objects\r\nvar data = [\r\n  { x: 'Excel', value: 44.7 },\r\n  { x: 'Tableau', value: 36.1 },\r\n  { x: 'Pen & Paper', value: 27.1 },\r\n  { x: 'R', value: 25 },\r\n  { x: 'Python', value: 24.1 },\r\n  { x: 'D3.js', value: 21.2 },\r\n  { x: 'Illustrator', value: 20.3 },\r\n  { x: 'ggplot2', value: 19.8 },\r\n  { x: 'Power BI', value: 18.7 },\r\n  { x: 'Plotly', value: 11.8 },\r\n  { x: 'Matplotlib', value: 10.58 },\r\n  { x: 'Mapbox', value: 9.28 },\r\n  { x: 'QGIS', value: 9.22 },\r\n  { x: 'ArcGIS', value: 7.18 },\r\n  { x: 'React', value: 7.4 }\r\n];<\/code><\/pre>\n
    The preparations are all done and it is time now to make the JavaScript-based polar chart show up on the canvas!<\/p>\n
    4. Write some JS code to draw the polar chart<\/h3>\n
    The first thing I do here is add a function enclosing all the JS polar chart code. This ensures that everything inside it will execute only after the web page is ready.<\/p>\n
    Making a polar chart in JavaScript is pretty much straightforward. I just write one line of code to create\u00a0it, then add the data array\u00a0prepared in the previous step, and connect the data to the chart creating a column series.<\/p>\n
    anychart.onDocumentReady(function () {\r\n\r\n  \/\/ create a polar chart\r\n  var chart = anychart.polar();\r\n \r\n  \/\/ add data as an array of objects\r\n  var data = [\r\n    { x: 'Excel', value: 44.7 },\r\n    { x: 'Tableau', value: 36.1 },\r\n    { x: 'Pen & Paper', value: 27.1 },\r\n    { x: 'R', value: 25 },\r\n    { x: 'Python', value: 24.1 },\r\n    { x: 'D3.js', value: 21.2 },\r\n    { x: 'Illustrator', value: 20.3 },\r\n    { x: 'ggplot2', value: 19.8 },\r\n    { x: 'Power BI', value: 18.7 },\r\n    { x: 'Plotly', value: 11.8 },\r\n    { x: 'Matplotlib', value: 10.58 },\r\n    { x: 'Mapbox', value: 9.28 },\r\n    { x: 'QGIS', value: 9.22 },\r\n    { x: 'ArcGIS', value: 7.18 },\r\n    { x: 'React', value: 7.4 }\r\n  ];\r\n \r\n  \/\/ connect the data creating a column series\r\n  var columnSeries = chart.column(data);\r\n\r\n});<\/code><\/pre>\n
    The data is categorical,\u00a0consisting of discrete values.\u00a0So I specify the X-scale as ordinal. I also\u00a0set the Y-axis as ‘false’ to\u00a0avoid displaying\u00a0the corresponding values.<\/p>\n
    \/\/ set the x-scale\r\nchart.xScale('ordinal');\r\n \r\n\/\/ disable the y-axis\r\nchart.yAxis(false);<\/code><\/pre>\n
    It is always important to name the chart<\/a> so that the viewer has no problem\u00a0quickly understanding what\u00a0is shown. So, I set the polar chart title:<\/p>\n
    \/\/ set the chart title\r\nchart\r\n  .title('Top 15 Technologies for Data Visualization (DVS Survey 2020)');<\/code><\/pre>\n
    Finally, I reference the previously added <div><\/code> container and command to display the resulting polar chart.<\/p>\n
    \/\/ set the chart container id\r\nchart.container('container');\r\n \r\n\/\/ initiate the chart display\r\nchart.draw();<\/code><\/pre>\n
    Initial Polar Chart Result<\/h3>\n
    Lo and behold, an interactive JavaScript-based polar chart is ready with these few lines of code!<\/p>\n
    Check out this initial version here and feel free to play around with it on AnyChart Playground<\/a> or CodePen<\/a>.<\/strong><\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Polar Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-polar.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.onDocumentReady(function () {\r\n \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ create a polar chart\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var chart = anychart.polar();\r\n \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ add data as an array of objects\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = [\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'Excel', value: 44.7 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'Tableau', value: 36.1 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'Pen & Paper', value: 27.1 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'R', value: 25 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'Python', value: 24.1 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'D3.js', value: 21.2 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'Illustrator', value: 20.3 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'ggplot2', value: 19.8 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'Power BI', value: 18.7 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'Plotly', value: 11.8 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'Matplotlib', value: 10.58 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'Mapbox', value: 9.28 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'QGIS', value: 9.22 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'ArcGIS', value: 7.18 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ x: 'React', value: 7.4 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0];\r\n \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ connect the data creating a column series\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var columnSeries = chart.column(data);\r\n \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the x-scale\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.xScale('ordinal');\r\n \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ disable the y-axis\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.yAxis(false);\r\n \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the chart title\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.title('Top 15 Technologies for Data Visualization (DVS Survey 2020)');\r\n \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the chart container id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.container('container');\r\n \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ initiate the chart display\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.draw();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n