Link chart to a SharePoint list

[Riftsan]

Hello,

I was following these instructions:

Link chart to a SharePoint list | Plumsail

I was trying to do the same configuration as described on the guide but I was not able to get it to work. Instructions are not clear on all the steps to configure the graph correctly. I am using O365 I tries this on modern and classic experience with no luck.

In the guide it states "Under the chart I put the list of issues" but it doesn't say how, which steps were taken. Lots of confusion to how you can add the list. There is also multiple ways you can add a list to a page.

The way I'm trying to get this to work is by adding my graphs to a web-part aspx page and adding the list at the bottom. I am not using the actual list page and adding the dashboard on top. There is also multiple configurations to the actual list webpart that could be changed these are not really specified.

I did get to the point where the click events work when clicking the graph series but the filtering does not work. The guide does not inform you if this type of filtering works on O365/SharePoint online.

I spent about a day trying to get this to work and I just got frustrated. I will attempt again another day.

If I am doing something wrong or if there is different instructions I should follow for SharePoint Online let me know.

[Nikita_Kurguzov]

Dear @Riftsan,
The way you add a list shouldn't be too important here, as this filtering should be applied in any case. It functions identically to the default filtering (when you click on the small arrow near the column name, and select the values that you want to show in the list view).

What you need to make sure are:

1. That you have the correct {ViewId} in the

window.location.hash = 'InplviewHash' + ctx.clvp.wpid

Here it's just the example with getting List ViewId from the context (ctx.clvp.wpid), but you can retrieve this {ViewId} manually if this doesn't help. Simply go to the page with the Chart and the List View, and before applying any filtering with the Chart, check the URL, ensure that it has no filtering yet, then click on the small arrow near any of the columns in the List View and select some value.

This will automatically apply filtering to the List View, and you'll be able to retrieve this ID from the URL. Just search for #InplviewHash in the page URL, and you'll find right after that, but before Filter Fields.

2. You need to make sure that you use correct Internal Field names in your code, in this part:

   var filter =
   'FilterField1=AssignedTo-FilterValue1=' + e.dataItem.AssignedTo + '-' +
   'FilterField2=Status-FilterValue2=' + e.dataItem.Status;

The Internal Names can be found in CAML query in Dashboard Designer -> Data Source/SharePoint List tab:

3. Last, you need to make sure that URL changes properly when you click on the Chart.

Once again, you can find filter values in URL's hash. Make sure that the URL changes at all when you click the Chart, otherwise you might need to check browser's console for JavaScript errors.

If the List ViewId matches the default one in #InplviewHash, Internal Field names match the List Fields names in Filter Fields, and the values display correctly, the filtering should work.

In conclusion:

Go ahead, test these out, and you'll definitely find what goes wrong, and what needs to be fixed. Remember, you can always filter list manually and compare this filtering to DD filtering. There's nothing more to it, really.

Hope this helps! Let me know how it goes, if you get stuck or find a solution, in any case, we'll be happy to answer any questions you might have.

[Riftsan]

Thanks for your help. I was able to filter the list and fixing my mistakes on the filter query. I do have one last problem though. When I click one of the graph bars it does change the URL to the right filters but it doesn't update the list on click. If I copy the URL and paste it on a new tab it works as expected. It is as if the list doesn't reload with the filters applied.

I have also applied these filters manually by placing them on the URL and it works as expected.

I did check for console errors and I am getting "Unable to get property 'SharePoint' of undefined or null reference" every time i click a graph bar.

At this time I am only interested in filtering by ReviewerName and the query that is working is:

(Example) - https://office365url/sites/sitecollection/Dashboard.aspx?#InplviewHash0991eeee-06c2-4709-b3d0-d57209588d74=FilterField1%3DReviewer_x0020_Name-FilterValue1%3DTeresa%20Chavez

the dashboard advance code is as follows:

var handlers = {};
handlers.preRender = function (config, logger) {
    logger.debug('Configuration: ', config);
 
    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=Reviewer_x0020_Name-FilterValue1=' + e.dataItem.Reviewer_x0020_Name;
            window.location.hash = '#InplviewHash' +
            ctx.clvp.wpid + '=' + encodeURIComponent(filter);
 
            filtrationApplied = true;
        }
    }
 
    return true;
}

Internet explorer console:

On firefox console:

[Nikita_Kurguzov]

Dear @Riftsan,
Hmm… That’s indeed very strange. Can you try the same in Google Chrome, perhaps the issue is with the browser? Though it should work in all browsers, including IE11.

Finally, you can try adding location.reload(); to check if refreshing the page works. Though this might require storing variable filtrationApplied in session storage, like this:

var handlers = {};
handlers.preRender = function (config, logger) {
    logger.debug('Configuration: ', config);
 
    config.plotAreaClick = function (e) {
        if (!sessionStorage.getItem('filtrationApplied')) {
            window.location.hash = '';
        }
 
        sessionStorage.setItem('filtrationApplied', 'false');
    }
 
    config.seriesClick = function (e) {
        if (ctx && ctx.clvp) {
            var filter =
              'FilterField1=Reviewer_x0020_Name-FilterValue1=' + e.dataItem.Reviewer_x0020_Name;
            window.location.hash = '#InplviewHash' +
            ctx.clvp.wpid + '=' + encodeURIComponent(filter);
 
            sessionStorage.setItem('filtrationApplied', 'true');
            location.reload();
        }
    }
 
    return true;
}

[Riftsan]

Thanks for your reply. I changed to what you suggested and it works only on IE but it refreshes the whole page not just the list. I tried it on Firefox and chrome and it doesn’t do anything when clicking the bars. On Firefox it only adds a “#” at the end of the url and no console errors on Firefox and chrome.

[Riftsan]

Actually scratch the issue with not working on firefox and chrome. I cleared cache and settings and it works now. my only concern now is if we can make the list reload and not the page? It reloads all the dashboards when clicking the bars.

[Riftsan]

Antoher issue i've encounterd is the position of the pie charts. when the page loads ether the right or the left charts are offset from the screen for a few seconds. They position back to the right place but it takes some time for that to happen. What I did to position these inline was creating two zones side by side and then dropping the dashboard webpart.

like so:

this is the problem I am encountering:

[Nikita_Kurguzov]

Dear Rift,
Regarding the issue with scale - you can try to configure width for the specific web part, in Appearance, to set specific width. As for why it scales so - it most likely scales to fit the width of the page, but then the periodical refresh happens for the chart, and the width is recalculated:

For the filtering to work correctly without the page refresh (which is just a half measure), we need to figure out what is the error what appears in JavaScript when you click on the chart. Most likely this prevents filtering script from running properly.

Please, remove location.reload(); from the Advanced code, open the console, click on the chart, and try to find out where does the error come from. You should be able to click on the error to see more about it.

[Nikita_Kurguzov]

Dear Rift,
We've figured out the issue with filtering. The issue is adding Dashboard Designer as a web part. Instead, go to Site Contents -> click on Dashboard Designer and follow the instruction on adding charts to classic pages (you'll need to login again there):

You can export configuration from the existing chart, and then delete this webpart from the page:

With the classic Web Part, the filtering should work as expected.

[Riftsan]

Hello,

I tried all of the above:

From a webpart page I do not see the dashboard icon to add from the insert ribbon:

I also tried on a wiki page and I don't see the icon ether:

I created a modern site page and with that I was able to select from the plus sign and added the dashboard configured it by importing the settings and removed the reload method.

the problem here is that the on click events do not work. I also saw no console errors.

Just to make sure.. I redeployed the application and verified all the settings we verified on a issue we worked on yesterday for plumsail forms. I checked site features and site collection features to see if anything needed to be turned on for the icon to appear but didn't see anything.

I also checked site contents and didn't see a dashboard option like there is one for forms designer. like so:

Remember that this is on SharePoint Online. Not sure if you sent those screenshots from on-prem sharepoint.

Thanks!

[Riftsan]

In regards to the pie charts not aligning correctly… I removed the refresh option and now they just stay off screen. I rather have refresh back so I don’t loose “live data” and it positions itself after few seconds. What does fix it is asigning a width and height on the webpart itself. This is really no ideal since I had already created two zones in line so that the webpart can be 100% but there seems to be an issue with how it renders it. If i keep the size statically on the webpart I will loose mobile experience too .

[Nikita_Kurguzov]

Dear Rift,
Sorry about that. You first need to add Dashboard Designer from the store for the classic chart option, then it would appear in Site Contents and allow you to configure filtering without refreshing the window.

The issue with Modern Web Part is that it seems to bring some of the Modern UI scripts to the page, and that breaks the default filtering.

If you follow these steps, you should be good:

1. Go to Site Contents, select add new app and go to SharePoint Store
2. Find Dashboard Designer from Plumsail and add it to the site
3. Wait for installation to complete and click on Dashboard Designer in Site Contents
4. Complete login there, and you should be able to add classic web part
5. Transfer all the configuration and the filtering should work

Let me know how it goes!

[Riftsan]

Any thoughts on the issue with the dashboard rendering off screen? @Nikita_Kurguzov

[Riftsan]

I'm testing the dashboard on click events on the classic chart option and it doesn't work. I added the app the way you advised, imported the settings and added the dashboard to the page.

on chome console i get:

and the dashboard doesn't even load it keeps spinning.

IE (10 default):

dashboard loads click event work but do not reload the list data. (It does work if I copy and paste the url that the click event created)

IE 11:

Dashboard doesn't load, page crashes.

Firefox:

Dashboard loads sometimes, or keeps spinning. Click work but it only appends "#" at the end of the URL.

[Nikita_Kurguzov]

Dear Riftsan,
Do you by any chance have both types on the same page? This might be what is causing the issue with loading, and perhaps even filtering - the second chart still interferes. They both must be added the same way - through this button:

P.S. As for the error with size - I can’t say for sure. When the page opens, for some reason, it assumes that there is more space available than there really is. Then, it re-scales on update. Please, check for custom CSS or maybe even JS, perhaps there is something happening when the page loads.

[Riftsan]

OK. That worked. Changing all dashboard to classic fixed the filtering issue. There isn’t any css or js attached to this page so im not sure what is causing it. Ill look and see if I can hack it. Thanks for all the help again.

[Riftsan]

@Nikita_Kurguzov Out of curiosity, how would you recommend putting two charts inline?

[Nikita_Kurguzov]

Dear Rift,
Curious on what you mean - I thought you had it pretty nicely done here, no?

If you can show us a screenshot, this might help!

[Riftsan]

Hello,

I was more interested in knowing if there is a better way to do what I have but without the dashboard going offset the screen? Currently it works only if I have the refresh option ON. If i remove it it will stay off the screen. Is this normal? How should I position the charts so that this doesn't happen? I tried putting them in a table and they don't drop on cells. Just trying to figure out if you know of a best practice on how to make this work effectively.

[Nikita_Kurguzov]

Dear Riftsan,
Honestly, not sure what could be causing it. We've tested different browsers, different chart types, using Table, etc. - no luck in reproducing the issue.

Which browser are you using? Could you export chart data and configuration for us, so we can test these specific charts ourselves?