icCube gauge with multiple band colors

Question

I'm trying to make a gauge and want to have two band colors (wrong/red, good/green). I've an example of the amchart in their online Chart maker https://live.amcharts.com/new/edit/. But I'm not able to get this working in icCube.

current we have icCube reporting version 7.0.0 (5549).

This is my chart JSON:

{
"box": {
    "id": "wb695",
    "widgetAdapterId": "w28",
    "rectangle": {
        "left": 1510,
        "top": 340,
        "right": 1910,
        "bottom": 640
    },
    "zIndex": 901
},
"data": {
    "mode": "MDX",
    "schemaSettings": {
        "cubeName": null,
        "schemaName": null
    },
    "options": {
        "WIZARD": {
            "measures": [],
            "rows": [],
            "rowsNonEmpty": false,
            "columns": [],
            "columnsNonEmpty": false,
            "filter": []
        },
        "MDX": {
            "statement": "with \n    member [Measures].[Measure1] AS 0.9\n    member [Measures].[Measure2] AS 0.1\nSELECT\n\n{[Measures].[Measure1], [Measures].[Measure2]} on 0\n\nFROM [cube]"
        },
        "DATASOURCE": {}
    },
    "ic3_name": "mdx Query-5",
    "ic3_uid": "m17"
},
"data-render": {
    "chartType": {
        "label": "Gauge",
        "proto": {
            "chartPrototype": {
                "type": "gauge",
                "arrows": [
                    {
                        "id": "GaugeArrow-1"
                    }
                ],
                "axes": [
                    {
                        "id": "GaugeAxis-1"
                    }
                ]
            },
            "graphPrototype": {},
            "dataProviderType": 3
        },
        "id": "gauge-chart"
    },
    "graphsConfiguration": [
        {
            "graph": {}
        }
    ],
    "valueAxes": [],
    "trendLinesGuides": {},
    "configuredQuadrants": {},
    "advanced": {
        "titles": [],
        "faceAlpha": 0,
        "faceBorderAlpha": 0
    },
    "balloon": {
        "offsetX": 8
    },
    "chartOptions": {
        "axes": [
            {
                "axisAlpha": 0.25,
                "bottomText": "SLA",
                "bottomTextColor": "#2A3F56",
                "tickAlpha": 0.25,
                "bandOutlineAlpha": 1,
                "bandAlpha": 1,
                "bandOutlineThickness": 95,
                "bandOutlineColor": "#0095BC",
                "id": 1
            }
        ],
        "bands": [
            {
                "alpha": 0.8,
                "color": "#B53728",
                "endValue": 0.6,
                "startValue": 0,
                "id": "GaugeBand-1"
            },
            {
                "alpha": 0.6,
                "color": "#435035",
                "endValue": 1,
                "startValue": 0.6,
                "innerRadius": 0.69,
                "id": "GaugeBand-2"
            }
        ]
    },
    "ic3Data": {
        "chartTypeConfig": {
            "pie-chart-donut": {
                "chartType": {
                    "label": "Donut",
                    "proto": {
                        "chartPrototype": {
                            "type": "donut",
                            "pullOutRadius": 0,
                            "startDuration": 0,
                            "legend": {
                                "enabled": false,
                                "align": "center",
                                "markerType": "circle"
                            },
                            "innerRadius": "60%"
                        },
                        "dataProviderType": 1
                    },
                    "id": "pie-chart-donut"
                },
                "graphsConfiguration": [
                    {}
                ],
                "valueAxes": [],
                "trendLinesGuides": {},
                "configuredQuadrants": {},
                "advanced": {
                    "titles": []
                },
                "balloon": {
                    "offsetX": 8
                },
                "chartOptions": {
                    "showZeroSlices": false,
                    "labelsEnabled": false,
                    "innerRadius": "60%",
                    "startAngle": 270,
                    "radius": "",
                    "fontSize": 20,
                    "color": "#0095BC",
                    "outlineAlpha": 0.25,
                    "tapToActivate": false
                }
            }
        }
    },
    "axes": [
        {
            "startValue": 0,
            "endValue": 1,
            "startAngle": -90,
            "endAngle": 90
        }
    ],
    "valueFormatting": ""
},
"navigation": {
    "menuVisibility": {
        "back": true,
        "axisXChange": "All",
        "axisYChange": "All",
        "filter": "All",
        "reset": true,
        "widget": true,
        "others": "All"
    },
    "selectionMode": "disabled"
},
"events": {},
"filtering": {},
"hooks": {}

}

ic3 ic3 · Accepted Answer · 2019-11-22T14:35:23

Sorry for the late answer, out of the box it's not possible but you can use hooks to change the javascript options sent to amcharts.

JS / On Widget Options :

function(context, options, $box) {
    const bands = [
                {
                    "color": "#00CC00",
                    "endValue": 300000,
                    "id": "GaugeBand-1",
                    "startValue": 0
                },
                {
                    "color": "#ffac29",
                    "endValue": 600000,
                    "id": "GaugeBand-2",
                    "startValue": 300000
                },
                {
                    "color": "#ea3838",
                    "endValue": 900000,
                    "id": "GaugeBand-3",
                    "innerRadius": "95%",
                    "startValue": 600000
                }
            ];
    options.axes[0]["bands"] = bands;
    return options;
 }

This should work

icCube gauge with multiple band colors

1 Answers