Kujenga Diagram Bar katika SharePoint

Overview:

(UPDATE 12/04/07: Aliongeza mwingine rasilimali ya kuvutia mwishoni kuunganisha na mwingine blog kuwa anwani hii kupitia sehemu ya kuvutia sana mtandao)

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.

mbinu jumla ni kama ifuatavyo:

  1. Kuunda orodha au maktaba ya hati ambayo ina data unataka graph.
  2. Nafasi ya kuhusishwa hati maktaba / desturi orodha kwenye ukurasa na kubadili mtazamo wa data sehemu ya mtandao (DVWP).
  3. Kurekebisha DVWP ya XSL kuzalisha HTML kwamba inaonyesha kama graph.

Biashara Igizo / Kuanzisha:

I have umba orodha desturi na safu ya kiwango Kichwa na safu moja ya ziada, "Status". This models (sana simplistically) an "Authorization For Expense" mazingira ambapo cheo inawakilisha mradi na Hali ya thamani kutoka kwenye orodha ya:

  • Mapendekezo
  • Katika Mchakato
  • Umesitishwa

Lengo ni kuzalisha maingiliano usawa bar graph inaonyesha kwamba kanuni hizi hali ya.

Mimi wakazi orodha na inaonekana kama hii:

picha

Kujenga Takwimu View Mtandao Sehemu ya:

Kujenga DVWP kwa kuongeza orodha desturi ya ukurasa (tovuti ukurasa katika kesi yangu) na kufuata maelekezo hapa (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Mbali na tu kujenga DVWP, we also need to set the paging property to show all available rows. Kwa ajili yangu, hii inaonekana kitu kama hiki:

picha

Katika hatua hii, 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.

Kurekebisha XSLT:

Ni wakati sasa wa kurekebisha XSLT.

I always use visual studio for this. (Kuona hapa kwa kumbuka muhimu kuhusu Intellisense kwamba itasaidia mengi).

Mimi kujenga mradi tupu kuongeza wanne faili jipya (replacing the words "Original" and "New" kama inafaa):

  • Original.xslt
  • New.xslt
  • Awali Params.xml
  • Mpya Params.xml

Katika kesi yangu, inaonekana kama hii:

picha

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

Lengo hapa ni kusababisha XSL wa kubadilisha matokeo ya sisi kupata nyuma kutoka swala DVWP katika HTML kuwa mithili kama graph.

Hadi mwisho huu, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Kuwa wazi, zifuatazo ni tu mfano; 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:

Sampuli ya Grafu ya Baa

Sambamba HTML:

<html>
<mwili>
<kituo cha>
<meza width = 80%>
<tr><td><kituo cha>Horizontal Bar Grafu</td></tr>
<tr>
<td align="center">
<table border="1" width = 80%>
<tr>
<td width = 10%>Kufungua</td>
<td><meza cellpadding ="0" cellspacing ="0" mpaka = 0 upana = 50%><tr Bgcolor = nyekundu><td>&nbsp;</td></tr></meza></td>
</tr>
<tr>
<td width = 10%>Kufungwa</td>
<td><meza cellpadding ="0" cellspacing ="0" mpaka = 0 width = 25%><tr Bgcolor = nyekundu><td>&nbsp;</td></tr></meza></td>
</tr>
<tr>
<td width = 10%>Umesitishwa</td>
<td><meza cellpadding ="0" cellspacing ="0" mpaka = 0 width = 25%><tr Bgcolor = nyekundu><td>&nbsp;</td></tr></meza></td>
</tr>
</meza>
</td>
</tr>
</meza>
</mwili>
</html>

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

kuchukua-mbali hapa ni hii: Katika mwisho, wote sisi ni kufanya ni kujenga HTML na safu na nguzo.

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

  • Nilianza kwa XSL default kwamba SharePoint Designer alinipa wakati mimi kwanza kuundwa DVWP.
  • Nilikuwa na uwezo wa kata hii ya chini kutoka SPD 657 mistari ya 166 lines.
  • Mimi si fujo karibu na faili vigezo XML (ambayo ni tofauti na XSL na wewe utakuwa kujua nini maana mimi wakati wewe kwenda kurekebisha DVWP yenyewe; kuna mbili files unaweza kurekebisha). Hata hivyo, ili kurahisisha hilo, 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. Kisha, remove my calls and insert your own calls to "ShowBar".
  • drill chini anafanya kazi kwa kujenga <href> kama hii: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. At first, Nilidhani napenda haja ya kuendana na muundo ngumu zaidi: 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.

Hapa ni:

<xsl:Lahamtindo toleo="1.0" kuwatenga-matokeo-viambishi awali="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:the="urn:schemas-Microsoft-com:ofisi" 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:ndani"
> <xsl:pato njia="html" Indent="hakuna" /> <xsl:decimal-format NaN="" /> <xsl:kuacha jina="ListUrlDir"></xsl:kuacha> <!-- Mimi haja hii kwa msaada wa drill-chini. --> <xsl:template mechi="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20"
> <xsl:variable jina="dvt_StyleName">Meza</xsl:variable> <xsl:variable jina="Safu" kuchagua="/dsQueryResponse / Safu / Row" /> <xsl:variable jina="dvt_RowCount" kuchagua="kuhesabu($Safu)" /> <xsl:variable jina="IsEmpty" kuchagua="$dvt_RowCount = 0" /> <xsl:variable jina="dvt_IsEmpty" kuchagua="$dvt_RowCount = 0" /> <xsl:kuchagua> <xsl:wakati mtihani="$dvt_IsEmpty"> Hakuna data kwa graph!<br/> </xsl:wakati> <xsl:vinginevyo> <!-- mambo ya kuvutia inaanza hapa. Hatuna budi kufafanua jozi ya vigezo kwa kila mstari katika graph: jumla ya idadi           . --> <xsl:variable jina="totalProposed" kuchagua="kuhesabu(/dsQueryResponse / Safu / Row[kurejesha-nafasi(@ Status) = 'Mapendekezo'])" /> <xsl:variable jina="percentProposed" kuchagua="$totalProposed div $ dvt_RowCount" /> <xsl:variable jina="totalInProcess" kuchagua="kuhesabu(/dsQueryResponse / Safu / Row[kurejesha-nafasi(@ Status) = 'Katika Mchakato'])" /> <xsl:variable jina="percentInProcess" kuchagua="$totalInProcess div $ dvt_RowCount" /> <xsl:variable jina="totalStalled" kuchagua="kuhesabu(/dsQueryResponse / Safu / Row[kurejesha-nafasi(@ Status) = 'Kushindikana'])" /> <xsl:variable jina="percentStalled" kuchagua="$totalStalled div $ dvt_RowCount" /> <!-- Sisi kufafanua meza yetu HTML hapa. Mimi kukopa kutoka kwa baadhi ya kiwango           . Nadhani itakuwa heshima           . --> <meza upana="100%" cellspacing="0" cellpadding="2" style="mpaka-kulia: 1 imara # C0C0C0; mpaka-chini: 1 imara # C0C0C0; mpaka-kushoto-style: imara; mpaka-kushoto-upana: 1; mpaka-juu-style: imara; mpaka-juu-upana: 1;"> <tr> <td align="kituo cha"> <meza mpaka="1" upana="100%"> <!-- Kwa kila hali ya kwamba tunataka graph, we call the "ShowBar" template. Sisi kupita: 1. studio kwa ajili ya safu. Hii ni kugeuza hyperlink. 2. asilimia (kutofautiana kutoka juu). 3. halisi shamba jina la kanuni kutoka orodha ya msingi. Hii                      . 4. Shamba thamani kuendana kwa #3. 5. Jumla ya vitu ya kanuni hii hali ya (si jumla kuu ya yote                      ). Hutoa <tr></tr> na usawa bar graph line. Sisi wito huu template kwa kanuni ya kila hali tunataka kuona. --> <xsl:wito-template jina="ShowBar"> <xsl:na-param jina="BarDisplayLabel" kuchagua="'Mapendekezo'"/> <xsl:na-param jina="BarPercent" kuchagua="$percentProposed"/> <xsl:na-param jina="QueryFilterFieldName" kuchagua="'Hali'"/> <xsl:na-param jina="QueryFilterFieldValue" kuchagua="'Mapendekezo'"/> <xsl:na-param jina="TotalItems" kuchagua="$totalProposed"></xsl:na-param> </xsl:wito-template> <xsl:wito-template jina="ShowBar"> <xsl:na-param jina="BarDisplayLabel" kuchagua="'Kushindikana'"/> <xsl:na-param jina="BarPercent" kuchagua="$percentStalled"/> <xsl:na-param jina="QueryFilterFieldName" kuchagua="'Hali'"/> <xsl:na-param jina="QueryFilterFieldValue" kuchagua="'Kushindikana'"/> <xsl:na-param jina="TotalItems" kuchagua="$totalStalled"></xsl:na-param> </xsl:wito-template> <xsl:wito-template jina="ShowBar"> <xsl:na-param jina="BarDisplayLabel" kuchagua="'Katika Mchakato'"/> <xsl:na-param jina="BarPercent" kuchagua="$percentInProcess"/> <xsl:na-param jina="QueryFilterFieldName" kuchagua="'Hali'"/> <xsl:na-param jina="QueryFilterFieldValue" kuchagua="'Katika Mchakato'"/> <xsl:na-param jina="TotalItems" kuchagua="$totalInProcess"></xsl:na-param> </xsl:wito-template> </meza> </td> </tr> </meza> </xsl:vinginevyo> </xsl:kuchagua> </xsl:template> <!-- Template hii anafanya kazi ya kuonyesha mistari ya mtu binafsi katika graph bar. Pengine utasikia kufanya zaidi ya tweaking yako hapa. --> <xsl:template jina="ShowBar"> <xsl:kuacha jina="BarDisplayLabel" /> <!-- studio ya kuonyesha --> <xsl:kuacha jina="BarPercent"/> <!-- Asilimia ya jumla ya. --> <xsl:kuacha jina="QueryFilterFieldName"/> <!-- Kutumika Rukia swala & kuchuja --> <xsl:kuacha jina="QueryFilterFieldValue"/> <!-- Kutumika Rukia swala & kuchuja --> <xsl:kuacha jina="TotalItems" /> <!-- taarifa ya hesabu ya hii barlabel --> <tr> <!-- studio bar yenyewe. --> <td darasani="ms-formbody" upana="30%"> <!-- Hii seti ya pili ya kauli hujenga kamba swala ambayo inaruhusu           . Sisi kufanya matumizi ya mambo machache hapa: 1. Tunaweza kupita FilterField1 na FilterValue1 kwenye orodha kuweza kuchuja kwenye safu. 2. SharePoint ni kupita parameter muhimu kwetu, ListUrlDir that points to the underlying list against which this DVWP is "running". Si XSL furaha? --> <xsl:Nakala Disable-pato-kukimbia="ndiyo"> <![CDATA[<href ="]]></xsl:Nakala> <xsl:thamani ya kuchagua="$ListUrlDir"/> <xsl:Nakala Disable-pato-kukimbia="ndiyo"><![CDATA[?FilterField1 =]]></xsl:Nakala> <xsl:thamani ya kuchagua="$QueryFilterFieldName"/> <xsl:Nakala Disable-pato-kukimbia="ndiyo"><![CDATA[&FilterValue1 =]]></xsl:Nakala> <xsl:thamani ya kuchagua="$QueryFilterFieldValue"/> <xsl:Nakala Disable-pato-kukimbia="ndiyo"><![CDATA[">]]></xsl:Nakala> <xsl:thamani ya kuchagua="$BarDisplayLabel"/> <xsl:Nakala Disable-pato-kukimbia="ndiyo"><![CDATA[</a>]]></xsl:Nakala> <!-- kidogo ijayo inaonyesha idadi ya baadhi katika muundo: "(taarifa / % ya jumla ya)" --> (<xsl:thamani ya kuchagua="$TotalItems"/> / <!-- Hii inajenga nzuri asilimia studio kwa ajili yetu. Shukrani, Microsoft! --> <xsl:wito-template jina="percentformat"> <xsl:na-param jina="asilimia" kuchagua="$BarPercent"/> </xsl:wito-template>) </td> <!-- Hatimaye, emit <td> tag kwa bar yenyewe.--> <td> <meza cellpadding="0" cellspacing="0" mpaka="0" upana="{pande zote($BarPercent * 100)+1}%"> <tr Bgcolor="nyekundu"> <xsl:Nakala Disable-pato-kukimbia="ndiyo"><![CDATA[&nbsp;]]></xsl:Nakala> </tr> </meza> </td> </tr> </xsl:template> <!-- Hii ni kuchukuliwa moja kwa moja kutoka kwa baadhi XSL nimeona katika template MS. --> <xsl:template jina="percentformat"> <xsl:kuacha jina="asilimia"/> <xsl:kuchagua> <xsl:wakati mtihani="format-idadi($asilimia, '#, # # 0%;-#,##0%')= 'NaN'">0%</xsl:wakati> <xsl:vinginevyo> <xsl:thamani ya kuchagua="format-idadi($asilimia, '#, # # 0%;-#,##0%')" /> </xsl:vinginevyo> </xsl:kuchagua> </xsl:template> </xsl:Lahamtindo>

Matokeo:

XSL kutoka juu inazalisha hii graph:

picha

Kuchimba chini kwa data ya msingi kwa kubonyeza kanuni hali ya:

picha

Kuhitimisha Mawazo:

Hii inaweza kuwa jumla?

I love hii dhana 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, tafadhali kufanya kumbuka katika maoni au email yangu.

Wima Grafu:

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, tafadhali nijulishe na nitaunganisha kwa furaha blogi yako 🙂

Nadhani kuwa changamoto na graph wima ni kwamba maandiko kwa graph ni vigumu zaidi ya kusimamia, lakini kwa hakika si vigumu.

Shamba la Gotcha ya:

Kuna angalau vitu viwili kwa kuangalia nje kwa pamoja na majina yako shamba.

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

        <xsl:variable jina="totalProposed" 
kuchagua="kuhesabu(/dsQueryResponse / Safu / Row[kurejesha-nafasi(@ Status) = 'Mapendekezo'])" />

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

   <xsl:variable jina="totalProposed" 
kuchagua="kuhesabu(/dsQueryResponse / Safu / Row[kurejesha-nafasi(@ Status_x0020_Code) = 'Mapendekezo'])" />

Pili, na mimi nina fuzzy kidogo juu ya hili, but you also need to be on the alert for field name changes. If you name your field "Status Code" na kisha baadaye, 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" viungo inaweza kusaidia kutambua na kurekebisha aina hii ya tatizo.

Kuhusu Alama ya kwamba:

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. Kwa mfano, if the percentage of "stalled" Aliamuru ni > 10% kisha kuonyesha kuwa nyekundu, otherwise show it in black. Kutumia <xsl:kuchagua> kukamilisha hili.

Rasilimali nyingine:

Furaha kubadilisha!

<mwisho />

Kujiunga na blog yangu!

17 mawazo juu ya "Kujenga Diagram Bar katika SharePoint

  1. Chris B

    Ukurasa huu karibu kumaliza kazi nilikuwa kutafuta.

    Nina kundi kwamba anataka kutumia Survey SharePoint orodha kuunda uchaguzi kila wiki. samaki? Wao hawataki kuona kanuni… Au kubadilisha mfumo kila wakati wao kutuma uchaguzi (iliyopangwa kwa ajili ya update kila wiki).

    Nilikuwa na uwezo wa kuunganisha hii na orodha ya Utafiti na kujenga graph kwenye safu ya kwanza jibu. Nini siwezi kutabiri ingawa ni maadili na maandiko kwamba wanahitaji kusonga mbele. Kibaya zaidi wanaweza kuwa na majibu zaidi au chini ya inapatikana kila wiki.

    Nami kuangalia mahali pengine tu katika kesi, lakini mtu yeyote kupatikana njia ya kujenga safu maandiko na msingi mbali ya idadi ya chaguzi inapatikana na dynamically kuweka hizi badala ya coding ngumu maadili inatarajiwa?

    Kujibu
  2. Greg Laushine

    Shukrani Paulo. Kusaidia sana. Shukrani kwa kazi yako, Nilikuwa na uwezo wa kuongeza bar graph safu DVWP zilizopo (e.g. kwa ajili ya kazi) urahisi sana kwa mistari michache tu ya maadili yako.
    Katika SharePoint Designer, Mimi kuingizwa mtazamo data na Kichwa na % kamili nguzo kutoka orodha ya kazi. Mimi kuweka mshale katika moja ya seli na haki bonyeza. Mimi kuchagua kuingiza safu ya haki. Kwa maoni ya kanuni, Nimeona <td> na kubadilishwa <xsl:Nakala ya kipengele ndani ya kiini na kanuni yako:
    <meza cellpadding ="0" cellspacing ="0" mpaka ="0"
    width="{pande zote(@ PercentComplete * 100)+1}%">
    <tr style="background-color:red">
    <xsl:text disable-output-escaping="yes"><![CDATA[&nbsp;]]></xsl:Nakala>
    </tr>
    </meza>

    Note I changed the row color code from bgcolor="red" to style="background-color:nyekundu"
    Pia, alikuwa na uwezo wa kuchagua moja ya nguzo katika orodha yangu (@ PercentComplete) in place of "$BarPercent"
    Greg

    Kujibu
  3. Wolfgang
    Paulo, shukrani kwa ajili ya hii! Mimi umba nakala halisi ya nini alifanya na ni kazi karibu kamili. 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;
    Baada ya mimi corrected kwamba kazi kama charm! Mimi sasa kukabiliana hii orodha yangu mwenyewe na hadhi lakini nina uhakika itakuwa si kwa bidii. (Mimi baada ya matokeo)
    Shukrani tena
    ~ Wolle
    Kujibu
  4. Hakuna jina
    swali –
    Nini kama katika graph yangu, i alitaka kutofautiana na siyo tu hali ya kuhesabu moja lakini kuhesabu ndio nyingi?
    Hivyo, kwa mfano nini kama mimi alikuwa na —
    <xsl:variable name="RequestsInitialized"
    select="count(/dsQueryResponse / Safu / Row[kurejesha-nafasi(@ Status)=’WIP’])" />
    –jambo ni, 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?
    Shukrani!
    Kujibu
  5. Murty Srirangam
    Hi Paulo,
    Iam really this is really a great effort by you. Tafadhali unaweza kueleza ambapo ingekuwa i post hii kanuni ya. I have umba prjoect na files nne mpya. Basi unaweza kueleza kwa undani zaidi kile lazima i kufanya.
    Asante
    Murty
    Kujibu
  6. Andrew Carrington
    Hi, Mimi ni kujaribu kurekebisha hii kidogo ili ni maonyesho ya graph ya kazi katika orodha ya kazi dhidi ya habari mtumiaji. Ni matumizi ya safu ya kuitwa @ AssignedTo ambayo ni uwepo mtumiaji safu. Naweza kupata kuonyesha teh inavyosema HTML lakini cant kupata kwa mahesabu na kuonyesha maadili.
    Mawazo yoyote?
    Shukrani
    Andy
    Kujibu
  7. Patrik Luca aliandika:
    Hi Paulo,
    kubwa baada ya!
    swali:
    Napenda kuchuja kwenye mashamba mbili kwa wakati mmoja: jinsi gani hii kupatikana?
    Kwa mfano, moja ya vigezo yako inaitwa totalStalled na filters ya Hali @.
    Napenda kuchuja wakati huo huo kupunguza idadi yangu ya kumbukumbu akarudi kwenye uwanja mwingine.
    I already found how to make an ‘OR’, but I donnot manage to find the ‘AND’
    An ‘OR’ inaweza kupatikana kama hii:
    <xsl:variable name="totalStalled" select="count(/dsQueryResponse / Safu / Row[kurejesha-nafasi(@ Status) = ‘Stalled’] | /dsQueryResponse / Safu / Row[kurejesha-nafasi(@ ExtraFilterField) = ‘value’])" />
    Kujibu
  8. Frank

    Nina 'Kutumia Dashibodi katika SharePoint’ swali. Sisi ni hospitali ya kijeshi inayotumia kiwango cha MOSS kwa Intranet yetu na tungependa kujenga dashibodi kwa ajili ya Kikundi chetu cha Amri kuona 'muda halisi.’ kama inawezekana. Moja ya pointi kuu ni kuangalia halisi wakati sasa mzigo wa kazi ndani ya kituo na literally kuangalia ni mabadiliko ya juu na chini (inaweza kuwa na bonyeza “burudisha”/F5).

    Asante mapema,

    Kujibu

Kuondoka Reply

Anwani yako si kuchapishwa. Mashamba required ni alama *