Playing With Plasticine

Creating graphs in share point Using designer and silverlight

A lot of my customers want to view their share point contents in a “BI sexy way” on their site.

The common dream is about having a graph that will show high level information about a list, on real time. This article will show how to create such graph, with data view that uses Visifire Silverlight graph tools.

Our sample will be an "action items" list graph that shows the count of different status:

Step 1: Take resources from Visifire site

Download resources

1.       Download visifire resources zip file (first link on page).

2.       Upload SL.Visifire.Charts.xap and Visifire2.js to a library on your site, where your users have read permissions.

Design your graph

1.       Go to the Silverlight chart designer page in visifire.com.

2.       Create a mockup of your requested chart.

3.       Click on “View HTML”

4.       Copy the code between <!-- To embed in existing html copy the code below --> <!-- Copy till here --> to an new designer page.

Step 2: initial your data view web part

Create the data view

I’m not going to show the web part creation here, the best instructions for doing that are located in CIzi’s blog “My First Data View”.

Please note:

-          Insert the title in multiple items view

-          In data view properties, under “paging”, mark “display all items”

Do your calculations

The logic: we will create new parameters that will be the result of our wanted calculations. In this sample, we will tell the "data view" to go to over all items and to count each status items.

Under <xsl:template name="dvt_1"> add new parameters with your requested calculations.

-          Use the Xpath builder to assist in the calculation writing.

-          In the calculation, use /dsQueryResponse/Rows/Row in order to go through all items.

-          If you are dealing with string values, add normalize-space to the calculation.

For our sample:

<xsl:variable name="CompletedCount" select="count (/dsQueryResponse/Rows/Row [normalize-space(@Status) = 'Completed'])" />

Delete/ replace irrelevant tags

To select a tag, right click a tag name and choose select tag. Then, delete/ replace it.

On dvt_1 template:

-          Delete the <xsl:call-template name="dvt_1.body"> tag

-          Replace the <tr> tag with :

Out of dvt_1 template:

-          Delete <xsl:template name="dvt_1.body"> tag

-          Delete <xsl:template name="dvt_1.rowview"> tag

It should look like that:

Step 3: modify visifire HTML

Link to the right resource

Modify the links to resources so they have the path to their location in your SharePoint library. For example:

src="Visifire2.js”   >    src="../SiteResources/Visifire2.js"

Visifire2("SL.Visifire.Charts.xap" > Visifire2("../SiteResources/SL.Visifire.Charts.xap"

Add JS variables to connect between XSL and graph

All the variables that we created on step 2 calculations, have to be read by the graph JS. So we will “translate” it:

-          Under <script language="javascript" type="text/javascript"> line, add new variable for each calculation variable in the XSL. for example:

Put your variables into place

Replace the Yvalue with your new variables:

The whole code should look like that:

Insert modified code

-          Copy the modified HTML under the <!-- Graph Code --> in the data view XSL.

Step 4: E Viola!

-          Save and publish if needed

-          Your new graph is ready J