Napravite Bar Grafovi u SharePoint

17 Odgovori

Pregled:

(UPDATE 12/04/07: Dodao još jedan zanimljiv resurs na kraju povezuje s drugom blogu koji se bavi to putem vrlo zanimljivog web-dijela)

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.

Ukupna pristup je sljedeći:

  1. Napravite popis ili biblioteku dokumenata koja sadrži podatke koje želite graf.
  2. Postavite pridružene knjižnicu dokument / prilagođeni popis na stranicu i pretvoriti ga u web podataka pogled dijelu (DVWP).
  3. Izmjena DVWP je XSL za generiranje HTML-a na kojima se vidi kao graf.

Poslovni Scenarij / Postava:

Ja sam stvorio prilagođeni popis sa standardnim Naslov stupca i jednu dodatnu kolonu, "Status". This models (Vrlo pojednostavljeno) an "Authorization For Expense" Scenarij u kojem naslov predstavlja projekt i status vrijednost s popisa:

  • Predloženi
  • U procesu
  • Zastoju

Cilj je proizvesti interaktivni šipkom graf koji pokazuje ta oznaka stanja.

Ja sam naseljena popisa i to izgleda ovako:

slika

Stvaranje podataka za web-dio Pogled:

Napravite DVWP dodavanjem prilagođeni popis na stranici (stranica stranica u mom slučaju) i slijedite upute ovdje (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Uz jednostavno stvaranje DVWP, we also need to set the paging property to show all available rows. Za mene je, to izgleda ovako:

slika

U ovom trenutku, 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.

Izmjena XSLT:

Sada je vrijeme za izmjenu XSLT.

I always use visual studio for this. (Vidjeti ovdje za važnu napomenu o INTELLISENSE koji će vam pomoći puno).

I stvoriti prazna projekt dodati četiri nove datoteke (replacing the words "Original" and "New" po potrebi):

  • Original.xslt
  • New.xslt
  • Izvorni Params.xml
  • Novi Params.xml

U mom slučaju, to izgleda ovako:

slika

Modify the web part and copy the params and XSL to the "Original" Verzija u Visual Studio.

Cilj je da se ovdje izazvati XSL transformirati rezultate smo dobili natrag od DVWP upita u HTML-a koji čini kao graf.

U tom cilju, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Da bude jasno, Sljedeći je samo primjer; 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:

Uzorak histogram

Odgovarajući HTML:

<html>
<tijelo>
<centar>
<širina tablice = 80%>
<tr><td><centar>Vodoravna traka Grafikon</td></tr>
<tr>
<td align="center">
<table border="1" Širina = 80%>
<tr>
<td width = 10%>Otvoreno</td>
<td><Tablica cellpadding ="0" cellspacing ="0" border = 0 width = 50%><tr bgcolor = crvena><td>&nbsp;</td></tr></stol></td>
</tr>
<tr>
<td width = 10%>Zatvoreno</td>
<td><Tablica cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = crvena><td>&nbsp;</td></tr></stol></td>
</tr>
<tr>
<td width = 10%>Zastoju</td>
<td><Tablica cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = crvena><td>&nbsp;</td></tr></stol></td>
</tr>
</stol>
</td>
</tr>
</stol>
</tijelo>
</html>

I used a dead simple approach to creating my bars by setting the background color of a row to "red".

Take-away ovdje je to: Na kraju, Svi mi radimo je stvaranje HTML s redaka i stupaca.

Predložak 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:

  • Počeo sam sa zadanim XSL koji SharePoint Designer mi dao kad sam prvi put stvorio DVWP.
  • Bio sam u mogućnosti smanjiti ovaj dolje od SPD-a 657 linije za 166 lines.
  • Nisam zabrljati okolo sa spisom parametara XML (koji je odvojen od XSL i znat ćete što mislim kad idete mijenjati DVWP sama; postoje dvije datoteke možete izmijeniti). Međutim, kako bi se pojednostaviti, 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. Tada, remove my calls and insert your own calls to "ShowBar".
  • Spustite se radi stvaranjem <href> ovako: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Na početku, Mislila sam da ću morati odgovarati na složenije formatu: 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.

Ovdje je:

<XSL:stilovima verzija="1.0" uključuju-rezultat-prefiksi="RS z oa je ddwrt DT msxsl" 
 xmlns:msxsl="urna:sheme-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:trepetljika="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 xmlns:o="urna:sheme-microsoft-com:ured" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:DT="UUID:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:rs="urna:sheme-microsoft-com:rowset" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="urna:Naslovnica:interni">
  <XSL:izlaz način="html" uvući="ne" />
  <XSL:decimal-format NaN="" />
  <XSL:zaustaviti ime="ListUrlDir"></XSL:zaustaviti> <!-- Ovo bi podržao drill-down.  -->

  <XSL:predložak odgovarati="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:trepetljika="http://schemas.microsoft.com/ASPNET/20">
    <XSL:varijabla ime="dvt_StyleName">Stol</XSL:varijabla>
    <XSL:varijabla ime="Redovi" odabrati="/dsQueryResponse / Redovi / Row" />
    <XSL:varijabla ime="dvt_RowCount" odabrati="brojati($Redovi)" />
    <XSL:varijabla ime="IsEmpty" odabrati="$dvt_RowCount = 0" />
    <XSL:varijabla ime="dvt_IsEmpty" odabrati="$dvt_RowCount = 0" />

    <XSL:izabrati>
      <XSL:kada test="$dvt_IsEmpty">
        Nema podataka u grafikonu!<br/>
      </XSL:kada>
      <XSL:inače>

        <!--
          Interesantno počinje ovdje.

          Moramo definirati par varijabli za svaki red u grafu: ukupan broj
          .
        -->
        <XSL:varijabla ime="totalProposed" odabrati="brojati(/dsQueryResponse / Redovi / Row[normalizirati-prostor(@ Status) = 'Prijedlog'])" />
        <XSL:varijabla ime="percentProposed" odabrati="$totalProposed div $ dvt_RowCount" />

        <XSL:varijabla ime="totalInProcess" odabrati="brojati(/dsQueryResponse / Redovi / Row[normalizirati-prostor(@ Status) = 'U procesu'])" />
        <XSL:varijabla ime="percentInProcess" odabrati="$totalInProcess div $ dvt_RowCount" />

        <XSL:varijabla ime="totalStalled" odabrati="brojati(/dsQueryResponse / Redovi / Row[normalizirati-prostor(@ Status) = "Zastoju"])" />
        <XSL:varijabla ime="percentStalled" odabrati="$totalStalled div $ dvt_RowCount" />

        <!--
          Mi smo definirali naše HTML tablicu ovdje.  Ja sam posudio iz neke standardne
          .  Mislim da će čast
          .
        -->
        <stol širina="100%" cellspacing="0" cellpadding="2"
stil="border-right: 1 solid # C0C0C0; border-bottom: 1 solid # C0C0C0; border-lijevo-stilu: solidan; border-lijevo-širina: 1; border-top-style: solidan; border-top-širina: 1;">

           <tr>
            <td svrstati="centar">
              <stol granica="1" širina="100%">

                <!--
                  Za svako stanje koje želimo graf, we call the "ShowBar" predložak.
                  Mi ga proći:
                  1. Oznaka za redom.  Ovo se pretvara u hiperveze.
                  2. Posto (razlikuju od gore).
                  3. Stvarni Polje naziv koda od osnovne liste.  Ovo
                     .
                  4. Vrijednost polja odgovara za #3.
                  5. Ukupno stavke tog statusa koda (Ne ukupni iznos svih
                     ).

                  Ona emitira <tr></tr> i vodoravna traka Grafikon linije.

                  Mi to nazivamo predložak za svaki status kod želimo vidjeti.
                -->
                <XSL:poziv-predložak ime="ShowBar">
                  <XSL:s param- ime="BarDisplayLabel" odabrati="'Prijedlog'"/>
                  <XSL:s param- ime="BarPercent" odabrati="$percentProposed"/>
                  <XSL:s param- ime="QueryFilterFieldName" odabrati="'Status'"/>
                  <XSL:s param- ime="QueryFilterFieldValue" odabrati="'Prijedlog'"/>
                  <XSL:s param- ime="TotalItems" odabrati="$totalProposed"></XSL:s param->
                </XSL:poziv-predložak>

                <XSL:poziv-predložak ime="ShowBar">
                  <XSL:s param- ime="BarDisplayLabel" odabrati=""Zastoju""/>
                  <XSL:s param- ime="BarPercent" odabrati="$percentStalled"/>
                  <XSL:s param- ime="QueryFilterFieldName" odabrati="'Status'"/>
                  <XSL:s param- ime="QueryFilterFieldValue" odabrati=""Zastoju""/>
                  <XSL:s param- ime="TotalItems" odabrati="$totalStalled"></XSL:s param->
                </XSL:poziv-predložak>

                <XSL:poziv-predložak ime="ShowBar">
                  <XSL:s param- ime="BarDisplayLabel" odabrati=""U proces '"/>
                  <XSL:s param- ime="BarPercent" odabrati="$percentInProcess"/>
                  <XSL:s param- ime="QueryFilterFieldName" odabrati="'Status'"/>
                  <XSL:s param- ime="QueryFilterFieldValue" odabrati=""U proces '"/>
                  <XSL:s param- ime="TotalItems" odabrati="$totalInProcess"></XSL:s param->
                </XSL:poziv-predložak>

              </stol>
            </td>
          </tr>
        </stol>
      </XSL:inače>
    </XSL:izabrati>
  </XSL:predložak>

  <!--
    Ovaj predložak obavlja posao prikazivanja pojedine linije u grafikona.

    Vjerojatno ćete najviše učiniti za svoju ugađati ovdje.
  -->
  <XSL:predložak ime="ShowBar">
    <XSL:zaustaviti ime="BarDisplayLabel" /> <!-- Oznaka pokazati -->
    <XSL:zaustaviti ime="BarPercent"/> <!-- Postotak od ukupnog. -->
    <XSL:zaustaviti ime="QueryFilterFieldName"/> <!-- Koristi se za skok na upit & filter -->
    <XSL:zaustaviti ime="QueryFilterFieldValue"/> <!-- Koristi se za skok na upit & filter -->
    <XSL:zaustaviti ime="TotalItems" /> <!-- Ukupan broj ovog barlabel -->

    <tr>

      <!-- Traka oznaka sama. -->
      <td klasa="ms-formbody" širina="30%">

        <!--
          Ovaj sljedeći set izvještaja gradi upita koji omogućuje
          .
          Mi iskoristiti nekoliko stvari ovdje:
          1. Možemo proći FilterField1 i FilterValue1 na popisu za filtriranje na stupcu.
          2. SharePoint prolazi ključni parametar za nas, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          Nije zabavno XSL?
        -->
        <XSL:tekst disable-output-bijegu="da">
        <![CDATA[<a href ="]]></XSL:tekst>
        <XSL:vrijednost od odabrati="$ListUrlDir"/>
        <XSL:tekst disable-output-bijegu="da"><![CDATA[?FilterField1 =]]></XSL:tekst>
        <XSL:vrijednost od odabrati="$QueryFilterFieldName"/>
        <XSL:tekst disable-output-bijegu="da"><![CDATA[&FilterValue1 =]]></XSL:tekst>
        <XSL:vrijednost od odabrati="$QueryFilterFieldValue"/>
        <XSL:tekst disable-output-bijegu="da"><![CDATA[">]]></XSL:tekst>
        <XSL:vrijednost od odabrati="$BarDisplayLabel"/>
        <XSL:tekst disable-output-bijegu="da"><![CDATA[</a>]]></XSL:tekst>

        <!-- Sljedeći bitni pokazuje neke brojeve u obliku: "(ukupan / % od ukupnog)" -->
        (<XSL:vrijednost od odabrati="$TotalItems"/> /

        <!-- To stvara lijepu posto naljepnicu za nas.  Hvala, Microsoft! -->
        <XSL:poziv-predložak ime="percentformat">
          <XSL:s param- ime="posto" odabrati="$BarPercent"/>
        </XSL:poziv-predložak>)

      </td>

      <!-- Konačno, emitiraju <td> Oznaka za bar sama.-->
      <td>
        <stol cellpadding="0" cellspacing="0" granica="0"
širina="{okrugli($BarPercent * 100)+1}%">
          <tr bgcolor="crven">
            <XSL:tekst disable-output-bijegu="da"><![CDATA[&nbsp;]]></XSL:tekst>
          </tr>
        </stol>
      </td>
    </tr>

  </XSL:predložak>

  <!-- Ovo je preuzet izravno iz nekog XSL sam pronašao u MS predložak. -->
  <XSL:predložak ime="percentformat">
    <XSL:zaustaviti ime="posto"/>
    <XSL:izabrati>
      <XSL:kada test="Oblik-broj($posto, "#, # # 0%;-#,##0%')= 'NaN'">0%</XSL:kada>
      <XSL:inače>
        <XSL:vrijednost od odabrati="Oblik-broj($posto, "#, # # 0%;-#,##0%')" />
      </XSL:inače>
    </XSL:izabrati>
  </XSL:predložak>

</XSL:stilovima>

U Rezultati:

XSL odozgor generira ovaj graf:

slika

Spustite se do temeljnih podataka klikom na statusnoj koda:

slika

Završne misli:

Može li ovo biti generalizirani?

Volim ovaj koncept grafičkim, 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, molimo zabilježite u komentarima ili elektronička pošta mene.

Vertikalni Grafikoni:

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, molim javite mi i rado ću link na svoj blog 🙂

Mislim da je izazov s vertikalnom graf je da su naljepnice za grafu su teže upravljati, ali svakako ne i nemoguće.

Naziv polja Ulovio je:

Postoje najmanje dvije stvari koje treba paziti s nazivima polja.

Prvi, a field name with a space has to be escaped in the XSL. This will probably be an issue here:

        <XSL:varijabla ime="totalProposed" 
 odabrati="brojati(/dsQueryResponse / Redovi / Row[normalizirati-prostor(@ Status) = 'Prijedlog'])" />

If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":

   <XSL:varijabla ime="totalProposed" 
 odabrati="brojati(/dsQueryResponse / Redovi / Row[normalizirati-prostor(@ Status_x0020_Code) = 'Prijedlog'])" />

Drugi, i ja sam malo fuzzy na ovo, but you also need to be on the alert for field name changes. If you name your field "Status Code" i onda kasnije, 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" linkovi mogu pomoći u dijagnosticiranju i ispraviti ovu vrstu problema.

O toj boji:

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. Na primjer, if the percentage of "stalled" AFE-a je > 10% tada prikazati u crveno, otherwise show it in black. Koristiti <XSL:izabrati> da to postigne.

Ostali resursi:

Sretan pretvarajući!

<kraj />

Pretplatite se na moj blog!

17 misli o „Napravite Bar Grafovi u SharePoint”

  1. Chris B

    Ova stranica je gotovo dovršen zadatak bio sam u potrazi za.

    Imam grupu koja želi koristiti SharePoint popis Survey stvoriti tjedni anketu. Ulov? Oni ne žele vidjeti kod… Ili promijeniti sustav svaki put su poslali anketu (planiran za tjedni ažuriranja).

    Bio sam u mogućnosti to povezivanje to na popisu Survey i stvoriti graf na prvi odgovor stupcu. Ono što ja ne mogu predvidjeti, iako su vrijednosti i naljepnice koje će morati kreće prema naprijed. Da bi stvari bile još gore oni mogu imati više ili manje odgovore na raspolaganju svaki tjedan.

    Ja ću potražiti negdje drugdje samo u slučaju, , ali je netko pronašao način za stvaranje reda i naljepnice temelji off od broja raspoloživih opcija i dinamički postavljanje tih umjesto tvrdog kodiranja očekivane vrijednosti?

    Odgovoriti ↓
  2. Greg Laushine

    Zahvaljujući Pavao. Vrlo korisno. Zahvaljujući vašem poslu, Bio sam u mogućnosti dodati stupac bar grafova u postojeću DVWP (e.g. za zadatke) vrlo jednostavno sa samo nekoliko linija koda.
    U programu SharePoint Designer, Ja Uložili podataka pogled s nazivom i % kompletna kolumne iz popisa zadataka. I mu pokazivač u jednom od stanica i desni klik. Ja odabir umetnuti stupac s desne strane. U prikazu koda, Našao sam <td> i zamijeniti <XSL:Tekst je element unutar stanice s kodom:
    <Tablica cellpadding ="0" cellspacing ="0" border ="0"
    width = "{okrugli(@ PercentComplete * 100)+1}%">
    <tr style = "background-color:crveni ">
    <XSL:Tekst onemogućiti izlaz-bijeg = "da"><![CDATA[&nbsp;]]></XSL:tekst>
    </tr>
    </stol>

    Napomena sam promijenila boju kod red od bgcolor = "crvena" da style = "background-color:crven"
    Također, bio u mogućnosti odabrati jedan od stupova na mom popisu (@ PercentComplete) umjesto "$ BarPercent"
    Greg

    Odgovoriti ↓
  4. Wolfgang
    Pavle, hvala za ovu! Ja stvorio točnu kopiju onoga što ste učinili i to radi gotovo savršeno. Tu je bio jedan maleni problem je u redu 2. stavak kodu:
    <XSL:Predložak Susret = "/" xmlns:SharePoint = "Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Nakon što sam se ispraviti da to radi kao šarm! I sada će se prilagoditi ovaj na moj popis i status, ali siguran sam da to neće biti teško. (Ja ću objaviti rezultat)
    Hvala još jednom
    ~ Wolle
    Odgovoriti ↓
  5. No name
    pitanje –
    Što ako u mom grafu, Htio sam varijable ne samo ubrajati status, ali one računaju više?
    Tako, Na primjer, što ako sam imao —
    <XSL:varijabla name = "RequestsInitialized"
    odaberite = "count(/dsQueryResponse / Redovi / Row[normalizirati-prostor(@ Status)= 'WIP'])" />
    –Stvar je, Želim brojati slučajeve 'WIP', ali ja isto tako ištanje to promjenjiva brojati nešto drugo kao što je 'na čekanju za pregled ".. kako bi ja to učiniti?
    Hvala!
    Odgovoriti ↓
  6. Murty Srirangam
    Hi Pavao,
    Iam stvarno ovo je stvarno veliki trud vas. Možete li molim vas objasnite gdje bih ja ovaj post kod. Ja sam stvorio prjoect s četiri nova datoteka. Zatim možete podrobnije obrazložiti što trebam učiniti.
    Hvala
    Murty
    Odgovoriti ↓
  8. Andrew Carrington
    Bok, Ja sam težak to promijeniti ovu pomalo tako da prikazuje graf zadatke u popisu zadataka protiv korisničkih podataka. Ona koristi kolumnu pod nazivom @ AssignedTo što je kolona korisnički nazočnost. Mogu ga dobiti za prikaz teh donio HTML, ali ne mogu ga dobiti za izračun i prikaz vrijednosti.
    Bilo koji ideja?
    Hvala
    Andy
    Odgovoriti ↓
  9. Patrik Luca pisao:
    Hi Pavao,
    Izvrstan post!
    Pitanje:
    Ja bih filtrirati na dva polja u isto vrijeme: Kako se to može postići?
    Na primjer, jedna od vaših varijabli zove totalStalled i filtrira na @ statusu.
    Ja bih za filtriranje u isto vrijeme smanjiti moj broj vraćenih zapisa na drugom području.
    Već sam pronašao kako napraviti "ili", ali ja donnot uspjeli naći 'i’
    Status "ILI’ može se postići kao što je ovaj:
    <XSL:varijabla name = "totalStalled" odaberite = "count(/dsQueryResponse / Redovi / Row[normalizirati-prostor(@ Status) = 'Gašenje'] | /dsQueryResponse / Redovi / Row[normalizirati-prostor(@ ExtraFilterField) = 'Vrijednost'])" />
    Odgovoriti ↓
  16. Frank

    Imam „Korištenje nadzorne ploče u sustavu SharePoint’ pitanje. Mi smo vojna bolnica pomoću mahovine standard za intranet, a željeli izgraditi ploču za naš Naredba Grupa vidjeti „u stvarnom vremenu’ ako je moguće. Jedna od glavnih točaka je gledanje u stvarnom vremenu struje opterećenja unutar objekta i doslovno gledati ga promijeniti gore i dolje (Možda ćete morati kliknuti “osvježiti”/F5).

    Unaprijed hvala,

    Odgovoriti ↓

Dopust jedan Odgovor

Vaša email adresa neće biti objavljena. obavezna polja su označena *