Radar plot overview

A radar chart is an informative visual tool in which multiple variables (three or more) are compared on a two-dimensional plane. To do this, we will create different axes that come from a common central point. In most cases, all axes are evenly distributed and drawn evenly relative to each other.

Usage

Add the installed package to your HTML file. 

let graphData = {
  "_id": "OEBDTEST0000007",
  "name": "my_radar_plot",
  "assessments": [
      {
          "_id": "Tool_1",
          "label": "TE",
          "value": -3,
          "error": 0
      },
      {
          "_id": "Tool_2",
          "label": "DCA",
          "value": 2,
          "error": 0
      },
      {
          "_id": "Tool_3",
          "label": "PE",
          "value": 0.8,
          "error": 0
      },
      {
          "_id": "Tool_4",
          "label": "EO",
          "value":  0.25,
          "error": 0
      },
      {
          "_id": "Tool_5",
          "label": "AD",
          "value": -0.04999999999999999,
          "error": 0
      },
      {
          "_id": "Tool_6",
          "label": "OA",
          "value": 0.2222222222222222,
          "error": 0
      },
      {
          "_id": "Tool_7",
          "label": "FNR",
          "value": 0.75,
          "error": 0
      },
      {
          "_id": "Tool_8",
          "label": "SP",
          "value": 0.5555555555555556,
          "error": 0
      },
      {
          "_id": "Tool_9",
          "label": "DCR",
          "value": -3.6666666666666665,
          "error": 0
      },
      {
          "_id": "Tool_10",
          "label": "DI",
          "value": 0.5333333333333333,
          "error": 0
      }
  ],
  "visualization": {
      "type": "radar-plot",
      "schema_url": "https://github.com/inab/OEB_level2_data_migration/single-metric",
      "dates": {
          "modification": "2024-04-09T13:44:20Z"
      }
  }
}

graphData = JSON.stringify(graphData);

const graphType=JSON.stringify("radar-plot");

const myComp = document.getElementById('widget-element');
// Change the type and data of the graph
let type = JSON.parse(graphType);
myComp.type = type;
myComp.data = graphData;

Example