Disyembre | 2007 | Paul Galvin's SharePoint Space

Pangkalahatang-ideya ng:

(I-UPDATE 12/04/07: Idinagdag ng isa pang kawili-wiling mga mapagkukunan sa dulo nagli-link sa isa pang blog na address na ito sa pamamagitan ng isang napaka-kagiliw-giliw na bahagi ng web)

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.

Ang pangkalahatang diskarte ay ang mga sumusunod:

Lumikha ng isang listahan o dokumento library na naglalaman ng data na gusto mong i-graph.
Ilagay ang nauugnay na library dokumento / custom na listahan sa isang pahina at i-convert ito sa isang bahagi ng data view ng web (DVWP).
Baguhin ang DVWP ni XSL upang bumuo ng HTML na nagpapakita bilang isang graph.

Negosyo Sitwasyon / Setup:

Ako pa nakalikha ng isang pasadyang listahan sa pamantayan haligi ng Pamagat at isang karagdagang hanay, "Status". This models (napaka simplistically) an "Authorization For Expense" sitwasyon kung saan ang pamagat ay kumakatawan sa mga proyekto at ang Katayuan ng isang halaga mula sa listahan ng:

Ipinanukalang
Sa Proseso
Stalled

Ang layunin ay upang makabuo ng isang interactive na pahalang bar graph na nagpapakita ang mga code ng katayuan.

Ako populated na listahan at ang mukhang ito:

Lumikha ng Data Tingnan ang Web Bahagi:

Lumikha ng DVWP pamamagitan ng pagdaragdag ng custom na listahan sa isang pahina (site pahina sa aking mga kaso) at sundin ang mga tagubilin dito (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Bilang karagdagan sa paglikha lamang ang DVWP, we also need to set the paging property to show all available rows. Sa akin, ito ganito ang hitsura:

Sa puntong ito, 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.

Baguhin ang XSLT:

Ngayon ay oras upang baguhin ang XSLT.

I always use visual studio for this. (Tingnan dito para sa isang mahalagang tala tungkol sa intellisense na makakatulong sa iyo ng maraming).

Lumikha ako ng walang laman na proyekto magdagdag ng apat na mga bagong file (replacing the words "Original" and "New" bilang naaangkop):

Original.xslt
New.xslt
Orihinal na Params.xml
Bagong Params.xml

Sa aking kaso, ito ganito ang hitsura:

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

Ang layunin dito ay upang magdulot sa XSL upang ibahin ang anyo ang mga resulta makuha namin pabalik mula sa DVWP query sa HTML na nagpapagana ng isang graph.

Upang ito ng pagtatapos, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Upang maging malinaw, ang sumusunod ay lamang ng isang halimbawa; 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:

Kaukulang HTML:

<html>
<katawan>
<sentro>
<talahanayan width = 80%>
<tr><td><sentro>Pahalang na Bar Graph</td></tr>
<tr>
<td align="center">
<table border="1" width = 80%>
<tr>
<td width = 10%>Bukas</td>
<td><talahanayan cellpadding ="0" cellspacing ="0" border = 0 width = 50%><tr bgcolor = red><td> </td></tr></talahanayan></td>
</tr>
<tr>
<td width = 10%>Sarado</td>
<td><talahanayan cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = red><td> </td></tr></talahanayan></td>
</tr>
<tr>
<td width = 10%>Stalled</td>
<td><talahanayan cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = red><td> </td></tr></talahanayan></td>
</tr>
</talahanayan>
</td>
</tr>
</talahanayan>
</katawan>
</html>

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

Ang tumagal-layo dito ay ito: Sa katapusan, lahat kami ay paggawa ay lumilikha ng HTML na may mga hilera at mga hanay.

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:

Ako makapagsimula sa default na XSL SharePoint Designer ibinigay mo sa akin kapag ako unang nilikha ang DVWP.
Ako ay magagawang upang i-cut down na ito mula sa SPD ni 657 mga linya sa 166 lines.
Hindi ko Nagkamali sa paligid kasama ang file na XML na mga parameter (na kung saan ay hiwalay mula sa XSL at malalaman mo kung ano ang ibig sabihin ko kapag pumunta sa iyo upang baguhin ang DVWP mismo; mayroong dalawang mga file na maaari mong baguhin). Gayunman, upang gawing simple ito, 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. Pagkatapos, remove my calls and insert your own calls to "ShowBar".
Ang drill down na gumagana sa pamamagitan ng paglikha ng isang <a href> ganito: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Nang una, Akala ko Gusto ko kailangan upang sumunod sa isang mas kumplikadong mga format: 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.

Eto:

<xsl:stylesheet salin="1.0" ibukod-resulta-prefix="rs z o s ddwrt dt msxsl" 
 xmlns:msxsl="uma: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="uma:schemas-Microsoft-com:opisina" xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:rs="uma:schemas-Microsoft-com:rowset" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="uma:frontpage:panloob">
  <xsl:pagbubuhos pamamaraan="html" mag-urong="hindi" />
  <xsl:decimal-format Nan="" />
  <xsl:itigil pangalan="ListUrlDir"></xsl:itigil> <!-- Kailangan ko ito upang suportahan ang isang drill-down.  -->

  <xsl:template tumugma="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp="http://schemas.microsoft.com/ASPNET/20">
    <xsl:nagbabago pangalan="dvt_StyleName">Talahanayan</xsl:nagbabago>
    <xsl:nagbabago pangalan="Mga hilera" piliin="/dsQueryResponse / Mga hilera / Hilera" />
    <xsl:nagbabago pangalan="dvt_RowCount" piliin="bilangin($Mga hilera)" />
    <xsl:nagbabago pangalan="IsEmpty" piliin="$dvt_RowCount = 0" />
    <xsl:nagbabago pangalan="dvt_IsEmpty" piliin="$dvt_RowCount = 0" />

    <xsl:piliin>
      <xsl:kapag pagsubok="$dvt_IsEmpty">
        Walang data sa graph!<br/>
      </xsl:kapag>
      <xsl:kung hindi>

        <!--
          Ang mga kagiliw-giliw na mga bagay-bagay ay nagsisimula dito.

          Kailangan namin upang tukuyin ang isang pares ng mga variable para sa bawat hilera sa graph: kabuuang bilang
          .
        -->
        <xsl:nagbabago pangalan="totalProposed" piliin="bilangin(/dsQueryResponse / Mga hilera / Hilera[normalize-espasyo(@ Status) = 'Ipinanukalang'])" />
        <xsl:nagbabago pangalan="percentProposed" piliin="$totalProposed div $ dvt_RowCount" />

        <xsl:nagbabago pangalan="totalInProcess" piliin="bilangin(/dsQueryResponse / Mga hilera / Hilera[normalize-espasyo(@ Status) = 'In Process'])" />
        <xsl:nagbabago pangalan="percentInProcess" piliin="$totalInProcess div $ dvt_RowCount" />

        <xsl:nagbabago pangalan="totalStalled" piliin="bilangin(/dsQueryResponse / Mga hilera / Hilera[normalize-espasyo(@ Status) = 'Stalled'])" />
        <xsl:nagbabago pangalan="percentStalled" piliin="$totalStalled div $ dvt_RowCount" />

        <!--
          Namin tukuyin ang aming HTML talahanayan dito.  Ako paghiram mula sa ilang mga pamantayan
          .  Sa tingin ko ay ito parangalan
          .
        -->
        <talahanayan lapad="100%" cellspacing="0" cellpadding="2"
estilo="hangganan-kanan: 1 solid # C0C0C0; hangganan-ilalim: 1 solid # C0C0C0; hangganan-kaliwa-style: matatag; hangganan-kaliwa-lapad: 1; hangganan-top-style: matatag; hangganan-top-lapad: 1;">

           <tr>
            <td ihanay="sentro">
              <talahanayan hangganan="1" lapad="100%">

                <!--
                  Para sa bawat kalagayan na gusto naming graph, we call the "ShowBar" template.
                  Ipasa namin ito:
                  1. Ang isang label para sa hilera.  Ito ay transformed sa isang hyperlink.
                  2. Ang porsiyento (variable mula sa itaas).
                  3. Ang aktwal na pangalan ng patlang ng code mula sa napapailalim na listahan.  Ito
                     .
                  4. Ang halaga ng field tumutugma para sa #3.
                  5. Kabuuang mga item ng ang code na ito katayuan (hindi ang engrandeng kabuuan ng lahat ng
                     ).

                  Ito emits isang <tr></tr> at mga pahalang na bar graph linya.

                  Tinatawag namin ang template na ito para sa bawat code ng katayuan nais naming tingnan.
                -->
                <xsl:call-template pangalan="ShowBar">
                  <xsl:may-param pangalan="BarDisplayLabel" piliin="'Ipinanukalang'"/>
                  <xsl:may-param pangalan="BarPercent" piliin="$percentProposed"/>
                  <xsl:may-param pangalan="QueryFilterFieldName" piliin="'Katayuan'"/>
                  <xsl:may-param pangalan="QueryFilterFieldValue" piliin="'Ipinanukalang'"/>
                  <xsl:may-param pangalan="TotalItems" piliin="$totalProposed"></xsl:may-param>
                </xsl:call-template>

                <xsl:call-template pangalan="ShowBar">
                  <xsl:may-param pangalan="BarDisplayLabel" piliin="'Stalled'"/>
                  <xsl:may-param pangalan="BarPercent" piliin="$percentStalled"/>
                  <xsl:may-param pangalan="QueryFilterFieldName" piliin="'Katayuan'"/>
                  <xsl:may-param pangalan="QueryFilterFieldValue" piliin="'Stalled'"/>
                  <xsl:may-param pangalan="TotalItems" piliin="$totalStalled"></xsl:may-param>
                </xsl:call-template>

                <xsl:call-template pangalan="ShowBar">
                  <xsl:may-param pangalan="BarDisplayLabel" piliin="'In Process'"/>
                  <xsl:may-param pangalan="BarPercent" piliin="$percentInProcess"/>
                  <xsl:may-param pangalan="QueryFilterFieldName" piliin="'Katayuan'"/>
                  <xsl:may-param pangalan="QueryFilterFieldValue" piliin="'In Process'"/>
                  <xsl:may-param pangalan="TotalItems" piliin="$totalInProcess"></xsl:may-param>
                </xsl:call-template>

              </talahanayan>
            </td>
          </tr>
        </talahanayan>
      </xsl:kung hindi>
    </xsl:piliin>
  </xsl:template>

  <!--
    Ang template na ito ang trabaho ng pagpapakita ng mga indibidwal na mga linya sa graph bar.

    Makikita mo marahil gawin ang karamihan ng iyong mga pag-aayos dito.
  -->
  <xsl:template pangalan="ShowBar">
    <xsl:itigil pangalan="BarDisplayLabel" /> <!-- label upang ipakita ang -->
    <xsl:itigil pangalan="BarPercent"/> <!-- Porsyento ng kabuuang. -->
    <xsl:itigil pangalan="QueryFilterFieldName"/> <!-- Ginagamit upang tumalon sa query & salain -->
    <xsl:itigil pangalan="QueryFilterFieldValue"/> <!-- Ginagamit upang tumalon sa query & salain -->
    <xsl:itigil pangalan="TotalItems" /> <!-- kabuuang bilang ng mga ito barlabel -->

    <tr>

      <!-- Ang bar label mismo. -->
      <td klase="ms-formbody" lapad="30%">

        <!--
          Ang susunod na set ng mga pahayag ay nagbubuo mula sa isang query string na nagbibigay-daan
          .
          Ibinibigay namin ang paggamit ng ilang mga bagay dito:
          1. Maaari naming pumasa FilterField1 at FilterValue1 sa isang listahan upang i-filter sa isang hanay.
          2. SharePoint ay pagpasa sa isang key parameter sa amin, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          Ay hindi XSL masaya?
        -->
        <xsl:teksto huwag paganahin-output-escaping="oo">
        <![CDATA[<a href ="]]></xsl:teksto>
        <xsl:halaga-ng piliin="$ListUrlDir"/>
        <xsl:teksto huwag paganahin-output-escaping="oo"><![CDATA[?FilterField1 =]]></xsl:teksto>
        <xsl:halaga-ng piliin="$QueryFilterFieldName"/>
        <xsl:teksto huwag paganahin-output-escaping="oo"><![CDATA[&FilterValue1 =]]></xsl:teksto>
        <xsl:halaga-ng piliin="$QueryFilterFieldValue"/>
        <xsl:teksto huwag paganahin-output-escaping="oo"><![CDATA[">]]></xsl:teksto>
        <xsl:halaga-ng piliin="$BarDisplayLabel"/>
        <xsl:teksto huwag paganahin-output-escaping="oo"><![CDATA[</isang>]]></xsl:teksto>

        <!-- Ang susunod na bit ay nagpapakita ng ilang mga numero sa format: "(kabuuan / % ng kabuuang)" -->
        (<xsl:halaga-ng piliin="$TotalItems"/> /

        <!-- Lumilikha ito ng isang masarap na label na porsiyento para sa amin.  Salamat, Microsoft! -->
        <xsl:call-template pangalan="percentformat">
          <xsl:may-param pangalan="porsiyento" piliin="$BarPercent"/>
        </xsl:call-template>)

      </td>

      <!-- Sa wakas, naglalabas ng isang <td> tag para sa bar mismo.-->
      <td>
        <talahanayan cellpadding="0" cellspacing="0" hangganan="0"
lapad="{isalin($BarPercent * 100)+1}%">
          <tr bgcolor="pula">
            <xsl:teksto huwag paganahin-output-escaping="oo"><![CDATA[&nbsp;]]></xsl:teksto>
          </tr>
        </talahanayan>
      </td>
    </tr>

  </xsl:template>

  <!-- Ito ay nakuha nang direkta mula sa ilang XSL ko nahanap sa isang template ng MS. -->
  <xsl:template pangalan="percentformat">
    <xsl:itigil pangalan="porsiyento"/>
    <xsl:piliin>
      <xsl:kapag pagsubok="format-NUMBER($porsiyento, '#, # # 0%;-#,##0%')= 'Nan'">0%</xsl:kapag>
      <xsl:kung hindi>
        <xsl:halaga-ng piliin="format-NUMBER($porsiyento, '#, # # 0%;-#,##0%')" />
      </xsl:kung hindi>
    </xsl:piliin>
  </xsl:template>

</xsl:stylesheet>

Ang Resulta:

Ang XSL mula sa itaas na ito ay bumubuo ng graph:

Mag-drill down sa ang kalakip na data sa pamamagitan ng pag-click sa code ng katayuan:

Concluding saloobin:

Puwede ito Maging pangkalahatan?

Gustung-gusto ko ito graphing konsepto, 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, mangyaring gumawa ng isang nota sa mga komento o email sa akin.

Vertical Graph:

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, mangyaring ipaalam sa akin at kukunin ko na Masaya link sa iyong blog 🙂

Sa tingin ko na ang hamon sa isang vertical na graph ay ang mga label para sa mga graph ay mas mahirap na pamahalaan, ngunit tiyak na hindi imposible.

Patlang Pangalan Gotcha ni:

May mga hindi bababa sa dalawang mga bagay na dapat na antabayanan gamit ang iyong pangalan ng field.

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

        <xsl:nagbabago pangalan="totalProposed" 
 piliin="bilangin(/dsQueryResponse / Mga hilera / Hilera[normalize-espasyo(@ Status) = 'Ipinanukalang'])" />

If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":
   <xsl:nagbabago pangalan="totalProposed" 
 piliin="bilangin(/dsQueryResponse / Mga hilera / Hilera[normalize-espasyo(@ Status_x0020_Code) = 'Ipinanukalang'])" />
Pangalawa, at ako ay medyo malabo ito sa, but you also need to be on the alert for field name changes. If you name your field "Status Code" at pagkatapos ay sa ibang pagkakataon, 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" mga link ay maaaring makatulong sa diagnose at maitama ang ganitong uri ng problema.

Tungkol na Kulay:

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. Halimbawa, if the percentage of "stalled" AFE ay > 10% pagkatapos ay ipakita ito pula, otherwise show it in black. Gamitin <xsl:piliin> upang makamit ito.

Iba pang mga Mapagkukunan:

Tukuyin ang panloob na pangalan (at iba pang mahusay na impormasyon) para ang data sa isang listahan: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
Ipakita ang lahat ng mga data na ibinigay sa pamamagitan ng SharePoint (ang raw XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Kunin ang xpath na expression ng isang tiyak na hanay: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
Isa pang diskarte gamit ang OWA(?). I have not dug into it, pero mukhang may pag-asa, lalo na para sa mga pie chart: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Maligayang pagbabago!

Mag-subscribe sa aking blog!

Technorati Tags: SharePoint, DVWP, Data Tingnan ang Web Bahagi, XSL, XSLT, WSS, Lumot

Paul Galvin's SharePoint Space

Buwanang Archive: Disyembre 2007

Lumikha ng graph ng Bar sa SharePoint