Desember | 2007 | Paul Galvin's SharePoint Space

Oorsig:

(UPDATE 12/04/07: Nog 'n interessante hulpbron op die einde 'n skakel na 'n ander blog wat fokus op die middel van 'n baie interessante web deel)

This blog entry describes how to create a bar graph in SharePoint. This works in both WSS and MOSS environments as it only depends upon the data view web part.

Die algemene benadering is soos volg:

Maak 'n lys of dokument biblioteek wat bevat die data wat jy wil grafiek.
Plaas die gepaardgaande dokument biblioteek / persoonlike lys op 'n bladsy en skakel dit om na 'n data view web deel (DVWP).
Verander die DVWP se XSL HTML wat wys as 'n grafiek te genereer.

Besigheid scenario / Setup:

Ek het 'n persoonlike lys met die standaard titel kolom en een addisionele kolom, "Status". This models (baie simplisties) an "Authorization For Expense" scenario waar die titel verteenwoordig die projek en die Status 'n waarde uit die lys van:

Voorgestel
In Proses
Oorreed

Die doel is om 'n interaktiewe horisontale bar grafiek wat hierdie status kodes te produseer.

Ek het bevolk die lys en dit lyk asof hierdie:

Skep Data View Web Deel:

Skep die DVWP deur die toevoeging van die persoonlike lys na 'n bladsy (webwerf bladsy in my geval) en volg die instruksies hier (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Benewens eenvoudig die skep van die DVWP, we also need to set the paging property to show all available rows. Vir my, dit lyk iets soos hierdie:

Op hierdie punt, I always close SPD and the browser. I then re-open the page using the browser. This avoids accidentally mucking up the web part layout on the page.

Verander die XSLT:

Dit is nou die tyd om die XSLT te wysig.

I always use visual studio for this. (Sien hier vir 'n belangrike opmerking oor IntelliSense wat sal help om 'n baie).

Ek skep 'n leë projek voeg vier nuwe lêers (replacing the words "Original" and "New" soos toepaslik):

Original.xslt
New.xslt
Original Params.xml
Nuwe Params.xml

In my geval, Dit lyk soos volg:

Modify the web part and copy the params and XSL to the "Original" weergawe in Visual Studio.

Die doel hier is om te veroorsaak dat die XSL die resultate wat ons kry terug te transformeer van die DVWP navraag in HTML wat lewer as 'n grafiek.

Vir hierdie doel, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Om duidelik te wees, die volgende is bloot 'n voorbeeld; don’t type it or copy/paste into visual studio. I provide a full blow starting point for that later in the write-up). The following sample graph is rendered as per the HTML immediately following:

Ooreenstemmende HTML:

<html>
<liggaam>
<sentrum>
<tafel breedte = 80%>
<tr><td><sentrum>Horisontale Staafgrafiek</td></tr>
<tr>
<td align="center">
<table border="1" width = 80%>
<tr>
<td breedte = 10%>Oop</td>
<td><tafel Celvulling ="0" Celafstand ="0" border = 0 width = 50%><tr bgcolor = rooi><td> </td></tr></tafel></td>
</tr>
<tr>
<td breedte = 10%>Gesluit</td>
<td><tafel Celvulling ="0" Celafstand ="0" border = 0 width = 25%><tr bgcolor = rooi><td> </td></tr></tafel></td>
</tr>
<tr>
<td breedte = 10%>Oorreed</td>
<td><tafel Celvulling ="0" Celafstand ="0" border = 0 width = 25%><tr bgcolor = rooi><td> </td></tr></tafel></td>
</tr>
</tafel>
</td>
</tr>
</tafel>
</liggaam>
</html>

I used a dead simple approach to creating my bars by setting the background color of a row to "red".

Die wegneem is hier: Op die ou end, Al wat ons doen is die skep van HTML met rye en kolomme.

Sjabloon XSLT:

I’ve copied the XSLT that generates a horizontal bar graph. It’s fairly well commented so I won’t add much here except for these notes:

Ek het begin met die standaard XSL dat SharePoint Designer my gegee het toe ek die eerste keer die DVWP geskep.
Ek was in staat om dit af te sny van SPD se 657 lyne te 166 lines.
Ek het nie gemors rond met die parameters XML lêer (wat afsonderlik is van die XSL en jy sal weet wat ek bedoel wanneer jy na die DVWP verander homself; is daar twee lêers wat jy kan verander). Egter, ten einde dit te vereenvoudig, I did remove nearly all of them from the XSL. This means that if you want to make use of those parameters, you just need to add their variable definitions back to the XSL. That will be easy since you will have the original XSL variable definitions in your visual studio project.
You ought to be able to copy and paste this directly into your visual studio project. Toe, remove my calls and insert your own calls to "ShowBar".
Die boor werk af deur die skep van 'n <a href> soos hierdie: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Op die eerste, Ek het gedink ek sou nodig het om te voldoen aan 'n meer komplekse formaat: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, but in my environment that is not necessary. The List’s URL is passed to us by SharePoint so this is quite easy to generalize.

Hier is dit:

<xsl:style weergawe="1.0" sluit-gevolg-voorvoegsels="rs Z o s ddwrt dt msxsl" 
 xmlns:msxsl="urn:skemas-Microsoft-com:XSLT" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 
 xmlns:ASP="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 xmlns:die="urn:skemas-Microsoft-com:kantoor" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:dt="UUID:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:rs="urn:skemas-Microsoft-com:rowset" xmlns:Z="#RowsetSchema" 
 xmlns:ddwrt2="urn:frontpage:interne">
  <xsl:uitset metode="html" streepje="geen" />
  <xsl:desimale-formaat Nan="" />
  <xsl:stop naam="ListUrlDir"></xsl:stop> <!-- Ek moet dit 'n boor-down te ondersteun.  -->

  <xsl:sjabloon ooreenstem met="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20">
    <xsl:veranderlike naam="dvt_StyleName">Tabel</xsl:veranderlike>
    <xsl:veranderlike naam="Rye" kies="/dsQueryResponse / Rye / Ry" />
    <xsl:veranderlike naam="dvt_RowCount" kies="tel($Rye)" />
    <xsl:veranderlike naam="IsEmpty" kies="$dvt_RowCount = 0" />
    <xsl:veranderlike naam="dvt_IsEmpty" kies="$dvt_RowCount = 0" />

    <xsl:kies>
      <xsl:toe toets="$dvt_IsEmpty">
        Daar is geen data van die grafiek!<br/>
      </xsl:toe>
      <xsl:anders>

        <!--
          Die interessante dinge begin hier.

          Ons het 'n paar van die veranderlikes vir elke ry te definieer in die grafiek: totale aantal
          .
        -->
        <xsl:veranderlike naam="totalProposed" kies="tel(/dsQueryResponse / Rye / Ry[normaliseer-ruimte(@ Status) = 'Voorgestelde'])" />
        <xsl:veranderlike naam="percentProposed" kies="$totalProposed div $ dvt_RowCount" />

        <xsl:veranderlike naam="totalInProcess" kies="tel(/dsQueryResponse / Rye / Ry[normaliseer-ruimte(@ Status) = 'In proses "])" />
        <xsl:veranderlike naam="percentInProcess" kies="$totalInProcess div $ dvt_RowCount" />

        <xsl:veranderlike naam="totalStalled" kies="tel(/dsQueryResponse / Rye / Ry[normaliseer-ruimte(@ Status) = 'Oorreed'])" />
        <xsl:veranderlike naam="percentStalled" kies="$totalStalled div $ dvt_RowCount" />

        <!--
          Ons definieer ons HTML tafel hier.  Ek leen van 'n paar standaard
          .  Ek dink dit sal eer
          .
        -->
        <tafel wydte="100%" Celafstand="0" Celvulling="2"
styl="grens-reg: 1 soliede # C0C0C0; grens-bodem: 1 soliede # C0C0C0; grens-linker-styl: soliede; grens-linker-wydte: 1; grens-top-styl: soliede; grens-top-wydte: 1;">

           <tr>
            <td lyn="sentrum">
              <tafel grens="1" wydte="100%">

                <!--
                  Vir elke status wat ons wil grafiek, we call the "ShowBar" sjabloon.
                  Ons gee dit:
                  1. 'N etiket vir die ry.  Dit is omskep in 'n hyperlink.
                  2. Die persent (veranderlike van bo).
                  3. Die werklike veld naam van die kode van die onderliggende lys.  Dit
                     .
                  4. Gebied waarde aangepas is vir #3.
                  5. Totaal items van hierdie status kode (nie die groottotaal van al
                     ).

                  Dit stuur 'n <tr></tr> en die horisontale staafgrafiek lyn.

                  Ons noem hierdie sjabloon vir elke status kode wat ons wil sien.
                -->
                <xsl:call-template naam="Showbar">
                  <xsl:met-param naam="BarDisplayLabel" kies="'Voorgestelde ""/>
                  <xsl:met-param naam="BarPercent" kies="$percentProposed"/>
                  <xsl:met-param naam="QueryFilterFieldName" kies="'Status'"/>
                  <xsl:met-param naam="QueryFilterFieldValue" kies="'Voorgestelde ""/>
                  <xsl:met-param naam="TotalItems" kies="$totalProposed"></xsl:met-param>
                </xsl:call-template>

                <xsl:call-template naam="Showbar">
                  <xsl:met-param naam="BarDisplayLabel" kies=""Oorreed""/>
                  <xsl:met-param naam="BarPercent" kies="$percentStalled"/>
                  <xsl:met-param naam="QueryFilterFieldName" kies="'Status'"/>
                  <xsl:met-param naam="QueryFilterFieldValue" kies=""Oorreed""/>
                  <xsl:met-param naam="TotalItems" kies="$totalStalled"></xsl:met-param>
                </xsl:call-template>

                <xsl:call-template naam="Showbar">
                  <xsl:met-param naam="BarDisplayLabel" kies=""In proses""/>
                  <xsl:met-param naam="BarPercent" kies="$percentInProcess"/>
                  <xsl:met-param naam="QueryFilterFieldName" kies="'Status'"/>
                  <xsl:met-param naam="QueryFilterFieldValue" kies=""In proses""/>
                  <xsl:met-param naam="TotalItems" kies="$totalInProcess"></xsl:met-param>
                </xsl:call-template>

              </tafel>
            </td>
          </tr>
        </tafel>
      </xsl:anders>
    </xsl:kies>
  </xsl:sjabloon>

  <!--
    Hierdie sjabloon doen die werk van die vertoon van individuele lyne in die staafgrafiek.

    Jy sal waarskynlik nie die meeste van jou opstel hier.
  -->
  <xsl:sjabloon naam="Showbar">
    <xsl:stop naam="BarDisplayLabel" /> <!-- etiket om te wys -->
    <xsl:stop naam="BarPercent"/> <!-- Persent van die totale. -->
    <xsl:stop naam="QueryFilterFieldName"/> <!-- Gebruik om te spring na die soektog & filter -->
    <xsl:stop naam="QueryFilterFieldValue"/> <!-- Gebruik om te spring na die soektog & filter -->
    <xsl:stop naam="TotalItems" /> <!-- totale telling van hierdie barlabel -->

    <tr>

      <!-- Die bar etiket self. -->
      <td klas="MS-formbody" wydte="30%">

        <!--
          Hierdie volgende stel state bou 'n navraag string wat dit moontlik maak
          .
          Ons maak gebruik van 'n paar dinge wat hier:
          1. Ons kan slaag FilterField1 en FilterValue1 om 'n lys te filter op 'n kolom.
          2. SharePoint is verby 'n deurslaggewende maatstaf vir ons, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          Is dit nie XSL pret?
        -->
        <xsl:teks skakel-uitset-ontsnap="ja">
        <![CDATA[<a href ="]]></xsl:teks>
        <xsl:waarde van kies="$ListUrlDir"/>
        <xsl:teks skakel-uitset-ontsnap="ja"><![CDATA[?FilterField1 =]]></xsl:teks>
        <xsl:waarde van kies="$QueryFilterFieldName"/>
        <xsl:teks skakel-uitset-ontsnap="ja"><![CDATA[&FilterValue1 =]]></xsl:teks>
        <xsl:waarde van kies="$QueryFilterFieldValue"/>
        <xsl:teks skakel-uitset-ontsnap="ja"><![CDATA[">]]></xsl:teks>
        <xsl:waarde van kies="$BarDisplayLabel"/>
        <xsl:teks skakel-uitset-ontsnap="ja"><![CDATA[</1>]]></xsl:teks>

        <!-- Die volgende bietjie toon 'n paar nommers in die formaat: "(totale / % van die totale)" -->
        (<xsl:waarde van kies="$TotalItems"/> /

        <!-- Dit skep 'n lekker persent etiket vir ons.  Dankie, Microsoft! -->
        <xsl:call-template naam="percentformat">
          <xsl:met-param naam="persent" kies="$BarPercent"/>
        </xsl:call-template>)

      </td>

      <!-- Ten slotte, stoot 'n <td> tag vir die bar self.-->
      <td>
        <tafel Celvulling="0" Celafstand="0" grens="0"
wydte="{rond($BarPercent * 100)+1}%">
          <tr bgcolor="rooi">
            <xsl:teks skakel-uitset-ontsnap="ja"><![CDATA[&nbsp;]]></xsl:teks>
          </tr>
        </tafel>
      </td>
    </tr>

  </xsl:sjabloon>

  <!-- Dit is direk uit paar XSL Ek het in 'n MS sjabloon. -->
  <xsl:sjabloon naam="percentformat">
    <xsl:stop naam="persent"/>
    <xsl:kies>
      <xsl:toe toets="formaat-nommer($persent, "#, # # 0%;-#,##0%")= 'Nan'">0%</xsl:toe>
      <xsl:anders>
        <xsl:waarde van kies="formaat-nommer($persent, "#, # # 0%;-#,##0%")" />
      </xsl:anders>
    </xsl:kies>
  </xsl:sjabloon>

</xsl:style>

Die resultate:

Die XSL van bo genereer hierdie grafiek:

Boor af na die onderliggende data deur te kliek op die status kode:

Sluiting van gedagtes:

Dit kan veralgemeen?

Ek is mal oor hierdie grafiese konsep, but I hate the fact that I have to go in and do so much hand-coding. I’ve given a little thought to whether it can be generalized and I’m optimistic, but I’m also a little fearful that there may be a brick wall somewhere along the path that won’t offer any work-around. If anyone has some good ideas on this, maak asseblief 'n aantekening in die kommentaar of email my.

Vertikale Grafieke:

This is a horizontal bar graph. It’s certainly possible to create a vertical graph. We just need to change the HTML. I would start the same way: Create an HTML representation of a vertical bar graph and then figure out how to get that via XSL. If anyone is interested in that, I could be persuaded to try it out and work out the kinks. If someone has already done that, please let me know and I’ll gladly link to your blog 🙂

Ek dink wat 'n uitdaging met 'n vertikale grafiek is dat die etikette vir die grafiek is meer moeilik om te bestuur, maar beslis nie onmoontlik.

Field Name Gotcha se:

Daar is ten minste twee dinge om te kyk uit vir jou veld name.

Eerste, a field name with a space has to be escaped in the XSL. This will probably be an issue here:

        <xsl:veranderlike naam="totalProposed" 
 kies="tel(/dsQueryResponse / Rye / Ry[normaliseer-ruimte(@ Status) = 'Voorgestelde'])" />

If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":
   <xsl:veranderlike naam="totalProposed" 
 kies="tel(/dsQueryResponse / Rye / Ry[normaliseer-ruimte(@ Status_x0020_Code) = 'Voorgestelde'])" />
Tweede, en ek is 'n bietjie vaag op hierdie, but you also need to be on the alert for field name changes. If you name your field "Status Code" en dan later op, rename it to "AFE Status", the "internal name" does not change. The internal name will still be "Status Code" and must be referenced as "Status_x0020_Code". The "other resources" links kan help diagnoseer en regstel hierdie soort van probleem.

Oor daardie kleur:

I picked "red" because it’s pleasing to me at the moment. It would not be a big deal to show different colors so as to provide more than just a visual description of a number, but to also provide a useful KPI. Byvoorbeeld, if the percentage of "stalled" AFE se is > 10% dan wys dit rooi, otherwise show it in black. Gebruik <xsl:kies> om dit te bewerkstellig.

Ander Hulpbronne:

Bepaal die interne naam (en ander goeie inligting) vir die data in 'n lys: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
Wys al die data wat verskaf is deur SharePoint (die rou XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Kry die XPath uitdrukking van 'n spesifieke kolom: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
Nog 'n benadering met behulp van OWA(?). I have not dug into it, maar lyk belowend, veral vir sirkeldiagramme: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Gelukkig transformasie!

Skryf in op my blog!

Technorati Tags: SharePoint, DVWP, Data View Web Deel, XSL, XSLT, WSS, MOSS

Paul Galvin's SharePoint Space

maandelikse Argiewe: Desember 2007

Skep staafgrafieke in SharePoint