How to Create a JavaScript Radar Chart

How to Create a JavaScript Radar Chart

A data visualization developer explains what a Radar Chart is and how to build such interactive graphics using JavaScript / HTML5.

Radar charts, which are also referred to as spider charts or radar plots, are a data visualization used to compare observations with multiple quantitative variables. Each variable is encoded to a spoke which are equidistant apart. The higher the value, the further away from the center of the chart the point is made. Radar charts are best used to compare the ‘profile’ of observations and to detect outliers within the data. They are therefore used quite a bit in sports, most notably in basketball and soccer for profiling players.

In this tutorial I will be teaching you how to build your own radar chart with JavaScript and how to use them to help with one of the toughest decisions in gaming history: which starting pokemon to choose!

That’s right, we will be building radar charts to perform data analysis on Bulbasaur, Charmander and Squirtle to determine, once and for all, which is the best choice.

Building a JavaScript radar chart

To build our radar charts we will be using a charting library. Charting libraries remove a lot of the burden of building charts (compared to something like d3.js) and allow you to get a chart up quickly and easily. For this tutorial I’ve chosen to use AnyChart JavaScript library. I’ve chosen AnyChart because building charts with it is really quick and it’s a awesome library for beginners because of the pretty intensive documentation.

Step 1: Setup the page

The first step to create our radar charts is to setup the html page and load the required scripts.

<html>
  <head>
    <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-radar.min.js"></script>
    <style type="text/css">
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // drawing our chart goes here
      });
    </script>
  </body>
</html>

All I have done here is created a new html page, added the scripts required for creating a radar chart anychart-core.min.js and anychart-radar.min.js. The former is required for all AnyChart charting and comes with the basic charts (scatter, bar etc) while the latter gives us the module required for building a radar chart.

We then create a CSS rule for our html page which sets the size of our chart. We have gone for 100% width and height and 0 margins to create a full screen data viz but if you want something different go ahead and change those values to something that better suits your needs.

Lastly, we use anychart.onDocumentReady(). Our chart will go in this function. What this does is it triggers the function only when the document is ready and not before.

Step 2: Load the data

In order to draw radar charts for our starter Pokemon we need to get the data. I found this at bulbapedia.bulbagarden.net (how cute?) which seems to have the stats for every Pokemon ever!

Image for post

We then need to reformat this data into something that AnyChart knows how to read. AnyChart likes the data for each observation in the following format:

var data1 = [
  {x: "HP", value: 39},
  {x: "Attack", value: 52},
  {x: "Defense", value: 43},
  {x: "Special Attack", value: 60},
  {x: "Special Defense", value: 50},
  {x: "Speed", value: 65},
];

An array of objects with each variable having the x-axis variable to be named ‘x’ and the y-axis variable to be named ‘value’. In the radar chart’s case, the x-axis variable is the name of the variable while the y-axis variable is the value.

We repeat this step for each starter Pokemon resulting in the following three arrays:

var data1 = [
  {x: "HP", value: 39},
  {x: "Attack", value: 52},
  {x: "Defense", value: 43},
  {x: "Special Attack", value: 60},
  {x: "Special Defense", value: 50},
  {x: "Speed", value: 65},
];

var data2 = [
  {x: "HP", value: 45},
  {x: "Attack", value: 49},
  {x: "Defense", value: 49},
  {x: "Special Attack", value: 65},
  {x: "Special Defense", value: 65},
  {x: "Speed", value: 45},
]; 

var data3 = [
  {x: "HP", value: 44},
  {x: "Attack", value: 48},
  {x: "Defense", value: 65},
  {x: "Special Attack", value: 50},
  {x: "Special Defense", value: 64},
  {x: "Speed", value: 43},
];

Step 3: Drawing the chart

Now that we have all of our (psy)ducks in a row it is time to draw our chart.

// create radar chart
var chart = anychart.radar();

// set chart title
chart.title("Starter Pokemon Comparison Chart");
// set chart yScale settings
chart.yScale()
  .minimum(0)
  .maximum(100)
  .ticks({'interval':20});
// create first series
chart.line(data1)
// create second series
chart.line(data2)
// create third series
chart.line(data3)
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();

data-visualization front-end-development web-development javascript data data analysis

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Performance Analysis Tools for Front-End Development

8 Performance Analysis Tools for Front-End Development. Recommended tools to test and analyze your frontend code performance.

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Top 9 Open source JavaScript frameworks for front-end web development

About a decade ago, the JavaScript developer community began to witness fierce battles emerging among JavaScript frameworks. In this article, I will introduce some of the most well-known of these frameworks. And it's important to note that these are all open source JavaScript projects, meaning that you can freely utilize them under an open source license and even contribute to the source code and communities.

Top 19 Front-End Web Development Tools to Consider in 2020

In this post, we are putting curated list of top tools with key features and download links "Top 19 Front End Web Development Tools to Consider in 2020"

Web Development Fundamentals for Newcomers! (Part 1: Front End)

To all those who wish to dive into the world of Web Development, give it a read and get well versed with topics & terms you will come…This post is the first of two chapter series of Web Development Fundamentals for Beginners. The second chapter will be “Part 2 : Backend”. This guide is split into two parts and today we’ll start with the first one — Frontend development, and introduce you to the most important languages and tools in this area.