Radar chart - small multiples

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/IRWF29K2

Source: Global data Barometer

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    body {
      padding: 1rem;
      background-color: white !important;
      font-family: Lucida Sans Unicode, Lucida Grande, Lucida Sans, Helvetica, Arial, sans-serif;
    }

    #myChart {
      height: 100%;
      width: 100%;
      margin-top: 3rem;
      min-height: 530px;
    }

    #title {
      font-size: 32px;
      text-align: start;
      line-height: 40px;
      margin-bottom: 0px;
      font-weight: 500;
    }

    #source {
      font-size: 16px;
      text-align: start;
      line-height: 32px;
      margin-top: 0px;
      font-weight: 400;
      color: #6F6F6F;
    }
  </style>
</head>

<body>
  <p id="title">
    Radar chart - small multiples
  </p>
  <p id="source">
    Source: Global data Barometer
  </p>
  <div id="myChart"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let data = [{
        country: 'USA',
        values: [38, 73, 94, 24, 85, 74, 82, 83, 74]
      },
      {
        country: 'France',
        values: [65, 79, 66, 68, 74, 49, 56, 94, 58]
      },
      {
        country: 'UK',
        values: [63, 78, 73, 83, 60, 33, 60, 57, 61]
      },
      {
        country: 'Canada',
        values: [66, 78, 78, 15, 50, 53, 58, 84, 76]
      },
      {
        country: 'Italy',
        values: [61, 65, 63, 73, 79, 13, 44, 73, 66]
      },
      {
        country: 'Germany',
        values: [67, 78, 55, 31, 83, 46, 41, 87, 35]
      }
    ];
    let scaleV = {
      values: '0:100:20',
      item: {
        color: '#2C2C2C',
        rules: [{
          rule: '%v != 100',
          visible: false
        }]
      },
      tick: {
        visible: false
      }
    };
    let usaScaleV = {
      values: '0:100:20',
      maxItems: 99,
      itemsOverlap: true,
      item: {
        color: '#2C2C2C',
        rules: [{
            rule: '%v == 40',
            visible: false
          },
          {
            rule: '%v == 80',
            visible: false
          },
          {
            rule: '%v == 0',
            visible: false
          }
        ]
      },
      tick: {
        visible: false
      }
    };
    let graphset = data.map((item, index) => {
      let positionX;
      let positionY;
      switch (index) {
        case 0:
          positionX = '0%';
          positionY = '0%';
          break;
        case 1:
          positionX = '33.3%';
          positionY = '0%';
          break;
        case 2:
          positionX = '66.6%';
          positionY = '0%';
          break;
        case 3:
          positionX = '0%';
          positionY = '50%';
          break;
        case 4:
          positionX = '33.3%';
          positionY = '50%';
          break;
        case 5:
          positionX = '66.6%';
          positionY = '50%';
          break;
      }
      return {
        type: 'radar',
        height: '500px',
        width: '33.3%',
        x: positionX,
        y: positionY,
        title: {
          text: item.country
        },
        plot: {
          aspect: 'area',
          tooltip: {
            callout: true,
            backgroundColor: '#ffffff',
            color: '#414042',
            fontWeight: 'bold',
            borderRadius: '3px'
          }
        },
        plotarea: {
          marginBottom: '100px'
        },
        scaleV: item.country == 'USA' ? usaScaleV : scaleV,
        scaleK: {
          values: ['', '', '', '', '', '', '', '', '']
        },
        series: [Object.assign({
          values: item.values
        }, {
          backgroundColor: '#D8E2F2',
          lineColor: '#3D6DBF',
          marker: {
            backgroundColor: '#3D6DBF'
          }
        })]
      };
    });
    let chartConfig = {
      graphset
    };
    let graphIds = ['myChart-graph-id0', 'myChart-graph-id1', 'myChart-graph-id2', 'myChart-graph-id3', 'myChart-graph-id4', 'myChart-graph-id5'];
    zingchart.bind('myChart', 'mousemove', function(e) {
      zingchart.exec('myChart', 'setscalevalues', {
        scale: 'scale-k',
        graphid: e.graphid,
        values: ['Governance', 'Capabilities', 'Climate Action', 'Company Information', 'Health & Covid 19', 'Land', 'Political Integrity', 'Public Finance', 'Public Procurement']
      });
      const result = graphIds.filter((id) => id !== e.graphid);
      result.map((id) => {
        zingchart.exec('myChart', 'setscalevalues', {
          scale: 'scale-k',
          graphid: id,
          values: ['', '', '', '', '', '', '', '', '']
        });
      });
    });
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '1000px',
      width: '100%'
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <p id="title">
    Radar chart - small multiples
  </p>
  <p id="source">
    Source: Global data Barometer
  </p>
  <div id="myChart"></div>
</body>

</html>

let data = [{
    country: 'USA',
    values: [38, 73, 94, 24, 85, 74, 82, 83, 74]
  },
  {
    country: 'France',
    values: [65, 79, 66, 68, 74, 49, 56, 94, 58]
  },
  {
    country: 'UK',
    values: [63, 78, 73, 83, 60, 33, 60, 57, 61]
  },
  {
    country: 'Canada',
    values: [66, 78, 78, 15, 50, 53, 58, 84, 76]
  },
  {
    country: 'Italy',
    values: [61, 65, 63, 73, 79, 13, 44, 73, 66]
  },
  {
    country: 'Germany',
    values: [67, 78, 55, 31, 83, 46, 41, 87, 35]
  }
];
let scaleV = {
  values: '0:100:20',
  item: {
    color: '#2C2C2C',
    rules: [{
      rule: '%v != 100',
      visible: false
    }]
  },
  tick: {
    visible: false
  }
};
let usaScaleV = {
  values: '0:100:20',
  maxItems: 99,
  itemsOverlap: true,
  item: {
    color: '#2C2C2C',
    rules: [{
        rule: '%v == 40',
        visible: false
      },
      {
        rule: '%v == 80',
        visible: false
      },
      {
        rule: '%v == 0',
        visible: false
      }
    ]
  },
  tick: {
    visible: false
  }
};
let graphset = data.map((item, index) => {
  let positionX;
  let positionY;
  switch (index) {
    case 0:
      positionX = '0%';
      positionY = '0%';
      break;
    case 1:
      positionX = '33.3%';
      positionY = '0%';
      break;
    case 2:
      positionX = '66.6%';
      positionY = '0%';
      break;
    case 3:
      positionX = '0%';
      positionY = '50%';
      break;
    case 4:
      positionX = '33.3%';
      positionY = '50%';
      break;
    case 5:
      positionX = '66.6%';
      positionY = '50%';
      break;
  }
  return {
    type: 'radar',
    height: '500px',
    width: '33.3%',
    x: positionX,
    y: positionY,
    title: {
      text: item.country
    },
    plot: {
      aspect: 'area',
      tooltip: {
        callout: true,
        backgroundColor: '#ffffff',
        color: '#414042',
        fontWeight: 'bold',
        borderRadius: '3px'
      }
    },
    plotarea: {
      marginBottom: '100px'
    },
    scaleV: item.country == 'USA' ? usaScaleV : scaleV,
    scaleK: {
      values: ['', '', '', '', '', '', '', '', '']
    },
    series: [Object.assign({
      values: item.values
    }, {
      backgroundColor: '#D8E2F2',
      lineColor: '#3D6DBF',
      marker: {
        backgroundColor: '#3D6DBF'
      }
    })]
  };
});
let chartConfig = {
  graphset
};
let graphIds = ['myChart-graph-id0', 'myChart-graph-id1', 'myChart-graph-id2', 'myChart-graph-id3', 'myChart-graph-id4', 'myChart-graph-id5'];
zingchart.bind('myChart', 'mousemove', function(e) {
  zingchart.exec('myChart', 'setscalevalues', {
    scale: 'scale-k',
    graphid: e.graphid,
    values: ['Governance', 'Capabilities', 'Climate Action', 'Company Information', 'Health & Covid 19', 'Land', 'Political Integrity', 'Public Finance', 'Public Procurement']
  });
  const result = graphIds.filter((id) => id !== e.graphid);
  result.map((id) => {
    zingchart.exec('myChart', 'setscalevalues', {
      scale: 'scale-k',
      graphid: id,
      values: ['', '', '', '', '', '', '', '', '']
    });
  });
});
zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '1000px',
  width: '100%'
});

body {
  padding: 1rem;
  background-color: white !important;
  font-family: Lucida Sans Unicode, Lucida Grande, Lucida Sans, Helvetica, Arial, sans-serif;
}

#myChart {
  height: 100%;
  width: 100%;
  margin-top: 3rem;
  min-height: 530px;
}

#title {
  font-size: 32px;
  text-align: start;
  line-height: 40px;
  margin-bottom: 0px;
  font-weight: 500;
}

#source {
  font-size: 16px;
  text-align: start;
  line-height: 32px;
  margin-top: 0px;
  font-weight: 400;
  color: #6F6F6F;
}

Calendar heatmap 2/281 Line Charts - small multiples

Radar chart - small multiples

Related Documentation: