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!

5

Hello @Nikita_Kurguzov,

Similar to this post, I would like to create a hyperlink for each individual bar on my chart. However, I am unable to find anything that will allow me to link an individual item in a series. Is there such an event, method, or other manner in which I could hyperlink a file from a Document Library to each row in the bar chart?

Thanks, Rhonda

6

@rhonda,

You will need to build a link for each series or add a condition.

Please learn more about seriesClick event in the documentation:

7

Hi @Margo,

I tried to use seriesClick, but was not able to select a specific bar in the chart. Every bar opened the same document regardless of the link.

I tried a for loop to get the appropriate bar in the chart with the below code to attempt to isolate a specific bar, but no luck.

i.seriesClick = "https://mysite/sites/...";

Any other documentation on this that you have? Or can you point me in the right direction using seriesClick but isolating a specific bar on the chart?

Thanks, Rhonda

8

@rhonda,

You can add a condition inside the function like so:

config.seriesClick = function(e) {
    if (e.dataItem.__proto__.Title == 'Plumsail') {
        window.location.href = "https://plumsail.com/";
    }
    if (e.dataItem.__proto__.Title == 'Community') {
        window.location.href = "https://community.plumsail.com/";
    }
}