Ustvarite Bar grafov v SharePoint

Pregled:

(POSODOBITEV 12/04/07: Dodali še zanimiv vir na koncu povezujete drug blog, ki obravnava to preko zelo zanimiv spletni gradnik)

Ta blog vnos opisuje, kako ustvarite palični grafikon v SharePoint. To deluje v WSS in MOSS okoljih, kot je odvisna le od spletni gradnik podatkovnega pogleda.

Splošni pristop je, kot sledi:

  1. Ustvarite seznam ali knjižnico, ki vsebuje želene podatke za graf.
  2. Kraj je povezana knjižnica dokumentov / po meri seznam na stran in jo pretvorite v spletni gradnik podatkovnega pogleda (DVWP).
  3. Spremeni v DVWP XSL za ustvarjanje HTML, ki kaže kot graf.

Poslovni scenarij / Nastavitev:

Jaz sem ustvaril seznam po meri s standardno naslov stolpca in en dodaten stolpec, "Status". Ta modeli (zelo poenostavljeno) "dovoljenje za stroške" scenarij, kjer naslov predstavlja projekt in stanje vrednost s seznama:

  • Predlagani
  • V procesu
  • Zastala

Cilj je izdelava interaktivne vodoravni črtni grafikon, ki prikazuje te kode stanja.

So poseljena s seznama in izgleda takole:

slike

Ustvarite spletni gradnik podatkovnega pogleda:

Ustvarite v DVWP z dodajanjem po meri seznam na stran (strani v mojem primeru) in sledite navodilom tukaj (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Poleg tega, da preprosto ustvarjanje na DVWP, moramo tudi nastavite lastnost ostranjevalne pokazati vse vrstice na voljo. Za mene, to izgleda nekako takole:

slike

Na tej točki, Sem vedno zaprite SPD in brskalnik. Sem nato ponovno odpre stran z brskalnikom. S tem se izognemo pomotoma mucking up spletna postavitev del na strani.

Spreminjanje XSLT:

Zdaj je čas za spremembo XSLT.

Jaz zmeraj raba vizualen atelje za to. (Glej tukaj za pomembno obvestilo o intellisense, ki vam bo pomagal veliko).

I ustvarite prazen projekt dodate štiri nove datoteke (Zamenjava besede "Original" in "New" kot primerno):

  • Original.XSLT
  • New.XSLT
  • Original Params.xml
  • Novo Params.xml

V mojem primeru, Izgleda, da to:

slike

Spremenite spletni gradnik in kopijo params in XSL izvirniku"" različica v Visual Studio.

Cilj tukaj je, da povzroči XSL za pretvorbo rezultatov smo dobili nazaj od DVWP poizvedbe v HTML, da postane kot graf.

V ta namen, pomaga, da najprej razmislite, kaj je HTML izgledal, preden sva zmedena norosti, ki je znan kot "XSL". (Da bo jasno, To je preprosto primer; ne vnesite ali copy/paste v vizualen atelje. Jaz priskrbeti se poln udarec izhodiščna točka za to kasneje časnikarsko poročilo). Naslednji graf vzorec upodobi kot HTML, takoj po:

Vzorec stolpčnega grafikona

Ustrezni HTML:

<HTML>
<telo>
<Center>
<Tabela širina = 80 %>
<tr><TD><Center>Vodoravni palični grafikon</TD></tr>
<tr>
<TD align = "center">
<obroba tabele = "1" širina = 80 %>
<tr>
<td širino = 10 %>Odprta</TD>
<TD><Tabela cellpadding ="0" cellspacing ="0" obroba = 0 širina = 50 %><tr bgcolor = rdeča><TD>&nbsp;</TD></tr></Tabela></TD>
</tr>
<tr>
<td širino = 10 %>Zaprta</TD>
<TD><Tabela cellpadding ="0" cellspacing ="0" obroba = 0 width = 25 %><tr bgcolor = rdeča><TD>&nbsp;</TD></tr></Tabela></TD>
</tr>
<tr>
<td širino = 10 %>Zastala</TD>
<TD><Tabela cellpadding ="0" cellspacing ="0" obroba = 0 width = 25 %><tr bgcolor = rdeča><TD>&nbsp;</TD></tr></Tabela></TD>
</tr>
</Tabela>
</TD>
</tr>
</Tabela>
</telo>
</HTML>

Sem rabil mrtvih preprost pristop k ustvarjanju moje palice z določitvijo barvo ozadja vrstice za "rdeče".

Take-away tukaj je to: Na koncu, vse delamo ustvarja HTML z vrsticami in stolpci.

Predloge XSLT:

Sem pa prepisali XSLT, ki ustvarja graf vodoravne vrstice. To je dokaj dobro komentiral, da ne dodam veliko tukaj razen te opombe:

  • Začel sem z privzeti XSL, ki SharePoint Designer, mi je dal, ko sem prvič ustvarili na DVWP.
  • Sem mogel odrezati od osebe EPD 657 linije za 166 vrstice.
  • Nisem igral s parametri XML datoteke (ki je ločeno od XSL in boste vedeli, kaj mislim, ko greš za spremembo DVWP, sam; Obstajata dve datoteke, lahko spremenite). Vendar, zaradi poenostavitve je, Ali odstranili skoraj vse izmed njih s XSL. To pomeni, da če želite, da bi uporaba teh parametrov, vi šele potreba prišteti spremenljivo definicije nazaj v XSL. Da bo enostavno, saj boste imeli prvotni XSL spremenljivo opredelitve v vizualen atelje načrt.
  • Moral bi biti zmožen prepisati ter pasta to naravnost v vaš vizualen atelje načrt. Nato, odstranite moje klice in vstavite svoje klice na "ShowBar".
  • Vrtanje navzdol deluje z ustvarjanjem do <a href> všeč mi je: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Ta tehnika lahko vrednosti v drugih kontekstih. Na prvi, Mislil sem, da bi morali ustrezati bolj zapletena oblika: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, vendar v mojem okolju ki ni potrebno. Na seznamu URL je sprejel nam SharePoint tako to je precej enostavno posploševati.

Tukaj je:

<XSL:Stylesheet različica="1.0" izključi-rezultat-predpone="RS ž o s ddwrt dt msxsl" 
xmlns:msxsl="UNA:schemas-microsoft-com:XSLT" xmlns:XSL="http://www.w3.org/ 1999 / / pretvorbo XSL"
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="UNA:schemas-microsoft-com:urad" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882"
xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="UNA:schemas-microsoft-com:tabele vrstic" xmlns:ž="#RowsetSchema"
xmlns:ddwrt2="UNA:FrontPage:notranji"
> <XSL:izhod metoda="HTML" zamik="ne" /> <XSL:decimalni obliki NaN="" /> <XSL:param ime="ListUrlDir"></XSL:param> <!-- Rabim to za podporo drill-down. --> <XSL:predlogo tekmo="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20"
> <XSL:spremenljivka ime="dvt_StyleName">Tabela</XSL:spremenljivka> <XSL:spremenljivka ime="Vrstice" Izberite="/Vrstice/dsQueryResponse/vrstico" /> <XSL:spremenljivka ime="dvt_RowCount" Izberite="Count($Vrstice)" /> <XSL:spremenljivka ime="IsEmpty" Izberite="$dvt_RowCount = 0" /> <XSL:spremenljivka ime="dvt_IsEmpty" Izberite="$dvt_RowCount = 0" /> <XSL:Izberite> <XSL:ko test="$dvt_IsEmpty"> Ni podatkov za graf!<br/> </XSL:ko> <XSL:drugače> <!-- Zanimive stvari se začne tukaj. Moramo opredeliti par spremenljivke za vsako vrstico v graf: skupno število elementov in odstotek celote. --> <XSL:spremenljivka ime="totalProposed" Izberite="Count(/Vrstice/dsQueryResponse/vrstico[normalizira prostor(@Status) = "Predlaga"])" /> <XSL:spremenljivka ime="percentProposed" Izberite="$totalProposed div $dvt_RowCount" /> <XSL:spremenljivka ime="totalInProcess" Izberite="Count(/Vrstice/dsQueryResponse/vrstico[normalizira prostor(@Status) = "V procesu"])" /> <XSL:spremenljivka ime="percentInProcess" Izberite="$totalInProcess div $dvt_RowCount" /> <XSL:spremenljivka ime="totalStalled" Izberite="Count(/Vrstice/dsQueryResponse/vrstico[normalizira prostor(@Status) = "Zastala"])" /> <XSL:spremenljivka ime="percentStalled" Izberite="$totalStalled div $dvt_RowCount" /> <!-- Definiramo mizi HTML. Jaz sem zadolževanja iz nekatere standardne sloge SharePoint tukaj da bi dosledno. Mislim, da bo tudi tema preglasi čast spremembe globalne css datoteke. --> <Tabela širina="100%" cellspacing="0" cellpadding="2" slog="obroba desno: 1 trden #C0C0C0; spodnji rob: 1 trden #C0C0C0; meja proti levi-style: trdna; meja proti levi-width: 1; top-slog obrobe: trdna; Širina obrobe vrh: 1;"> <tr> <TD Poravnaj="Center"> <Tabela obroba="1" širina="100%"> <!-- Za vsako stanje, ki želimo graf, imenujemo "ShowBar" predlogo. Peljemo se: 1. Oznako za vrstico. To se je spremenilo v hiperpovezavo. 2. Odstotek (spremenljivke od zgoraj). 3. Dejanskega imena polja zakonika iz osnovnega seznama. To ni treba prilagoditi Prikaži oznako. 4. Vrednost polja ujemajo za #3. 5. Skupno število elementov te kode stanja (ne vsote vse kode stanja). Oddaja na <tr></tr> in vodoravni palični grafikon vrstice. Imenujemo to predlogo za vsako kodo stanja, želimo, da si ogledate. --> <XSL:Call-template ime="ShowBar"> <XSL:s param ime="BarDisplayLabel" Izberite=""Predlaga""/> <XSL:s param ime="BarPercent" Izberite="$percentProposed"/> <XSL:s param ime="QueryFilterFieldName" Izberite=""Status""/> <XSL:s param ime="QueryFilterFieldValue" Izberite=""Predlaga""/> <XSL:s param ime="TotalItems" Izberite="$totalProposed"></XSL:s param> </XSL:Call-template> <XSL:Call-template ime="ShowBar"> <XSL:s param ime="BarDisplayLabel" Izberite=""Zastala""/> <XSL:s param ime="BarPercent" Izberite="$percentStalled"/> <XSL:s param ime="QueryFilterFieldName" Izberite=""Status""/> <XSL:s param ime="QueryFilterFieldValue" Izberite=""Zastala""/> <XSL:s param ime="TotalItems" Izberite="$totalStalled"></XSL:s param> </XSL:Call-template> <XSL:Call-template ime="ShowBar"> <XSL:s param ime="BarDisplayLabel" Izberite=""V procesu""/> <XSL:s param ime="BarPercent" Izberite="$percentInProcess"/> <XSL:s param ime="QueryFilterFieldName" Izberite=""Status""/> <XSL:s param ime="QueryFilterFieldValue" Izberite=""V procesu""/> <XSL:s param ime="TotalItems" Izberite="$totalInProcess"></XSL:s param> </XSL:Call-template> </Tabela> </TD> </tr> </Tabela> </XSL:drugače> </XSL:Izberite> </XSL:predlogo> <!-- Ta predloga ne dela v palični grafikon prikazuje posamezne vrstice. Verjetno vam najbolj vaše tweaking tukaj. --> <XSL:predlogo ime="ShowBar"> <XSL:param ime="BarDisplayLabel" /> <!-- oznako za prikaz --> <XSL:param ime="BarPercent"/> <!-- Odstotki vsote. --> <XSL:param ime="QueryFilterFieldName"/> <!-- Uporabili za skok na poizvedbo & filter --> <XSL:param ime="QueryFilterFieldValue"/> <!-- Uporabili za skok na poizvedbo & filter --> <XSL:param ime="TotalItems" /> <!-- skupno število tem barlabel --> <tr> <!-- Bar sama oznaka. --> <TD razred="MS-formbody" širina="30%"> <!-- To naslednji niz izjav gradi poizvedbi, ki nam omogoča, da vaja na Filtrirani pogled osnovnih podatkov. Mi lahko uporabite nekaj stvari tukaj: 1. Peljemo FilterField1 in FilterValue1 na seznam filter v stolpcu. 2. SharePoint je mimo ključni parameter nam, ListUrlDir, ki kaže na osnovni seznam, proti kateri to DVWP "izvaja". Ni zabavno XSL? --> <XSL:besedilo onesposobiti-proizvodnja uhaja="da"> <![CDATA[<a href ="]]></XSL:besedilo> <XSL:vrednost za Izberite="$ListUrlDir"/> <XSL:besedilo onesposobiti-proizvodnja uhaja="da"><![CDATA[?FilterField1 =]]></XSL:besedilo> <XSL:vrednost za Izberite="$QueryFilterFieldName"/> <XSL:besedilo onesposobiti-proizvodnja uhaja="da"><![CDATA[&FilterValue1 =]]></XSL:besedilo> <XSL:vrednost za Izberite="$QueryFilterFieldValue"/> <XSL:besedilo onesposobiti-proizvodnja uhaja="da"><![CDATA[">]]></XSL:besedilo> <XSL:vrednost za Izberite="$BarDisplayLabel"/> <XSL:besedilo onesposobiti-proizvodnja uhaja="da"><![CDATA[</a>]]></XSL:besedilo> <!-- Naslednji košček kaže nekaj številk v obliki: "(skupaj / % celotne)" --> (<XSL:vrednost za Izberite="$TotalItems"/> / <!-- To ustvarja lepo odstotkov oznako za nas. hvala, Microsoft! --> <XSL:Call-template ime="percentformat"> <XSL:s param ime="odstotkov" Izberite="$BarPercent"/> </XSL:Call-template>) </TD> <!-- Končno, oddajajo v <TD> oznako za bar sama.--> <TD> <Tabela cellpadding="0" cellspacing="0" obroba="0" širina="{krog($BarPercent * 100)+1}%"> <tr BGColor="rdeča"> <XSL:besedilo onesposobiti-proizvodnja uhaja="da"><![CDATA[&nbsp;]]></XSL:besedilo> </tr> </Tabela> </TD> </tr> </XSL:predlogo> <!-- To je vzeta neposredno iz nekaterih XSL, ki sem našel v MS predlogo. --> <XSL:predlogo ime="percentformat"> <XSL:param ime="odstotkov"/> <XSL:Izberite> <XSL:ko test="oblika-število($odstotkov, '#,##0%;-#,##0%')= "NaN"">0%</XSL:ko> <XSL:drugače> <XSL:vrednost za Izberite="oblika-število($odstotkov, '#,##0%;-#,##0%')" /> </XSL:drugače> </XSL:Izberite> </XSL:predlogo> </XSL:Stylesheet>

Rezultati:

XSL od zgoraj ustvarja Ta graf:

slike

Vaja na temeljnih podatkov s klikom na kodo stanja:

slike

Sklepne misli:

Je to možno posplošiti?

Ljubim ta vizualizirajo koncept, vendar pa sovražim dejstvo, da moram iti in narediti toliko ročno kodiranje. Sem dal malo misli na ali lahko mogoče posplošiti in sem optimističen, ampak jaz sem tudi malo strah, da lahko obstaja opečnatega zidu nekje po poti, ki ne ponujajo koli opus-okrog. Če ima kdo nekaj dobrih idej, na to, Prosimo, da opombo v komentarje ali email mi.

Navpično grafov:

To je graf vodoravne vrstice. To je zagotovo mogoče ustvariti navpično graf. Moramo spremeniti HTML. Jaz bi začeli na enak način: Ustvariti HTML predstavitev navpično črtni grafikon in nato ugotovimo, kako priti to preko XSL. Če kdorkoli je zavzet v ki, Sem se lahko prepričal, da preizkusite in izšlo zanka pentlja. Če je nekdo že naredil to, sporočite mi in z veseljem bom povezal vaš blog 🙂

Mislim, da izziv z navpično graf je, da so oznake za graf težje upravljati, ampak gotovo ni nemogoče.

Polje Ime imam:

Obstajata vsaj dve stvari pogledati ven z vašega imena polj.

Prvi, ime polja s presledkom je pobegnil v XSL. To bo verjetno vprašanje tukaj:

        <XSL:spremenljivka ime="totalProposed" 
Izberite="Count(/Vrstice/dsQueryResponse/vrstico[normalizira prostor(@Status) = "Predlaga"])" />

Če vaš "Status" stolpec je dejansko imenovane "kode stanja" potem boste morali sklicevati kot "Status_x0020_Code":

   <XSL:spremenljivka ime="totalProposed" 
Izberite="Count(/Vrstice/dsQueryResponse/vrstico[normalizira prostor(@Status_x0020_Code) = "Predlaga"])" />

Drugi, in jaz sem malo fuzzy, na to, vendar boste morali biti pozorni na polje Ime spremembe. Če vi ime vaš polje "koda stanja" nato kasneje, preimenovati v "AFE Status", ime"notranjega" ne spremeni. Interno ime bo še "kode stanja" in mora biti naveden kot "Status_x0020_Code". "Druga sredstva" povezave lahko pomagajo diagnosticirati in popraviti tovrstne težave.

O da barvo:

Sem izbral "rdeča" ker je prijeten za mene v tem trenutku. Ne bi bilo velik posel za prikaz različnih barvah tako, da zagotavlja več kot le vizualne opis števila, temveč tudi koristno KPI. Na primer, če odstotek "zastala" Osebe AFE je > 10% potem show rdeče, sicer kažejo v črni barvi. Uporaba <XSL:Izberite> da bi to dosegli.

Drugih virov:

Happy preoblikovanje!

<namen />

Naročite se na moj blog!

17 misli o "Ustvarite Bar grafov v SharePoint

  1. Sanja Bahić Pavlin

    Ta stran skoraj opravila nalogo, ki je iskal.

    Imam skupino, ki želi s seznamom SharePoint anketo ustvarite tedenska Anketa. Ulov? Ne želijo videti kodo… Ali sprememba sistema, vsakič, ko jih Pošlji anketo (načrtovanih za tedenski update).

    Sem bil sposoben povezati to raziskavo seznam in ustvariti graf na prvi stolpec odgovor. Kaj ne moremo napovedati, čeprav so vrednote in oznake, ki jih bodo potrebovali napreduje. Da bi zadeve še slabše imajo lahko bolj ali manj odgovorov, ki so na voljo vsak teden.

    Bo pogled nekje drugje samo v primeru, vendar je kdo našel način za ustvarjanje vrstic in oznake na off število razpoložljivih možnosti in dinamično nastavijo te namesto težko kodiranje pričakovane vrednosti?

    Odgovor
  2. Greg Laushine

    Hvala Paul. Zelo koristno. Hvala za vaše delo, Sem mogel, da dodate stolpec graf bar za obstoječe DVWP (npr.. za opravila) zelo enostavno z nekaj vrsticami kode.
    V programu SharePoint Designer, Sem vstavil pogled podatkov z naslovom in % popolna stolpcev iz seznama opravil. Postaviti kazalko v eni od celic in desni klik. I izberite Vstavi stolpec desno. V pogledu kode, Sem našel na <TD> in nadomesti z <XSL:element besedila znotraj celic s kodo:
    <Tabela cellpadding ="0" cellspacing ="0" obroba ="0"
    širina = "{krog(@PercentComplete * 100)+1}%">
    <tr style = "barva ozadja:rdeča">
    <XSL:besedilo onesposobiti-proizvodnja-uhaja = "yes"><![CDATA[&nbsp;]]></XSL:besedilo>
    </tr>
    </Tabela>

    Opomba, sem spremenil vrsto barvno kodo iz bgcolor = "rdeče" style = "barva ozadja:rdeča"
    Tudi, mogel izbrati enega od stolpcev v moj seznam (@PercentComplete) namesto "$BarPercent"
    Greg

    Odgovor
  3. Wolfgang
    Paul, hvala zakaj to! Ustvaril sem natančna kopija kaj si storil in deluje skoraj popoln. Je bil en majhen problem v vrstici 2. odstavka kode:
    <XSL:predloga tekmo = "/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Ko sem popravil, da deluje kot čar! Zdaj bo to prilagoditi svoj lasten seznam in stanje, vendar sem prepričan, da ne bo na trda. (Bom post rezultat)
    Še enkrat hvala
    ~ Wolle
    Odgovor
  4. Nobeno ime
    vprašanje –
    Kaj če moj grafu, Hotela sem spremenljivko, ki ni samo šteje eno stanje, vendar računajo več tisti?
    Tako, na primer, kaj če sem imel —
    <XSL:ime spremenljivke = "RequestsInitialized"
    izbrati = "count(/Vrstice/dsQueryResponse/vrstico[normalizira prostor(@Status)= "PVT"])" />
    –Stvar je, Jaz biti brez to želite prešteti primerke "PVT", vendar želim tudi Ta spremenljivka nekaj drugega kot »Čakajoč pregled« count.. kako bi to naredil?
    hvala!
    Odgovor
  5. Murty Srirangam
    Zdravo Paul,
    Iam res to je res velik napor, ki ste jih. Moči vi prosim razložiti, kjer bi po tej kodeks. So ustvarili na prjoect s štiri nove datoteke. Potem lahko razložite bolj podrobno kaj naj naredim.
    hvala
    Murty
    Odgovor
  6. Andrew Carrington
    živjo, Sem poskušal spremeniti to nekoliko tako, da prikazuje graf opravila na seznamu opravil proti informacije o uporabniku. Uporablja stolpec imenuje @AssignedTo ki je uporabnik prisotnost stolpec. Lahko dobite za prikaz opravljene HTML, vendar ne morete zaslužiti to izračun in prikaz vrednosti.
    Vse ideje?
    hvala
    Andy
    Odgovor
  7. Patrik Luca napisal:
    Zdravo Paul,
    Veliki post!
    Vprašanje:
    Rad bi filtrirali po dve polji ob istem času: kako to doseči?
    Na primer, eden od vaš spremenljivke se imenuje totalStalled in je filtri na @Status.
    Bi radi filter hkrati zmanjšati svoj število vrnjenih zapisov na drugo polje.
    Sem že našel kako narediti "Ali", vendar mi ne uspe najti "IN".’
    »ALI’ takole je mogoče doseči:
    <XSL:ime spremenljivke = "totalStalled" izbrati = "count(/Vrstice/dsQueryResponse/vrstico[normalizira prostor(@Status) = 'Zastalo'] | /Vrstice/dsQueryResponse/vrstico[normalizira prostor(@ExtraFilterField) = 'vrednost'])" />
    Odgovor
  8. Robin Meuré

    Zdravo Paul!

    Lepo delo! Nekaj ​​takega sem imel tudi v mislih, da bi si SharePoint sezname ogledal v grafični obliki 😉

    Odgovor
  9. Frank

    Imam »Uporaba nadzornih plošč v SharePointu’ vprašanje. Smo vojaška bolnišnica, ki uporablja standard MOSS za naš intranet in bi radi zgradili nadzorno ploščo za našo poveljniško skupino, da bi videli »resnični čas’ Če je mogoče. Ena od glavnih točk je pregledovanje v realnem času trenutne delovne obremenitve v objektu in dobesedno Opazuj gor in dol spremeniti (morda morali klikniti “Osveži”/F5).

    Hvala vnaprej,

    Odgovor

pusti odgovor

Vaš e-naslov ne bo objavljen. Obvezna polja so označena *