Hiding Toolbars in the SharePoint 2010 Chart Web Part

SharePoint Server 2010 ships with a nifty Chart web part that displays visual data from a number of sources – SharePoint lists, BDC, Excel services, etc. It’s a handy control and one that was sorely missing from the 2007 version. It provides a number of chart options, including pies, lines, bars, cones, scatters, etc. in both 2D and 3D. Neat…but (and there’s always a ‘but’)…it has one very annoying characteristic that drives site administrators crazy. When you drop it onto the page, it displays a toolbar with links for "Data & Appearance" and "Advanced Properties" to everyone with more than basic read permissions, like so:

We certainly don’t want everyone to see that – too much temptation to click on those links and blow up our pretty little graphs. Well, ok, should be easy enough to turn that off, right? Wrong.

Somebody, somewhere, forget to include the ubiquitous hide toolbar switch that’s on most other out of the box web parts. While trying to figure out a workaround for this nice little undocumented feature, I came across a lot of links to this blog post by Nick Grattan in which he suggests editing the page in SharePoint Designer and changing the web part properties manually in the markup. That’s all well and good but anyone who has ever heard me speak at a conference knows that I am not exactly the world’s biggest fan of using SPD to edit pages (that may be understating it a bit, sort of like saying the Pope is a little bit Catholic or Texas gets a bit warm in the summertime). So what to do?

Instead of hobbling performance by saving my page markup in the content db via SharePoint Destroyer, I instead opted for a little bit of JavaScript trickery to solve the problem. Turns out the chart web parts renders the toolbar content in a very predictable pattern:

The < span > tag in which the toolbar resides is followed by an < img > tag that has a link to a specific page used to render the chart preview image. The < span > also follows an < input > control that is the first child of the parent < div >. That should be easy enough to find in the DOM and just unique enough to insure we don’t turn off any other web part toolbars we might want. So, the following script, when added to the page in a hidden Content Editor web part, will hide those pesky toolbars by doing just a little bit of DOM walking:

< script type="text/javascript" >
var arr = document.documentElement.getElementsByTagName("img");
for (var i = 0; i < arr.length; i++)
{
    var imgSrc = arr[i].src;
    if (imgSrc.indexOf("ChartPreviewImage") != -1)
    {
        var parent = arr[i].parentNode;
        parent.childNodes[1].setAttribute("style","display:none");
    }
}
< / script >

If you prefer to use JQuery for messing around with the page DOM that works just fine as well (and probably with half as much code). Unfortunately, it means we have to add the content editor and script to every page our chart web parts are on, but it’s better than saving the entire page back to the content DB in Designer.

Problem solved.