Reverse category and series data sources

[rjerin]

Hello

We have a list of ratings by different areas. + (positive) marks good practices, OK is fine and - (negative) is area for improvement, N/A does not apply for that area.

When I try to setup a bar chart I manage to get this result. I have no grouping in the Agregation section under Data source tab. I have 9 series entered in Chart section under Dashboard tab.

What I aim for is to show distribution of ratings by individual area.

Both charts do not reflect the data I presented in the table at the beginning.

Any help would be appreciated.

Thank you

[mnikitina]

Hello @rjerin,

Do you need a chart that look something like this?

If so, you second table looks like something you need, you only need to uncheck 'Stack Series' property in the Dashboard style tab:

[rjerin]

Hello @mnikitina

Yes, my last example or your example is what I need.
If I uncheck 'Stack Series' this is the result.

The table I presented in my first post was just an example of what kind of data I have in SharePoint list.

If I use that list to create a chart I get my first chart example. My second chart example is again just something I got requested of me, that was made in excel.

I guess I will have to make different kind of list to present the data. You probably also used different kind of list setup for your example.

[mnikitina]

@rjerin,

You can restructure the data with the code before using it to create a dashboard.
Add the code to the Data Source >> Advanced (please update it before using):

handlers.requestSuccess = function(data, logger) {
    var options = ['OK', '-', '+', 'N/A'];
    var areas = ['Area1', 'Area2', 'Area3'];
    var area;
    var newData = {};
    var newArray = [];

    areas.forEach(function(a) {
        newData['Area'] = a;
        area = a
        options.forEach(function(o) {
            count = data.items.reduce(function(r, ar) {
                console.log(ar[area])
                return r + +(ar[area] === o);
            }, 0);
            newData[o] = count;

        });

        Object.assign(newData, {
            NA: newData['N/A']
        })['N/A'];
        delete newData['N/A'];
        Object.assign(newData, {
            negative: newData['-']
        })['-'];
        delete newData['-'];
        Object.assign(newData, {
            positive: newData['+']
        })['+'];
        delete newData['+'];
        newArray.push(newData);
        newData = {}
        area = '';
    });
    data.items = newArray;
    return true;
}

And these are the setting of my dashboard:

[rjerin]

Hello @mnikitina

Thank you for your reply.

I updated the code with my actual columns.
When I select Process I receive:
ERROR - Request failed: TypeError: Object doesn't support property or method 'assign'

[mnikitina]

@rjerin,

What browser are you using?

[rjerin]

We are using Edge browser. This is default in our company.

So I went to check on Mozilla and Chrome and the result is this.

[rjerin]

Sorry, Edge has Internet Explorer mode active. We use some other apps and are not fully supported yet with newer browsers.
So IE part is causing that error.

[mnikitina]

@rjerin,

Yes, Object.assign() method is not supported in IE. You can try out the solution from this post or use modern browsers.

As for the dashboard, you must use the internal names of columns in this code line:

var areas = ['Area1', 'Area2', 'Area3'];

To check internal names, remove the custom code from the advanced tab, click process and click export origin

In the text file you find the internal names of columns:

[rjerin]

Ah yes, I should know to put internal names into the code.

I did the change, but still get the wrong chart result. The difference is now only in column names.

[mnikitina]

@rjerin,

Please remove all the custom code and export original data. Send the file to me, I'll check it on my side.

[rjerin]

Mnikitina helped me to the final solution. I am very grateful for the patience and all the help.

For anyone else trying to achieve similar result, this is the solution:

Last problem before I sent them my data was my fault not selecting correct value in each of the series. I had selected Count instead of Sum.

The code so far was OK.

Additionally, you can change the Category name to a more user-friendly text using the code:

newArray.forEach(function(i){
    if(i.Area == '_x0033__x002e__x0020_Splo_x0161_'){
        i.Area = 'New name'
    }
})

You must add a condition for each area name you have and paste the code before these lines:

    data.items = newArray;
    return true;

For IE error I added the code from the post below.

Getting Error: Object doesn't support property or method 'assign'

jquery, wordpress, popup, modal-dialog

And the final result visible also in IE: