Creare grafici Bar in SharePoint

Panoramica:

(AGGIORNAMENTO 12/04/07: Aggiunta di un'altra risorsa interessante alla fine collegamento a un altro blog che affronta questo tramite una web part molto interessante)

Questo Blog viene descritto come creare un grafico a barre in SharePoint. Questo funziona in ambienti WSS e MOSS come dipende solo la web part visualizzazione dati.

L'approccio generale è come segue:

  1. Creare un elenco o raccolta di documenti che contiene i dati che si desidera grafico.
  2. Posto la libreria del documento associato / personalizzati elencati su una pagina e convertirlo in una web part visualizzazione dati (DVWP).
  3. Modificare XSL del DVWP per generare il codice HTML che mostra come un grafico.

Scenario business / Installazione:

Ho creato un elenco personalizzato con la colonna titolo standard e una colonna aggiuntiva, "Status". Questo modelli (molto semplicisticamente) un' "autorizzazione di spesa" scenario dove il titolo rappresenta il progetto e lo stato di un valore dall'elenco dei:

  • Proposto
  • Nel processo di
  • In fase di stallo

L'obiettivo è quello di produrre un grafico a barre orizzontale interattivo che mostra questi codici di stato.

Io ho compilato la lista e sembra che questo:

immagine

Creare Web Part visualizzazione dati:

Creare il DVWP aggiungendo l'elenco personalizzato in una pagina (pagina del sito nel mio caso) e seguire le istruzioni qui (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Oltre a creare semplicemente il DVWP, Abbiamo anche bisogno di impostare la proprietà di spostamento per visualizzare tutte le righe disponibili. Per me, Questo sembra qualcosa di simile:

immagine

A questo punto, Chiudo sempre SPD e il browser. Quindi riaprire la pagina utilizzando il browser. Questo consente di evitare accidentalmente rovinando il layout di parte web nella pagina.

Modificare il XSLT:

Ora è il momento di modificare il XSLT.

Io uso sempre visual studio per questo. (Vedere qui per una nota importante su intellisense che ti aiuterà molto).

Creare un progetto vuoto aggiungere quattro nuovi file (sostituire le parole "originale" e "New" se del caso):

  • Original.XSLT
  • New.XSLT
  • Params.xml originale
  • Params.xml nuovo

Nel mio caso, sembra che questo:

immagine

Modificare la parte web e copiare il params e XSL all'originale"" versione di Visual Studio.

Qui l'obiettivo è quello di causare il XSL trasformare i risultati che otteniamo indietro dalla query DVWP in HTML che esegue il rendering come un grafico.

A tal fine, Aiuta a in primo luogo considerare che cosa il codice HTML dovrebbe essere simile prima di noi rimaniamo confusi dalla follia che è conosciuta come "XSL". (Per essere chiari, di seguito è semplicemente un esempio; non digitare o copiare e incollare in visual studio. Fornisco un colpo completo punto di partenza per questo più tardi nel write-up). Il grafico di esempio seguente viene eseguito il rendering come HTML immediatamente dopo:

Esempio di grafico a barre

HTML corrispondente:

<html>
<corpo>
<centro>
<Table width = 80%>
<TR><TD><centro>Grafico a barre orizzontali</TD></TR>
<TR>
<TD align = "center">
<table border = "1" larghezza = 80%>
<TR>
<larghezza TD = 10%>Aperto</TD>
<TD><tabella cellpadding ="0" CellSpacing ="0" border = 0 width = 50%><TR bgcolor = colore rosso><TD>&nbsp;</TD></TR></tabella></TD>
</TR>
<TR>
<larghezza TD = 10%>Chiuso</TD>
<TD><tabella cellpadding ="0" CellSpacing ="0" border = 0 width = 25%><TR bgcolor = colore rosso><TD>&nbsp;</TD></TR></tabella></TD>
</TR>
<TR>
<larghezza TD = 10%>In fase di stallo</TD>
<TD><tabella cellpadding ="0" CellSpacing ="0" border = 0 width = 25%><TR bgcolor = colore rosso><TD>&nbsp;</TD></TR></tabella></TD>
</TR>
</tabella>
</TD>
</TR>
</tabella>
</corpo>
</html>

Ho usato un approccio morto semplice per creare il mio bar impostando il colore di sfondo di una riga su "red".

Qui il Take-Away è questo: Alla fine, tutto quello che stiamo facendo è la creazione di HTML con righe e colonne.

Modello XSLT:

Ho copiato il codice XSLT che genera un grafico a barre orizzontale. È abbastanza ben commentato così non aggiungerà molto qui tranne queste note:

  • Ho iniziato con il valore predefinito XSL che SharePoint Designer mi ha dato quando ho creato il DVWP.
  • Sono stato in grado di tagliare questo da SPD 657 linee di 166 linee.
  • Non pasticciare con il file XML dei parametri (quale è separato da XSL e saprete che cosa voglio dire quando si va a modificare il DVWP stesso; ci sono due file che è possibile modificare). Tuttavia, al fine di semplificare l'it, Ho fatto rimuovere quasi tutti da XSL. Questo significa che se si vuole fare uso di tali parametri, Hai solo bisogno di aggiungere loro le definizioni di variabili torna al XSL. Che sarà facile, poiché avrete le definizioni di variabili XSL originale nel progetto visual studio.
  • Si dovrebbe essere in grado di copiare e incollare questo direttamente nel progetto visual studio. Poi, rimuovere le mie chiamate e inserire le proprie chiamate a "ShowBar".
  • Il drill-down funziona creando un <href> In questo modo: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Questa tecnica può essere utile in altri contesti. In un primo momento, Ho pensato che avrei bisogno di conformarsi a un formato più complesso: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, ma nel mio ambiente che non è necessario. URL dell'elenco viene passato a noi da SharePoint quindi questo è abbastanza facile da generalizzare.

Qui è:

<xsl:StyleSheet Versione="1.0" escludere-risultato-prefissi="RS z o s ddwrt dt msxsl" 
xmlns:msxsl="urna: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="urna:schemas-microsoft-com:Ufficio" xmlns:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882"
xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="urna:schemas-microsoft-com:set di righe" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="urna:FrontPage:interno"
> <xsl:uscita Metodo.="html" trattino="No" /> <xsl:formato decimale NaN="" /> <xsl:param nome="ListUrlDir"></xsl:param> <!-- Ho bisogno di questo per sostenere un drill-down. --> <xsl:modello match="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20"
> <xsl:variabile nome="dvt_StyleName">Tabella</xsl:variabile> <xsl:variabile nome="Righe" selezionare="/Riga/righe/dsQueryResponse" /> <xsl:variabile nome="dvt_RowCount" selezionare="Conte($Righe)" /> <xsl:variabile nome="IsEmpty" selezionare="$dvt_RowCount = 0" /> <xsl:variabile nome="dvt_IsEmpty" selezionare="$dvt_RowCount = 0" /> <xsl:scegliere> <xsl:Quando test="$dvt_IsEmpty"> Non sono disponibili dati per il grafico!<br/> </xsl:Quando> <xsl:in caso contrario> <!-- La roba interessante inizia qui. Abbiamo bisogno di definire una coppia di variabili per ogni riga nel grafico: numero totale di elementi e per cento del totale. --> <xsl:variabile nome="totalProposed" selezionare="Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status) = 'Proposto'])" /> <xsl:variabile nome="percentProposed" selezionare="$totalProposed div $dvt_RowCount" /> <xsl:variabile nome="totalInProcess" selezionare="Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status) = 'Nel processo'])" /> <xsl:variabile nome="percentInProcess" selezionare="$totalInProcess div $dvt_RowCount" /> <xsl:variabile nome="totalStalled" selezionare="Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status) = 'Stallo'])" /> <xsl:variabile nome="percentStalled" selezionare="$totalStalled div $dvt_RowCount" /> <!-- Definiamo la nostra tabella HTML qui. Prendo in prestito da alcuni stili standard di SharePoint qui per renderlo coerente. Penso che onorerà modifiche al file css globale così come si esegue l'override di tema. --> <tabella Larghezza="100%" CellSpacing="0" cellpadding="2" stile="Border-destra: 1 #C0C0C0 solido; border-bottom: 1 #C0C0C0 solido; border-left-style: solido; border-left-width: 1; border-top-style: solido; border-top-width: 1;"> <TR> <TD allineare="centro"> <tabella confine="1" Larghezza="100%"> <!-- Per ogni stato che si desidera rappresentare, noi chiamiamo il "ShowBar" modello. Abbiamo passarlo: 1. Un'etichetta per la riga. Questo si trasforma in un collegamento ipertestuale. 2. Il per cento (variabile dall'alto). 3. Il nome di campo effettivo del codice dall'elenco sottostante. Questo non deve corrispondere l'etichetta di visualizzazione. 4. Valore del campo corrispondente per #3. 5. Totali articoli di questo codice di stato (non il totale di tutti i codici di stato). Emette un <TR></TR> e la linea del grafico a barre orizzontali. Noi chiamiamo questo modello per ogni codice di stato che si desidera visualizzare. --> <xsl:modello di chiamata nome="ShowBar"> <xsl:con param nome="BarDisplayLabel" selezionare="'Proposto'"/> <xsl:con param nome="BarPercent" selezionare="$percentProposed"/> <xsl:con param nome="QueryFilterFieldName" selezionare="'Status'"/> <xsl:con param nome="QueryFilterFieldValue" selezionare="'Proposto'"/> <xsl:con param nome="TotalItems" selezionare="$totalProposed"></xsl:con param> </xsl:modello di chiamata> <xsl:modello di chiamata nome="ShowBar"> <xsl:con param nome="BarDisplayLabel" selezionare="'Stallo'"/> <xsl:con param nome="BarPercent" selezionare="$percentStalled"/> <xsl:con param nome="QueryFilterFieldName" selezionare="'Status'"/> <xsl:con param nome="QueryFilterFieldValue" selezionare="'Stallo'"/> <xsl:con param nome="TotalItems" selezionare="$totalStalled"></xsl:con param> </xsl:modello di chiamata> <xsl:modello di chiamata nome="ShowBar"> <xsl:con param nome="BarDisplayLabel" selezionare="'Nel processo'"/> <xsl:con param nome="BarPercent" selezionare="$percentInProcess"/> <xsl:con param nome="QueryFilterFieldName" selezionare="'Status'"/> <xsl:con param nome="QueryFilterFieldValue" selezionare="'Nel processo'"/> <xsl:con param nome="TotalItems" selezionare="$totalInProcess"></xsl:con param> </xsl:modello di chiamata> </tabella> </TD> </TR> </tabella> </xsl:in caso contrario> </xsl:scegliere> </xsl:modello> <!-- Questo modello fa il lavoro di visualizzazione di singole linee in grafico a barre. Probabilmente farete la maggior parte del vostro ritocco qui. --> <xsl:modello nome="ShowBar"> <xsl:param nome="BarDisplayLabel" /> <!-- etichetta per mostrare --> <xsl:param nome="BarPercent"/> <!-- Per cento del totale. --> <xsl:param nome="QueryFilterFieldName"/> <!-- Utilizzato per passare alla query & filtro --> <xsl:param nome="QueryFilterFieldValue"/> <!-- Utilizzato per passare alla query & filtro --> <xsl:param nome="TotalItems" /> <!-- conteggio totale di questo barlabel --> <TR> <!-- La barra stessa etichetta. --> <TD classe="MS-formbody" Larghezza="30%"> <!-- Questo prossimo set di istruzioni genera una stringa di query che permette di drill-down in una visualizzazione filtrata dei dati sottostanti. Facciamo uso di un paio di cose qui: 1. Possiamo passare a un elenco per filtrare una colonna FilterField1 e FilterValue1. 2. SharePoint è passando un parametro chiave per noi, ListUrlDir che punta all'elenco sottostante su cui questo DVWP viene "eseguita". Non è divertente XSL? --> <xsl:Testo disable-output-escaping=""> <![CDATA[<href ="]]></xsl:Testo> <xsl:valore di selezionare="$ListUrlDir"/> <xsl:Testo disable-output-escaping=""><![CDATA[?FilterField1 =]]></xsl:Testo> <xsl:valore di selezionare="$QueryFilterFieldName"/> <xsl:Testo disable-output-escaping=""><![CDATA[&FilterValue1 =]]></xsl:Testo> <xsl:valore di selezionare="$QueryFilterFieldValue"/> <xsl:Testo disable-output-escaping=""><![CDATA[">]]></xsl:Testo> <xsl:valore di selezionare="$BarDisplayLabel"/> <xsl:Testo disable-output-escaping=""><![CDATA[</un>]]></xsl:Testo> <!-- Il bit successivo mostra alcuni numeri nel formato: "(totale / % del totale)" --> (<xsl:valore di selezionare="$TotalItems"/> / <!-- Questo crea una bella etichetta percentuale per noi. Grazie, Microsoft! --> <xsl:modello di chiamata nome="PercentFormat"> <xsl:con param nome="per cento" selezionare="$BarPercent"/> </xsl:modello di chiamata>) </TD> <!-- Infine, emettono un <TD> Tag per la barra stessa.--> <TD> <tabella cellpadding="0" CellSpacing="0" confine="0" Larghezza="{turno($BarPercent * 100)+1}%"> <TR bgcolor="rosso"> <xsl:Testo disable-output-escaping=""><![CDATA[&nbsp;]]></xsl:Testo> </TR> </tabella> </TD> </TR> </xsl:modello> <!-- Questo è preso direttamente da alcuni XSL che ho trovato in un modello di MS. --> <xsl:modello nome="PercentFormat"> <xsl:param nome="per cento"/> <xsl:scegliere> <xsl:Quando test="formato numero($per cento, '#,##0%;-#,##0%')= 'NaN'">0%</xsl:Quando> <xsl:in caso contrario> <xsl:valore di selezionare="formato numero($per cento, '#,##0%;-#,##0%')" /> </xsl:in caso contrario> </xsl:scegliere> </xsl:modello> </xsl:StyleSheet>

I risultati:

il XSL da sopra genera questo grafico:

immagine

Dettaglio dei dati sottostanti cliccando sul codice di stato:

immagine

Riflessioni conclusive:

Questo può essere generalizzato?

Mi piace questo concetto grafico, ma odio il fatto che devo andare e fare così tanto di mano-codifica. Ho dato un piccolo pensiero per se può essere generalizzato e sono ottimista, ma io sono anche un po' timoroso che potrebbe esserci un muro di mattoni da qualche parte lungo il percorso che non offre alcun lavoro intorno. Se qualcuno ha delle buone idee su questo, si prega di fare una nota nei commenti o email me.

Grafici verticali:

Si tratta di un grafico a barre orizzontale. È certamente possibile creare un grafico verticale. Abbiamo solo bisogno di modificare il codice HTML. Vorrei iniziare allo stesso modo: Creare una rappresentazione HTML di un grafico a barre verticale e poi capire come ottenere che tramite XSL. Se qualcuno è interessato a che, Io potrei essere convinto a provarlo e risolvere i nodi. Se qualcuno lo ha già fatto, per favore fatemelo sapere e sarò contento di link al tuo blog 🙂

Credo che la sfida con un grafico verticale è che le etichette del grafico sono più difficili da gestire, ma certamente non impossibile.

Campo nome Gotcha:

Ci sono almeno due cose da guardare fuori con i nomi di campo..

Primo, un nome di campo con uno spazio deve essere sottoposto a escape in XSL. Questo sarà probabilmente un problema qui:

        <xsl:variabile nome="totalProposed" 
selezionare="Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status) = 'Proposto'])" />

Se il tuo Status"" colonna è in realtà denominato "codice di stato" quindi è necessario fare riferimento ad esso come "Status_x0020_Code":

   <xsl:variabile nome="totalProposed" 
selezionare="Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status_x0020_Code) = 'Proposto'])" />

Secondo, e io sono un po ' sfocata su questo, ma devi anche essere in allerta per le modifiche di nome di campo. Se il nome il campo "codice di stato" e poi in seguito, rinominarlo in "AFE Status", il nome"interno" non cambia. Il nome interno sarà ancora "codice di stato" e deve essere fatto riferimento come "Status_x0020_Code". Le "altre risorse" link possono aiutare a diagnosticare e correggere questo tipo di problema.

Info su quel colore:

Ho scelto "rosso" perché è piacevole per me al momento. Non sarebbe un grosso problema a mostrare diversi colori in modo da fornire più appena una descrizione visiva di un numero, ma anche fornire un utile indicatore KPI. Per esempio, Se la percentuale di "stallo" AFE è > 10% poi Visualizza rosso, in caso contrario mostrarlo in nero. Uso <xsl:scegliere> per eseguire questa operazione.

Altre risorse:

Trasformando felice!

<fine />

Iscriviti al mio blog!

17 pensieri su "Creare grafici Bar in SharePoint

  1. Chris B

    Questa pagina ha quasi completato il compito che stavo cercando.

    Avere un gruppo che vuole utilizzare l'elenco SharePoint sondaggio per creare un sondaggio settimana. Le catture? Non vogliono vedere codice… O cambiare il sistema ogni volta che mandano il sondaggio (progettato per un aggiornamento settimanale).

    Sono stato in grado di collegare questo alla lista Survey e creare il grafico nella prima colonna di risposta. Quello che io non posso prevedere però sono i valori e le etichette che avranno bisogno di andare avanti. Per rendere le cose peggiori possono avere più o meno le risposte disponibili ogni settimana.

    Guarderò altrove solo nel caso in, ma qualcuno ha trovato un modo per creare le righe e le etichette in base al largo numero di opzioni disponibili e dinamicamente impostando questi piuttosto difficile codifica i valori attesi?

    Risposta
  2. Greg Laushine

    Grazie Paolo. Molto utile. Grazie per il vostro lavoro, Sono stato in grado di aggiungere una colonna di barra del grafico di un DVWP esistente (e. g. per le attività) molto facilmente con poche righe di codice.
    In SharePoint Designer, Ho inserito una visualizzazione dati con il titolo e % completare le colonne di un elenco di attività. Ho messo il cursore in una delle celle e fare clic destro. I selezionare inserire una colonna a destra. Nella vista codice, Ho trovato il <TD> e sostituito il <xsl:elemento di testo all'interno della cellula con il tuo codice:
    <tabella cellpadding ="0" CellSpacing ="0" confine ="0"
    width = "{turno(@PercentComplete * 100)+1}%">
    <stile TR = "background-color:rosso">
    <xsl:testo disable-output-escaping = "yes"><![CDATA[&nbsp;]]></xsl:Testo>
    </TR>
    </tabella>

    Nota che ho cambiato il codice di colore riga da bgcolor = "rosso" a style = "background-color:rosso"
    Anche, è stato in grado di selezionare una delle colonne nella mia lista (@PercentComplete) al posto di "$BarPercent"
    Greg

    Risposta
  3. Wolfgang
    Paul, Grazie per questo! Ho creato una copia esatta di quello che hai fatto e funziona quasi perfetto. C'era un piccolo problema nella riga del paragrafo 2 del codice:
    <xsl:corrispondenza di modello = /" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Dopo che ho corretto che funziona come un fascino! Ora si adatterà alla mia lista e lo stato, ma sono sicuro che non sarà difficile. (Pubblicheremo il risultato)
    Grazie ancora
    ~ Wolle
    Risposta
  4. Senza nome
    domanda –
    Cosa succede se il mio grafico, volevo una variabile che non solo contare uno stato, ma contare quelli più?
    Così, per esempio se ho avuto —
    <xsl:nome di variabile = "RequestsInitialized"
    selezionare = "Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status)= 'WIP'])" />
    –La cosa è, Voglio che contare le istanze di 'WIP', ma voglio anche questa variabile a contare qualcos'altro come 'Pending Review'.. come farebbe questo?
    Grazie!
    Risposta
  5. Murty Srirangam
    Ciao Paolo,
    IAM davvero questo è davvero un grande sforzo da parte dell'utente. Puoi spiegare dove vuoi pubblicare questo codice. Ho creato un prjoect con quattro nuovi file. Poi si può spiegare più in dettaglio cosa devo fare.
    Grazie
    Murty
    Risposta
  6. Andrew Carrington
    Ciao, Sto tentando di modificare questo leggermente affinché venga visualizzato un grafico dell'attività in un elenco di attività contro le informazioni utente. Esso utilizza una colonna denominata @AssignedTo che è una colonna di presenza di utente. Può farlo per visualizzare il codice HTML di rendering, ma non può farlo per calcolare e visualizzare i valori.
    Tutte le idee?
    Grazie
    Andy
    Risposta
  7. Patrik Luca ha scritto:
    Ciao Paolo,
    grande post!
    Una domanda:
    Vorrei filtrare su due campi contemporaneamente: come può essere raggiunto?
    Per esempio, una delle variabili è chiamata totalStalled e filtra su @Status.
    Vorrei al tempo stesso di ridurre il mio numero di record restituiti su un altro campo del filtro.
    Ho già trovato come fare un 'OR', ma io donnot riesce a trovare il ' AND’
    An ' o’ può essere realizzato come questo:
    <xsl:nome di variabile = "totalStalled" selezionare = "Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status) = 'Stallo'] | /Riga/righe/dsQueryResponse[normalizzare-spazio(@ExtraFilterField) = 'valore'])" />
    Risposta
  8. Robin Meuré

    Ciao Paolo!

    Bel lavoro! Ho anche avuto qualcosa di simile nella mia mente per visualizzare elenchi di SharePoint in modo grafico 😉

    Risposta
  9. Frank

    Ho un ‘Usare Dashboard in SharePoint’ domanda. Siamo un ospedale militare utilizzando standard MOSS per la nostra Intranet e vorrebbe costruire un cruscotto per il nostro gruppo di comando vedere ' tempo reale’ Se possibile. Uno dei punti principali è visualizzare il carico di lavoro corrente in tempo reale all'interno dell'impianto e guardarlo letteralmente cambiare su e giù (potrebbe essere necessario fare clic su “aggiornamento”/F5).

    Vi ringrazio in anticipo,

    Risposta

Lasciare una risposta

L'indirizzo email non verrà pubblicato. i campi richiesti sono contrassegnati *