Custom Bar Chart - Data Point Colours

[paramjit_s]

I am creating a custom bar chart using sampleBarChart to show duration of my tests, in addition in need to show passed and failed tests using different colours for each bar. 

These are my data roles in capabilities.json . The Legend data role will contain the result for each test.  

    "dataRoles": [
        {
            "displayName": "Category Data",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "Measure Data",
            "name": "measure",
            "kind": "Measure"
        }, 
        {
            "displayName": "Legend", 
            "name": "series", 
            "kind": "Grouping"
        }
    ],

Current data view mapping. 

 "dataViewMappings": [
        {
            "conditions": [
                {
                    "category": {
                        "max": 1
                    },
                    "measure": {
                        "max": 1
                    }
                }
            ],
            "categorical": {
                "categories": {
                    "for": {
                        "in": "category"
                    }
                },
                "values": {
                    "group": {
                        "by": "series", 
                        "select": [
                            { "for": {
                                "in": "measure"
                            }}
                        ]
                    }
                
                }
            }
        }
    ],

Current code doesn't plot any bars on the chart.  However in the dataview of the custom visual online this is what it shows. 

 

Under categories each test ID is shown seperately and under values it groups the durations into two groups passed and failed.

I have not made any other changes to the code. If someone could please help me show the duration of each test and set colour of each bar according to whether that particular test has passed or failed. I have been able to achieve this in the native column chart of Power Bi but I need to be able to do the same in this custom visual because i need to make more changes to this chart.

[v-viig]

Hello @paramjit_s

You need to update visualTransform function in order to enumerate groups as well (categorical.values.grouped()).

Every category should be assigned to a proper group.

Please let me know if you have any further questions.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[paramjit_s]

Hi @v-viig, 

Thanks for replying.

I did figure out that I need to make changes to the visualTransform function and eumerate groups into it. Howvever, I am unable to figure out how exactly to do that. 

Is it possible for you to give me an example on how I would assign a group to a category, so that I can try to apply that to my project.

Thanks again for the help. 

Paramjit S

[v-viig]

Please take a look at this sample code.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[paramjit_s]

Thank you very much for the sample code. It was a great help in my project.

There's a slight issue I am having, the bars are grouped in a way in which when I try to perform implict sort on them (by date), they are sorted while remaining in their respective groups.

Could you please guide me on how to solve this issue?

Thank You

Paramjit S

[v-viig]

How do you sort columns? Could you please share your snippet code?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[paramjit_s]

I just added another data role and then applied implicit sorting on it in capabilities.json. 

This is an example of data that goes into this datarole, 2017-03-17 12:27:00.000. 

{
      "displayName": "Sort By", 
      "name": "sort", 
      "kind": "Measure"
}

"sorting": {
        "implicit": {
            "clauses": [
                {
                    "role": "sort",
                    "direction": 1
                }
            ]
        }
    }

[v-viig]

Did you include this column into dataViewMappings.categorical.categories?

It should look like this:

"categorical": {
    "categories": {
        "select": [
            {
                "for": {
                    "in": "category"
                }
            },
            {
                "for": {
                    "in": "sort"
                }
            }
        ]
    },
    "values": {
        "group": {
            "by": "series",
            "select": [
                {
                    "for": {
                        "in": "measure"
                    }
                }
            ]
        }
    }
}

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[paramjit_s]

Yes I did include it in the dataViewMappings like how you did above but unfortunately it is still not sorting the columns quite right. They are being sorted while still remaining in their groups, I need to seperate them somehow.

Paramjit S

[v-viig]

I apologize. There's a mistake in my example above.

This is the fixed one:

{
    "dataRoles": [
        {
            "displayName": "Category Data",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "Measure Data",
            "name": "measure",
            "kind": "Measure"
        },
        {
            "displayName": "Legend",
            "name": "series",
            "kind": "Grouping"
        },
        {
            "displayName": "Sort order",
            "name": "sort",
            "kind": "Measure"
        }
    ],
    "dataViewMappings": [
        {
            "conditions": [
                {
                    "category": {
                        "max": 1
                    },
                    "measure": {
                        "max": 1
                    }
                }
            ],
            "categorical": {
                "categories": {
                    "for": {
                        "in": "category"
                    }
                },
                "values": {
                    "group": {
                        "by": "series",
                        "select": [
                            {
                                "for": {
                                    "in": "measure"
                                }
                            },
                            {
                                "for": {
                                    "in": "sort"
                                }
                            }
                        ]
                    }
                }
            }
        }
    ],
    "sorting": {
        "implicit": {
            "clauses": [
                {
                    "role": "sort",
                    "direction": 1
                }
            ]
        }
    }
}

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[paramjit_s]

Unfortunately that still does not solve the problem I am having. 

Just to clarify the problem isn't to do with sorting the columns. It is that when the columns are created in the visualTransform  function they are grouped in such a way so that when I try to sort them they are being sorted while remaining in their respective groups (passed, failed & incomplete).  

This is what the custom chart looks like for one of the tests. Blue represents failed, yellow incomplete and red passed. The columns are actually sorted in this chart by date but with the current code they are only being sorted within their groups and not as a whole chart.

This is the native PowerBi column chart representing the same test as above. The columns in this chart are sorted using the same field as the above chart. So I need to make my custom graph look like this one. 

Thank You 

Paramjit S

[v-viig]

I think that you should implement sorting for barChartDataPoints in visualTransform function.

In other words, you need to keep sorting index in BarChartDataPoint and use the sorting index to sort barChartDataPoints.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com