Creating Radar/Spider Charts in Tableau

Radar charts, also known as spider charts, are defined by datavizcatalogue.com in the following manner:



Radar Charts are a way of comparing multiple quantitative variables. This makes them useful for seeing which variables have similar values or if there are any outliers amongst each variable. Radar Charts are also useful for seeing which variables are scoring high or low within a dataset, making them ideal for displaying performance.

Each variable is provided with an axis that starts from the centre. All axes are arranged radially, with equal distances between each other, while maintaining the same scale between all axes…Each variable value is plotted along its individual axis and all the variables in a dataset and connected together to form a polygon.

Okay, so how about an example. I recently took an online personality test on https://www.arealme.com. The test provided me with results in a radar chart, as follows.


As you can see, each of the eight personality attributes has its own axis and is measured on the same scale, 0-100%, exactly as noted in the definition above.

Of course, radar charts have limitations. If you have too many different attributes, they can be very difficult to read. And they aren’t great if you are looking for precise comparisons between different attributes. For instance, in my personality test, it’s pretty difficult to tell the difference in the Feeling and Judgingattributes. If you need exact precision, then you’d be better off using a simple bar chart. But there are times when a radar chart can be a great way to provide an overall picture of multiple attributes. As always, be sure to think through your data and your use case before using this chart.

Implementation in Tableau
Until recently, I had never created a radar chart in Tableau. But when I saw a question on the forums asking how to create it, I decided to give it a try. There are a couple of different implementations of this chart type in Tableau already, but...I decided to build it mostly from scratch. The end result, as you can see on the forums post, looked like this:


The grey background was created within Tableau, exported as an image, then brought back into Tableau as a background image. While this includes a few extra steps, it worked well enough and met the user’s needs, so I was satisfied and moved on.

A short time after answering that forum question, I saw a post from a gentleman named Nigel Shaw, who, inspired by my original post, enhanced the method for creating the background image. At that point, I decided that it would be good to create a simple template for radar charts. But, as I thought about it, I just wasn’t happy with the requirement of creating a separate background image. I wanted to create something that was more dynamic—able to handle any number of different attributes without needing to create a custom background image. This could be done by drawing the background as polygons then the foreground also as polygons, but I didn’t care for that solution because the background would be clickable. That, in my opinion, would be worse than using a background image. So, I sat on the idea for a little while…until 2018.3 was released and I realized that the new version had a couple of features that would allow me to address all the flaws of the original approach.

The resulting radar chart (I’ll share details on a template shortly) consists of two sheets. The first, background, uses trigonometry and a bit of data scaffolding to draw the radar background. Using the approach from Nigel Shaw I mentioned earlier, we actually draw separate polygons for each axis so that we can have the “spokes” from the center to each edge. In addition, I'm drawing multiple polygons in order to create the grid lines.

Note: While these look like lines, these are actually polygons. This allows you to change the color of the background if desired (like the earlier example above which had a grey background). In the case below, I've changed the polygons to be the same color as the background and set up a line color to make it look like lines.


Note: I’m not going to go into detail about the calculations or the math, but feel free to download the workbook if you would like to explore them further. I’ve commented all the calculations to make them easier to understand. And, if you need a refresher on trig, see Beyond Show Me: Trigonometry.

The second, Foreground, draws the actual radar polygon itself. Like the background, it leverages trigonometry to draw the polygon.


We then leverage 2018.3’s transparent sheets functionality, by placing the Background sheet on a dashboard first, then floating the Foregroundsheet over top of it. In the end, we have a chart that looks like this:



Notice that, as we change the filters to add in more attributes, the background polygon automatically adjusts.


Chart Options
In order to provide some flexibility, I’ve added a few options to the chart, the first of which involves scaling. Scaling of each axis is a bit tricky because the scale might be known at times, such the personality test which has a scale of 0 to 100%, but not known at others, such as a radar that shows sales by category. So, in order to provide some flexibility, I’ve created a parameter called Scaling which allows you to adjust the scaling method. The options available are:

1) Autoscale – Maximize the size of the radar so that it uses as much screen space as possible.

2) % of Total – Size the radar based on percentage of total.

3) Manual – Allows you to adjust the scale % manually so that it will be somewhere in between Autoscale and % of Total. If you choose this option, you’ll need to use the Scale parameter to adjust the percentage.

4) Static – Will set a static scale. If you choose this option, you’ll need to set the static scale using the Static Scale parameter. In the case of a 0 to 100% scale, you’d set this to 1.

I’ve also provided the option to show labels for each spoke of the radar. To do this, simply change the Show Labels parameter to True.

Additionally, I've provided the ability to change the number of "grid lines" to show. Using the Grid Lines parameter, you can adjust it to show anything from 1, which would just be the outside line, to 10 lines.

Finally, one of the biggest problems with radar charts in Tableau is that interaction and tooltips can be a bit of a problem because you are never quite sure which “point” of the polygon you are hovering over. When interacting with a polygon in Tableau, it will choose the polygon point that is nearest your cursor, which is not always obvious to your user. Take the following, for instance. Can you tell which of the polygon points is closest to the cursor?


So, to address this problem, I’ve leveraged another 2018.3 feature, set actions, to highlight the point on which you’re hovering. So, instead of the above which leaves your user guessing, you’ll now get a small dot on the point, which provides a subtle indicator of which attribute’s information is being displayed.


My Template
Now that we have all those details out of the way, let me quickly run through the template. Like my other templates, it consists of two components—an Excel spreadsheet and a Tableau workbook, designed to make it as easy as possible to plug in your own data.

The Excel spreadsheet (you can find it here) has three sheets: Data, Model, and Grid Model.

Grid Model contains two rows, which create the basic data scaffold needed to draw the grid lines. But, you need not worry about how it works. You won’t need to modify it—just make sure it’s in your spreadsheet.

Model contains four rows, which create the basic data scaffold needed to draw our polygons. Like Grid Model, you need not worry about it—just make sure it’s in your spreadsheet.

The Data sheet will be used to populate your data. It contains just three columns; you can add more if needed, but these are the three that are required by the Tableau template. The columns are as follows:

Link – The purpose of this column is simply to join each row in the Model sheet to each row in Data sheet for the purpose of creating the polygons. But don’t worry too much about this. You simply need to make sure that every row has a value of “Link” in this column. Note: Strictly speaking, we could use a join calculation in Tableau to join these sheets together, but for simplicity sake, I often like to include a separate column in my data set.

Dimension – The dimension or attribute. For example, personality attribute.

Measure – The measure being visualized.

Once you have populated your data, you’ll need to connect it to Tableau. Start by downloading the Radar Template Workbook from my Tableau Public page. Then edit the data source and connect it to your Excel spreadsheet. The workbook should update automatically to reflect your data. From there, you can do whatever you like with the chart—change the colors, add filters, update tooltips, etc. just as you normally would.

Wrap-Up
And that’s all there is to it. If you use this template to create your own radar chart, I’d love to see it. But please don’t create one simply because you can. Be sure to closely scrutinize your use case and make sure it’s the right chart type first.

Note: The Data School's Ellen Blackburn just recently posted a fantastic blog, which I highly encourage you to check out: A Simple Way to Make a Radar Chart. It goes into detail about the calculations and trigonometry.

Ken Flerlage, March 17, 2019


46 comments:

  1. Replies
    1. Hello. Found you organically. Valuable content on here. Thank you for posting. Any sites you favor for embedding Radar charts? Looking for an economical yet informative way to make my data come alive on various platforms. Thanks for your time!

      Delete
    2. Not exactly sure what you're asking. Can you clarify what you're trying to do?

      Delete

  2. Hello, how are you? I'm trying to replicate and I practically took all steps (I believe so). I came across this problem I can not get the labels down to their respective coordinates. Can you help me?


    Thanks for attention

    Rodrigo Sabino

    https://public.tableau.com/profile/rodrigo.sabino#!/vizhome/AutomatedRadarChart_15622025914970/background_teste?publish=yes

    ReplyDelete
    Replies
    1. I can't seem to find the difference between yours and mine either. But try changing the Y Background New table calculation (on the rows shelf) to compute using both Dimension and Dimension label.

      Delete
  3. Hi Ken,
    Great post, was very helpful!
    Now my next question, how can I have 2 radar charts showing?
    Ex: Person A was reviewed by themselves (A) and Manager B. How can I show A & B on one chart?

    ReplyDelete
    Replies
    1. You'd need to drop that Person field on the Columns shelf on both the background and the foreground charts. That would create a small-multiple chart of radars.

      Delete
    2. Some challenge here as I try to work my way through your marvelous example; Where do I need to add the data for Manager B and how do I have to process them? Thx

      Delete
    3. Can you send me an email with details?

      Delete
    4. Sure - have been digging to find a solution as I would really like to understand how to do it and found this post inspired by you: https://community.tableau.com/s/question/0D54T00000GfmADSAZ/how-to-reverse-the-axis-of-a-radar-graph-and-show-more-than-1-measure-tableau-desktop-20194
      I love to do reverse engineering but lack the original Excel data file to suceed

      Delete
    5. OK, please email me. flerlagekr@gmail.com

      Delete
  4. Another question, if I have 2 radar charts showing, how can I set up the data to allow both to change (and not be the same) when filtering on the name?
    I:
    Name: Mike
    Manager: Paula
    Mike provided scores (measures) for himself
    Paula provided scores (measures) for Mike
    I'd like to be able to filter on Mike to show both radar charts for Paula and himself.

    ReplyDelete
    Replies
    1. I don't fully understand this question. Might be best to take this one offline. Can you email me at flerlagekr@gmail.com?

      Delete
  5. How to show lables dynamically on each end. can you please help on it
    and i have two dimensions, each having different values
    in one dimension1 if select customer 1, customer 2 there will be two radars from same dimension1
    but what i want is from dim1 one radar, dim2 another radar in same chart. measures are same for both dimensions
    could you please help is this possible ?

    ReplyDelete
    Replies
    1. Happy to help, but too difficult to handle via this comments section. Feel free to send me an email and I'll get back to you. flerlagekr@gmail.com

      Delete
  6. This is great post! A small issue I encountered: When the foreground dimension is at it max value (100%), I was hoping it can completely overlap with the vertex of background polygon. Any idea how to achieve that? (I also shoot you an email). Thank you so much!

    ReplyDelete
  7. So freaking great.

    I don't see the static scale parameter selection. Did you remove it?

    I have a use case where the scale is fixed (0-5) and tuning it consistently with the the % method is tricky.

    ReplyDelete
    Replies
    1. Hmmm, good question. It appears that I removed that for some reason, though I can't remember why exactly. Not even sure what its purpose was...

      Delete
  8. Thanks for the great post!!

    Im having some issues with the background polygon automatically adjusting - it has now stopped? im unsure as to why this is .... but its extremely useful having this as a filter on a dashboard.

    ReplyDelete
    Replies
    1. Hmmmm. Any way you could contact me via email? flerlagekr@gmail.com

      Delete
  9. Cool!

    If you duplicate axis and make it as a line both of them, and instead of Index() will use that as a path for second axis:

    if first()=0 then 1
    elseif last()=0 then 0
    end

    We will get fully finished circle :)

    BR,
    Egor

    ReplyDelete
  10. Hi congratulate on the great work done.

    I'm having a problem making the copy of the Background worksheet. I have combined the same calculated fields and lay out, but the outcome is a little bit different. In my worksheet, if I adjust the number of Dimensions, the background simply removes one triangle away instead of adjusting the polygon.

    Would you kindly let me know the trick behind this to resolve the issue?

    ReplyDelete
    Replies
    1. Hard to be sure and a bit tricky to diagnose via this comments section. Any chance you could email me at flerlagekr@gmail.com?

      Delete
  11. Hi, I am very new to Tableau and am trying to build a radar graph. I have followed the instructions but when I try to use my data it doesn't show anything on the background or foreground for some reason. I have been trying to resolve it and try various things but I can't get it to work. Any suggestions as to what I might be doing wrong? Thanks Nicki

    ReplyDelete
  12. Hi, I posted earlier but have resolved that issue. Is it possible for you to explain in further detail about having a chart with more than 1 radars in it. Thanks for your help- this is a great article. I was looking at trigonometry and complicated calculations to no avail. This is great!! Thanks Nicki

    ReplyDelete
    Replies
    1. Would you be able to email me with some sample data? flerlagekr@gmail.com

      Delete
  13. Hi, thank you for this great post and your detailed explanations!
    I am trying to create a round radard chart, so that the grid lines form a circle. How would I start to do that?

    ReplyDelete
    Replies
    1. I'd probably just suggest creating an image outside of Tableau then using it as a background image for the radar chart.

      Delete
  14. When I add in my data source to the template workbook, all the worksheets become blank. Do you know why that might be the case?

    ReplyDelete
    Replies
    1. Not sure. Would you be able to contact me via email? flerlagekr@gmail.com

      Delete
  15. Hi Ken,
    Awesome post. Thanks.
    I have encounter an issue. My foreground charts doesn't autoscale or show labels. I also have filters other than the dimension. But while everything changes perfectly, it doesn't autoscale and hence goes out of sync with the background chart when i change filters.

    Any idea why?

    ReplyDelete
    Replies
    1. This uses some FIXED LODs, so it's possible you're running into an Order of Operations problem where the filters aren't computing at the right time. You could try adding those filters to context to see if that corrects if. If not, I'd probably need to see the workbook. Could you email me? flerlagekr@gmail.com.

      Delete
  16. Thanks for this great chart. I want to overlap several of the foreground sheets in one radar chart to compare different sets of data. What is the easiest way to do this with your template?

    ReplyDelete
    Replies
    1. I personally prefer to use separate charts as the overlapping radars can be really difficult to use. However, both options should be doable with this, though I didn't build it into the template. Would you be able to send me an email with some further details and perhaps a sample workbook?

      Delete
  17. how you have added 'multiple' in type of shapes and what are 'multiple fields' named dimension ?

    ReplyDelete
    Replies
    1. I don't quite understand what you're asking. Feel free to email me directly. flerlagekr@gmail.com

      Delete
  18. Great explanation and use for your template. New to tableau, I need to add another column to the data sheet for Location and then I need the location to be a filter on the top of the dashboard. Any help would be greatly appreciated

    ReplyDelete
    Replies
    1. You can simply add that column the the spreadsheet then use it as a filter.

      Delete
  19. This is awesome ....very helpful
    Thanks

    ReplyDelete
  20. This is really great!

    I'm having trouble with one aspect. I have 5 dimensions that I am showing, with a measure value of between 1 and 5 for each. When the values range from 1-5, the shape looks the way I want, with a value of 1 only taking ~1/5 of the full size of the background. However if all 5 dimensions have a value of 1, the shape takes up 100% of the background.

    How do I 'lock' the scale of the foreground / background so that the scale of the shape will always assume a maximum value of 5?

    ReplyDelete
    Replies
    1. Any chance you could send me an email with the workbook? flerlagekr@gmail.com

      Delete
  21. Thank you Ken! This is very helpful.

    ReplyDelete
  22. WOWWWW!!! YOU ARE GENIUSES Thanks for sharing this

    ReplyDelete

Powered by Blogger.