Oħloq Grafiċi Bar fl SharePoint

Ħarsa ġenerali:

(UPDATE 12/04/07: Miżjud riżors ieħor interessanti fl-aħħar jgħaqqdu għal ieħor blog li tindirizza din permezz ta 'parti web interessanti ħafna)

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.

L-approċċ ġenerali hija kif ġej:

  1. Tinħoloq lista jew il-librerija dokument li jkun fih l-informazzjoni li inti tixtieq li graff.
  2. Poġġi l-librerija dokument ieħor assoċjat, / lista tad-dwana fuq il-paġna u jaqilbu għal parti data web ħsieb (DVWP).
  3. Tibdel XSL l DVWP li tiġġenera HTML li turi bħala graff.

Xenarju Business / Setup:

I ħolqu lista custom mal-Titolu kolonna standard u l-kolonna addizzjonali waħda, "Status". This models (ħafna simplistikament) an "Authorization For Expense" xenarju fejn it-titolu jirrappreżenta l-proġett u l-Istatus ta 'valur mil-lista ta':

  • Propost
  • Fil Proċess
  • Waqfu

L-għan huwa li jipproduċu graff interattiv bar orizzontali li turi dawn il-kodiċijiet istat.

Għandi popolati il-lista u jidher qisu dan:

immaġni

Oħloq Data View Web Parti:

Oħloq il-DVWP billi żżid il-lista tad-dwana għal paġna (Paġna sit fil-każ tiegħi) u segwi l-istruzzjonijiet hawn (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Minbarra li sempliċiment toħloq l-DVWP, we also need to set the paging property to show all available rows. Għalija, dan jistenna xi ħaġa bħal din:

immaġni

F'dan il-punt, 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.

Tibdel il XSLT:

Issa huwa żmien biex jimmodifika l-XSLT.

I always use visual studio for this. (Ara hawn għal nota importanti dwar IntelliSense li ser jgħinek ħafna).

I joħolqu proġett vojta żid erba fajls ġodda (replacing the words "Original" and "New" kif xieraq):

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

Fil-każ tiegħi, jidher qisu dan:

immaġni

Modify the web part and copy the params and XSL to the "Original" verżjoni fis Visual Studio.

L-għan hawnhekk huwa li jikkawża l XSL li tittrasforma r-riżultati nikbru lura mill-mistoqsija DVWP fis HTML li jirrendi bħala graff.

Biex dan il-għan, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Biex ikunu ċari, li ġej huwa sempliċement eżempju; 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

HTML Korrispondenti:

<html>
<korp>
<ċentru>
<wisa tabella = 80%>
<tr><td><ċentru>Grafika Bar orizzontali</td></tr>
<tr>
<td align="center">
<table border="1" wisa '= 80%>
<tr>
<wisa td = 10%>Open</td>
<td><tabella cellpadding ="0" cellspacing ="0" fruntiera = 0 wisa '= 50%><tr bgcolor = aħmar><td>&nbsp;</td></tr></tabella></td>
</tr>
<tr>
<wisa td = 10%>Magħluq</td>
<td><tabella cellpadding ="0" cellspacing ="0" fruntiera = 0 wisa '= 25%><tr bgcolor = aħmar><td>&nbsp;</td></tr></tabella></td>
</tr>
<tr>
<wisa td = 10%>Waqfu</td>
<td><tabella cellpadding ="0" cellspacing ="0" fruntiera = 0 wisa '= 25%><tr bgcolor = aħmar><td>&nbsp;</td></tr></tabella></td>
</tr>
</tabella>
</td>
</tr>
</tabella>
</korp>
</html>

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

Il-take-away hawnhekk hija din: Fl-aħħar, kollha qed nagħmlu qed toħloq HTML ma ringieli u kolonni.

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

  • I beda bil-default XSL li SharePoint Designer tatni meta I ewwel ħolqu l-DVWP.
  • I kien kapaċi li tnaqqas din stabbiliti minn dak tal-SPD 657 linji għal 166 lines.
  • I ma mess madwar il-fajl XML parametri (li hija separata mill-XSL u tkun taf taf dak li jfisser meta inti tmur biex jimmodifikaw il-DVWP innifsu; hemm żewġ fajls li inti tista 'timmodifika). Madankollu, sabiex tkun issimplifikata, 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. Imbagħad, remove my calls and insert your own calls to "ShowBar".
  • Il-drill isfel jaħdem billi toħloq <a href> bħal dan: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Fl-ewwel, Ħsibt I bżonn biex jikkonformaw ma 'format aktar kumplessi: 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.

Hawnhekk huwa:

<XSL:stylesheet Verżjoni="1.0" jeskludu-riżultat-prefissi="rs z o i ddwrt dt msxsl" 
xmlns:msxsl="urn:schemos-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:schemos-microsoft-com:uffiċċju" xmlns:i="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882"
xmlns:dt="UUID:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:rs="urn:schemos-microsoft-com:rowset" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="urn:Frontpage:intern"
> <XSL:output metodu="html" inċiż="ebda" /> <XSL:dećimali-format NaN="" /> <XSL:param isem="ListUrlDir"></XSL:param> <!-- I bżonn dan li tappoġġja drill-down. --> <XSL:template jaqblu="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
> <XSL:varjabbli isem="dvt_StyleName">Tabella</XSL:varjabbli> <XSL:varjabbli isem="Ringieli" tagħżel="/dsQueryResponse / Ringieli / Ringiela" /> <XSL:varjabbli isem="dvt_RowCount" tagħżel="joqgħod($Ringieli)" /> <XSL:varjabbli isem="IsEmpty" tagħżel="$dvt_RowCount = 0" /> <XSL:varjabbli isem="dvt_IsEmpty" tagħżel="$dvt_RowCount = 0" /> <XSL:jagħżlu> <XSL:Meta test="$dvt_IsEmpty"> M'hemm l-ebda data lill-graff!<br/> </XSL:Meta> <XSL:inkella> <!-- L-għalf interessanti jibda hawn. Għandna bżonn li jiddefinixxu par ta 'varjabbli għal kull ringiela fil-graff: numru totali           . --> <XSL:varjabbli isem="totalProposed" tagħżel="joqgħod(/dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ Status) = "Proposti"])" /> <XSL:varjabbli isem="percentProposed" tagħżel="$totalProposed div $ dvt_RowCount" /> <XSL:varjabbli isem="totalInProcess" tagħżel="joqgħod(/dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ Status) = "Fil Proċess"])" /> <XSL:varjabbli isem="percentInProcess" tagħżel="$totalInProcess div $ dvt_RowCount" /> <XSL:varjabbli isem="totalStalled" tagħżel="joqgħod(/dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ Status) = "Waqaf"])" /> <XSL:varjabbli isem="percentStalled" tagħżel="$div totalStalled $ dvt_RowCount" /> <!-- Aħna jiddefinixxu tabella HTML tagħna hawn. Jien self minn xi standard           . Naħseb li se unur           . --> <tabella wisa="100%" cellspacing="0" cellpadding="2" stil="-dritt transkonfinali: 1 solidu # C0C0C0; fruntiera tal-qiegħ: 1 solidu # C0C0C0; -xellug stil fruntiera: solidu; -left-wisa fruntiera: 1; fruntiera-top-istil: solidu; -top-wisa fruntiera: 1;"> <tr> <td jallinjaw="ċentru"> <tabella fruntiera="1" wisa="100%"> <!-- Għal kull status li rridu graff, we call the "ShowBar" template. Aħna tgħaddiha: 1. A tikketta għar-ringiela. Dan huwa trasformat hyperlink. 2. Il-mija (varjabbli minn fuq). 3. L-isem medda attwali tal-kodiċi mil-lista sottostanti. Dan                      . 4. Valur Field mqabbla għal #3. 5. Oġġetti totali ta 'dan il-kodiċi status (mhux-total sħiħ ta 'kulħadd                      ). Hija temetti <tr></tr> u l-bar graff linja orizzontali. Aħna nsejħu dan il-mudell għal kull kodiċi status aħna tixtieq tara. --> <XSL:call-template isem="ShowBar"> <XSL:ma 'param isem="BarDisplayLabel" tagħżel=""Proposti""/> <XSL:ma 'param isem="BarPercent" tagħżel="$percentProposed"/> <XSL:ma 'param isem="QueryFilterFieldName" tagħżel=""Status""/> <XSL:ma 'param isem="QueryFilterFieldValue" tagħżel=""Proposti""/> <XSL:ma 'param isem="TotalItems" tagħżel="$totalProposed"></XSL:ma 'param> </XSL:call-template> <XSL:call-template isem="ShowBar"> <XSL:ma 'param isem="BarDisplayLabel" tagħżel=""Waqaf""/> <XSL:ma 'param isem="BarPercent" tagħżel="$percentStalled"/> <XSL:ma 'param isem="QueryFilterFieldName" tagħżel=""Status""/> <XSL:ma 'param isem="QueryFilterFieldValue" tagħżel=""Waqaf""/> <XSL:ma 'param isem="TotalItems" tagħżel="$totalStalled"></XSL:ma 'param> </XSL:call-template> <XSL:call-template isem="ShowBar"> <XSL:ma 'param isem="BarDisplayLabel" tagħżel=""Fil Proċess""/> <XSL:ma 'param isem="BarPercent" tagħżel="$percentInProcess"/> <XSL:ma 'param isem="QueryFilterFieldName" tagħżel=""Status""/> <XSL:ma 'param isem="QueryFilterFieldValue" tagħżel=""Fil Proċess""/> <XSL:ma 'param isem="TotalItems" tagħżel="$totalInProcess"></XSL:ma 'param> </XSL:call-template> </tabella> </td> </tr> </tabella> </XSL:inkella> </XSL:jagħżlu> </XSL:template> <!-- Dan template ma l-ħidma ta 'wiri linji individwali fil-graff bar. Int ser ikollok probabbilment jagħmlu ħafna mix tweaking tiegħek hawn. --> <XSL:template isem="ShowBar"> <XSL:param isem="BarDisplayLabel" /> <!-- tikketta li turi --> <XSL:param isem="BarPercent"/> <!-- Mija tat-total. --> <XSL:param isem="QueryFilterFieldName"/> <!-- Użati biex jaqbżu l-mistoqsija & filtru --> <XSL:param isem="QueryFilterFieldValue"/> <!-- Użati biex jaqbżu l-mistoqsija & filtru --> <XSL:param isem="TotalItems" /> <!-- għadd totali ta 'dan barlabel --> <tr> <!-- It-tikketta bar innifsu. --> <td klassi="ms-formbody" wisa="30%"> <!-- Dan is-sett li jmiss ta 'dikjarazzjonijiet jibni string query li tippermetti           . Nagħmlu użu ta 'ftit affarijiet hawn: 1. Nistgħu jgħaddu FilterField1 u FilterValue1 għal lista li filtru fuq kolonna. 2. SharePoint hija tgħaddi parametru ewlieni għalina, ListUrlDir that points to the underlying list against which this DVWP is "running". Mhuwiex XSL gost? --> <XSL:test jiskonnettja-output-ħarba="iva"> <![CDATA[<a href ="]]></XSL:test> <XSL:il-valur tal- tagħżel="$ListUrlDir"/> <XSL:test jiskonnettja-output-ħarba="iva"><![CDATA[?FilterField1 =]]></XSL:test> <XSL:il-valur tal- tagħżel="$QueryFilterFieldName"/> <XSL:test jiskonnettja-output-ħarba="iva"><![CDATA[&= FilterValue1]]></XSL:test> <XSL:il-valur tal- tagħżel="$QueryFilterFieldValue"/> <XSL:test jiskonnettja-output-ħarba="iva"><![CDATA[">]]></XSL:test> <XSL:il-valur tal- tagħżel="$BarDisplayLabel"/> <XSL:test jiskonnettja-output-ħarba="iva"><![CDATA[</a>]]></XSL:test> <!-- Il bit jmiss turi xi numri fil-format: "(total / % tat-total)" --> (<XSL:il-valur tal- tagħżel="$TotalItems"/> / <!-- Dan joħloq tikketta mija sbieħ għalina. Grazzi, Microsoft! --> <XSL:call-template isem="percentformat"> <XSL:ma 'param isem="mija" tagħżel="$BarPercent"/> </XSL:call-template>) </td> <!-- Fl-aħħarnett, jitfa ' <td> tag għall-bar innifsu.--> <td> <tabella cellpadding="0" cellspacing="0" fruntiera="0" wisa="{round($BarPercent * 100)+1}%"> <tr bgcolor="aħmar"> <XSL:test jiskonnettja-output-ħarba="iva"><![CDATA[&nbsp;]]></XSL:test> </tr> </tabella> </td> </tr> </XSL:template> <!-- Dan huwa meħud direttament minn xi XSL sibt fi SM template. --> <XSL:template isem="percentformat"> <XSL:param isem="mija"/> <XSL:jagħżlu> <XSL:Meta test="-Numru format($mija, "#, # # 0%;-#,##0%")= "NaN"">0%</XSL:Meta> <XSL:inkella> <XSL:il-valur tal- tagħżel="-Numru format($mija, "#, # # 0%;-#,##0%")" /> </XSL:inkella> </XSL:jagħżlu> </XSL:template> </XSL:stylesheet>

Ir-Riżultati:

Il XSL minn fuq jiġġenera dan il-graff:

immaġni

Drill stabbiliti għad-data sottostanti billi tikklikkja fuq l-status code:

immaġni

Ħsibijiet konklużivi:

Jista 'dan jiġi Ġeneralizzata?

I love dan il-kunċett graphing, 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, jekk jogħġbok ħu nota fil-kummenti jew email me.

Grafiċi vertikali:

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 🙂

Naħseb li l-isfida ma graff vertikali hija li t-tikketti għall-graff huma aktar diffiċli biex tamminstrahom, iżda ċertament mhux impossibbli.

Isem il-Qasam Gotcha tal:

Hemm mill-inqas żewġ affarijiet li għandek toqgħod attent għal mal-qasam ismijiet tiegħek.

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

        <XSL:varjabbli isem="totalProposed" 
tagħżel="joqgħod(/dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ Status) = "Proposti"])" />

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

   <XSL:varjabbli isem="totalProposed" 
tagħżel="joqgħod(/dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ Status_x0020_Code) = "Proposti"])" />

Tieni, u jien fuzzy ftit fuq dan, but you also need to be on the alert for field name changes. If you name your field "Status Code" u mbagħad aktar tard, 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" rabtiet jistgħu jgħinu dijanjosi u jikkoreġu dan it-tip ta 'problema.

Dwar dak Kulur:

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. Per eżempju, if the percentage of "stalled" Tal-AFE huwa > 10% mbagħad juru dan aħmar, otherwise show it in black. Użu <XSL:jagħżlu> biex dan jintlaħaq.

Riżorsi oħra:

Happy trasformazzjoni!

<aħħari />

Abbona għall-blog tiegħi!

17 ħsibijiet dwar "Oħloq Grafiċi Bar fl SharePoint

  1. Chris B

    Din il-paġna kważi tlesta l-kompitu I kienet tfittex.

    Għandi grupp li jrid juża l-lista Istħarriġ SharePoint biex jinħoloq poll kull ġimgħa. Il-qabda? Huma ma tridx tara kodiċi… Jew tinbidel is-sistema kull darba li jibagħtu l-elezzjoni (ippjanat għal aġġornament ta 'kull ġimgħa).

    I kien kapaċi li jgħaqqdu dan lill-lista Istħarriġ u joħolqu l-graff fl-ewwel kolonna tweġiba. What I ma jistgħux jipprevedu għalkemm huma l-valuri u t-tikketti li se jkollhom bżonn miexja 'l quddiem. Biex tgħaxxaq li jista 'jkollhom tweġibiet ftit jew wisq disponibbli kull ġimgħa.

    I se jfittxu x'imkien ieħor biss fil-każ, iżda kull min jinstab mod biex joħolqu ringieli u tikketti bbażati off tan-numru ta 'għażliet disponibbli u dinamiku niżżluhom aktar milli iebsa kodifika tal-valuri mistennija?

  2. Greg Laushine

    Grazzi Paul. Utli ħafna. Grazzi għax-xogħol tiegħek, I kienet f'pożizzjoni li żżid kolonna bar graph għal DVWP eżistenti (e.g. għall-kompiti) faċilment mal biss ftit linji tal-kodiċi tiegħek.
    Fil SharePoint Designer, I jiddaħħal ħsieb data mal-Titolu u % kolonni kompluti minn lista kompitu. I tpoġġi l-cursor f'wieħed mill-ċelloli u dritt ikklikkja. I jagħżlu daħħal kolonna għad-dritt. Fil-fehma kodiċi, I sabu l- <td> u sostitwiti l- <XSL:element test ġewwa l-cell bil-kodiċi tiegħek:
    <tabella cellpadding ="0" cellspacing ="0" transkonfinali ="0"
    width="{round(@ PercentComplete * 100)+1}%">
    <tr style="background-color:red">
    <XSL:text disable-output-escaping="yes"><![CDATA[&nbsp;]]></XSL:test>
    </tr>
    </tabella>

    Note I changed the row color code from bgcolor="red" to style="background-color:aħmar"
    Wkoll, kien kapaċi jagħżel waħda mill-kolonni fil-lista tiegħi (@ PercentComplete) in place of "$BarPercent"
    Greg

  3. Wolfgang
    Paul, grazzi għal dan! I ħolqot kopja eżatta ta 'dak li għamilt u taħdem kważi perfetta. 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;
    Wara I korrett li taħdem bħal CHARM! I issa se jadattaw din il-lista tiegħi stess u l-istatus imma jiena ċert li mhux se jkun li diffiċli. (I ser post ir-riżultat)
    Grazzi għal darb'oħra
    ~ WOLLE
  4. Ebda isem
    kwistjoni –
    X'jiġri jekk fl-graff tiegħi, i riedu varjabbli li mhux biss joqgħod status wieħed iżda jgħodd dawk multipli?
    Allura, per eżempju dak li kieku kelli —
    <XSL:variable name="RequestsInitialized"
    select="count(/dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ Status)=’WIP’])" />
    –Il-ħaġa hija, 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?
    Grazzi!
  5. Murty Srirangam
    Hi Paul,
    Iam really this is really a great effort by you. Tista 'jekk jogħġbok tispjega fejn ikun i post dan il-kodiċi. I ħolqu prjoect ma 'erba' fajls ġodda. Imbagħad inti tista 'tispjega f'aktar dettall dak li nagħmel.
    Grazzi
    Murty
  6. Andrew Carrington
    Hi, I am tipprova timmodifika din ftit sabiex huwa juri graff tal-kompiti f'lista kompitu kontra utent informazzjoni. Hija tuża kolonna msejħa @ AssignedTo li hija kolonna preżenza utent. I jistgħu ġġibu li display teh mogħtija HTML iżda cant ġġibu biex jikkalkola u juri n-valuri.
    Xi ideat?
    Grazzi
    Andy
  7. Patrik Luca kiteb:
    Hi Paul,
    post kbir!
    A kwistjoni:
    Nixtieq biex filtru fuq żewġ oqsma fl-istess ħin: kif jista 'jintlaħaq dan?
    Per eżempju, wieħed ta 'varjabbli tiegħek huwa msejjaħ totalStalled u filtri fuq @ Istatus.
    Nixtieq li jiffiltraw fl-istess ħin biex tnaqqas in-numru ta 'rekords tiegħi lura fuq qasam ieħor.
    I already found how to make an ‘OR’, but I donnot manage to find the ‘AND
    An ‘OR’ jista 'jinkiseb bħal dan:
    <XSL:variable name="totalStalled" select="count(/dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ Status) = ‘Stalled’] | /dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ ExtraFilterField) = ‘value’])" />
  8. Frank

    I have a ‘Using Dashboards in SharePoint’ kwistjoni. 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’ jekk possibbli. Wieħed mill-punti ewlenin huwa viewing-xogħol kurrenti fil-ħin reali fil-faċilità u litteralment watch bidla u 'l isfel (jista 'jkollhom ikklikkja “jġedded”/F5).

    Grazzi bil-quddiem,

Ħalli Irrispondi

Your email address mhux se jkun ippubblikat. Meħtieġa oqsma huma mmarkati *