Opprette søylediagrammer i SharePoint

17 svar

Oversikt:

(OPPDATERINGEN 12/04/07: Lagt en annen interessant ressurs på slutten kobling til en annen blogg som omhandler dette via en veldig interessant webdel)

Dette blogginnlegget beskriver hvordan du oppretter et stolpediagram i SharePoint. Dette fungerer både WSS og MOSS som det bare avhenger av webdelen for datavisning.

Den generelle tilnærmingen er som følger:

  1. Opprette en liste eller et dokumentbibliotek som inneholder dataene du vil lage.
  2. Plass tilknyttet dokumentbiblioteket / egendefinert liste på en side og konvertere den til en webdelen for datavisning (DVWP).
  3. Endre det DVWP XSL for å generere HTML som vises som en graf.

Virksomhet Scenario / Installasjonsprogrammet:

Jeg har opprettet en egendefinert liste med standard Tittel-kolonnen og en ekstra kolonne, "Status". Denne modeller (veldig simplistically) "tillatelse For regning" scenariet der tittelen representerer prosjektet og Status en verdi fra listen over:

  • Foreslått
  • I prosessen
  • Stoppet

Målet er å produsere en interaktiv vannrett stolpediagram som viser disse statuskoder.

Jeg har fylt ut listen og det ser slik ut:

bilde

Opprette webdelen for datavisning:

Lage DVWP ved å legge den egendefinerte listen på en side (siden i mitt tilfelle) og følg instruksjonene her (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

I tillegg til å lage DVWP, Vi må også angi egenskapen paginerer å vise alle tilgjengelige rader. For meg, Dette ser noe som dette:

bilde

På dette punktet, Jeg lukke alltid SPD og leseren. Jeg deretter åpne siden ved hjelp av leseren på nytt. Dette unngår tilfeldigvis rote opp del weboppsett på siden.

Endre XSLT:

Det er nå tid til å endre XSLT.

Jeg har alltid bruke visual studio til dette. (Se her for en viktig merknad om intellisense som vil hjelpe deg mye).

Jeg opprette et tomt prosjekt legge til fire nye filer (erstatte ordene "Original" og "ny" etter behov):

  • Original.XSLT
  • New.XSLT
  • Opprinnelige Params.xml
  • Nye Params.xml

I mitt tilfelle, Det ser ut som dette:

bilde

Endre webdelen og kopier parametere og XSL til originalen»" versjonen i Visual Studio.

Målet her er å føre XSL å forvandle resultatene vi kommer tilbake fra DVWP spørringen i HTML som gjengir som en graf.

Dette, Det hjelper å først vurdere hva HTML skal se ut før vi forvirret av galskapen som er kjent som "XSL". (Å være klar, Følgende er bare et eksempel; ikke skrive det inn eller lime inn visual studio. Jeg gi en full slag utgangspunkt for senere i skrive opp). Følgende eksempel diagram gjengis som HTML umiddelbart etter:

Smak Bar Graph

Tilsvarende HTML:

<HTML>
<kroppen>
<Center>
<tabell bredde = 80%>
<tr><TD><Center>Vannrett stolpediagram</TD></tr>
<tr>
<TD align = "center">
<tabellkantlinjen = "1" bredde = 80%>
<tr>
<TD bredde = 10%>Åpne</TD>
<TD><tabell cellpadding ="0" cellspacing ="0" border = 0 width = 50%><St bgcolor = rød><TD>&nbsp;</TD></tr></tabell></TD>
</tr>
<tr>
<TD bredde = 10%>Stengt</TD>
<TD><tabell cellpadding ="0" cellspacing ="0" border = 0 width = 25%><St bgcolor = rød><TD>&nbsp;</TD></tr></tabell></TD>
</tr>
<tr>
<TD bredde = 10%>Stoppet</TD>
<TD><tabell cellpadding ="0" cellspacing ="0" border = 0 width = 25%><St bgcolor = rød><TD>&nbsp;</TD></tr></tabell></TD>
</tr>
</tabell>
</TD>
</tr>
</tabell>
</kroppen>
</HTML>

Jeg brukte en død enkel tilnærming til å skape min barer ved å angi bakgrunnsfarge for en rad "røde".

Det takeaway her er dette: Til slutt, alt vi gjør er skaper HTML med rader og kolonner.

Malen XSLT:

Jeg har kopiert XSLT-filen som genererer et vannrett stolpediagram. Det er ganske godt kommentert så jeg ikke vil legge mye her bortsett fra disse notatene:

  • Jeg startet med standard XSL som SharePoint Designer ga meg da jeg først skapte DVWP.
  • Jeg klarte å kutte dette ned fra SPD 657 linjer 166 linjer.
  • Jeg rote ikke rundt med parameterne XML-filen (som er atskilt fra XSL og du vet hva jeg mener når du går for å endre DVWP selv; Det er to filer kan du endre). Men, for å forenkle it, Jeg fjernet nesten alle av dem fra XSL. Dette betyr at hvis du vil gjøre bruk av disse parametrene, du trenger bare legge variabel definisjoner XSL. Det vil være lett siden du har de opprinnelige XSL variable definisjonene i visual studio-prosjekt.
  • Du bør kunne kopiere og lime inn dette direkte i visual studio-prosjekt. Deretter, ta mine samtaler og sett dine egne kall til "ShowBar".
  • Vil neddrillingen fungerer ved å opprette en <et href> som dette: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Denne teknikken kan være av verdi i andre sammenhenger. Først, Jeg trodde jeg måtte oppfyller en mer kompleks: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, men i mine omgivelser som er ikke nødvendig. Listens URL sendes til oss av SharePoint så dette er ganske lett å generalisere.

Her er det:

<XSL:stilark versjon="1.0" Ekskluder-resultat-prefikser="RS z o s ddwrt dt msxsl" 
 xmlns:msxsl="urn:schemas-microsoft-com:XSLT" xmlns:XSL="http://www.w3.org/ 1999/XSL/overføring" 
 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="urn:schemas-microsoft-com:Office" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:dt="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="urn:schemas-microsoft-com:radsettet" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="urn:FrontPage:intern">
  <XSL:utgang metoden="HTML" innrykk="nei" />
  <XSL:desimal-format NaN="" />
  <XSL:param navn="ListUrlDir"></XSL:param> <!-- Jeg nød denne å støtte en neddrilling.  -->

  <XSL:mal kamp="/" 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">Tabell</XSL:variabel>
    <XSL:variabel navn="Rader" Velg="/dsQueryResponse/rader/rad" />
    <XSL:variabel navn="dvt_RowCount" Velg="antall($Rader)" />
    <XSL:variabel navn="IsEmpty" Velg="$dvt_RowCount = 0" />
    <XSL:variabel navn="dvt_IsEmpty" Velg="$dvt_RowCount = 0" />

    <XSL:Velg>
      <XSL:når test="$dvt_IsEmpty">
        Det er ingen data diagrammet!<br/>
      </XSL:når>
      <XSL:ellers>

        <!--
          Interessante ting begynner her.

          Vi må definere et par variabler for hver rad i diagrammet: Totalt antall elementer og prosent av total.
        -->
        <XSL:variabel navn="totalProposed" Velg="antall(/dsQueryResponse/rader/rad[Normalize-plass(@Status) = 'Foreslått'])" />
        <XSL:variabel navn="percentProposed" Velg="$totalProposed div $dvt_RowCount" />

        <XSL:variabel navn="totalInProcess" Velg="antall(/dsQueryResponse/rader/rad[Normalize-plass(@Status) = "Pågår"])" />
        <XSL:variabel navn="percentInProcess" Velg="$totalInProcess div $dvt_RowCount" />

        <XSL:variabel navn="totalStalled" Velg="antall(/dsQueryResponse/rader/rad[Normalize-plass(@Status) = "Stoppet"])" />
        <XSL:variabel navn="percentStalled" Velg="$totalStalled div $dvt_RowCount" />

        <!--
          Vi definerer våre HTML-tabell her.  Jeg er låne fra noen SharePoint standardstilene her å gjøre det konsekvent.  Jeg tror det vil respektere endringer i globale css filen samt tema overstyrer.
        -->
        <tabell bredde="100%" cellspacing="0" CellPadding="2"
stil="kantlinje-høyre: 1 solid #C0C0C0; kantlinje-bunn: 1 solid #C0C0C0; venstre kantlinjestil: solid; venstre kantlinjetykkelse: 1; kantlinje-topp-stil: solid; topp kantlinjetykkelse: 1;">

           <tr>
            <TD justere="Center">
              <tabell kantlinje="1" bredde="100%">

                <!--
                  For hver vi vil lage, Vi kaller det "-ShowBar" mal.
                  Vi passerer det:
                  1. En etikett for raden.  Dette er forvandlet til en hyperkobling.
                  2. Prosent (variabel ovenfra).
                  3. Selve navnet på koden fra den underliggende listen.  Dette trenger ikke å matche Vis etikett.
                  4. Feltverdien tilpasset for #3.
                  5. Totalt antall artikler av denne statuskoden (ikke totalsummen av alle statuskoder).

                  Den avgir en <tr></tr> og vannrett stolpediagram.

                  Vi kaller denne malen for hver statuskode vi vil vise.
                -->
                <XSL:samtale-mal navn="ShowBar">
                  <XSL:med param navn="BarDisplayLabel" Velg="'Foreslått'"/>
                  <XSL:med param navn="BarPercent" Velg="$percentProposed"/>
                  <XSL:med param navn="QueryFilterFieldName" Velg=""Status""/>
                  <XSL:med param navn="QueryFilterFieldValue" Velg="'Foreslått'"/>
                  <XSL:med param navn="TotalItems" Velg="$totalProposed"></XSL:med param>
                </XSL:samtale-mal>

                <XSL:samtale-mal navn="ShowBar">
                  <XSL:med param navn="BarDisplayLabel" Velg=""Stoppet""/>
                  <XSL:med param navn="BarPercent" Velg="$percentStalled"/>
                  <XSL:med param navn="QueryFilterFieldName" Velg=""Status""/>
                  <XSL:med param navn="QueryFilterFieldValue" Velg=""Stoppet""/>
                  <XSL:med param navn="TotalItems" Velg="$totalStalled"></XSL:med param>
                </XSL:samtale-mal>

                <XSL:samtale-mal navn="ShowBar">
                  <XSL:med param navn="BarDisplayLabel" Velg=""Pågår""/>
                  <XSL:med param navn="BarPercent" Velg="$percentInProcess"/>
                  <XSL:med param navn="QueryFilterFieldName" Velg=""Status""/>
                  <XSL:med param navn="QueryFilterFieldValue" Velg=""Pågår""/>
                  <XSL:med param navn="TotalItems" Velg="$totalInProcess"></XSL:med param>
                </XSL:samtale-mal>

              </tabell>
            </TD>
          </tr>
        </tabell>
      </XSL:ellers>
    </XSL:Velg>
  </XSL:mal>

  <!--
    Denne malen gjør arbeidet med å vise enkeltlinjer i stolpediagrammet.

    Du vil sannsynligvis gjøre de fleste av dine tilpasning her.
  -->
  <XSL:mal navn="ShowBar">
    <XSL:param navn="BarDisplayLabel" /> <!-- etiketten for å vise -->
    <XSL:param navn="BarPercent"/> <!-- Prosent av totalt. -->
    <XSL:param navn="QueryFilterFieldName"/> <!-- Brukes til å hoppe til spørringen & filter -->
    <XSL:param navn="QueryFilterFieldValue"/> <!-- Brukes til å hoppe til spørringen & filter -->
    <XSL:param navn="TotalItems" /> <!-- Totalt antall denne barlabel -->

    <tr>

      <!-- Baren merke seg. -->
      <TD klassen="MS-formbody" bredde="30%">

        <!--
          Denne neste rekke utsagn bygger en spørrestreng som tillater oss å drille ned til en filtrert visning av de underliggende dataene.
          Vi gjøre bruk av noen ting her:
          1. Vi kan sende FilterField1 og FilterValue1 til en liste for å filtrere på en kolonne.
          2. SharePoint passerer en viktig parameter for oss, ListUrlDir som peker til den underliggende listen som denne DVWP "kjører".

          Ikke XSL moro?
        -->
        <XSL:tekst Deaktiver-utdata-unnslippe="ja">
        <![CDATA[<et href ="]]></XSL:tekst>
        <XSL:verdien av Velg="$ListUrlDir"/>
        <XSL:tekst Deaktiver-utdata-unnslippe="ja"><![CDATA[?FilterField1 =]]></XSL:tekst>
        <XSL:verdien av Velg="$QueryFilterFieldName"/>
        <XSL:tekst Deaktiver-utdata-unnslippe="ja"><![CDATA[&FilterValue1 =]]></XSL:tekst>
        <XSL:verdien av Velg="$QueryFilterFieldValue"/>
        <XSL:tekst Deaktiver-utdata-unnslippe="ja"><![CDATA[">]]></XSL:tekst>
        <XSL:verdien av Velg="$BarDisplayLabel"/>
        <XSL:tekst Deaktiver-utdata-unnslippe="ja"><![CDATA[</en>]]></XSL:tekst>

        <!-- Neste bit viser noen tall i format: "(Totalt / % Total)" -->
        (<XSL:verdien av Velg="$TotalItems"/> /

        <!-- Dette skaper en hyggelig prosent etikett for oss.  takk, Microsoft! -->
        <XSL:samtale-mal navn="percentformat">
          <XSL:med param navn="prosent" Velg="$BarPercent"/>
        </XSL:samtale-mal>)

      </TD>

      <!-- Endelig, avgir en <TD> kode for bar seg.-->
      <TD>
        <tabell CellPadding="0" cellspacing="0" kantlinje="0"
bredde="{runde($BarPercent * 100)+1}%">
          <tr BgColor="rød">
            <XSL:tekst Deaktiver-utdata-unnslippe="ja"><![CDATA[&nbsp;]]></XSL:tekst>
          </tr>
        </tabell>
      </TD>
    </tr>

  </XSL:mal>

  <!-- Dette er hentet direkte fra noen XSL jeg fant i en MS-mal. -->
  <XSL:mal navn="percentformat">
    <XSL:param navn="prosent"/>
    <XSL:Velg>
      <XSL:når test="formater tall($prosent, '#,##0%;-#,##0%')= 'NaN'">0%</XSL:når>
      <XSL:ellers>
        <XSL:verdien av Velg="formater tall($prosent, '#,##0%;-#,##0%')" />
      </XSL:ellers>
    </XSL:Velg>
  </XSL:mal>

</XSL:stilark>

Resultatene:

XSL ovenfra genererer denne grafen:

bilde

Drille ned til de underliggende dataene ved å klikke på statuskoden:

bilde

Avsluttende tanker:

Dette kan generaliseres?

Jeg elsker dette grafisk konseptet, men jeg hater det faktum at jeg måtte gå inn og gjøre så mye hånd-koding. Jeg har gitt en liten tanke til om det kan generaliseres og jeg optimistisk, men jeg er også litt engstelig at det kan være en murvegg sted langs stien som ikke tilbyr noen arbeide-i nærheten. Hvis noen har noen gode ideer om dette, Vennligst noter i kommentarfeltet eller email meg.

Loddrett grafer:

Dette er et vannrett stolpediagram. Det er sikkert mulig å opprette en loddrett graf. Vi nød rettferdig å endre HTML. Jeg vil starte på samme måte: Opprette en HTML-representasjon av et loddrett stolpediagram og deretter finne ut hvordan å få det via XSL. Hvis noen er interessert i det, Jeg kunne bli overtalt til å prøve den ut og arbeide ut kinks. Hvis noen allerede har gjort det, vennligst gi meg beskjed og jeg vil gjerne link til bloggen din 🙂

Jeg tror at utfordringen med en loddrett graf er at etikettene for grafen er vanskeligere å håndtere, men ikke umulig.

Feltet navn fikser:

Det er to ting å se etter med feltnavnene.

Første, et feltnavn med et mellomrom må være rømte i XSL. Dette vil trolig være et problem her:

        <XSL:variabel navn="totalProposed" 
 Velg="antall(/dsQueryResponse/rader/rad[Normalize-plass(@Status) = 'Foreslått'])" />

Hvis statusen"" kolonnen er egentlig benevnt "statuskode" må du referere til den som "Status_x0020_Code":

   <XSL:variabel navn="totalProposed" 
 Velg="antall(/dsQueryResponse/rader/rad[Normalize-plass(@Status_x0020_Code) = 'Foreslått'])" />

Andre, og jeg er litt uklar på dette, men du må også være på vakt for feltnavnet endres. Hvis du feltet "statuskode" og senere på, endre navnet til "AFE Status", "interne navn" ikke endre. Det interne navnet vil fortsatt være "statuskode" og må være referert til som "Status_x0020_Code". "Andre ressurser" koblinger kan bidra til å diagnostisere og løse denne type problem.

Om denne fargen:

Jeg plukket "rød" fordi det er behagelig for meg i øyeblikket. Det ville ikke være en stor avtale å vise forskjellige farger for å gi mer enn bare en visuell beskrivelse av et tall, men også gi en nyttig KPI. For eksempel, Hvis prosentandelen av "stoppet" AFES er > 10% Vis det røde, ellers Vis den i svart. Bruk <XSL:Velg> å oppnå dette.

Andre ressurser:

Happy transformere!

<slutten />

Abonner på bloggen min!

Technorati Merkelapper: , , , , , ,

17 tanker om “Opprette søylediagrammer i SharePoint”

  1. Chris B

    Denne siden fullført nesten oppgaven jeg var ute etter.

    Jeg har en gruppe som vil bruke SharePoint undersøkelse listen til å opprette en ukentlig meningsmåling. Fangsten? De ønsker ikke å se koden… Eller endre systemet hver gang de sender målingen (planlagt for ukentlig oppdatering).

    Jeg klarte å koble denne til listen undersøkelse og opprette grafen på den første svar-kolonnen. Hva jeg kan ikke forutsi om er verdiene og etikettene som de må fremover. For å lage saker kan verre de ha mer eller mindre svar tilgjengelig hver uke.

    Jeg vil se andre steder bare i tilfelle, men har noen grunnlegge en vei å lage rader og etiketter basert på antall tilgjengelige alternativer og dynamisk innstilling dette stedet harde koding forventede verdier?

    Svar ↓
  2. Greg Laushine

    Takk Paul. Svært nyttig. Takk til arbeid, Jeg klarte å legge en graf bar kolonnen til en eksisterende DVWP (f.eks. for aktiviteter) veldig enkelt med noen få linjer av koden.
    I SharePoint Designer, Jeg satt inn en datavisning med tittelen og % komplett kolonner fra en oppgaveliste. Jeg plassere markøren i én av cellene og høyreklikk. Jeg velger sette inn en kolonne til høyre. I kodevisning, Jeg fant den <TD> og erstattet den <XSL:tekstobjekt i cellen med koden:
    <tabell cellpadding ="0" cellspacing ="0" Border ="0"
    bredde = "{runde(@PercentComplete * 100)+1}%">
    <St style = "bakgrunnsfarge:rød">
    <XSL:tekst Deaktiver-utdata-unnslippe = "yes"><![CDATA[&nbsp;]]></XSL:tekst>
    </tr>
    </tabell>

    Merk jeg endret fargekode rad fra bgcolor = "rød" stil = "bakgrunnsfarge:rød"
    Også, var i stand til å velge én av kolonnene i listen (@PercentComplete) i stedet for "$BarPercent"
    Greg

    Svar ↓
  4. Wolfgang
    Paul, Takk for denne! Jeg opprettet en nøyaktig kopi av hva du gjorde og det fungerer nesten perfekt. Det var en liten sak i rad 2 avsnittet av koden:
    <XSL:malen kamp = /" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Når jeg rettet det den arbeider like ynde! Jeg vil nå tilpasse dette til min egen liste og status, men jeg er sikker det ikke vil være å vanskelig. (Jeg vil legge resultatet)
    Takk igjen
    ~ Wolle
    Svar ↓
  5. Ingen navn
    spørsmål –
    Hva om det i min graf, Jeg ønsket en variabel ikke bare telle én status, men teller flere seg?
    Så, for eksempel hva om jeg hadde —
    <XSL:variabelnavnet = "RequestsInitialized"
    Velg = "antall(/dsQueryResponse/rader/rad[Normalize-plass(@Status)= "VIA"])" />
    –Det er, Jeg vil at det skal telle forekomster av ‘WIP’, men jeg vil også denne variabelen å telle noe annet som ‘Venter Review’.. hvordan ville jeg gjøre dette?
    takk!
    Svar ↓
  6. Murty Srirangam
    Hei Paul,
    Iam virkelig dette er virkelig en stor innsats av deg. Du kanne behage forklare hvor ville jeg legge denne koden. Jeg har opprettet en prjoect med fire nye filer. Deretter kan du forklare nærmere hva bør jeg gjøre.
    takk
    Murty
    Svar ↓
  8. Andrew Carrington
    hei, Jeg prøver å endre denne litt slik at den viser en graf av oppgaver i oppgavelister mot brukerinformasjon. Den bruker en kolonne kalt @AssignedTo som en bruker tilstedeværelse kolonne. Jeg får det til å vise gjengitte HTML, men får det ikke til å beregne verdier.
    Noen ideer?
    takk
    Andy
    Svar ↓
  9. Patrik Luca skrev:
    Hei Paul,
    flott innlegg!
    Et spørsmål:
    Jeg ønsker å filtrere på to felt samtidig: Hvordan kan dette oppnås?
    For eksempel, en av variablene kalles totalStalled og den filtrerer @Status.
    Jeg ønsker å filtrere samtidig redusere min antall returnerte poster på et annet felt.
    Jeg har allerede funnet hvordan å lage en ‘OR’, men jeg donnot klarer å finne den ‘AND’
    En ‘OR’ oppnås som dette:
    <XSL:variabelnavnet = "totalStalled" Velg = "antall(/dsQueryResponse/rader/rad[Normalize-plass(@Status) = ‘Stall’] | /dsQueryResponse/rader/rad[Normalize-plass(@ExtraFilterField) = ‘Verdi’])" />
    Svar ↓
  15. Robin Meuré

    Hei Paul!

    Hyggelig arbeid! Jeg hadde også noe sånt som dette i mitt sinn for å se Sharepoint-lister i en grafisk måte 😉

    Svar ↓
  16. Frank

    Jeg har en ‘Bruke Dashbord i Sharepoint’ spørsmål. Vi er et militært sykehus med MOSS standarden for intranettet og ønsker å bygge et dashbord for vår kommandoen gruppe se ' sanntid’ Hvis mulig. En av de viktigste punktene viser sanntids gjeldende arbeidsmengden innen anlegget og bokstavelig talt se det endre opp og ned (må du klikke “Oppdater”/F5).

    Takk på forhånd,

    Svar ↓

Avreise en svar til Patrik Luca skrev: Avbryt svar

e-postadressen din vil ikke offentliggjøres. Obligatoriske felt er merket *