Oprette søjlediagrammer i SharePoint

Oversigt:

(OPDATERING 12/04/07: Tilføjet en anden interessant ressource i slutningen sammenkædning med en anden blog, der løser dette via en meget interessant webdel)

Dette blogindlæg beskriver, hvordan du opretter et søjlediagram i SharePoint. Dette virker i både WSS og MOSS miljøer som det afhænger kun af webdelen datavisning.

Den overordnede tilgang er som følger:

  1. Oprette en liste eller et dokumentbibliotek, der indeholder de data, du vil afbilde.
  2. Sted det tilknyttede dokumentbibliotek / brugerdefineret liste på en side og konvertere det til en webdelen Datavisning (DVWP).
  3. Ændre den DVWP XSL til at generere HTML, vises som en graf.

Forretningsscenario / Installationsprogrammet:

Jeg har oprettet en brugerdefineret liste med kolonnen standard titel og en ekstra kolonne, "Status". Denne modeller (meget simplistisk) "tilladelse til udgift" scenario hvor titlen repræsenterer projektet og Status en værdi fra listen over:

  • Foreslået
  • I processen
  • Gået i stå

Målet er at producere en interaktiv vandrette søjlediagram, der viser disse statuskoder.

Jeg har udfyldt listen og det ser sådan ud:

billede

Oprette webdelen datavisning:

Oprette en DVWP ved at føje den brugerdefinerede liste til en side (webstedsside i mit tilfælde) og følg instruktionerne Her (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Ud over blot at oprette DVWP, Vi skal også angive egenskaben personsøgning til at vise alle tilgængelige rækker. For mig, Det ser nogenlunde sådan her:

billede

På dette punkt, Jeg lukke altid SPD og browseren. Jeg derefter åbne igen siden ved hjælp af browseren. Derved undgår du ved et uheld mucking op del Weblayout på siden.

Ændre XSLT:

Det er nu tid til at ændre XSLT.

Jeg bruge altid visual studio til dette. (Se Her for en vigtig bemærkning om intellisense, der vil hjælpe dig med en masse).

Jeg oprette et tomt projekt tilføje fire nye filer (erstatte ordene "Original" og "New" som det er relevant):

  • Original.XSLT
  • New.XSLT
  • Oprindelige Params.xml
  • Ny Params.xml

I mit tilfælde, Det ser sådan ud:

billede

Redigere webdelen og kopiere params og XSL til "oprindelige" version i Visual Studio.

Målet her er at forårsage XSL at omdanne de resultater, vi får tilbage fra forespørgslen DVWP til HTML, der gengiver som en graf.

Til dette formål, Det hjælper til at først for at overveje, hvordan HTML-koden skal se ud, før vi blive forvirret af de sindssyge, der er kendt som "XSL". (At være klar, følgende er blot et eksempel; ikke skrive det eller copy/paste i visual studio. Jeg giver et fuld slag udgangspunkt for senere i skrive-up). Følgende eksempel grafen er gengivet som HTML umiddelbart efter:

Eksempel søjlediagram

Tilsvarende HTML:

<HTML>
<kroppen>
<Center>
<tabel bredde = 80%>
<Tr><TD><Center>Vandret søjlediagram</TD></Tr>
<Tr>
<TD align = "center">
<tabel border = "1" bredde = 80%>
<Tr>
<TD bredde = 10%>Åben</TD>
<TD><tabel cellpadding ="0" CellSpacing ="0" Border = 0 width = 50%><TR bgcolor = rød><TD>&nbsp;</TD></Tr></tabel></TD>
</Tr>
<Tr>
<TD bredde = 10%>Lukket</TD>
<TD><tabel cellpadding ="0" CellSpacing ="0" Border = 0 width = 25%><TR bgcolor = rød><TD>&nbsp;</TD></Tr></tabel></TD>
</Tr>
<Tr>
<TD bredde = 10%>Gået i stå</TD>
<TD><tabel cellpadding ="0" CellSpacing ="0" Border = 0 width = 25%><TR bgcolor = rød><TD>&nbsp;</TD></Tr></tabel></TD>
</Tr>
</tabel>
</TD>
</Tr>
</tabel>
</kroppen>
</HTML>

Jeg brugte en død simpel tilgang til at skabe min barer ved at indstille baggrundsfarven for en række til "rød".

Den takeaway her er dette: I sidste ende, alt, hvad vi gør er at skabe HTML med rækker og kolonner.

Skabelon XSLT:

Jeg har kopieret den XSLT, der genererer en vandret bar graf. Det er ret godt kommenteret så jeg ikke vil tilføje meget her bortset fra disse noter:

  • Jeg startede med standarden XSL, at SharePoint Designer gav mig da jeg oprettede DVWP.
  • Jeg var i stand til at skære det fra SPDS 657 linjer til 166 linjer.
  • Jeg har ikke rodet rundt med parametre XML-fil (som er adskilt fra XSL og du ved hvad jeg mener når du går til at ændre DVWP, selv; der er to filer kan du ændre). Dog, for at forenkle det, Jeg har fjernet næsten alle af dem fra XSL. Dette betyder at hvis du ønsker at gøre brug af disse parametre, Du skal blot tilføje deres variable definitioner tilbage til XSL. Der vil være let, da du vil have de oprindelige XSL-variable definitioner i din visual studio-projekt.
  • Du burde være i stand til at kopiere og indsætte det direkte i din visual studio-projekt. Derefter, fjerne mit kald og indsætte dine egne opkald til "ShowBar".
  • Boret ned værker ved at skabe en <en href> Som dette: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Denne teknik kan være af værdi i andre sammenhænge. I første omgang, Jeg troede, jeg skulle svare til et mere komplekst format: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, men det er ikke nødvendigt i mit miljø. Listens URL-adresse sendes til os af SharePoint, så det er ganske let at generalisere.

Her er det:

<XSL:stylesheet version="1.0" Udeluk-resultat-præfikser="RS z o s ddwrt dt msxsl" 
xmlns:msxsl="urne:schemas-microsoft-com:XSLT" xmlns:XSL="http://www.w3.org/ 1999/XSL/Transformer"
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:o="urne:schemas-microsoft-com:Office" xmlns:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882"
xmlns:dt="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="urne:schemas-microsoft-com:Rækkesættet" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="urne:FrontPage:interne"
> <XSL:output metode="HTML" led="Nej" /> <XSL:decimal-format NaN="" /> <XSL:Param Navn="ListUrlDir"></XSL:Param> <!-- Jeg har brug for dette til at støtte en drill-down. --> <XSL:skabelon match="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20"
> <XSL:variabel Navn="dvt_StyleName">Tabel</XSL:variabel> <XSL:variabel Navn="Rækker" Vælg="/dsQueryResponse/rækker/række" /> <XSL:variabel Navn="dvt_RowCount" Vælg="Grev($Rækker)" /> <XSL:variabel Navn="IsEmpty" Vælg="$dvt_RowCount = 0" /> <XSL:variabel Navn="dvt_IsEmpty" Vælg="$dvt_RowCount = 0" /> <XSL:Vælg> <XSL:Hvornår test="$dvt_IsEmpty"> Der er ingen data til grafen!<br/> </XSL:Hvornår> <XSL:ellers> <!-- Det interessante ting begynder her. Vi har brug at definere et par variabler til hver række i grafen: samlede antal elementer og procent af total. --> <XSL:variabel Navn="totalProposed" Vælg="Grev(/dsQueryResponse/rækker/række[normalisere plads(@Status) = 'Foreslog'])" /> <XSL:variabel Navn="percentProposed" Vælg="$totalProposed div $dvt_RowCount" /> <XSL:variabel Navn="totalInProcess" Vælg="Grev(/dsQueryResponse/rækker/række[normalisere plads(@Status) = 'I processen'])" /> <XSL:variabel Navn="percentInProcess" Vælg="$totalInProcess div $dvt_RowCount" /> <XSL:variabel Navn="totalStalled" Vælg="Grev(/dsQueryResponse/rækker/række[normalisere plads(@Status) = 'Stå'])" /> <XSL:variabel Navn="percentStalled" Vælg="$totalStalled div $dvt_RowCount" /> <!-- Vi definerer vores HTML-tabel her. Jeg låne fra nogle standard SharePoint stilarter her gøre det konsekvent. Jeg tror, det vil ære ændringer til den globale css fil samt tema tilsidesætter. --> <tabel bredde="100%" CellSpacing="0" CellPadding="2" stil="Border-højre: 1 solid #C0C0C0; grænse-bund: 1 solid #C0C0C0; grænse-venstre-stil: solid; grænse-venstre-bredde: 1; grænse-top-stil: solid; top-kantbredde: 1;"> <Tr> <TD Juster="Center"> <tabel grænsen="1" bredde="100%"> <!-- For hver status, som vi ønsker at grafen, Vi kalder "ShowBar" skabelon. Vi passerer det: 1. En etiket til rækken. Dette er omdannet til et hyperlink. 2. Procent (variabel fra oven). 3. Det faktiske feltnavn af koden fra den underliggende liste. Dette behøver ikke at matche visningsetiket. 4. Værdien i feltet afstemt for #3. 5. Samlede elementer af denne statuskode (ikke hovedtotalen af alle statuskoder). Det udsender en <Tr></Tr> og den vandrette søjlegraf linje. Vi kalder denne skabelon for hver statuskode, vi ønsker at se. --> <XSL:Call-skabelon Navn="ShowBar"> <XSL:med param Navn="BarDisplayLabel" Vælg="'Foreslog'"/> <XSL:med param Navn="BarPercent" Vælg="$percentProposed"/> <XSL:med param Navn="QueryFilterFieldName" Vælg="'Status'"/> <XSL:med param Navn="QueryFilterFieldValue" Vælg="'Foreslog'"/> <XSL:med param Navn="TotalItems" Vælg="$totalProposed"></XSL:med param> </XSL:Call-skabelon> <XSL:Call-skabelon Navn="ShowBar"> <XSL:med param Navn="BarDisplayLabel" Vælg="'Stå'"/> <XSL:med param Navn="BarPercent" Vælg="$percentStalled"/> <XSL:med param Navn="QueryFilterFieldName" Vælg="'Status'"/> <XSL:med param Navn="QueryFilterFieldValue" Vælg="'Stå'"/> <XSL:med param Navn="TotalItems" Vælg="$totalStalled"></XSL:med param> </XSL:Call-skabelon> <XSL:Call-skabelon Navn="ShowBar"> <XSL:med param Navn="BarDisplayLabel" Vælg="«I processen'"/> <XSL:med param Navn="BarPercent" Vælg="$percentInProcess"/> <XSL:med param Navn="QueryFilterFieldName" Vælg="'Status'"/> <XSL:med param Navn="QueryFilterFieldValue" Vælg="«I processen'"/> <XSL:med param Navn="TotalItems" Vælg="$totalInProcess"></XSL:med param> </XSL:Call-skabelon> </tabel> </TD> </Tr> </tabel> </XSL:ellers> </XSL:Vælg> </XSL:skabelon> <!-- Denne skabelon gør arbejdet vise individuelle linjer i søjlediagrammet. Du vil sandsynligvis gøre det meste af din tweaking her. --> <XSL:skabelon Navn="ShowBar"> <XSL:Param Navn="BarDisplayLabel" /> <!-- etiket for at vise --> <XSL:Param Navn="BarPercent"/> <!-- Procent af total. --> <XSL:Param Navn="QueryFilterFieldName"/> <!-- Bruges til at springe til forespørgslen & filter --> <XSL:Param Navn="QueryFilterFieldValue"/> <!-- Bruges til at springe til forespørgslen & filter --> <XSL:Param Navn="TotalItems" /> <!-- samlet antal denne barlabel --> <Tr> <!-- Baren mærke sig selv. --> <TD klasse="MS-formbody" bredde="30%"> <!-- Denne næste sæt af udsagn bygger en forespørgselsstreng, der tillader os at bore ned til en filtreret visning af de underliggende data. Vi gør brug af et par ting her: 1. Vi kan give FilterField1 og FilterValue1 til en liste til at filtrere på en kolonne. 2. SharePoint er forbi en central parameter for os, ListUrlDir, der peger på den underliggende liste som denne DVWP "kører". Er ikke XSL-sjov? --> <XSL:tekst Deaktiver-output-undslippe="Ja"> <![CDATA[<en href ="]]></XSL:tekst> <XSL:værdi af Vælg="$ListUrlDir"/> <XSL:tekst Deaktiver-output-undslippe="Ja"><![CDATA[?FilterField1 =]]></XSL:tekst> <XSL:værdi af Vælg="$QueryFilterFieldName"/> <XSL:tekst Deaktiver-output-undslippe="Ja"><![CDATA[&FilterValue1 =]]></XSL:tekst> <XSL:værdi af Vælg="$QueryFilterFieldValue"/> <XSL:tekst Deaktiver-output-undslippe="Ja"><![CDATA[">]]></XSL:tekst> <XSL:værdi af Vælg="$BarDisplayLabel"/> <XSL:tekst Deaktiver-output-undslippe="Ja"><![CDATA[</en>]]></XSL:tekst> <!-- Den næste bit viser nogle tal i formatet: "(i alt / % af den samlede)" --> (<XSL:værdi af Vælg="$TotalItems"/> / <!-- Dette skaber en dejlig procent etiket for os. Tak, Microsoft! --> <XSL:Call-skabelon Navn="percentformat"> <XSL:med param Navn="procent" Vælg="$BarPercent"/> </XSL:Call-skabelon>) </TD> <!-- Endelig, udsender en <TD> Tag til bar selv.--> <TD> <tabel CellPadding="0" CellSpacing="0" grænsen="0" bredde="{runde($BarPercent * 100)+1}%"> <Tr BgColor="rød"> <XSL:tekst Deaktiver-output-undslippe="Ja"><![CDATA[&nbsp;]]></XSL:tekst> </Tr> </tabel> </TD> </Tr> </XSL:skabelon> <!-- Dette er taget direkte fra nogle XSL, jeg fandt i en MS skabelon. --> <XSL:skabelon Navn="percentformat"> <XSL:Param Navn="procent"/> <XSL:Vælg> <XSL:Hvornår test="format-nummer($procent, '#,##0%;-#,##0%')= 'NaN'">0%</XSL:Hvornår> <XSL:ellers> <XSL:værdi af Vælg="format-nummer($procent, '#,##0%;-#,##0%')" /> </XSL:ellers> </XSL:Vælg> </XSL:skabelon> </XSL:stylesheet>

Resultaterne:

XSL ovenfra genererer denne graf:

billede

Foretag detaljeopløftning til de underliggende data ved at klikke på statuskoden:

billede

Afsluttende tanker:

Dette kan generaliseres?

Jeg elsker denne graftegning koncept, men jeg hader det faktum, at jeg er nødt til at gå ind og gøre så meget hånd-kodning. Jeg har givet en lille tanke til om det kan generaliseres og jeg er optimistisk, men jeg er også lidt bange, at der kan være en mur eller andet sted langs den sti, der ikke vil tilbyde en arbejde-omkring. Hvis nogen har nogle gode idéer på dette, venligst gøre en note i kommentarer eller e-mail mig.

Lodret grafer:

Dette er en horisontal søjlediagram. Det er bestemt muligt at oprette en lodret diagram. Vi skal bare ændre HTML-koden. Jeg ville starte på samme måde: Oprette en HTML-repræsentation af et lodret søjlegraf og derefter finde ud af hvordan man får der via XSL. Hvis nogen er interesseret i at, Jeg kunne blive overtalt til at prøve det og arbejde ud the kinks. Hvis nogen har allerede gjort det, fortæl mig det, så link jeg til din blog 🙂

Jeg tror, at udfordring med en lodret Graf er, at etiketterne for grafen er sværere at administrere, men bestemt ikke umuligt.

Feltet navn Gotcha:

Der er mindst to ting til at se ud med din feltnavne.

Første, et feltnavn med en plads er at være undsluppet i XSL. Dette vil sandsynligvis være et problem her:

        <XSL:variabel Navn="totalProposed" 
Vælg="Grev(/dsQueryResponse/rækker/række[normalisere plads(@Status) = 'Foreslog'])" />

Hvis din "Status" kolonne hedder faktisk "statuskode" så er du nødt til at henvise til det som "Status_x0020_Code":

   <XSL:variabel Navn="totalProposed" 
Vælg="Grev(/dsQueryResponse/rækker/række[normalisere plads(@Status_x0020_Code) = 'Foreslog'])" />

Anden, og jeg er lidt fuzzy på dette, men du skal også være på vagt for feltnavnet ændres. Hvis du navngiver din felt "statuskode" og så senere på, omdøbe den til "AFE Status", det "interne navn" ændrer ikke. Det interne navn vil stadig være "statuskode" og skal blive refereret til som "Status_x0020_Code". "Andre ressourcer" links kan hjælpe med at diagnosticere og løse slags problemer.

Om at farve:

Jeg tog "rød" fordi det er glædeligt for mig i øjeblikket. Det ville ikke være en big deal at vise forskellige farver for at give mere end blot en visuel beskrivelse af en række, men skal også indeholde et nyttig KPI. For eksempel, Hvis procentdelen af "gået i stå" AFES er > 10% derefter vise det røde, ellers Vis det i sort. Brug <XSL:Vælg> at opnå dette.

Andre ressourcer:

Happy omdanne!

<afslutning />

Abonner på min blog!

17 tanker om ”Oprette søjlediagrammer i SharePoint

  1. Chris B

    Denne side fuldført næsten den opgave, jeg ledte efter.

    Jeg har en gruppe, der ønsker at bruge listen SharePoint undersøgelse til at oprette en ugentlig meningsmåling. Fangsten? De ønsker ikke at se kode… Eller ændre systemet, hver gang de sender meningsmåling (planlagt for en ugentlig opdatering).

    Jeg var i stand til at forbinde det til listen undersøgelse og oprette grafen på kolonnen første svar. Hvad jeg ikke kan overskue selv er de værdier og etiketter, skal de bevæger sig fremad. For at gøre tingene kan værre de have mere eller mindre svar tilgængelig hver uge.

    Jeg vil kigge andre steder bare i tilfælde, men har nogen fundet en måde at skabe rækker og etiketter baseret ud af antallet af tilgængelige indstillinger og dynamisk indstilling disse snarere end hårdt kodning forventede værdier?

    Svar
  2. Greg Laushine

    Tak Paul. Meget hjælpsom. Tak for dit arbejde, Jeg var i stand til at tilføje en graf bar kolonne til en eksisterende DVWP (strømsparetilstand. for opgaver) meget nemt med blot et par linjer i din kode.
    I SharePoint Designer, Jeg har indsat en datavisning med titlen og % komplet kolonner fra en opgaveliste. Jeg sætter markøren i en af cellerne og lige falde i hak. Jeg vælg Indsæt en kolonne til højre. I kodevisning, Jeg fandt den <TD> og erstattet den <XSL:tekstelement inde i cellen med din kode:
    <tabel cellpadding ="0" CellSpacing ="0" Border ="0"
    bredde = "{runde(@PercentComplete * 100)+1}%">
    <TR stil = "baggrundsfarve:rød">
    <XSL:tekst Deaktiver-output-undslippe = "yes"><![CDATA[&nbsp;]]></XSL:tekst>
    </Tr>
    </tabel>

    Bemærk jeg har ændret række farvekode fra bgcolor = "rød" at style = "baggrundsfarve:rød"
    Også, var i stand til at vælge en af kolonnerne i min liste (@PercentComplete) i stedet for "$BarPercent"
    Greg

    Svar
  3. Wolfgang
    Paul, Tak nemlig indeværende! Jeg skabt en nøjagtig kopi af, hvad du gjorde og det virker næsten perfekt. Der var et lille problem i række 2 stk. i din kode:
    <XSL:skabelon 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;
    Efter jeg rettede at sig anlæg lige indtage! Jeg vil nu tilpasse dette til min egen liste og status, men jeg er sikker på det ikke vil være for hårdt. (Jeg vil sende resultatet)
    Tak igen
    ~ Wolle
    Svar
  4. Intet navn
    spørgsmål –
    Hvad hvis i min graf, Jeg ønskede en variabel ikke bare tælle én status, men tæller flere dem?
    Så, for eksempel, hvad nu hvis jeg havde —
    <XSL:variabelnavnet = "RequestsInitialized"
    Vælg = "count(/dsQueryResponse/rækker/række[normalisere plads(@Status)= 'VIA'])" />
    –Ting er, Jeg vil have det til at tælle forekomster af 'Via', men jeg vil også denne variabel til at tælle noget andet som 'Afventer gennemgang'.. Hvordan ville jeg gøre dette?
    Tak!
    Svar
  5. Søren Srirangam
    Hej Paul,
    IAM virkelig dette er virkelig en fantastisk indsats af dig. Du kan forklare, hvor ville jeg sende denne kode. Jeg har lavet en prjoect med fire nye filer. Derefter kan du forklare nærmere hvad skal jeg gøre.
    Tak
    Murty
    Svar
  6. Andrew Carrington
    Hej, Jeg forsøger at ændre det lidt, så det viser et diagram over opgaver på en Jobliste mod brugeroplysninger. Det bruger en kolonne med navnet @AssignedTo der er en bruger tilstedeværelse kolonne. Jeg kan få det til at få vist den gengivne HTML men kan ikke få det til at beregne og vise værdier.
    Nogen idéer?
    Tak
    Andy
    Svar
  7. Patrik Luca skrev:
    Hej Paul,
    stor post!
    Et spørgsmål:
    Jeg ville gerne filter på to felter på samme tid: Hvordan kan dette opnås?
    For eksempel, en af dine variabler hedder totalStalled og det filtrerer på @Status.
    Jeg vil gerne filtrere samtidig reducere min antallet af returnerede poster på et andet felt.
    Jeg har allerede fundet hvordan man laver en 'OR', men jeg donnot formår at finde det ' og’
    En ' eller’ kan opnås på denne:
    <XSL:variabelnavnet = "totalStalled" Vælg = "count(/dsQueryResponse/rækker/række[normalisere plads(@Status) = 'Stå'] | /dsQueryResponse/rækker/række[normalisere plads(@ExtraFilterField) = 'værdi'])" />
    Svar
  8. Robin Meuré

    Hej Paul!

    Nice arbejde! Jeg havde også noget lignende i mit sind til at se SharePoint-lister på en grafisk måde 😉

    Svar
  9. Frank

    Jeg har et 'Brug af betjeningspaneler i SharePoint’ spørgsmål. Vi er et militært hospital, der bruger MOSS-standard til vores intranet og vil gerne oprette et instrumentbræt til vores kommandogruppe for at se 'realtid’ Hvis det er muligt. Et af de vigtigste punkter vist real-time nuværende arbejdsbyrden i havnefaciliteten og bogstavelig talt se det ændre op og ned (kan have til at klikke “Opdater”/F5).

    Tak på forhånd,

    Svar

Efterlad et svar til Patrik Luca skrev: Annuller besvarelse

Din e-mail adresse vil ikke blive offentliggjort. Krævede felter er markeret *