SharePoint 2010 Chart Web Part

On a recent project I got to work with the out-of-the-box (OOTB) Chart Web Part in SharePoint 2010. My team just needed to chart some simple data, nothing fancy, but we had some fairly specific styling requirements. We tried Web parts from other vendors they already had and got close, but we just couldn’t get there. 

Luckily we were upgrading to Enterprise anyway, so that allowed us to use the Chart Web Part that comes with SharePoint OOTB. Unfortunately (depending on your point of view), this Web part has been removed from SharePoint 2013. You can find all of the deprecated features listed here. Microsoft’s vision for BI and reporting is shifting more to Excel Services: “Similar features can be used with other applications, such as Excel Services.”

Fortunately, we were using SharePoint 2010 in this environment. In working through getting it configured with all the styling I needed, I wanted to share a couple quick and easy tips regarding this powerful little Web part.

Quick Tip #1: Export the Chart Web Part in SharePoint 2010

I configured this Web part in a development environment, and after I spent a good amount of time setting all the various hidden advanced properties for this Web part, I wanted to move this to the production environment. When you go to edit the Web part and look for the export option, it’s not there.

SNAGHTML8e98821

We can easily add it back. I believe there are a few Web parts that won’t work if you export them, but luckily this one does. So edit the Web part properties, and under Advanced, look for "Export Mode" as shown below.

image

Change this to “Export all data” and click OK. Now you can export the Web part and import it to your other environment.

image

Quick Tip #2: Hide the Toolbar in the Chart Web Part with CSS (Data & Appearance / Advanced Properties)

This Web part was going to be on the intranet home page, not interactive, and sit in a small fixed sized box, so there was no need for the toolbar. There are already a few documented ways to remove it, either by editing the Web part in SharePoint Designer (my page was based on a page layout, so no help there), or by using Javascript / JQuery (I wanted a no-code solution). I used CSS to do this, it’s quick and easy.

Using either IE F12 or Firefox Firebug, find the parent table that has the class of ms-menutoolbar. That’s the guy we want. That is the toolbar in Web parts that shows up like it used to in 2007.

image

If there are no other Web parts on the page that use the toolbar, you can add this CSS:

.ms-menutoolbar {display:none;}

Depending on where you use it, you might have to wrap it in a style tag, use a content editor Web part, or create a CSS file. If you want to target the Web part only, then we need to make one change. In the screenshot above, notice the id tag on the div class ms-WPBody. That is the main ID of the Web part that you can reference in CSS that we can use to make the change in this Web part only: 

#WebPartctl100_m_g_23f423ee_7312_4ae9_a1d5_ee3810495710 table.ms-menutoolbar {display: none;}

image

Voilano toolbar!

If you would like more information on C5 Insight or this blog content, fill out our
Contact form.