Créer des graphiques à barres dans SharePoint

Vue d'ensemble:

(MISE À JOUR 12/04/07: Ajouter une autre ressource intéressante à la fin qui relie à un autre blog qui traite de cela via une partie très intéressante de web)

Ce blog décrit comment créer un graphique à barres dans SharePoint. Cela fonctionne dans les environnements fois WSS et MOSS, puisqu'il dépend seulement du composant WebPart Affichage de données.

L'approche globale est la suivante:

  1. Créer une liste ou bibliothèque de documents qui contient les données que vous voulez graphique.
  2. Place de la bibliothèque de documents associés / personnalisé la liste sur une page et de le convertir à un composant WebPart Affichage de données (DVWP).
  3. Modifier XSL de la DVWP pour générer le code HTML qui présente sous forme de graphique.

Scénario d'entreprise / Programme d'installation:

J'ai créé une liste personnalisée avec la colonne de titre standard et une colonne supplémentaire, « Status ». Ce modèles (de manière très simpliste) une « autorisation de dépense" scénario où le titre représente le projet et le statut d'une valeur de la liste des:

  • Proposé
  • Dans le processus
  • Au point mort

L'objectif est de produire un diagramme à barres horizontales interactive qui montre ces codes d'État.

J'ai rempli la liste et il ressemble à ceci:

image

Créer le composant WebPart Affichage de données:

Créer le DVWP en ajoutant la liste personnalisée à une page (page du site dans mon cas) et suivez les instructions ici (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

En plus de créer simplement le DVWP, Nous devons également définir la propriété de pagination pour afficher toutes les lignes disponibles. Pour moi, Cela ressemble à quelque chose comme ça:

image

À ce point, J'ai toujours de fermer SPD et le navigateur. J'ai ensuite ré-ouvrir la page en utilisant le navigateur. Cela évite de déblayage accidentellement jusqu'à la mise en page web part sur la page.

Modifier la transformation XSLT:

Il est maintenant temps de modifier la transformation XSLT.

J'ai toujours utiliser visual studio pour cela. (Voir ici pour une remarque importante sur intellisense qui vous aidera beaucoup).

J'ai créer un projet vide ajouter quatre nouveaux fichiers (remplaçant les mots "Original" et "New" le cas échéant):

  • Original.XSLT
  • New.XSLT
  • Original Params.xml
  • Nouveau Params.xml

Dans mon cas, Il ressemble à ceci:

image

Modifier le composant WebPart, puis copiez les params et XSL à l'Original"" version dans Visual Studio.

L'objectif ici est de provoquer le XSL transformer les résultats que nous revenir de la requête DVWP dans HTML qui est restitué sous un graphe.

À cette fin, Il est utile d'examiner tout d'abord ce que le code HTML devrait ressembler avant que nous ayons confondus par la folie qui est connue comme « XSL ». (Pour être clair, Ceci est simplement un exemple; ne pas taper ou copier/coller dans visual studio. Je fournis un coup complet, point de départ pour que plus tard dans l'écriture). Le graphique suivant est rendu selon le code HTML qui suit immédiatement:

Bar échantillon graphique

HTML correspondant:

<html>
<corps>
<Centre>
<table width = 80 %>
<TR><TD><Centre>Graphique à barres horizontales</TD></TR>
<TR>
<TD align = « center »>
<bordure de table = "1" largeur = 80 %>
<TR>
<TD largeur = 10 %>Ouvert</TD>
<TD><table cellpadding ="0" CellSpacing ="0" border = 0 width = 50 %><TR bgcolor = rouge><TD>&nbsp;</TD></TR></table></TD>
</TR>
<TR>
<TD largeur = 10 %>Fermé</TD>
<TD><table cellpadding ="0" CellSpacing ="0" border = 0 width = 25 %><TR bgcolor = rouge><TD>&nbsp;</TD></TR></table></TD>
</TR>
<TR>
<TD largeur = 10 %>Au point mort</TD>
<TD><table cellpadding ="0" CellSpacing ="0" border = 0 width = 25 %><TR bgcolor = rouge><TD>&nbsp;</TD></TR></table></TD>
</TR>
</table>
</TD>
</TR>
</table>
</corps>
</html>

J'ai utilisé une approche simple pour créer mes barres en définissant la couleur d'arrière-plan d'une ligne « rouge ».

La vente à l'emporter ici est la suivante: En fin de compte, tout ce que nous faisons est création HTML contenant des lignes et des colonnes.

Modèle XSLT:

J'ai copié le XSLT qui génère un graphique à barres horizontal. Il est assez bien donc je n'ajoutera beaucoup ici à l'exception de ces notes a commenté:

  • J'ai commencé avec la valeur par défaut XSL que SharePoint Designer m'a donné quand j'ai d'abord créé le DVWP.
  • J'ai été capable d'abattre du SPD 657 lignes à 166 lignes.
  • Je na pas perdre son temps avec le fichier de paramètres XML (qui est séparé de la XSL et vous saurez ce que je veux dire, quand vous allez à modifier le DVWP lui-même; Il y a deux fichiers, que vous pouvez modifier). Cependant, afin de simplifier, La quasi-totalité d'entre eux a fait retirer de XSL. Cela signifie que si vous voulez faire usage de ces paramètres, vous avez juste besoin d'ajouter leurs définitions variables vers le XSL. Qui ne sera pas facile puisque vous aurez les définitions originales de variable XSL dans votre projet visual studio.
  • Vous devriez être en mesure de copier et coller ce directement dans votre projet visual studio. Puis, enlever mes appels et insérer vos propres appels à « ShowBar ».
  • Le zoom fonctionne en créant un <a href> Comme ça: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Cette technique peut être utile dans d'autres contextes. Dans un premier temps, J'ai pensé que j'aurais besoin pour se conformer à un format plus complexe: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, mais dans mon environnement qui n'est pas nécessaire. URL de la liste est passée à nous par SharePoint, donc c'est assez facile de généraliser.

C'est ici:

<XSL:feuille de style Version="1.0" exclure-résultat-préfixes="RS z o s ddwrt dt msxsl" 
xmlns:msxsl="urn:schemas-microsoft-com:XSLT" xmlns:XSL="http://www.w3.org/ 1999/transformation/XSL"
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:schemas-microsoft-com:Bureau" xmlns:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882"
xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="urn:schemas-microsoft-com:ensemble de lignes" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="urn:FrontPage:interne"
> <XSL:sortie méthode="html" tiret="ne" /> <XSL:format décimal NaN="" /> <XSL:Param nom="ListUrlDir"></XSL:Param> <!-- J'ai besoin de ça pour soutenir une exploration. --> <XSL:modèle match de football="/" 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 nom="dvt_StyleName">Table</XSL:variable> <XSL:variable nom="Lignes" Sélectionnez="/dsQueryResponse/lignes/en rangée" /> <XSL:variable nom="dvt_RowCount" Sélectionnez="comte($Lignes)" /> <XSL:variable nom="IsEmpty" Sélectionnez="$dvt_RowCount = 0" /> <XSL:variable nom="dvt_IsEmpty" Sélectionnez="$dvt_RowCount = 0" /> <XSL:choisir> <XSL:Lorsque test="$dvt_IsEmpty"> Il n'y a pas de données au graphique!<br/> </XSL:Lorsque> <XSL:autrement> <!-- Les trucs intéressants commence ici. Nous devons définir une paire de variables pour chaque ligne dans le graphique: nombre total d'éléments et pourcentage du total. --> <XSL:variable nom="totalProposed" Sélectionnez="comte(/dsQueryResponse/lignes/en rangée[Normalize-space(@Status) = « Proposée »])" /> <XSL:variable nom="percentProposed" Sélectionnez="$totalProposed div $dvt_RowCount" /> <XSL:variable nom="totalInProcess" Sélectionnez="comte(/dsQueryResponse/lignes/en rangée[Normalize-space(@Status) = "Dans le processus"])" /> <XSL:variable nom="percentInProcess" Sélectionnez="$totalInProcess div $dvt_RowCount" /> <XSL:variable nom="totalStalled" Sélectionnez="comte(/dsQueryResponse/lignes/en rangée[Normalize-space(@Status) = « Calé »])" /> <XSL:variable nom="percentStalled" Sélectionnez="$totalStalled div $dvt_RowCount" /> <!-- Nous définissons notre table HTML ici. Je suis empruntant certains styles SharePoint standards ici pour la rendre cohérente. Je pense qu'il honorera les modifications dans le fichier css global ainsi que le thème substitue. --> <table Largeur="100%" CellSpacing="0" CellPadding="2" style="border-right: 1 #C0C0C0 solides; border-bottom: 1 #C0C0C0 solides; border-left-style: solide; border-left-width: 1; border-top-style: solide; border-top-width: 1;"> <TR> <TD aligner="Centre"> <table frontière="1" Largeur="100%"> <!-- Pour chaque situation que nous voulons graphique, Nous appelons le « ShowBar" modèle. Nous passons il: 1. Une étiquette pour la ligne. C'est transformé en un lien hypertexte. 2. Le pour cent (variable d'en haut). 3. Le véritable nom du champ du code de la liste sous-jacente. Cela ne doit pas nécessaire correspondre à l'étiquette d'affichage. 4. Valeur de champ correspondant pour #3. 5. Total des Articles de ce code d'État (pas le total de tous les codes d'État). Il émet une <TR></TR> et la ligne du diagramme à barres horizontales. Nous appelons ce modèle pour chaque code d'État que nous voulez afficher. --> <XSL:appel-modèle nom="ShowBar"> <XSL:avec-param nom="BarDisplayLabel" Sélectionnez="« Proposée »"/> <XSL:avec-param nom="BarPercent" Sélectionnez="$percentProposed"/> <XSL:avec-param nom="QueryFilterFieldName" Sélectionnez="« Statut »"/> <XSL:avec-param nom="QueryFilterFieldValue" Sélectionnez="« Proposée »"/> <XSL:avec-param nom="TotalItems" Sélectionnez="$totalProposed"></XSL:avec-param> </XSL:appel-modèle> <XSL:appel-modèle nom="ShowBar"> <XSL:avec-param nom="BarDisplayLabel" Sélectionnez="« Au point mort »"/> <XSL:avec-param nom="BarPercent" Sélectionnez="$percentStalled"/> <XSL:avec-param nom="QueryFilterFieldName" Sélectionnez="« Statut »"/> <XSL:avec-param nom="QueryFilterFieldValue" Sélectionnez="« Au point mort »"/> <XSL:avec-param nom="TotalItems" Sélectionnez="$totalStalled"></XSL:avec-param> </XSL:appel-modèle> <XSL:appel-modèle nom="ShowBar"> <XSL:avec-param nom="BarDisplayLabel" Sélectionnez=""Dans le processus""/> <XSL:avec-param nom="BarPercent" Sélectionnez="$percentInProcess"/> <XSL:avec-param nom="QueryFilterFieldName" Sélectionnez="« Statut »"/> <XSL:avec-param nom="QueryFilterFieldValue" Sélectionnez=""Dans le processus""/> <XSL:avec-param nom="TotalItems" Sélectionnez="$totalInProcess"></XSL:avec-param> </XSL:appel-modèle> </table> </TD> </TR> </table> </XSL:autrement> </XSL:choisir> </XSL:modèle> <!-- Ce modèle effectue le travail d'affichage des lignes individuelles dans le graphique à barres. Vous ferez probablement la plupart de vos peaufinage ici. --> <XSL:modèle nom="ShowBar"> <XSL:Param nom="BarDisplayLabel" /> <!-- étiquette pour montrer --> <XSL:Param nom="BarPercent"/> <!-- Pourcentage du total. --> <XSL:Param nom="QueryFilterFieldName"/> <!-- Utilisé pour accéder à la requête & filtre --> <XSL:Param nom="QueryFilterFieldValue"/> <!-- Utilisé pour accéder à la requête & filtre --> <XSL:Param nom="TotalItems" /> <!-- nombre total d'appels cette barlabel --> <TR> <!-- La barre de l'étiquette elle-même. --> <TD classe="MS-formbody" Largeur="30%"> <!-- Cette prochaine série de déclarations génère une chaîne de requête qui nous permet d'explorer une vue filtrée des données sous-jacentes. Nous faisons usage de quelques petites choses ici: 1. Nous pouvons passer FilterField1 et FilterValue1 à une liste pour filtrer sur une colonne. 2. SharePoint est en passant un paramètre clé pour nous, ListUrlDir qui pointe vers la liste sous-jacente contre laquelle cette DVWP est « running ». N'est pas amusant XSL? --> <XSL:texte disable-output-escaping="Oui"> <![CDATA[<a href ="]]></XSL:texte> <XSL:de la valeur Sélectionnez="$ListUrlDir"/> <XSL:texte disable-output-escaping="Oui"><![CDATA[?FilterField1 =]]></XSL:texte> <XSL:de la valeur Sélectionnez="$QueryFilterFieldName"/> <XSL:texte disable-output-escaping="Oui"><![CDATA[&FilterValue1 =]]></XSL:texte> <XSL:de la valeur Sélectionnez="$QueryFilterFieldValue"/> <XSL:texte disable-output-escaping="Oui"><![CDATA[">]]></XSL:texte> <XSL:de la valeur Sélectionnez="$BarDisplayLabel"/> <XSL:texte disable-output-escaping="Oui"><![CDATA[</un>]]></XSL:texte> <!-- Le bit suivant montre quelques chiffres au format: "(total / % du total)" --> (<XSL:de la valeur Sélectionnez="$TotalItems"/> / <!-- Cela crée une étiquette de pourcentage sympa pour nous. Merci, Microsoft! --> <XSL:appel-modèle nom="PercentFormat"> <XSL:avec-param nom="pour cent" Sélectionnez="$BarPercent"/> </XSL:appel-modèle>) </TD> <!-- Enfin, émettre un <TD> balise pour la barre elle-même.--> <TD> <table CellPadding="0" CellSpacing="0" frontière="0" Largeur="{tour($BarPercent * 100)+1}%"> <TR bgcolor="rouge"> <XSL:texte disable-output-escaping="Oui"><![CDATA[&nbsp;]]></XSL:texte> </TR> </table> </TD> </TR> </XSL:modèle> <!-- Cela est pris directement à partir de quelques XSL, j'ai trouvé dans un modèle MS. --> <XSL:modèle nom="PercentFormat"> <XSL:Param nom="pour cent"/> <XSL:choisir> <XSL:Lorsque test="format-nombre($pour cent, '#,##0%;-#,##0%')= « NaN »">0%</XSL:Lorsque> <XSL:autrement> <XSL:de la valeur Sélectionnez="format-nombre($pour cent, '#,##0%;-#,##0%')" /> </XSL:autrement> </XSL:choisir> </XSL:modèle> </XSL:feuille de style>

Les résultats:

Le XSL ci-dessus génère ce graphique:

image

Explorer les données sous-jacentes en cliquant sur le code d'État:

image

Pensées finales:

Ceci peut être généralisé?

J'adore ce concept graphique, mais je déteste le fait que j'ai d'aller faire autant-codage à la main. J'ai donné un peu de réflexion pour savoir si elle peut être généralisée et je suis optimiste, mais je suis aussi un peu peur qu'il peut y avoir un mur de briques quelque part le long de la voie qui n'offre aucune solution de contournement. Si quelqu'un a quelques bonnes idées sur ce, Veuillez prendre note dans les commentaires ou Ecrivez-moi.

Graphes verticales:

Il s'agit d'un diagramme à barres horizontales. Il est certainement possible créer un graphique vertical. Nous avons juste besoin de modifier le code HTML. Je voudrais commencer de la même manière: Créer une représentation HTML d'un graphique à barres vertical et puis trouver un moyen d'obtenir que la via XSL. Si quelqu'un est intéressé par ce, Je pourrais être persuadé de l'essayer et travailler sur the kinks. Si quelqu'un a déjà fait, s'il vous plaît laissez-moi savoir et je vais créer un lien avec plaisir sur votre blog 🙂

Je pense que le défi avec un graphique vertical est que les étiquettes du graphique sont plus difficiles à gérer, mais certainement pas impossible.

Du champ nom Gotcha:

Il y a au moins deux choses à regarder dehors pour vos noms de domaine.

Première, un nom de domaine avec un espace doit être échappé dans le XSL. Ce sera probablement une question ici:

        <XSL:variable nom="totalProposed" 
Sélectionnez="comte(/dsQueryResponse/lignes/en rangée[Normalize-space(@Status) = « Proposée »])" />

Si votre statut"" colonne est en fait nommé "Code d'État" ensuite vous devez le référencer comme « Status_x0020_Code »:

   <XSL:variable nom="totalProposed" 
Sélectionnez="comte(/dsQueryResponse/lignes/en rangée[Normalize-space(@Status_x0020_Code) = « Proposée »])" />

Seconde, et je suis un peu floue sur ce, mais il faut aussi être sur le qui-vive pour les changements de nom de domaine. Si vous nommez votre champ "Code d'État" et puis plus tard sur, Renommez-le en « AFE Status », le nom"interne" ne change pas. Le nom interne sera toujours "Code d'État" et doit être référencé comme « Status_x0020_Code ». Les « autres ressources" liens peuvent aider à diagnostiquer et corriger ce genre de problème.

Sur cette couleur:

J'ai choisi "rouge" parce que c'est agréable à moi en ce moment. Il ne serait pas une grosse affaire pour montrer les différentes couleurs afin de fournir plus qu'une description visuelle d'un certain nombre, mais aussi fournir un indicateur de performance clé utile. Par exemple, Si le pourcentage de "calé" L'AFE est > 10% alors montrez-le rouge, dans le cas contraire le montrer en noir. Utilisation <XSL:choisir> pour y parvenir.

Autres ressources:

Transformer heureux!

<fin />

S'abonner à mon blog!

17 réflexions sur "Créer des graphiques à barres dans SharePoint

  1. Chris B

    Cette page a presque terminé la tâche que je cherchais.

    J'ai un groupe qui veut utiliser la liste de sondage de SharePoint pour créer un sondage hebdomadaire. La capture? Ils ne veulent pas voir le code… Ou changer le système chaque fois qu'ils envoient le sondage (prévu pour une mise à jour hebdomadaire).

    J'ai pu relier cela à la liste de sondage et de créer le graphique sur la première colonne de réponse. Ce que je ne peux pas prédire si sont les valeurs et les étiquettes qu'ils doivent aller de l'avant. Pour rendre les choses pire ils peuvent avoir plus ou moins de réponses disponibles chaque semaine.

    Je vais regarder ailleurs au cas où, mais si quelqu'un a trouvé un moyen pour créer les lignes et les étiquettes basés sur le nombre d'options disponibles et définir dynamiquement plutôt que les valeurs attendues de codage dur?

    Réponse
  2. Greg Laushine

    Merci Paul. Très utile. Merci pour votre travail, J'ai été en mesure d'ajouter une colonne de barre graphe d'un DVWP existant (e.g. pour les tâches) très facilement avec seulement quelques lignes de votre code.
    Dans SharePoint Designer, J'ai inséré une vue de données avec le titre et % toutes les colonnes d'une liste de tâches. J'ai mis le curseur dans une des cellules et faites un clic droit. J'ai sélectionnez Insérer une colonne à droite. En mode code, J'ai trouvé le <TD> et remplacé le <XSL:élément de texte à l'intérieur de la cellule avec votre code:
    <table cellpadding ="0" CellSpacing ="0" frontière ="0"
    largeur = "{tour(@PercentComplete * 100)+1}%">
    <style TR = "background-color:rouge">
    <XSL:texte disable-output-escaping = « yes »><![CDATA[&nbsp;]]></XSL:texte>
    </TR>
    </table>

    Remarque, j'ai changé le code de couleur des lignes de bgcolor = "rouge" style = "background-color:rouge"
    Aussi, a été en mesure de sélectionner une des colonnes dans ma liste (@PercentComplete) à la place de "$BarPercent"
    Greg

    Réponse
  3. Wolfgang
    Paul, Merci pour ce! J'ai créé une copie exacte de ce que vous avez fait et ça marche presque parfait. Il y avait un petit problème en ligne le 2e paragraphe de votre code:
    <XSL:correspondance de modèle = "/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Après que j'ai corrigé qu'il fonctionne comme charme! J'ai maintenant adaptera ceci à ma propre liste et statut mais je ne sais pas qu'il ne sera pas difficile à. (Je vais poster le résultat)
    Merci encore une fois
    ~ Wolle
    Réponse
  4. Pas de nom
    question –
    Que faire si mon graphe, Je voulais une variable pour non seulement compte un statut mais compte plusieurs de ceux?
    Si, par exemple, que se passe-t-il si j'ai eu —
    <XSL:nom de la variable = "RequestsInitialized"
    Sélectionnez = "count(/dsQueryResponse/lignes/en rangée[Normalize-space(@Status)= « TEC »])" />
    –La chose est, Je veux qu'il comptabilise les instances de « Travaux en cours », mais je veux aussi cette variable de compter quelque chose comme « En attente d'examen ».. Comment puis-je faire cela?
    Merci!
    Réponse
  5. Murty Srirangam
    Bonjour Paul,
    IAM vraiment, c'est vraiment un grand effort de vous. Pouvez-vous s'il vous plaît expliquer où je poste ce code. J'ai créé un prjoect avec quatre nouveaux fichiers. Alors pouvez-vous expliquer plus en détail ce que dois je faire.
    Merci
    Murty
    Réponse
  6. Andrew Carrington
    Salut, Je suis en train de modifier cela légèrement afin qu'elle affiche un graphe des tâches dans une liste de tâches contre informations utilisateur. Il utilise une colonne appelée @AssignedTo qui est une colonne de présence de l'utilisateur. Je peux obtenir pour afficher le code HTML affiché mais ne peut pas l'obtenir pour calculer et afficher les valeurs.
    Toutes les idées?
    Merci
    Andy
    Réponse
  7. Patrik Luca a écrit:
    Bonjour Paul,
    grande poste!
    Une question:
    Je tiens à filtrer sur deux champs en même temps: Comment cela peut-il être atteint?
    Par exemple, une de vos variables s'appelle totalStalled et il filtre sur @Status.
    Je tiens à filtrer en même temps de réduire mon nombre d'enregistrements retournés sur un autre champ.
    Je l'ai déjà trouvé comment faire un « OR », mais je donnot réussi à trouver le « ET’
    Un OR’ peut être réalisé comme ceci:
    <XSL:nom de la variable = "totalStalled" Sélectionnez = "count(/dsQueryResponse/lignes/en rangée[Normalize-space(@Status) = « Bloqués »] | /dsQueryResponse/lignes/en rangée[Normalize-space(@ExtraFilterField) = « Valeur »])" />
    Réponse
  8. Robin Meuré

    Bonjour Paul!

    Très beau travail! J'ai aussi eu quelque chose comme ça dans mon esprit pour afficher les listes de SharePoint de manière graphique 😉

    Réponse
  9. Frank

    J'ai « Utilisation dans SharePoint Dashboards’ question. Nous sommes un hôpital militaire en utilisant la norme MOSS pour notre intranet et souhaitons construire un tableau de bord pour notre groupe de commande pour voir « en temps réel’ Si possible. L'un des principaux points visualise la charge de travail actuelle en temps réel au sein de l'établissement et le regarder littéralement changer de haut en bas (devrez peut-être cliquer sur “actualisation”/F5).

    Je vous remercie à l'avance,

    Réponse

Laissez une réponse à Patrik Luca a écrit: Annuler la réponse

Votre adresse email ne sera pas publiée. les champs requis sont indiqués *