V SharePoint vytvořit pruhové grafy

Přehled:

(AKTUALIZOVAT 12/04/07: Přidána další zajímavé zdroje na konci, které odkazují na jiný blog, který to řeší prostřednictvím velmi zajímavou webovou část)

Tato položka blogu popisuje, jak vytvořit pruhový graf ve službě SharePoint. To funguje v WSS nebo MOSS prostředí závisí pouze na webovou část zobrazení dat..

Celkový přístup je následující:

  1. Vytvořit seznam nebo knihovnu dokumentů, která obsahuje data, která chcete graf.
  2. Místo přidružená knihovna dokumentů / vlastní seznam na stránku a převést ji do webové části zobrazení dat (DVWP).
  3. Úprava XSL DVWP pro generování HTML, který zobrazuje jako graf.

Obchodní scénář / Instalace:

Vytvořil jsem vlastní seznam s standardní název sloupec a jeden další sloupec, "Status". Tyto modely (velmi Zjednodušeně) "povolení pro výdaje" scénář, kde název představuje projekt a stav hodnotu ze seznamu:

  • Navrhované
  • V procesu
  • Zastavil

Cílem je vytvářet interaktivní vodorovný pruhový graf, který ukazuje tyto stavové kódy.

Jsem naplněn seznamu a to vypadá takto:

obrázek

Vytvořit webové části zobrazení dat:

Přidáním vlastního seznamu na stránku vytvořit DVWP (Web stránky v mém případě) a podle pokynů Tady (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Kromě jednoduše vytvořit DVWP, rovněž je třeba nastavit vlastnost stránkování a zobrazit všechny dostupné řádky. Pro mě, To je něco takového:

obrázek

V tomto okamžiku, Jsem vždy blízko, SPD a prohlížeč. Já znovu otevřít stránku pomocí prohlížeče. Tím je zabráněno náhodnému komolili rozložení webové části na stránce.

Upravit soubor XSLT:

Nyní je čas Chcete-li upravit soubor XSLT.

Já vždy použít visual studio pro tento. (Viz Tady Důležité upozornění o intellisense, který vám pomůže hodně).

Vytvořit prázdný projekt přidat čtyři nové soubory (nahrazení slova "originál" a "New" podle potřeby):

  • Original.XSLT
  • New.XSLT
  • Původní Params.xml
  • Nové Params.xml

V mém případě, Vypadá to jako to:

obrázek

Upravit webovou část a zkopírujte parametry a XSL do originálu"" verze v aplikaci Visual Studio.

Cílem je způsobit XSL Transformace výsledky, které jsme se vrátili z DVWP dotazu do kódu HTML, který rendruje jako graf.

Za tímto účelem, To pomáhá nejprve zvážit, co HTML by měl vypadat jako předtím, než jsme se zmást šílenství, která je známá jako "XSL". (Aby bylo jasno, je jen příklad; nechcete napsat nebo kopírovat/vložit do sady visual studio. Poskytuji plnou ránu, výchozí bod pro to později v psát-up). Následující ukázkový graf je vykresleno jako HTML, bezprostředně po:

Ukázkový sloupcový graf

Odpovídající HTML:

<HTML>
<tělo>
<centrum>
<tabulka šířka = 80 %>
<TR><TD><centrum>Vodorovný pruhový graf</TD></TR>
<TR>
<TD align = "na střed">
<ohraničení tabulky = "1" Šířka = 80 %>
<TR>
<TD width = 10 %>Otevřené</TD>
<TD><tabulka cellpadding ="0" CellSpacing ="0" hranice = 0 width = 50 %><TR bgcolor = červená><TD>&nbsp;</TD></TR></Tabulka></TD>
</TR>
<TR>
<TD width = 10 %>Zavřeno</TD>
<TD><tabulka cellpadding ="0" CellSpacing ="0" hranice = 0 width = 25 %><TR bgcolor = červená><TD>&nbsp;</TD></TR></Tabulka></TD>
</TR>
<TR>
<TD width = 10 %>Zastavil</TD>
<TD><tabulka cellpadding ="0" CellSpacing ="0" hranice = 0 width = 25 %><TR bgcolor = červená><TD>&nbsp;</TD></TR></Tabulka></TD>
</TR>
</Tabulka>
</TD>
</TR>
</Tabulka>
</tělo>
</HTML>

Použil jsem mrtvý jednoduchý přístup k vytváření plno nastavením barvu pozadí řádku "Red".

S sebou tady je to: Na konci, vše co děláme je vytváření HTML s řádky a sloupci.

Šablony XSLT:

Zkopíroval jsem XSLT, který generuje vodorovný pruhový graf. Je to docela dobře poznamenal, takže nebudu přidávat mnohem zde kromě těchto poznámek:

  • Začal jsem s výchozí šablonu stylů XSL, které aplikace SharePoint Designer mi dal, když jsem poprvé vytvořil DVWP.
  • Byl jsem schopen to kácet od SPD 657 řádky 166 čáry.
  • Nechtěl nepořádek kolem s parametry XML souboru (který je oddělen od XSL a budete vědět, co mám na mysli, když jdete k úpravě DVWP, sama o sobě; Existují dva soubory, které lze upravit). Avšak, za účelem zjednodušení it, Téměř všechny z nich odebírat XSL. To znamená, že pokud chcete využít těchto parametrů, Potřebujete jen přidat jejich definice proměnných do XSL. To bude snadné, protože budete mít původní definice proměnných XSL v projektu aplikace visual studio.
  • Měl bys být schopen kopírovat a vložit přímo do projektu aplikace visual studio. Pak, mé volání a vložte svůj vlastní volání "ShowBar".
  • Procházení dolů funguje vytvořením <href> Nějak tak: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Tato technika může být hodnoty v jiných kontextech. Zpočátku, Myslel jsem, že budu muset odpovídat složitější formátu: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, ale v mém prostředí, které není nutné. V seznamu adresa URL je předána k nám službou SharePoint, takže to je docela snadné zobecnit.

Tady to je:

<XSL:Šablona stylů verze="1.0" vyloučit výsledek předpony="r z o s ddwrt dt msxsl" 
xmlns.:msxsl="Urna:schémata microsoft-com:XSLT" xmlns.:XSL="http://www.w3.org/ 1999 / / transformace XSL"
xmlns.:SharePoint="Microsoft.SharePoint.WebControls" xmlns.:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns.:prostředí ASP="http://schemas.microsoft.com/ASPNET/20" xmlns.:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns.:o="Urna:schémata microsoft-com:kancelář" xmlns.:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882"
xmlns.:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns.:RS="Urna:schémata microsoft-com:sada řádků" xmlns.:z="#RowsetSchema"
xmlns.:ddwrt2="Urna:aplikace FrontPage:vnitřní"
> <XSL:výstup Metoda="HTML" odsazení="Ne" /> <XSL:desetinný formát NaN="" /> <XSL:parametr Jméno="ListUrlDir"></XSL:parametr> <!-- Potřebuji to pro podporu drill-down. --> <XSL:Šablona shoda="/" xmlns.:SharePoint="Microsoft.SharePoint.WebControls"
xmlns.:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns.:prostředí ASP="http://schemas.microsoft.com/ASPNET/20"
> <XSL:Proměnná Jméno="dvt_StyleName">Tabulka</XSL:Proměnná> <XSL:Proměnná Jméno="Řádky" vybrat="/dsQueryResponse/řádky/řádek" /> <XSL:Proměnná Jméno="dvt_RowCount" vybrat="hrabě($Řádky)" /> <XSL:Proměnná Jméno="IsEmpty" vybrat="$dvt_RowCount = 0" /> <XSL:Proměnná Jméno="dvt_IsEmpty" vybrat="$dvt_RowCount = 0" /> <XSL:zvolit> <XSL:Kdy Testovat="$dvt_IsEmpty"> Neexistují žádná data ke grafu!<BR/> </XSL:Kdy> <XSL:jinak> <!-- Začíná zde zajímavé věci. Musíme definovat dvojice proměnných pro každý řádek v grafu: Celkový počet položek a procento z celku.. --> <XSL:Proměnná Jméno="totalProposed" vybrat="hrabě(/dsQueryResponse/řádky/řádek[normalizovat prostor(@Status) =, "Navrhl"])" /> <XSL:Proměnná Jméno="percentProposed" vybrat="$totalProposed div $dvt_RowCount" /> <XSL:Proměnná Jméno="totalInProcess" vybrat="hrabě(/dsQueryResponse/řádky/řádek[normalizovat prostor(@Status) = "V procesu"])" /> <XSL:Proměnná Jméno="percentInProcess" vybrat="$totalInProcess div $dvt_RowCount" /> <XSL:Proměnná Jméno="totalStalled" vybrat="hrabě(/dsQueryResponse/řádky/řádek[normalizovat prostor(@Status) =, "Zastavil"])" /> <XSL:Proměnná Jméno="percentStalled" vybrat="$totalStalled div $dvt_RowCount" /> <!-- Definujeme naši HTML tabulka zde. Já si půjčuji od některých standardních stylů SharePoint zde aby byl v souladu. Myslím, že to bude ctít stejně jako téma přepíše změny globálního css souboru. --> <Tabulka Šířka="100%" CellSpacing="0" odsazení obsahu buněk="2" styl="pravého ohraničení: 1 pevné #C0C0C0; dolní ohraničení: 1 pevné #C0C0C0; styl ohraničení vlevo: pevné; Šířka ohraničení vlevo: 1; styl ohraničení nahoře: pevné; Šířka ohraničení nahoře: 1;"> <TR> <TD zarovnání="centrum"> <Tabulka hranice="1" Šířka="100%"> <!-- Pro každý status, který chceme graf, nazýváme "ShowBar" Šablona. Jsme se projít: 1. Popis pro řádek. To je transformován do hypertextový odkaz. 2. Procento (Proměnná shora). 3. Skutečný název pole kódu z nadřízeném seznamu. To není třeba odpovídat zobrazovanému popisku. 4. Hodnota pole pro #3. 5. Celkový počet položek tohoto stavu kódu (není celkový součet všech stavových kódů). To vydává <TR></TR> a linka vodorovný pruhový graf. Nazýváme tuto šablonu pro každý kód stavu, který chceme zobrazit. --> <XSL:volání šablona Jméno="ShowBar"> <XSL:s parametr Jméno="BarDisplayLabel" vybrat=""Navrhl""/> <XSL:s parametr Jméno="BarPercent" vybrat="$percentProposed"/> <XSL:s parametr Jméno="QueryFilterFieldName" vybrat=""Status""/> <XSL:s parametr Jméno="QueryFilterFieldValue" vybrat=""Navrhl""/> <XSL:s parametr Jméno="TotalItems" vybrat="$totalProposed"></XSL:s parametr> </XSL:volání šablona> <XSL:volání šablona Jméno="ShowBar"> <XSL:s parametr Jméno="BarDisplayLabel" vybrat=""Zastavil""/> <XSL:s parametr Jméno="BarPercent" vybrat="$percentStalled"/> <XSL:s parametr Jméno="QueryFilterFieldName" vybrat=""Status""/> <XSL:s parametr Jméno="QueryFilterFieldValue" vybrat=""Zastavil""/> <XSL:s parametr Jméno="TotalItems" vybrat="$totalStalled"></XSL:s parametr> </XSL:volání šablona> <XSL:volání šablona Jméno="ShowBar"> <XSL:s parametr Jméno="BarDisplayLabel" vybrat=""V procesu""/> <XSL:s parametr Jméno="BarPercent" vybrat="$percentInProcess"/> <XSL:s parametr Jméno="QueryFilterFieldName" vybrat=""Status""/> <XSL:s parametr Jméno="QueryFilterFieldValue" vybrat=""V procesu""/> <XSL:s parametr Jméno="TotalItems" vybrat="$totalInProcess"></XSL:s parametr> </XSL:volání šablona> </Tabulka> </TD> </TR> </Tabulka> </XSL:jinak> </XSL:zvolit> </XSL:Šablona> <!-- Tato šablona funguje zobrazování jednotlivých řádků v pruhovém grafu. Budete pravděpodobně dělat většinu své vylepšování zde. --> <XSL:Šablona Jméno="ShowBar"> <XSL:parametr Jméno="BarDisplayLabel" /> <!-- Popis zobrazení --> <XSL:parametr Jméno="BarPercent"/> <!-- Procento z celku.. --> <XSL:parametr Jméno="QueryFilterFieldName"/> <!-- Umožňuje přejít na dotaz & filtr --> <XSL:parametr Jméno="QueryFilterFieldValue"/> <!-- Umožňuje přejít na dotaz & filtr --> <XSL:parametr Jméno="TotalItems" /> <!-- Celkový počet tohoto barlabel --> <TR> <!-- Pruhového sama. --> <TD Třída="MS-formbody" Šířka="30%"> <!-- Tato další sada příkazy vytvoří řetězec dotazu, který umožňuje nám k podrobnostem a filtrované zobrazení podkladových dat. Vyrábíme využívají tu pár věcí: 1. Můžeme předat FilterField1 a FilterValue1 do seznamu Filtrovat sloupec. 2. SharePoint je předání klíčový parametr k nám, ListUrlDir, který odkazuje na nadřízeném seznamu, proti němuž tento DVWP "běží". Není legrace XSL? --> <XSL:text zakázat výstup útěk="Ano"> <![CDATA[<href ="]]></XSL:text> <XSL:hodnota z vybrat="$ListUrlDir"/> <XSL:text zakázat výstup útěk="Ano"><![CDATA[?FilterField1 =]]></XSL:text> <XSL:hodnota z vybrat="$QueryFilterFieldName"/> <XSL:text zakázat výstup útěk="Ano"><![CDATA[&FilterValue1 =]]></XSL:text> <XSL:hodnota z vybrat="$QueryFilterFieldValue"/> <XSL:text zakázat výstup útěk="Ano"><![CDATA[">]]></XSL:text> <XSL:hodnota z vybrat="$BarDisplayLabel"/> <XSL:text zakázat výstup útěk="Ano"><![CDATA[</a>]]></XSL:text> <!-- Další část ukazuje nějaká čísla ve formátu: "(celkem / % z celku)" --> (<XSL:hodnota z vybrat="$TotalItems"/> / <!-- Tím se vytvoří pěkný procentuální označení pro nás. Dík, Microsoft! --> <XSL:volání šablona Jméno="PercentFormat"> <XSL:s parametr Jméno="procenta" vybrat="$BarPercent"/> </XSL:volání šablona>) </TD> <!-- Konečně, vyzařování <TD> Značka pro bar sama.--> <TD> <Tabulka odsazení obsahu buněk="0" CellSpacing="0" hranice="0" Šířka="{kolo($BarPercent * 100)+1}%"> <TR Barva pozadí="červená"> <XSL:text zakázat výstup útěk="Ano"><![CDATA[&nbsp;]]></XSL:text> </TR> </Tabulka> </TD> </TR> </XSL:Šablona> <!-- To je převzata přímo z některých XSL, našel jsem v šabloně aplikace MS. --> <XSL:Šablona Jméno="PercentFormat"> <XSL:parametr Jméno="procenta"/> <XSL:zvolit> <XSL:Kdy Testovat="formát čísla($procenta, '#,##0%;-#,##0%')= "NaN"">0%</XSL:Kdy> <XSL:jinak> <XSL:hodnota z vybrat="formát čísla($procenta, '#,##0%;-#,##0%')" /> </XSL:jinak> </XSL:zvolit> </XSL:Šablona> </XSL:Šablona stylů>

Výsledky:

XSL shora generuje graf:

obrázek

Přejít na podkladová data po kliknutí na kód stavu:

obrázek

Závěrečné myšlenky:

Může to být generalizovaná?

Miluji tento rozšířil koncept, Ale nelíbí se mi že budu muset jít a udělat to ručně kódování. Dal jsem trochu myslel na to, zda může být generalizovaná a já jsem optimistický, Ale já jsem trochu strach, že může existovat cihlovou zeď někde po cestě, která nenabízí žádné řešení. Pokud má někdo nějaké dobré nápady na tomto, Prosím Povšimněte si v komentářích nebo napište mi.

Vertikální grafy:

To je vodorovný pruhový graf. To je jistě možné vytvořit svislý graf. Jen je třeba změnit kód HTML. Začal bych stejně: Vytvořit HTML podoba svislý pruhový graf a pak zjistit, jak se dostat, že pomocí XSL. Pokud někdo má zájem v tom, Jsem mohl přesvědčit, aby to vyzkoušet a věnovat. Pokud již někdo udělal, prosím dejte mi vědět a já budu rád odkaz na svůj blog 🙂

Myslím, že problém s vertikální graf je, že popisky grafu jsou obtížnější spravovat, ale rozhodně ne nemožné.

Pole název Gotcha:

Existují přinejmenším dvě věci dávat pozor s názvy polí.

První, Název pole s mezerou musí být uvozena v XSL. To bude pravděpodobně problém zde:

        <XSL:Proměnná Jméno="totalProposed" 
vybrat="hrabě(/dsQueryResponse/řádky/řádek[normalizovat prostor(@Status) =, "Navrhl"])" />

Pokud váš Status"" sloupec se jmenuje "stavový kód" pak je třeba se na něj odkazovat jako "Status_x0020_Code":

   <XSL:Proměnná Jméno="totalProposed" 
vybrat="hrabě(/dsQueryResponse/řádky/řádek[normalizovat prostor(@Status_x0020_Code) =, "Navrhl"])" />

Druhé, a já jsem trochu neostrý, v tomto, ale musíte také být v pohotovosti pro změny názvu pole. Pokud zadáte název pole "kód stavu" a pak později, přejmenovat na "AFE Status", "vnitřní název" nic nemění. Vnitřní název stále bude stavový kód"" a musí na něj odkazovat jako "Status_x0020_Code". "Jiné zdroje" odkazy mohou pomoci diagnostikovat a opravit tento druh problému.

O této barvy:

Vybral jsem "červená" protože je to potěšující pro mě v tuto chvíli. To nebude velký problém Ukázat různé barvy tak, aby se víc než jen vizuální popis čísla, ale také poskytnout užitečný ukazatel KPI. Například, je-li procento "zastavil" Je AFE je > 10% pak Ukázat červený, jinak to Ukázat v černém. Použití <XSL:zvolit> k dosažení tohoto.

Další zdroje:

Šťastný transformace!

<Konec />

Přihlásit se na mém blogu!

Doplněk Technorati značky: , , , , , ,

17 myšlenky na „V SharePoint vytvořit pruhové grafy

  1. Chris B

    Na této stránce téměř dokončen úkol, který jsem hledal.

    Mám skupinu, která chce použít seznam SharePoint průzkumu vytvoření týdenní hlasování. Úlovek? Oni nechtějí vidět kód… Nebo změnit systém pokaždé, když pošlou do ankety (plánované pro týdenní aktualizace).

    Byl jsem schopen to připojit k seznamu průzkumu a vytvořit graf v prvním sloupci odpověď. Co nedokážu předpovědět, i když jsou hodnoty a názvy, které budou potřebovat posun vpřed. Aby se věci ještě horší mohou mít více či méně odpovědi, které jsou k dispozici každý týden.

    Budu hledat jinde jen v případě, Ale někdo našel způsob, jak vytvořit řádky a štítky založené mimo počet dostupných možností a dynamicky nastavení těchto spíše než těžké kódování očekávané hodnoty?

  2. Greg Laushine

    Díky Pavel. Velmi užitečné. Díky vaší práce, Byl jsem schopen přidat sloupec grafu bar na stávající DVWP (např.. pro úkoly) velmi snadno s jen pár řádků kódu.
    V aplikaci SharePoint Designer, Vložení zobrazení dat s názvem a % kompletní sloupce ze seznamu úkolů. Umístěte kurzor do jedné z buněk a klepněte pravým tlačítkem myši. Já vyberte Vložit sloupec vpravo. V zobrazení kódu, Našel jsem <TD> a nahrazuje <XSL:textový prvek uvnitř buňky s kódem:
    <tabulka cellpadding ="0" CellSpacing ="0" hranice ="0"
    Width = "{kolo(@PercentComplete * 100)+1}%">
    <TR style = "background-color:červená">
    <XSL:textu zakázat výstup unikající = "Ano"><![CDATA[&nbsp;]]></XSL:text>
    </TR>
    </Tabulka>

    Poznámka: změnil jsem kód barvy řádků z bgcolor = "red" Chcete-li styl = "background-color:červená"
    Rovněž, byl schopen vybrat jeden ze sloupců v seznamu (@PercentComplete) místo "$BarPercent"
    Greg

  3. Wolfgang
    Pavel, Díky za to! Vytvořil jsem přesnou kopii co jste udělal a funguje to téměř dokonalé. Tam byl jeden malý problém v řádku odstavec 2 kódu:
    <XSL:Šablona zápas = "/" xmlns.:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns.:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns.:ASP ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Poté, co jsem opravil, že to funguje jako kouzlo! To bude nyní přizpůsobit své vlastní seznam a postavení, ale jsem si jistý, že to nebude na pevný. (Bude účtovat výsledek)
    Ještě jednou díky
    ~ Wolle
  4. Beze jména
    otázka –
    Co když v mém grafu, Chtěl jsem proměnnou nejen počítat jeden status, ale počítat více jedniček?
    Tak, například co když mám —
    <XSL:název proměnné = "RequestsInitialized"
    Vyberte = "hrabě(/dsQueryResponse/řádky/řádek[normalizovat prostor(@Status)= 'NEDOKONČENÉ'])" />
    –To je, Chci to pro počítání výskytů "NV", ale také, aby tato proměnná počítat něco jiného, jako "Čeká na vyřízení".. Jak to dělám?
    Dík!
  5. Jirka městečku Šrírangam
    Ahoj Paul,
    IAM opravdu, to je opravdu velké úsilí, které jste. Můžete prosím vysvětlit, kde bych post tento kód. Vytvořil jsem prjoect s čtyři nové soubory. Pak můžete vysvětlit podrobněji co mám dělat.
    Děkuju
    Jirka
  6. Andrew Carrington
    Ahoj, Snažím se to mírně upravit, aby se zobrazí graf úkoly v seznamu úkolů proti uživatelské informace. Používá sloupec s názvem @AssignedTo který je sloupec přítomnost uživatele. To zobrazení tavené HTML, ale nemůže dostat k výpočtu a zobrazení hodnoty.
    Nějaké nápady?
    Dík
    Andy
  7. Napsal Patrik Luca:
    Ahoj Paul,
    velké post!
    Otázka:
    Chtěl bych filtrovat podle dvou polí ve stejné době: jak toho lze dosáhnout?
    Například, jedna z proměnných se nazývá totalStalled a filtry na @Status.
    Chtěl bych filtrování ve stejné době ke snížení mé počet vrácených záznamů na jiném poli.
    Už jsem našel jak udělat 'Nebo', ale donnot se podařilo najít ' a’
    "Nebo’ lze dosáhnout podobného:
    <XSL:název proměnné = "totalStalled" Vyberte = "hrabě(/dsQueryResponse/řádky/řádek[normalizovat prostor(@Status) =, "Zastavil"] | /dsQueryResponse/řádky/řádek[normalizovat prostor(@ExtraFilterField) = "hodnota"])" />
  8. Frank

    Mám ‚Používání panelů v SharePoint’ otázka. Jsme vojenská nemocnice pomocí standardních MOSS pro náš intranet a chtěli vybudovat dashboard pro naši Command Group vidět ‚v reálném čase’ Pokud je to možné. Jedním z hlavních bodů je prohlížení v reálném čase aktuální vytížení v zařízení a doslova dívat nahoru a dolů měnit (kliknout na tlačítko “aktualizovat”/F5).

    Předem děkuji,

Zanechte odpovědět na Napsal Patrik Luca: Zrušit odpověď

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *