Visualization library

Table of Content

Table of Content

Table of Content

Multiple percentage

📌 What are they?

The Multiple Percentage visualization shows several overlapping percentage indicators in the form of concentric rings, accompanied by side labels with:

  • Indicator name

  • Target value

  • Current value (in %)

🔍It is a compact and comparative way to represent multiple values expressed in percentage within the same visual context.

🎯 When to use them?

  • Visualize the proportional distribution of a total among several parts.

  • Quickly compare magnitudes between elements without an explicit axis.

  • Show hierarchical categories (e.g. line → machine).

  • Represent aggregated data in limited spaces (dashboard).

📥 Data Submission Formats

▸ From dataset

Example structure:

Indicator

Current

Target

OEE

72

100

Availability

80

53

Quality

95

38

Performance

90

27

  • Label: Indicator (each rectangle)

  • Label type: String (type of labels)

  • Values: Current (size of the rectangles)

  • Target: Target

  • Popup: Indicator, Current, Target

▸ From MQTT

{
  "OEE":   { "value": 100, "objetivo": 72 },
  "Disponibilidad":  { "value": 53,  "objetivo": 80 },
  "Calidad":  { "value": 38,  "objetivo": 95 },
  "Rendimiento":  { "value": 27,  "objetivo": 90 }
}

TOKII

·

©

2025

All rights reserved

English

TOKII

·

©

2025

All rights reserved

English

TOKII

·

©

2025

All rights reserved

English