Skep staafgrafieke in SharePoint

17 antwoorde

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:

  1. Maak 'n lys of dokument biblioteek wat bevat die data wat jy wil grafiek.
  2. Plaas die gepaardgaande dokument biblioteek / persoonlike lys op 'n bladsy en skakel dit om na 'n data view web deel (DVWP).
  3. 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:

beeld

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:

beeld

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:

beeld

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:

Sample Bar Graph

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>&nbsp;</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>&nbsp;</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>&nbsp;</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:

beeld

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

beeld

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:

Gelukkig transformasie!

<einde />

Skryf in op my blog!

17 gedagtes oor "Skep staafgrafieke in SharePoint”

  1. Chris B

    Hierdie bladsy byna voltooi die taak wat ek was op soek na.

    Ek het 'n groep wat wil die SharePoint Opname lys te gebruik om 'n weeklikse meningspeiling te skep. Die vangs? Hulle wil nie kode te sien… Of verander die stelsel elke keer as hulle stuur die poll (beplan vir 'n weeklikse update).

    Ek was in staat om dit te koppel aan die opname lys en die grafiek op die eerste antwoord kolom skep. Wat ek nie kan voorspel al is die waardes en etikette wat hulle nodig sal hê om vorentoe te beweeg. Om sake te vererger hulle kan meer of minder antwoorde per week.

    Ek sal elders net in geval kyk, maar het iemand 'n manier gevind rye en etikette wat gebaseer is af van die aantal beskikbare opsies en dinamiese instelling van hierdie eerder as harde kodering van die verwagte waardes te skep?

    Antwoord ↓
  2. Greg Laushine

    Dankie Paul. Baie nuttig. Dankie vir jou werk, Ek was in staat om 'n grafiek bar kolom toe te voeg tot 'n bestaande DVWP (bijv. vir take) baie maklik met net 'n paar reëls van die kode.
    In SharePoint Designer, Ek plaas 'n data vertoning met die titel en % volledige kolomme van 'n taak lys. Ek het die wyser in een van die selle en regs kliek. Ek kies Voeg 'n kolom aan die regterkant. In die lig kode, Ek het gevind dat die <td> en vervang die <xsl:teks element binne-in die sel met jou kode:
    <tafel Celvulling ="0" Celafstand ="0" border ="0"
    width="{rond(@ PercentComplete * 100)+1}%">
    <tr style="background-color:red">
    <xsl:text disable-output-escaping="yes"><![CDATA[&nbsp;]]></xsl:teks>
    </tr>
    </tafel>

    Note I changed the row color code from bgcolor="red" to style="background-color:rooi"
    Ook, in staat was om een ​​van die kolomme te kies in my lys (@ PercentComplete) in place of "$BarPercent"
    Greg

    Antwoord ↓
  4. Wolfgang
    Paul, Dankie vir hierdie! Ek het 'n presiese kopie van wat jy gedoen het en dit werk byna volmaakte. There was one tiny issue in row the 2nd paragraph of your code:
    <xsl:template match="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Nadat ek reggestel word dat dit werk soos sjarme! Ek sal nou aan te pas om dit te my eie lys en status, maar ek is seker dit sal nie te hard. (Ek sal ná die gevolg)
    Dankie weer
    ~ Wolle
    Antwoord ↓
  5. Geen naam
    vraag –
    Wat as in my grafiek, Ek wou 'n veranderlike te tel nie net een status, maar tel verskeie mense?
    So, byvoorbeeld wat as ek gehad het —
    <xsl:variable name="RequestsInitialized"
    select="count(/dsQueryResponse / Rye / Ry[normaliseer-ruimte(@ Status)=’WIP’])" />
    –Die ding is, I want it to count instances of ‘WIP’, but i also want this variable to count something else like ‘Pending Review’.. how would i do this?
    Dankie!
    Antwoord ↓
  6. Murty Srirangam
    Hi Paul,
    Iam really this is really a great effort by you. Kan jy asseblief verduidelik waar sou ek 'n boodskap hierdie kode. Ek het 'n prjoect met vier nuwe lêers. Dan kan jy verduidelik in meer detail Wat moet ek doen.
    Dankie
    Murty
    Antwoord ↓
  8. Andrew Carrington
    Hi, Ek probeer om dit te verander effens sodat dit vertoon 'n grafiek van take in 'n taak lys teen die gebruiker inligting. Dit maak gebruik van 'n kolom genaamd @ AssignedTo wat 'n gebruiker teenwoordigheid kolom. Ek kan kry om dit te vertoon teh gelewer HTML, maar kan kry om dit te bereken en vertoon waardes.
    Enige idees?
    Dankie
    Andy
    Antwoord ↓
  9. Patrik Luca geskryf:
    Hi Paul,
    groot boodskap!
    'N Vraag:
    Ek wil graag om te filter op twee velde op dieselfde tyd: hoe kan dit bereik word?
    Byvoorbeeld, een van jou veranderlikes genoem totalStalled en dit filters op @ Status.
    Ek wil graag om te filter op dieselfde tyd my aantal rekords terug te verminder op 'n ander veld.
    I already found how to make an ‘OR’, but I donnot manage to find the ‘AND’
    An ‘OR’ bereik kan word soos hierdie:
    <xsl:variable name="totalStalled" select="count(/dsQueryResponse / Rye / Ry[normaliseer-ruimte(@ Status) = ‘Stalled’] | /dsQueryResponse / Rye / Ry[normaliseer-ruimte(@ ExtraFilterField) = ‘value’])" />
    Antwoord ↓
  16. Frank

    I have a ‘Using Dashboards in SharePoint’ vraag. We are a military hospital using MOSS standard for our Intranet and would like to build a dashboard for our Command Group to see ‘real time’ indien moontlik. Een van die belangrikste punte is die lees van die real-time huidige werklading binne die fasiliteit en letterlik kyk hoe dit verander op en af (mag het om te klik “verfris”/F5).

    Dankie by voorbaat,

    Antwoord ↓

Laat 'n antwoord

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk *