Skapa stapeldiagram i SharePoint

Översikt:

(UPPDATERING 12/04/07: Lagt till en annan intressant resurs i slutet som länkar till en annan blogg som behandlar detta via en mycket intressant webbdel)

Denna bloggpost beskriver hur du skapar ett diagram i SharePoint. Detta fungerar i både WSS och MOSS miljöer som det bara beror på datavywebbdelen.

Den övergripande strategin är följande:

  1. Skapa en lista eller ett dokumentbibliotek som innehåller de data du vill rita grafer.
  2. Placera tillhörande dokumentbiblioteket / anpassad lista på en sida och konvertera den till en datavywebbdel (DVWP).
  3. Ändra den DVWP XSL för att generera HTML som visas som ett diagram.

Affärsscenario / Setup:

Jag har skapat en anpassad lista med kolumnen standard och en ytterligare kolumn, "Status". Denna modeller (mycket förenklat) "tillstånd för utgift" scenario där titeln representerar projektet och Status ett värde från listan över:

  • Föreslås
  • I processen
  • Avstannat

Målet är att producera ett interaktivt horisontella stapeldiagram som visar dessa statuskoder.

Jag har fylls listan och det ser ut så här:

bild

Skapa datavywebbdelen:

Skapa en DVWP genom att lägga till den anpassade listan till en sida (sida i mitt fall) och följ instruktionerna Här (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Förutom att helt enkelt skapa en DVWP, Vi måste också ange egenskapen personsökning att visa alla tillgängliga rader. För mig, Detta ser ut så här:

bild

Vid denna punkt, Jag stänger alltid SPD och webbläsaren. Jag sedan öppna åter sidan med webbläsaren. Detta undviker misstag mucking upp del Webblayout på sidan.

Ändra XSLT:

Nu är det dags att ändra XSLT.

Jag använda alltid visual studio för detta. (Se Här för en viktig anmärkning om intellisense som kommer hjälpa dig mycket).

Jag skapar ett tomt projekt lägga till fyra nya filer (ersätta orden "Original" och "ny" i förekommande fall):

  • Original.XSLT
  • New.XSLT
  • Ursprungliga Params.xml
  • Nya Params.xml

I mitt fall, Det ser ut så här:

bild

Ändra webbdelen och kopiera params och XSL till det "ursprungliga" version i Visual Studio.

Målet är att orsaka XSL: att omvandla de resultat vi får tillbaka från DVWP frågan till HTML som visas som ett diagram.

I detta syfte, Det bidrar till att först överväga hur HTML-koden ska se ut innan vi blir förvirrade av vansinne som är känd som "XSL". (Att vara tydlig, Följande är bara ett exempel; inte skriva eller klistra in visual studio. Jag ger ett fullt slag som utgångspunkt för att senare på uppskrivning). Följande exempel diagram återges enligt HTML omedelbart efter:

Exempel stapeldiagram

Motsvarande HTML:

<HTML>
<organ>
<Center>
<tabell bredd = 80%>
<TR><TD><Center>Horisontella stapeldiagram</TD></TR>
<TR>
<TD align = "center">
<Table border = "1" bredd = 80%>
<TR>
<TD bredd = 10%>Öppna</TD>
<TD><tabell cellpadding ="0" CellSpacing ="0" border = 0 bredd = 50%><TR bgcolor = röd><TD>&nbsp;</TD></TR></tabell></TD>
</TR>
<TR>
<TD bredd = 10%>Stängt</TD>
<TD><tabell cellpadding ="0" CellSpacing ="0" border = 0 bredd = 25%><TR bgcolor = röd><TD>&nbsp;</TD></TR></tabell></TD>
</TR>
<TR>
<TD bredd = 10%>Avstannat</TD>
<TD><tabell cellpadding ="0" CellSpacing ="0" border = 0 bredd = 25%><TR bgcolor = röd><TD>&nbsp;</TD></TR></tabell></TD>
</TR>
</tabell>
</TD>
</TR>
</tabell>
</organ>
</HTML>

Jag använde en död enkel metod att skapa min barer genom att ange bakgrundsfärgen på en rad i "röd".

Den take-away här är detta: I slutet, allt vi gör är att skapa HTML med rader och kolumner.

Mallen XSLT:

Jag har kopierat den XSLT som genererar ett horisontellt stapeldiagram. Det är ganska väl kommenterade så jag inte kommer lägga mycket här utom dessa anteckningar:

  • Jag började med standard-XSL som SharePoint Designer gav mig när jag först skapade DVWP.
  • Jag kunde skära ner detta från SPD: s 657 linjer för att 166 linjerna.
  • Jag röra inte runt med parametrar XML-filen (som är separat från XSL och du vet vad jag menar när du går till ändra DVWP sig; Det finns två filer kan du ändra). Men, för att förenkla det, Jag tog bort nästan alla av dem från XSL. Detta innebär att om du vill göra använda av dessa parametrar, du behöver bara lägga till deras varierande definitioner tillbaka till XSL. Det blir lätt eftersom du har de ursprungliga XSL varierande definitionerna i din visual studio-projekt.
  • Du borde kunna kopiera och klistra in detta direkt i din visual studio-projekt. Sedan, ta bort mina samtal och sätt dina egna samtal till "ShowBar".
  • Nedrullningen verk genom att skapa en <en href> Gillar det här: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Denna teknik kan vara av värde i andra sammanhang. Först, Jag trodde jag skulle behöva följa en mer komplex format: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, men i min omgivning som inte är nödvändig. Listans URL skickas till oss med SharePoint så detta är ganska lätt att generalisera.

Här är det:

<XSL:Stylesheet version="1.0" Uteslut-resultat-prefix="rs z o s ddwrt dt msxsl" 
xmlns:msxsl="urna:schemas-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:o="urna:schemas-microsoft-com:Office" xmlns:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882"
xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:rs="urna:schemas-microsoft-com:raduppsättningen" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="urna:FrontPage:inre"
> <XSL:utgång metoden="HTML" strecksatsen="Nej" /> <XSL:decimal-format NaN="" /> <XSL:param Namn="ListUrlDir"></XSL:param> <!-- Jag behöver detta för att stödja en drill-down. --> <XSL:mall 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 Namn="dvt_StyleName">Tabell</XSL:variabel> <XSL:variabel Namn="Rader" Välj="/dsQueryResponse/rader/rad" /> <XSL:variabel Namn="dvt_RowCount" Välj="greve($Rader)" /> <XSL:variabel Namn="IsEmpty" Välj="$dvt_RowCount = 0" /> <XSL:variabel Namn="dvt_IsEmpty" Välj="$dvt_RowCount = 0" /> <XSL:Välj> <XSL:När Testa="$dvt_IsEmpty"> Det finns inga data till diagram!<br/> </XSL:När> <XSL:Annars> <!-- De intressanta saker börjar här. Vi behöver definiera ett par variabler för varje rad i grafen: Totalt antal träffar och procent av totala. --> <XSL:variabel Namn="totalProposed" Välj="greve(/dsQueryResponse/rader/rad[normalisera-space(@Status) = "Föreslås"])" /> <XSL:variabel Namn="percentProposed" Välj="$totalProposed div $dvt_RowCount" /> <XSL:variabel Namn="totalInProcess" Välj="greve(/dsQueryResponse/rader/rad[normalisera-space(@Status) = "Pågår"])" /> <XSL:variabel Namn="percentInProcess" Välj="$totalInProcess div $dvt_RowCount" /> <XSL:variabel Namn="totalStalled" Välj="greve(/dsQueryResponse/rader/rad[normalisera-space(@Status) = "Kört fast"])" /> <XSL:variabel Namn="percentStalled" Välj="$totalStalled div $dvt_RowCount" /> <!-- Vi definierar våra HTML-tabellen här. Jag upplåning från några standard SharePoint stilar här att göra det konsekvent. Jag tror att det kommer att hedra ändringar i global css filen samt tema åsidosätter. --> <tabell bredd="100%" CellSpacing="0" CellPadding="2" stil="gränsen-höger: 1 fast #C0C0C0; Border-bottom: 1 fast #C0C0C0; Border-vänster-style: solid; gränsen-vänster-bredd: 1; Border-top-style: solid; Border-top-bredd: 1;"> <TR> <TD justera="Center"> <tabell gränsen="1" bredd="100%"> <!-- För varje status som vi vill diagram, Vi kallar den "ShowBar" mall. Vi passerar det: 1. En etikett för raden. Detta förvandlas till en hyperlänk. 2. Procenten (variabel från ovan). 3. Det faktiska fältnamnet av koden från den underliggande listan. Detta behöver inte matcha visningsetikett. 4. Värdet i fältet matchade för #3. 5. Totala poster i denna statuskod (inte totalsumman av alla statuskoder). Den avger en <TR></TR> och horisontella stapeldiagram linjen. Vi kallar den här mallen för varje statuskod vi vill visa. --> <XSL:call-template Namn="ShowBar"> <XSL:med-param Namn="BarDisplayLabel" Välj=""Föreslås""/> <XSL:med-param Namn="BarPercent" Välj="$percentProposed"/> <XSL:med-param Namn="QueryFilterFieldName" Välj=""Status""/> <XSL:med-param Namn="QueryFilterFieldValue" Välj=""Föreslås""/> <XSL:med-param Namn="TotalItems" Välj="$totalProposed"></XSL:med-param> </XSL:call-template> <XSL:call-template Namn="ShowBar"> <XSL:med-param Namn="BarDisplayLabel" Välj=""Kört fast""/> <XSL:med-param Namn="BarPercent" Välj="$percentStalled"/> <XSL:med-param Namn="QueryFilterFieldName" Välj=""Status""/> <XSL:med-param Namn="QueryFilterFieldValue" Välj=""Kört fast""/> <XSL:med-param Namn="TotalItems" Välj="$totalStalled"></XSL:med-param> </XSL:call-template> <XSL:call-template Namn="ShowBar"> <XSL:med-param Namn="BarDisplayLabel" Välj=""I-processen"/> <XSL:med-param Namn="BarPercent" Välj="$percentInProcess"/> <XSL:med-param Namn="QueryFilterFieldName" Välj=""Status""/> <XSL:med-param Namn="QueryFilterFieldValue" Välj=""I-processen"/> <XSL:med-param Namn="TotalItems" Välj="$totalInProcess"></XSL:med-param> </XSL:call-template> </tabell> </TD> </TR> </tabell> </XSL:Annars> </XSL:Välj> </XSL:mall> <!-- Den här mallen fungerar Visa enskilda rader i stapeldiagrammet. Du kommer förmodligen göra det mesta av din tweaking här. --> <XSL:mall Namn="ShowBar"> <XSL:param Namn="BarDisplayLabel" /> <!-- etikett för att Visa --> <XSL:param Namn="BarPercent"/> <!-- Procent av totala. --> <XSL:param Namn="QueryFilterFieldName"/> <!-- Används för att hoppa till frågan & filtret --> <XSL:param Namn="QueryFilterFieldValue"/> <!-- Används för att hoppa till frågan & filtret --> <XSL:param Namn="TotalItems" /> <!-- Total beräkning av denna barlabel --> <TR> <!-- Bar etikett själv. --> <TD klass="MS-formbody" bredd="30%"> <!-- Denna nästa uppsättning uttalanden bygger en frågesträng som tillåter oss att detaljgranska ned till en filtrerad vy av underliggande data. Vi göra använda av några saker här: 1. Vi kan passera FilterField1 och FilterValue1 till en lista för att filtrera en kolumn. 2. SharePoint passerar en nyckelparameter till oss, ListUrlDir som pekar på den underliggande listan som denna DVWP "kör". Inte XSL-kul? --> <XSL:texten Inaktivera-utdata-fly="Ja"> <![CDATA[<a href ="]]></XSL:texten> <XSL:värdet av Välj="$ListUrlDir"/> <XSL:texten Inaktivera-utdata-fly="Ja"><![CDATA[?FilterField1 =]]></XSL:texten> <XSL:värdet av Välj="$QueryFilterFieldName"/> <XSL:texten Inaktivera-utdata-fly="Ja"><![CDATA[&FilterValue1 =]]></XSL:texten> <XSL:värdet av Välj="$QueryFilterFieldValue"/> <XSL:texten Inaktivera-utdata-fly="Ja"><![CDATA[">]]></XSL:texten> <XSL:värdet av Välj="$BarDisplayLabel"/> <XSL:texten Inaktivera-utdata-fly="Ja"><![CDATA[</en>]]></XSL:texten> <!-- Den nästa bit visar några siffror i formatet: "(totalt / % av den totala)" --> (<XSL:värdet av Välj="$TotalItems"/> / <!-- Detta skapar en fin procent etikett för oss. Tack, Microsoft! --> <XSL:call-template Namn="percentformat"> <XSL:med-param Namn="procent" Välj="$BarPercent"/> </XSL:call-template>) </TD> <!-- Slutligen, avger en <TD> tag för bar sig.--> <TD> <tabell CellPadding="0" CellSpacing="0" gränsen="0" bredd="{runda($BarPercent * 100)+1}%"> <TR bgcolor="röd"> <XSL:texten Inaktivera-utdata-fly="Ja"><![CDATA[&nbsp;]]></XSL:texten> </TR> </tabell> </TD> </TR> </XSL:mall> <!-- Detta tas direkt från vissa XSL som jag hittade i en MS-mall. --> <XSL:mall Namn="percentformat"> <XSL:param Namn="procent"/> <XSL:Välj> <XSL:När Testa="format-nummer($procent, '#,##0%;-#,##0%')= "NaN"">0%</XSL:När> <XSL:Annars> <XSL:värdet av Välj="format-nummer($procent, '#,##0%;-#,##0%')" /> </XSL:Annars> </XSL:Välj> </XSL:mall> </XSL:Stylesheet>

Resultaten:

XSL från ovan genererar denna graf:

bild

Detaljgranska ned till underliggande data genom att klicka på statuskoden:

bild

Avslutande tankar:

Detta kan generaliseras?

Jag älskar detta grafritande koncept, men jag hatar att jag måste gå in och göra så mycket hand-kodning. Jag har gett en liten tanke till huruvida det kan generaliseras och jag är optimistisk, men jag är också lite rädd att det kan finnas en tegelvägg någonstans längs den väg som inte erbjuder någon verk-runt omkring. Om någon har några bra idéer på detta, notera i kommentarerna eller maila mig.

Vertikala diagram:

Detta är ett horisontellt stapeldiagram. Det är säkert möjligt att skapa en lodrät graf. Vi behöver bara ändra HTML. Jag skulle börja på samma sätt: Skapa en HTML-återgivning av en vertikal stapeldiagram och sedan räkna ut hur man få det via XSL. Om någon är intresserad av att, Jag skulle kunna övertalas att prova och träna på kinks. Om någon redan har gjort det, låt mig veta så länkar jag gärna till din blogg 🙂

Jag tror att utmaningen med en vertikal graf är att etiketterna för grafen är svårare att hantera, men absolut inte omöjligt.

Fältet Namn Gotcha:

Det finns åtminstone två saker att se upp för med ditt namn.

Första, ett namn med en utrymme har avbrottstecken i XSL. Detta kommer troligen vara en fråga här:

        <XSL:variabel Namn="totalProposed" 
Välj="greve(/dsQueryResponse/rader/rad[normalisera-space(@Status) = "Föreslås"])" />

Om din "Status" kolumn heter faktiskt "statuskod" då måste du referera till den som "Status_x0020_Code":

   <XSL:variabel Namn="totalProposed" 
Välj="greve(/dsQueryResponse/rader/rad[normalisera-space(@Status_x0020_Code) = "Föreslås"])" />

Andra, och jag är lite otydlig på detta, men du måste också vara på alerten för fältet namn ändras. Om du ger ditt område "statuskod" och senare på, döp om den till "AFE Status", det interna namnet"" ändrar inte. Det interna namnet kommer "statuskod" och måste refereras som "Status_x0020_Code". "Andra resurser" Länkar hjälpa diagnostisera och korrigera denna typ av problem.

Om färgen:

Jag plockade "röd" eftersom det är tilltalande för mig just nu. Det skulle inte vara en stor sak att visa olika färger för att ge mer än bara en visuell beskrivning av ett antal, men att också ge en användbar KPI. Till exempel, om andelen "avstannat" AFES är > 10% då Visa det röda, annars visas det i svart. Användning <XSL:Välj> att uppnå detta.

Andra resurser:

Glad omvandla!

<slutet />

Prenumerera på min blogg!

Technorati Tags: , , , , , ,

17 tankar på "Skapa stapeldiagram i SharePoint

  1. Chris B

    Denna sida slutfört nästan uppgiften jag letade.

    Jag har en grupp som vill använda listan SharePoint undersökning för att skapa en veckans omröstning. Fångsten? De vill inte se koden… Eller ändra systemet varje gång de skickar mätningen (planerade för en veckovis uppdatering).

    Jag kunde ansluta detta till listan undersökning och skapa diagrammet på kolumnen första svar. Men vad jag kan inte förutsäga är de värden och etiketter som de måste gå framåt. För att göra saken kan värre de ha mer eller mindre svar finns varje vecka.

    Jag kommer att söka någon annanstans bara i fall, men har någon hittat ett sätt att skapa rader och etiketter baserade på antalet tillgängliga alternativ och dynamiskt ställa dessa snarare än hårt kodning förväntade värden?

    Svar
  2. Greg Laushine

    Tack Paul. Mycket hjälpsam. Tack för ditt arbete, Jag kunde lägga till en kolumn diagram bar till en befintlig DVWP (t.ex. för aktiviteter) mycket enkelt med bara några rader kod.
    I SharePoint Designer, Jag har infogat en datavy med titeln och % komplett kolumner från en uppgiftslista. Jag placerar du markören i en av cellerna och högerklicka på. Jag väljer du infoga en kolumn till höger. I kodvyn, Jag hittade den <TD> och ersatt den <XSL:text-element inuti cellen med din kod:
    <tabell cellpadding ="0" CellSpacing ="0" Border ="0"
    bredd = "{runda(@PercentComplete * 100)+1}%">
    <TR stil = "background-color:röd">
    <XSL:text inaktivera-utdata-fly = "ja"><![CDATA[&nbsp;]]></XSL:texten>
    </TR>
    </tabell>

    Obs jag förändrat den rad färgkoden från bgcolor = "röd" till style = "background-color:röd"
    Också, kunde välja en av kolumnerna i min lista (@PercentComplete) i stället för "$BarPercent"
    Greg

    Svar
  3. Wolfgang
    Paul, Tack för denna! Jag skapade en exakt kopia av vad du gjorde och det fungerar nästan perfekt. Det fanns en liten fråga i rad 2: a stycket i din kod:
    <XSL:mallen 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 jag korrigerade som arbeten den lik förtrolla! Jag kommer nu anpassa detta till min egen lista och status men jag är säker det inte kommer vara för hårt. (Jag kommer att publicera resultatet)
    Tack igen
    ~ Wolle
    Svar
  4. Inget namn
    fråga –
    Tänk om i min graf, Jag ville ha en variabel för att inte bara räknar en status men flera sådana?
    Så, till exempel om jag hade —
    <XSL:variabel namn = "RequestsInitialized"
    Välj = "räkna(/dsQueryResponse/rader/rad[normalisera-space(@Status)= "PIA"])" />
    –Som är, Jag vill att det ska räkna förekomster av "Pia", men jag vill också denna variabel att räkna något annat som "Väntande Review".. Hur skulle jag göra detta?
    Tack!
    Svar
  5. Svensson Srirangam
    Hej Paul,
    IAM verkligen detta är verkligen en stor ansträngning av dig. Du kanna behaga förklara där skulle jag lägga denna kod. Jag har skapat en prjoect med fyra nya filer. Sedan kan du förklara mer i detalj vad ska jag göra.
    Tack
    Svensson
    Svar
  6. Andrew Carrington
    Hej, Jag försöker ändra detta något så att den visar en graf över uppgifter i en uppgiftslista mot användarinformation. Det använder en kolumn som heter @AssignedTo som är en användare närvaro kolumn. Jag kan få det att visa den återgiven HTML men kan inte få det att beräkna och Visa värden.
    Några idéer?
    Tack
    Andy
    Svar
  7. Patrik Luca skrev:
    Hej Paul,
    stor post!
    En fråga:
    Jag vill filtrera på två fält på samma gång: Hur kan detta uppnås?
    Till exempel, en av variablerna kallas totalStalled och det filtrerar @Status.
    Jag vill filtrera samtidigt att minska min antalet returnerade poster på ett annat fält.
    Jag redan hittat hur man gör en "eller", men jag donnot lyckas hitta den "och’
    En "eller’ kan uppnås så här:
    <XSL:variabel namn = "totalStalled" Välj = "räkna(/dsQueryResponse/rader/rad[normalisera-space(@Status) = "Kört fast"] | /dsQueryResponse/rader/rad[normalisera-space(@ExtraFilterField) = "värde"])" />
    Svar
  8. Robin Meuré

    Hej Paul!

    Bra jobbat! Jag hade också något sådant i mitt sinne att visa SharePoint-listor på ett grafiskt sätt 😉

    Svar
  9. Frank

    Jag har ett "Använda instrumentpaneler i SharePoint’ fråga. Vi är ett militärt sjukhus som använder MOSS-standarden för vårt intranät och skulle vilja bygga en instrumentpanel för vår kommandogrupp för att se "realtid"’ om möjligt. En av de viktigaste punkterna som visar realtid nuvarande arbetsbelastningen inom anläggningen och bokstavligen titta på det ändra upp och ner (kan behöva klicka på “uppdatera”/F5).

    Tack på förhand,

    Svar

Lämna svar

Din e-postadress kommer inte att publiceras. behövliga fält är markerade *