Sortu Bar Grafikoak SharePoint

Orokorra:

(UPDATE 12/04/07: Added interesgarri beste baliabide amaieran blog beste helbideak lotura errotula bat web oso interesgarria parte bidez)

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.

Planteamendu orokorra honako hau da:

  1. Sortu zerrenda bat edo liburutegian dokumentu hori du datuak grafikoan nahi duzu.
  2. Jarri elkartuak Dokumentu liburutegia / Ohiko orri batean zerrenda eta bihurtu datuak ikuspegi web parte (DVWP).
  3. Aldatzeko DVWP en XSL HTML duten grafiko bat erakusten sortzeko.

Mailako eszenatokia / Setup:

Sortu ditut Izenburua estandarra zutabe bat eta osagarriak zutabe zerrenda pertsonalizatu bat, "Status". This models (Oso simplistically) an "Authorization For Expense" agertokia, non izenburua proiektua eta Egoera-zerrendaren balio bat adierazten du:

  • Proposatu
  • Prozesuan
  • Moteldu da ia izozterarte

Helburua da interaktiboa barra horizontal grafikoan erakusten duen egoera kodeak horiek ekoizteko.

Bizi izan dut zerrenda eta itxura hau atsegin du:

image

Sortu Datu Ikusi Web Taldea:

Sortu DVWP pertsonalizatua zerrendan gehituz orri bat (gune nire kasuan orria) eta jarraitu argibideak hemen (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Besterik DVWP sortzeko gain, we also need to set the paging property to show all available rows. Niretzat, hau bezalako zerbaiten:

image

Puntu honetan, 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.

Aldatzeko XSLT:

Orain dela denbora XSLT aldatzeko.

I always use visual studio for this. (Ikusi hemen intellisense buruzko ohar garrantzitsu bat eman duzula asko lagunduko die).

Hutsik proiektu bat gehi lau fitxategiak sortu dut (replacing the words "Original" and "New" egokiak):

  • Original.xslt
  • New.xslt
  • Original Params.xml
  • New Params.xml

Nire kasuan, itxura hau atsegin du:

image

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

Helburua da hemen XSL emaitzak bueltan eraldatzeko HTML DVWP kontsulta hori grafiko bat bezala errendatzen batetik sor.

Horretarako, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Argi izan behar, hau da, besterik gabe, adibide bat; 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:

Sample Bar Graph

Dagokion HTML:

<html>
<gorputza>
<zentro>
<taula zabalera = 80%>
<tr><td><zentro>Horizontala Bar grafikoa</td></tr>
<tr>
<td align="center">
<table border="1" width = 80%>
<tr>
<td width = 10%>Ireki</td>
<td><taula = cellpadding"0" = Gelaxka"0" border = 0 width = 50%><tr bgcolor = gorria><td>&nbsp;</td></tr></taula></td>
</tr>
<tr>
<td width = 10%>Itxita</td>
<td><taula = cellpadding"0" = Gelaxka"0" border = 0 width = 25%><tr bgcolor = gorria><td>&nbsp;</td></tr></taula></td>
</tr>
<tr>
<td width = 10%>Moteldu da ia izozterarte</td>
<td><taula = cellpadding"0" = Gelaxka"0" border = 0 width = 25%><tr bgcolor = gorria><td>&nbsp;</td></tr></taula></td>
</tr>
</taula>
</td>
</tr>
</taula>
</gorputza>
</html>

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

Hartu-hemendik da hau: Azkenean, guztiak egiten ari gara da HTML sortzeko errenkada eta zutabe.

Txantiloi 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:

  • Hasi lehenetsi XSL batera I SharePoint Designer eman zidan denean sortu nuen DVWP du.
  • Gai hau moztu behera SPD en izan dut 657 lerroak 166 lines.
  • I ez du mezurik inguruan parametro XML fitxategi (hau da, XSL aparte, eta ez dakit zer esan nahi izango dituzu denean DVWP aldatzeko bera joan; bi fitxategi alda ditzakezu). Hala eta guztiz ere, ditu errazteko, 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. Gero, remove my calls and insert your own calls to "ShowBar".
  • Zulagailu behera bat sortzeko lanak <href bat> hau bezalako: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Lehen begiratuan, Behar konplexuagoa formatu bat egokitzen dut pentsatu nuen: 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.

Hemen dago:

<xsl:Estilo orria bertsioa="1.0" baztertzen-emaitza-aurrizkiak="RS z o s ddwrt dt msxsl" 
xmlns:msxsl="urn: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="urn:schemas-microsoft-com:bulego" xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882"
xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:RS="urn:schemas-microsoft-com:rowset" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="urn:frontpage:barne"
> <xsl:irteera metodoa="html" koska="ez" /> <xsl:hamartar-formatua NaN="" /> <xsl:param izena="ListUrlDir"></xsl:param> <!-- Hau behar dut zulagailu-behera laguntzeko. --> <xsl:txantiloia dator="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20"
> <xsl:aldagai izena="dvt_StyleName">Taula</xsl:aldagai> <xsl:aldagai izena="Lerroak" hautatu="/dsQueryResponse / Lerroak / Fila" /> <xsl:aldagai izena="dvt_RowCount" hautatu="zenbatu($Lerroak)" /> <xsl:aldagai izena="IsEmpty" hautatu="$dvt_RowCount = 0" /> <xsl:aldagai izena="dvt_IsEmpty" hautatu="$dvt_RowCount = 0" /> <xsl:aukeratu> <xsl:denean test="$dvt_IsEmpty"> Egia da, grafikoan datuak ez!<br/> </xsl:denean> <xsl:Besterik> <!-- Gauza interesgarri hasten hemen. Errenkada bakoitzeko aldagai pare bat definitzeko grafikoan behar dugu: kopuru osoaren           . --> <xsl:aldagai izena="totalProposed" hautatu="zenbatu(/dsQueryResponse / Lerroak / Fila[normalizatzeko-espazioa(@ Egoera) = 'Proposamena'])" /> <xsl:aldagai izena="percentProposed" hautatu="$totalProposed div $ dvt_RowCount" /> <xsl:aldagai izena="totalInProcess" hautatu="zenbatu(/dsQueryResponse / Lerroak / Fila[normalizatzeko-espazioa(@ Egoera) = 'Prozesuan'])" /> <xsl:aldagai izena="percentInProcess" hautatu="$totalInProcess div $ dvt_RowCount" /> <xsl:aldagai izena="totalStalled" hautatu="zenbatu(/dsQueryResponse / Lerroak / Fila[normalizatzeko-espazioa(@ Egoera) = 'Moteldu da ia izozterarte'])" /> <xsl:aldagai izena="percentStalled" hautatu="$totalStalled div $ dvt_RowCount" /> <!-- Gure HTML taula zehaztuko dugu hemen. Estandar batzuk dut maileguan           . Omenez egingo dela uste dut           . --> <taula zabalera="100%" Gelaxka="0" cellpadding="2" estilo="mugan-eskubidea: 1 sendoa # C0C0C0; mugan-behean: 1 sendoa # C0C0C0; mugan-ezker-estilo: ona; mugan-ezker-zabalera: 1; border-top-estilo: ona; border-top-zabalera: 1;"> <tr> <td lerrokatu="zentro"> <taula mugan="1" zabalera="100%"> <!-- Egoera bakoitzean nahi dugun grafikoantzat, we call the "ShowBar" txantiloia. Pasatzen dugu: 1. Errenkadan etiketa. Hau da hiperesteka bat bihurtu. 2. Ehuneko (goitik aldagai). 3. The kodearen eremuan benetako izena azpiko zerrendatik. Honetan                      . 4. Eremu balioa parekatuak egiteko #3. 5. Egoera kode hau elementu guztira (ez guztien total du                      ). Bat igortzen ditu <tr></tr> eta horizontal bar grafikoan line. Diseinu hau deitzen dugun egoera kodea bakoitzeko ikusi nahi dugu. --> <xsl:dei-txantiloia izena="ShowBar"> <xsl:-rekin param izena="BarDisplayLabel" hautatu="'Proposamena'"/> <xsl:-rekin param izena="BarPercent" hautatu="$percentProposed"/> <xsl:-rekin param izena="QueryFilterFieldName" hautatu="'Status'"/> <xsl:-rekin param izena="QueryFilterFieldValue" hautatu="'Proposamena'"/> <xsl:-rekin param izena="TotalItems" hautatu="$totalProposed"></xsl:-rekin param> </xsl:dei-txantiloia> <xsl:dei-txantiloia izena="ShowBar"> <xsl:-rekin param izena="BarDisplayLabel" hautatu="'Moteldu da ia izozterarte'"/> <xsl:-rekin param izena="BarPercent" hautatu="$percentStalled"/> <xsl:-rekin param izena="QueryFilterFieldName" hautatu="'Status'"/> <xsl:-rekin param izena="QueryFilterFieldValue" hautatu="'Moteldu da ia izozterarte'"/> <xsl:-rekin param izena="TotalItems" hautatu="$totalStalled"></xsl:-rekin param> </xsl:dei-txantiloia> <xsl:dei-txantiloia izena="ShowBar"> <xsl:-rekin param izena="BarDisplayLabel" hautatu="'Prozesuan'"/> <xsl:-rekin param izena="BarPercent" hautatu="$percentInProcess"/> <xsl:-rekin param izena="QueryFilterFieldName" hautatu="'Status'"/> <xsl:-rekin param izena="QueryFilterFieldValue" hautatu="'Prozesuan'"/> <xsl:-rekin param izena="TotalItems" hautatu="$totalInProcess"></xsl:-rekin param> </xsl:dei-txantiloia> </taula> </td> </tr> </taula> </xsl:Besterik> </xsl:aukeratu> </xsl:txantiloia> <!-- Diseinu hau banakako lerro erakusteak bar grafikoan lana egiten du. Ziurrenik izango duzu zure tweaking gehienak hemen. --> <xsl:txantiloia izena="ShowBar"> <xsl:param izena="BarDisplayLabel" /> <!-- Etiketa erakusteko --> <xsl:param izena="BarPercent"/> <!-- Guztira ehuneko. --> <xsl:param izena="QueryFilterFieldName"/> <!-- Erabiltzen den kontsulta salto egin & iragazi --> <xsl:param izena="QueryFilterFieldValue"/> <!-- Erabiltzen den kontsulta salto egin & iragazi --> <xsl:param izena="TotalItems" /> <!-- barlabel honen Aldaketa guztira --> <tr> <!-- Barra etiketa bera. --> <td klasean="MS-formbody" zabalera="30%"> <!-- Adierazpenak multzo honetan hurrengo kontsulta ahalbidetzen duen katea eraikitzen           . Zenbait gauza erabiltzea dugu hemen: 1. Pasatzen FilterField1 eta FilterValue1 gaitezke zerrenda bat zutabe bat iragazi. 2. SharePoint gako parametro bat da pasatuz gurekin, ListUrlDir that points to the underlying list against which this DVWP is "running". Ez da dibertigarria XSL? --> <xsl:testua disable-irteera-ihes="bai"> <![CDATA[<a href ="]]></xsl:testua> <xsl:balio du hautatu="$ListUrlDir"/> <xsl:testua disable-irteera-ihes="bai"><![CDATA[?FilterField1 =]]></xsl:testua> <xsl:balio du hautatu="$QueryFilterFieldName"/> <xsl:testua disable-irteera-ihes="bai"><![CDATA[&FilterValue1 =]]></xsl:testua> <xsl:balio du hautatu="$QueryFilterFieldValue"/> <xsl:testua disable-irteera-ihes="bai"><![CDATA[">]]></xsl:testua> <xsl:balio du hautatu="$BarDisplayLabel"/> <xsl:testua disable-irteera-ihes="bai"><![CDATA[</bat>]]></xsl:testua> <!-- Hurrengo bit erakusten zenbakiak batzuk formatuan: "(guztira / % guztira)" --> (<xsl:balio du hautatu="$TotalItems"/> / <!-- Hau Gurekin ehuneko nice etiketa sortzen. Eskerrik asko, Microsoft! --> <xsl:dei-txantiloia izena="percentformat"> <xsl:-rekin param izena="ehuneko" hautatu="$BarPercent"/> </xsl:dei-txantiloia>) </td> <!-- Azkenik, bat igortzen <td> bar berak etiketa.--> <td> <taula cellpadding="0" Gelaxka="0" mugan="0" zabalera="{biribiltzeko($BarPercent * 100)+1}%"> <tr bgcolor="gorria"> <xsl:testua disable-irteera-ihes="bai"><![CDATA[&nbsp;]]></xsl:testua> </tr> </taula> </td> </tr> </xsl:txantiloia> <!-- Hau da, zuzenean XSL batzuk aurkitu MS txantiloi bat dut. --> <xsl:txantiloia izena="percentformat"> <xsl:param izena="ehuneko"/> <xsl:aukeratu> <xsl:denean test="formatu-kopurua($ehuneko, '# # # 0%;-#,##0%')= 'NaN'">0%</xsl:denean> <xsl:Besterik> <xsl:balio du hautatu="formatu-kopurua($ehuneko, '# # # 0%;-#,##0%')" /> </xsl:Besterik> </xsl:aukeratu> </xsl:txantiloia> </xsl:Estilo orria>

Emaitzak:

Goitik XSL grafikoaren hau sortzen:

image

Zulatzeko behera azpiko datuen egoera kodea klik eginez:

image

Amaitu Pensamientos:

Daiteke hori Generalized?

Graphing kontzeptu hau maite dut, 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, mesedez, ohar bat, iruzkinak edo email me.

Bertikala Grafikoak:

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, please let me know and I’ll gladly link to your blog 🙂

Bertikal grafikoan dituzten erronka dela, grafikoan etiketa direla zailagoa kudeatzeko uste dut, baina, zalantzarik gabe, ez da ezinezkoa.

Eremuaren izena Gotcha en:

Badira gutxienez bi gauzak begiratu zure Eremu izen batekin.

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

        <xsl:aldagai izena="totalProposed" 
hautatu="zenbatu(/dsQueryResponse / Lerroak / Fila[normalizatzeko-espazioa(@ Egoera) = 'Proposamena'])" />

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

   <xsl:aldagai izena="totalProposed" 
hautatu="zenbatu(/dsQueryResponse / Lerroak / Fila[normalizatzeko-espazioa(@ Status_x0020_Code) = 'Proposamena'])" />

Bigarren, eta honen inguruan zalantza txiki bat naiz, but you also need to be on the alert for field name changes. If you name your field "Status Code" eta, ondoren, geroago, 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" loturak diagnostikatu eta konpondu arazo hau lagun dezake.

Kolore hori buruz:

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. Adibidez, if the percentage of "stalled" AFE en da > 10% erakutsiko da, gero gorria, otherwise show it in black. Erabili <xsl:aukeratu> hau betetzeko.

Beste baliabide:

Zoriontsu eraldatzen!

<amaieran />

Nire blog Harpidetu!

17 buruzko gogoeta "Sortu Bar Grafikoak SharePoint

  1. Chris B

    Orri hau ia amaituta zereginaren bila nenbilen.

    Talde bat nahi SharePoint Inkesta zerrenda erabili astero inkesta bat sortu behar dut. Harrapatzen? Ez dute nahi kodea ikusteko… Aldatzeko edo sistema bakoitzean inkesta bidaliko dute (astero-astero eguneratzea aurreikusi).

    Gai hau konektatzeko Inkesta zerrenda eta erantzuna lehen zutabean grafikoan sortu zen I. Zer ezin dut aurreikusi dira, nahiz eta balore eta etiketak aurrera dutela behar izango. Okerrago dena, gehiago edo gutxiago erantzun eskuragarri aste bakoitzean izan dezakete.

    Beste nonbait begiratu egingo dut, badaezpada, baina edonork modu bat aurkitu lerro eta off oinarritzen aukera kopuruaren eta dinamikoki horiek ezartzean baino gogorra espero diren balioak kodeketa etiketak sortzeko?

    Erantzun
  2. Greg Laushine

    Eskerrik asko Paul. Oso lagungarria. Eskerrik asko zure lana, Gai bat grafikoan bar zutabe gehitzeko DVWP bat izan dut (e.g. lanetarako) Oso erraz, besterik gabe, zure kodea gutxi lerro batekin.
    SharePoint Designer-en, Datuak ikuspegi bat txertatuko dut izenburua duen eta % Zeregin zerrenda bat zutabe osoa. Kurtsorea jarri dut zelula batean eta eskuineko klik. Txertatu zutabe bat eskuinera hautatu dut. Kodea ikuspegian, Dut aurkitu <td> eta ordezkatu <xsl:Testu zelula barruan elementu zure kodea eman:
    <taula = cellpadding"0" = Gelaxka"0" border ="0"
    width="{biribiltzeko(@ PercentComplete * 100)+1}%">
    <tr style="background-color:red">
    <xsl:text disable-output-escaping="yes"><![CDATA[&nbsp;]]></xsl:testua>
    </tr>
    </taula>

    Note I changed the row color code from bgcolor="red" to style="background-color:gorria"
    Era berean,, gai izan da zutabe bat hautatu, nire zerrendan (@ PercentComplete) in place of "$BarPercent"
    Greg

    Erantzun
  3. Wolfgang
    Paul, honi esker! Duzuna egin kopia zehatza bat sortu dut, eta ia-ia perfektua lanak. There was one tiny issue in row the 2nd paragraph of your code:
    <xsl:template 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;
    Zuzendu dut xarma duten bezala lan egin ondoren! Egingo dut egokitzeko hori nire zerrenda eta egoera baina ziur, ez da zaila izan naiz. (Emaitza zer egingo dut)
    Eskerrik asko berriro
    ~ Wolle
    Erantzun
  4. Izenik ez
    Galdera –
    Zer gertatzen da nire grafikoan bada, aldagai bat nahi dut, ez bakarrik zenbatu ko egoera bat baino gehiago ere bai, baina zenbatu?
    Beraz,, adibidez, zer izan bada —
    <xsl:variable name="RequestsInitialized"
    select="count(/dsQueryResponse / Lerroak / Fila[normalizatzeko-espazioa(@ Egoera)=’WIP’])" />
    –Gauza da, I want it to count instances of ‘WIP’, but i also want this variable to count something else like ‘Pending Review’.. how would i do this?
    Eskerrik asko!
    Erantzun
  5. Murty Srirangam
    Hi Paul,
    Iam really this is really a great effort by you. Ezin azaldu non legoke kode hau bidaltzeko i mesedez. Sortu dut prjoect lau fitxategiak berriekin. Gero azaldu zehatz-mehatz zer egin behar dut.
    Eskerrik asko
    Murty
    Erantzun
  6. Andrew Carrington
    Hi, Hau aldatzeko saiatzen ari naiz, beraz, apur bat bistaratzen dela zeregin grafikoa erabiltzaileak informazio aurka zerrenda zeregin batean. Zutabe bat izeneko @ AssignedTo horrek erabiltzaileari presentzia zutabea erabiltzen ditu. Get erakutsi teh errendatutako HTML baina cant get kalkulatzeko, eta erakutsi balio du dut.
    Ideiak, edozein?
    Eskerrik asko
    Andy
    Erantzun
  7. Patrik Luca idatzi zuen:
    Hi Paul,
    handiko mezua!
    Galdera bat:
    Nahi bi eremu iragazi, aldi berean, nahi nuke: nola egin daiteke hori lortu?
    Adibidez, Zure aldagai bat deitzen da totalStalled eta iragazkiak @ egoera oinarritzen da.
    Nahi aldi berean iragazi nuke nire erregistro itzuli kopurua murrizteko eremuan beste on.
    I already found how to make an ‘OR’, but I donnot manage to find the ‘AND’
    An ‘OR’ horrela lor daiteke:
    <xsl:variable name="totalStalled" select="count(/dsQueryResponse / Lerroak / Fila[normalizatzeko-espazioa(@ Egoera) = ‘Stalled’] | /dsQueryResponse / Lerroak / Fila[normalizatzeko-espazioa(@ ExtraFilterField) = ‘value’])" />
    Erantzun
  8. Frank

    I have a ‘Using Dashboards in SharePoint’ Galdera. We are a military hospital using MOSS standard for our Intranet and would like to build a dashboard for our Command Group to see ‘real time’ posible bada. Nagusia puntu bat da, denbora errealean egungo lanaren ikusten ari instalazioak barruan eta literalki ikusi sortu aldatu eta behera (klik izan daiteke “berritze”/F5).

    Eskerrik asko aldez aurretik,

    Erantzun

Utzi iruzkin bat Patrik Luca idatzi zuen: Utzi erantzuna

Zure e-posta helbidea ez da argitaratuko. Beharrezko eremuak markatu dira *