Guidance on how to configure Dynamic Data Binding in UI Builder for Data Vizualisation component

Inactive_Us1370
Mega Contributor

‎08-21-2022 01:24 AM

Folks

I'm trying to configure a stacked bar data visualisation in UI Builder. I want to use dynamic data binding to a Client State Parameter that I have defined, initially with static JSON configured as the initial client state parameter value.

The config of this component requires the following settings, all of which can be set by dynamic data binding:

1) Data source
2) Metric
3) Group by

I'm reading the documentation on the Dev site which details the wide range of settings for this component. What I'm struggling with is the creation of a JSON sample that has the right structure and content to populate the three required settings listed above.

Here's what I have (I've tried a few combos):
{
"all_issues": {
"heading": "Issue Metrics Breakdown",
"metrics": [
{
"state": "Open",
"severity": "High",
"count": 3
},
{
"state": "Open",
"severity": "Medium",
"count": 4
},
{
"state": "Open",
"severity": "Low",
"count": 5
},
{
"state": "Closed",
"severity": "High",
"count": 3
},
{
"state": "Closed",
"severity": "Medium",
"count": 4
},
{
"state": "Closed",
"severity": "Low",
"count": 5
}
]
}
}

I'd be really grateful for any guidance on how to do this, perhaps by sharing a JSON sample that correctly drives this component.

Many thanks
Andy

Labels:
0 Helpfuls
  • 2,147 Views
2 REPLIES 2

Brad Tilton
ServiceNow Employee
ServiceNow Employee

‎08-22-2022 06:14 AM

In Tokyo we improved the demo data with some of the components including the data viz, so here's the oob JSON you get for a stacked bar chart:

[
    {
        "data": [
            {
                "assignment_group": "(empty)",
                "value": "28"
            },
            {
                "assignment_group": "Service Desk",
                "value": "12"
            },
            {
                "assignment_group": "Hardware",
                "value": "9"
            },
            {
                "assignment_group": "Software",
                "value": "9"
            },
            {
                "assignment_group": "Network",
                "value": "6"
            },
            {
                "assignment_group": "Database",
                "value": "2"
            },
            {
                "assignment_group": "Openspace",
                "value": "1"
            }
        ],
        "metadata": {
            "dataSourceLabel": "Incident",
            "eventData": {
                "table": "incident"
            },
            "groupBy": [
                {
                    "series": [
                        {
                            "id": "value",
                            "type": "value",
                            "label": "Incident"
                        }
                    ],
                    "elements": [
                        {
                            "eventData": {
                                "query": "assignment_group="
                            },
                            "id": "",
                            "label": "(empty)"
                        },
                        {
                            "eventData": {
                                "query": "assignment_group=d625dccec0a8016700a222a0f7900d06"
                            },
                            "id": "d625dccec0a8016700a222a0f7900d06",
                            "label": "Service Desk"
                        },
                        {
                            "eventData": {
                                "query": "assignment_group=8a5055c9c61122780043563ef53438e3"
                            },
                            "id": "8a5055c9c61122780043563ef53438e3",
                            "label": "Hardware"
                        },
                        {
                            "eventData": {
                                "query": "assignment_group=8a4dde73c6112278017a6a4baf547aa7"
                            },
                            "id": "8a4dde73c6112278017a6a4baf547aa7",
                            "label": "Software"
                        },
                        {
                            "eventData": {
                                "query": "assignment_group=287ebd7da9fe198100f92cc8d1d2154e"
                            },
                            "id": "287ebd7da9fe198100f92cc8d1d2154e",
                            "label": "Network"
                        },
                        {
                            "eventData": {
                                "query": "assignment_group=287ee6fea9fe198100ada7950d0b1b73"
                            },
                            "id": "287ee6fea9fe198100ada7950d0b1b73",
                            "label": "Database"
                        },
                        {
                            "eventData": {
                                "query": "assignment_group=36c741fa731313005754660c4cf6a70d"
                            },
                            "id": "36c741fa731313005754660c4cf6a70d",
                            "label": "Openspace"
                        }
                    ],
                    "id": "assignment_group",
                    "fieldType": "reference",
                    "label": "Assignment group"
                }
            ],
            "format": {
                "unitFormat": "{0}"
            },
            "aggregateBy": 4,
            "metricId": "ZEdGaWJHVnBibU5wWkdWdWRERTJORFl5TXpRMk5qYzBORE09MTY0NjIzNDY2OTQzMw=="
        }
    }
]

Not sure if this helps since it looks like you're on San Diego and this component was updated from SD to Tokyo.

0 Helpfuls

Sharique Azim
Mega Sage

Tuesday

Hello @Brad Tilton  and @Inactive_Us1370 ,
I had a similar question here in https://www.servicenow.com/community/next-experience-forum/how-to-display-stacked-bar-graph-from-cus... 

Could you please have look in my question and please help me out.

Shariq

0 Helpfuls