Multilayer Donut chart in perspective

Ignition
1

I want to implement the multilayer Donut chart in perspective, seems like not very easy while it is very easy in excel, wondering if any body can help on this or if I can embedded the excel chart in the perspective since it is easy to implement the multilayer donut in excel.

image
image1243×541 27.8 KB

2

Pretty easy to implement using Apex Charts

3

I think "concentric simple gauge" would be better terminology.

Concentric simple gauge

You can do this fairly easily with the built-in component.

  • You'll need a coordinate container for this since you'll be stacking charts.
  • Create the outer gauge and size to suit. Rename it with a 0 on the end. Disable the label.
  • Select it and Ctrl-C, Ctrl-P. The pasted version will be placed exactly on top of the original.
  • Grab one of the resize handles and move while holding Ctrl-Shift. This will maintain aspect ratio and shrink on the centre point.
  • Repeat for the inner gauge.
4

Thank I will give it try.

5

Thank you I will give it try,

6

IS the pie chart or gauge? I have tried to use gauge and I am able to remove the label but has no way to remove the the needle and the other two line.
image

7

It's the Simple Gauge component.

8

I have tried very hard, still can not mimic yours, is there anyway you can share yours by exporting out project?

9

Copy the Coordinate Container code below and paste it into a view.

Concentric Simple Gauge chart 
[
  {
    "type": "ia.container.coord",
    "version": 0,
    "props": {
      "style": {
        "borderStyle": "solid",
        "borderWidth": 1,
        "borderColor": "#174AA6"
      }
    },
    "meta": {
      "name": "CoordinateContainer"
    },
    "position": {
      "x": 84,
      "y": 232,
      "height": 233,
      "width": 280
    },
    "custom": {},
    "children": [
      {
        "type": "ia.chart.simple-gauge",
        "version": 0,
        "props": {
          "value": 55,
          "startAngle": 90,
          "endAngle": 405,
          "arc": {
            "width": 10
          },
          "label": {
            "visible": false
          },
          "style": {
            "classes": []
          }
        },
        "meta": {
          "name": "SimpleGauge_0"
        },
        "position": {
          "x": 11,
          "y": 7,
          "height": 219,
          "width": 239
        },
        "custom": {}
      },
      {
        "type": "ia.chart.simple-gauge",
        "version": 0,
        "props": {
          "value": 33,
          "startAngle": 90,
          "endAngle": 405,
          "arc": {
            "width": 10
          },
          "label": {
            "visible": false
          },
          "style": {
            "classes": []
          }
        },
        "meta": {
          "name": "SimpleGauge_1"
        },
        "position": {
          "x": 36,
          "y": 26,
          "height": 179,
          "width": 187
        },
        "custom": {}
      },
      {
        "type": "ia.chart.simple-gauge",
        "version": 0,
        "props": {
          "value": 90,
          "startAngle": 90,
          "endAngle": 405,
          "arc": {
            "width": 10
          },
          "label": {
            "visible": false
          },
          "style": {
            "classes": []
          }
        },
        "meta": {
          "name": "SimpleGauge_2"
        },
        "position": {
          "x": 45.5,
          "y": 47,
          "height": 137,
          "width": 168
        },
        "custom": {}
      }
    ]
  }
]
2 Likes
10

That works. Thanks