Linking chart to view - Modern Experience

Dashboard Designer
1

Hi,

I followed this demo example.

var handlers = {};
handlers.preRender = function (config, logger) {
logger.debug('Configuration: ', config);

config.title.font = "21pt Segoe UI";

var filtrationApplied = false;

config.plotAreaClick = function (e) {
    if (!filtrationApplied) {
        window.location.hash = '';
    }

    filtrationApplied = false;
}

config.seriesClick = function (e) {
    if (ctx && ctx.clvp) {
        var filter =
          'FilterField1=Supervisor-FilterValue1=' + e.dataItem.__proto__.Supervisor;

        window.location.hash = 'InplviewHash' +
        ctx.clvp.wpid + '=' + encodeURIComponent(filter);

        filtrationApplied = true;
    }
}

return true;

}

Did get a CORS error:
image

Putting this direct in browser;
https://SomeTenant.sharepoint.com/sites/StartCardsandSWMS/#InplviewHashc8fbf2b6-dc36-4a91-b6b0-2e77a5224bfd=FilterField1=Supervisor-FilterValue1=Li%20Chen

Loads with these errors:

image
image.png954×317 34.4 KB

OnClick is working.
As a work around I’m using href and opening a full filtered list. Code below works fine.
However, I’d like to stay on the dashboard.

var handlers = {};
handlers.preRender = function (config, logger) {
logger.debug('Configuration: ', config);

config.title.font = "21pt Segoe UI";
config.seriesClick = function (e){ window.location.href = 
    'https://SomeTenant.sharepoint.com/sites/StartCardsandSWMS/Lists/Start%20Card%20%20General%20Survey/AllItems.aspx?useFiltersInViewXml=1&FilterField1=Supervisor&FilterValue1=' 
    + e.dataItem.__proto__.Supervisor + '&FilterType1=User&viewid=c8fbf2b6-dc36-4a91-b6b0-2e77a5224bfd'}

return true;

}

I'd like to confirm, before I spend too much time looking into it, is linking a chart to a view possible in O365 modern experience? Chart and List View are both modern webparts. Multiple charts on the page, only a single list view webpart. Seems the server says no?

2

Dear @AdamSmith,
You can try filtering the modern list with default filtering functionality:
image
This will give you a URL which you need to construct with the chart:

image
image.png988×25 2.97 KB

You do not need a hash at all, like you did with the classic lists, so the code might even be simplified. I don't think the errors are related to the issue at hand, most likely they're something, and the filter value simply doesn't work, because it's not connect for modern list.

3

Interessant.

Have you a complete documentation of objects like config, events, ... that we can use in
chart "advanced" ?
*
thanks

4

Dear @Christophe,
This section is about advanced section of Data Source - https://plumsail.com/sharepoint-charts/documentation/advanced/

There are examples of how it can be used, for example, this aggregation and sorting example - https://plumsail.com/sharepoint-charts/documentation/configure-aggregation-sorting/ But it's still mostly comes down to trial and error, or careful planning, as each case is unique.

This section is about advanced section Dashboard - https://plumsail.com/sharepoint-charts/documentation/advanced-2/

It is rather lackluster on its own, but it contains links to kendo documentation with much more detail, be sure to check it out!