Customizable SVG-based Radar Chart Library – maturity-radar

Category: Chart & Graph , Javascript | June 6, 2017
Author:kolektiv
Views Total:3,962 views
Official Page:Go to website
Last Update:June 6, 2017
License:MIT

Preview:

Customizable SVG-based Radar Chart Library – maturity-radar

Description:

maturity-radar is an easy, CSS-less JavaScript library used to render a dynamic, customizable, SVG based radar chart in the document.

Basic usage:

Just add the JavaScript file ‘radar.js’ to the webpage and you’re ready to go.

<script src="radar.js"></script>

Create a placeholder element for your radar chart.

<div id="microservices"></div>

Create a new radar chart and add your own multivariate data as follows:

radar.show('#microservices', {
  size: 700,
  curve: false,
  metrics: [
    {
      name: "Metric 1",
      range: [
        "Value 0",
        "Value 1",
        "Value 2",
        "Value 3"
      ],
      target: 2,
      actual: 1
    },
    {
      name: "Metric 2",
      range: [
        "Value 0",
        "Value 1",
        "Value 2",
        "Value 3"
      ],
      target: 3,
      actual: 2
    },
    {
      name: "Metric 3",
      range: [
        "Value 0",
        "Value 1",
        "Value 2",
        "Value 3"
      ],
      target: 2,
      actual: 0
    },
    {
      name: "Metric 4",
      range: [
        "Value 0",
        "Value 1",
        "Value 2",
        "Value 3"
      ],
      target: 3,
      actual: 2
    },
    {
      name: "Metric 5",
      range: [
        "Value 0",
        "Value 1",
        "Value 2",
        "Value 3"
      ],
      target: 2,
      actual: 1
    }
  ]
});

You Might Be Interested In:


One thought on “Customizable SVG-based Radar Chart Library – maturity-radar

  1. Kevin

    I absolutely love this, it’s perfect for my requirements… however, there’s one thing I wondered… is there a way to hide the “0, 1, 2, 3…” that appear on the vertical stalk of the chart? I am working with percentages in my version and therefore would like them not to appear.

    Reply

Leave a Reply