Crear gráficos de barras en SharePoint

Visión general:

(ACTUALIZACIÓN 12/04/07: Agrega otro recurso interesante final de enlazar a otro blog que se ocupa de esto a través de una parte muy interesante de la web)

Esta entrada de blog describe cómo crear un gráfico de barras en SharePoint. Esto funciona en entornos WSS y MOSS como solo depende del elemento web vista de datos.

El enfoque general es la siguiente:

  1. Crear una lista o biblioteca de documentos que contiene los datos que desea gráfico.
  2. Colocar la biblioteca de documentos asociados / personalizada en una página de la lista y convertirlo en un elemento web de vista de datos (DVWP).
  3. Modificar XSL del DVWP para generar HTML que se muestra como un gráfico.

Escenario de negocio / El programa de instalación:

He creado una lista personalizada con la columna de título estándar y una columna adicional, "Estado". Estos modelos (muy simplista) una "autorización de gastos" escenario donde el título representa el proyecto y el estado de un valor de la lista de:

  • Propuesto
  • En proceso
  • Estancado

El objetivo es producir un gráfico de barras horizontal interactivo que muestra estos códigos de Estado.

He llenado la lista y este aspecto:

imagen

Crear elemento Web vista de datos:

Crear el DVWP agregando la lista personalizada para una página (página en mi caso) y siga las instrucciones aquí (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Además de simplemente crear el DVWP, También tenemos que establecer la propiedad de paginación para mostrar todas las filas disponibles. Para mí, Esto se ve algo como esto:

imagen

En este punto, Siempre cierro los SPD y el navegador. Luego volver a abrir la página usar el navegador. Esto evita que accidentalmente limpiando hasta la disposición de parte de la web en la página.

Modificar el XSLT:

Ahora es el momento de modificar el XSLT.

Siempre utilizo visual studio para esto. (Ver aquí para una nota importante acerca de intellisense que le ayudará mucho).

Crear un proyecto vacío agregar cuatro nuevos archivos (sustituir las palabras "Original" y "nuevo" según corresponda):

  • Original.XSLT
  • New.XSLT
  • Params.xml original
  • Params.xml nuevo

En mi caso, este aspecto:

imagen

Modificar el elemento web y copiar los parámetros y XSL al Original"" versión de Visual Studio.

El objetivo aquí es causar el XSL transformar los resultados que nos metemos atrás de la consulta DVWP en HTML que se representa como un gráfico.

Con este fin, ayuda a considerar primero lo que el HTML debería ser antes de que nos quedamos confundidos por la locura que se conoce como "XSL". (Que quede claro, el siguiente es sólo un ejemplo; no escribe o copia y pegar en visual studio. Proporcionar un golpe completo punto de partida para más adelante en la escritura). El siguiente gráfico de la muestra se procesa según el HTML inmediatamente después de:

Ejemplo de Gráfico de barras

HTML correspondiente:

<HTML>
<cuerpo>
<Centro>
<ancho de tabla = 80%>
<TR><TD><Centro>Gráfico de barras horizontales</TD></TR>
<TR>
<TD align = "center">
<frontera tabla = "1" ancho = 80%>
<TR>
<anchura TD = 10%>Abierto</TD>
<TD><tabla cellpadding ="0" cellspacing ="0" border = 0 width = 50%><TR bgcolor = rojo><TD>&nbsp;</TD></TR></mesa></TD>
</TR>
<TR>
<anchura TD = 10%>Cerrado</TD>
<TD><tabla cellpadding ="0" cellspacing ="0" border = 0 width = 25%><TR bgcolor = rojo><TD>&nbsp;</TD></TR></mesa></TD>
</TR>
<TR>
<anchura TD = 10%>Estancado</TD>
<TD><tabla cellpadding ="0" cellspacing ="0" border = 0 width = 25%><TR bgcolor = rojo><TD>&nbsp;</TD></TR></mesa></TD>
</TR>
</mesa>
</TD>
</TR>
</mesa>
</cuerpo>
</HTML>

Utilicé un enfoque muerto simple para crear mis barras estableciendo el color de fondo de una fila al "rojo".

Esto es el take-away: En el final, todo lo que estamos haciendo es crear HTML con filas y columnas.

Plantilla XSLT:

He copiado el XSLT que genera un gráfico de barras horizontal. Está bastante bien comentado así que no añado mucho aquí excepto estas notas:

  • Empecé con el valor por defecto XSL que SharePoint Designerme dio cuando he creado primero el DVWP.
  • He podido redujo desde del SPD 657 líneas 166 líneas de.
  • Yo no metan con el archivo XML de parámetros (que está separada del XSL y sabrá lo que quiero decir cuando vaya a modificar el DVWP sí; Hay dos archivos que se puede modificar). Sin embargo, a fin de simplificar la TI, Quitar casi todos ellos de la XSL. Esto significa que si usted quiere hacer uso de los parámetros, sólo tiene que añadir sus definiciones variable hacia el XSL. Eso será fácil ya que tendrás las definiciones variable originales de XSL en su proyecto de visual studio.
  • Usted debe ser capaz de copiar y pegar esto directamente en su proyecto de visual studio. A continuación, Quitar mis llamadas e insertar sus propias llamadas "ShowBar".
  • El detalle de obras mediante la creación de un <a href> Así: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Esta técnica puede ser útil en otros contextos. Al principio, Pensé que tendría que ajustarse a un formato más complejo: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, pero en mi entorno que no es necesario. URL de la lista se pasa a nosotros por SharePoint así que esto es muy fácil generalizar.

Aquí es:

<XSL:hoja de estilos Versión="1.0" excluir resultado de prefijos="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:Oficina" xmlns:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882"
xmlns:DT="UUID:C2F41010-65B3-11 d 1-A29F-00AA00C14882" xmlns:RS="urna:schemas-microsoft-com:conjunto de filas" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="urna:FrontPage:interna"
> <XSL:salida método="HTML" guión="No" /> <XSL:formato decimal NaN="" /> <XSL:param nombre="ListUrlDir"></XSL:param> <!-- Necesito esto para un desglose de la ayuda. --> <XSL:plantilla partido="/" 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 nombre="dvt_StyleName">Tabla</XSL:variable> <XSL:variable nombre="Filas" Seleccione="/dsQueryResponse/filas/fila" /> <XSL:variable nombre="dvt_RowCount" Seleccione="Conde($Filas)" /> <XSL:variable nombre="IsEmpty" Seleccione="$dvt_RowCount = 0" /> <XSL:variable nombre="dvt_IsEmpty" Seleccione="$dvt_RowCount = 0" /> <XSL:Elija> <XSL:Cuando prueba="$dvt_IsEmpty"> No hay datos al gráfico!<BR/> </XSL:Cuando> <XSL:de lo contrario> <!-- Lo interesante comienza aquí. Necesitamos definir un par de variables para cada fila en el gráfico: número total de elementos y por ciento del total. --> <XSL:variable nombre="totalProposed" Seleccione="Conde(/dsQueryResponse/filas/fila[espacio de normalizar(@Status) = 'Propuesto'])" /> <XSL:variable nombre="percentProposed" Seleccione="$totalProposed div $dvt_RowCount" /> <XSL:variable nombre="totalInProcess" Seleccione="Conde(/dsQueryResponse/filas/fila[espacio de normalizar(@Status) = 'En proceso'])" /> <XSL:variable nombre="percentInProcess" Seleccione="$totalInProcess div $dvt_RowCount" /> <XSL:variable nombre="totalStalled" Seleccione="Conde(/dsQueryResponse/filas/fila[espacio de normalizar(@Status) = 'Estancado'])" /> <XSL:variable nombre="percentStalled" Seleccione="$totalStalled div $dvt_RowCount" /> <!-- Definimos nuestra tabla HTML aquí. Yo estoy prestado de algunos estilos de SharePoint estándar aquí para que sea consistente. Creo que honrará a los cambios en el archivo css global así como tema reemplaza. --> <mesa Ancho="100%" cellspacing="0" cellpadding="2" estilo="frontera-derecho: 1 #C0C0C0 sólido; frontera inferior: 1 #C0C0C0 sólido; estilo de borde izquierdo: sólido; ancho del borde izquierdo: 1; border-top-style: sólido; border-top-width: 1;"> <TR> <TD alinear="Centro"> <mesa frontera="1" Ancho="100%"> <!-- Para cada estado que queremos ver, lo llamamos el "ShowBar" plantilla. Lo pasamos: 1. Una etiqueta de la fila. Esto se transforma en un hipervínculo. 2. El por ciento (variable desde arriba). 3. El nombre del campo actual del código de la lista subyacente. No es necesario para que coincida con la etiqueta de la pantalla. 4. El valor del campo emparejado para #3. 5. Total de artículos de este código de estado (No el total de todos los códigos de estado). Emite un <TR></TR> y la línea del gráfico de barras horizontales. Llamamos esta plantilla para cada código de estado que queremos ver. --> <XSL:plantilla de llamada nombre="ShowBar"> <XSL:con-param nombre="BarDisplayLabel" Seleccione="'Propuesta'"/> <XSL:con-param nombre="BarPercent" Seleccione="$percentProposed"/> <XSL:con-param nombre="QueryFilterFieldName" Seleccione="'Estado'"/> <XSL:con-param nombre="QueryFilterFieldValue" Seleccione="'Propuesta'"/> <XSL:con-param nombre="TotalItems" Seleccione="$totalProposed"></XSL:con-param> </XSL:plantilla de llamada> <XSL:plantilla de llamada nombre="ShowBar"> <XSL:con-param nombre="BarDisplayLabel" Seleccione="'Estancado'"/> <XSL:con-param nombre="BarPercent" Seleccione="$percentStalled"/> <XSL:con-param nombre="QueryFilterFieldName" Seleccione="'Estado'"/> <XSL:con-param nombre="QueryFilterFieldValue" Seleccione="'Estancado'"/> <XSL:con-param nombre="TotalItems" Seleccione="$totalStalled"></XSL:con-param> </XSL:plantilla de llamada> <XSL:plantilla de llamada nombre="ShowBar"> <XSL:con-param nombre="BarDisplayLabel" Seleccione="'En proceso'"/> <XSL:con-param nombre="BarPercent" Seleccione="$percentInProcess"/> <XSL:con-param nombre="QueryFilterFieldName" Seleccione="'Estado'"/> <XSL:con-param nombre="QueryFilterFieldValue" Seleccione="'En proceso'"/> <XSL:con-param nombre="TotalItems" Seleccione="$totalInProcess"></XSL:con-param> </XSL:plantilla de llamada> </mesa> </TD> </TR> </mesa> </XSL:de lo contrario> </XSL:Elija> </XSL:plantilla> <!-- Esta plantilla hace el trabajo de visualización de las líneas individuales en el gráfico de barras. Probablemente harás la mayor parte de su ajuste aquí. --> <XSL:plantilla nombre="ShowBar"> <XSL:param nombre="BarDisplayLabel" /> <!-- etiqueta para mostrar --> <XSL:param nombre="BarPercent"/> <!-- Por ciento del total. --> <XSL:param nombre="QueryFilterFieldName"/> <!-- Solía ir a la consulta & filtro --> <XSL:param nombre="QueryFilterFieldValue"/> <!-- Solía ir a la consulta & filtro --> <XSL:param nombre="TotalItems" /> <!-- recuento total de este barlabel --> <TR> <!-- La etiqueta de la barra. --> <TD clase="MS-formbody" Ancho="30%"> <!-- Este siguiente grupo de declaraciones construye una cadena de consulta que permite perforar hasta una vista filtrada de los datos subyacentes. Hacemos uso de algunas cosas aquí: 1. FilterField1 y FilterValue1 podemos pasar a una lista para filtrar en una columna. 2. SharePoint está pasando un parámetro fundamental que nos, ListUrlDir que apunta a la lista subyacente contra la cual esta DVWP "corre". No es divertido XSL? --> <XSL:texto Disable-output-escaping=""> <![CDATA[<a href ="]]></XSL:texto> <XSL:valor de Seleccione="$ListUrlDir"/> <XSL:texto Disable-output-escaping=""><![CDATA[?FilterField1 =]]></XSL:texto> <XSL:valor de Seleccione="$QueryFilterFieldName"/> <XSL:texto Disable-output-escaping=""><![CDATA[&FilterValue1 =]]></XSL:texto> <XSL:valor de Seleccione="$QueryFilterFieldValue"/> <XSL:texto Disable-output-escaping=""><![CDATA[">]]></XSL:texto> <XSL:valor de Seleccione="$BarDisplayLabel"/> <XSL:texto Disable-output-escaping=""><![CDATA[</un>]]></XSL:texto> <!-- El bit siguiente muestra algunos números en el formato: "(total / % del total)" --> (<XSL:valor de Seleccione="$TotalItems"/> / <!-- Esto nos crea una etiqueta porcentaje Niza. Gracias, Microsoft! --> <XSL:plantilla de llamada nombre="percentformat"> <XSL:con-param nombre="por ciento" Seleccione="$BarPercent"/> </XSL:plantilla de llamada>) </TD> <!-- Finalmente, emitir un <TD> etiqueta para la barra propia.--> <TD> <mesa cellpadding="0" cellspacing="0" frontera="0" Ancho="{Ronda($BarPercent * 100)+1}%"> <TR bgcolor="rojo"> <XSL:texto Disable-output-escaping=""><![CDATA[&nbsp;]]></XSL:texto> </TR> </mesa> </TD> </TR> </XSL:plantilla> <!-- Esto está tomada directamente de algunos XSL que encontré en una plantilla de MS. --> <XSL:plantilla nombre="percentformat"> <XSL:param nombre="por ciento"/> <XSL:Elija> <XSL:Cuando prueba="formato de número($por ciento, '#,##0%;-#,##0%')= 'NaN'">0%</XSL:Cuando> <XSL:de lo contrario> <XSL:valor de Seleccione="formato de número($por ciento, '#,##0%;-#,##0%')" /> </XSL:de lo contrario> </XSL:Elija> </XSL:plantilla> </XSL:hoja de estilos>

Los resultados:

XSL desde arriba genera este gráfico:

imagen

Desglosar los datos subyacentes haciendo clic en el código de Estado:

imagen

Reflexiones finales:

Puede ser generalizada?

Me encanta este concepto gráfica, pero odio el hecho de que tengo que ir y hacer tanta codificación manual. Yo he pensado un poco en si puede ser generalizado y soy optimista, pero también estoy un poco temeroso que puede ser un muro en alguna parte a lo largo de la ruta de acceso que no ofrece ninguna solución. Si alguien tiene algunas buenas ideas sobre esto, por favor tome nota de las observaciones o Enviarme un correo electrónico.

Gráficos verticales:

Este es un gráfico de barras horizontal. Es ciertamente posible crear un gráfico vertical. Sólo tenemos que cambiar a la HTML. Empezaría de la misma manera: Crear una representación de HTML de un gráfico de barras vertical y luego averiguar cómo conseguirlo vía XSL. Si alguien está interesado en, Pude convencí a probar y trabajar las torceduras. Si alguien ya ha hecho, por favor hágamelo saber y con mucho gusto voy enlace a tu blog 🙂

Creo que el desafío con un gráfico vertical es que las etiquetas de la gráfica son más difíciles de administrar, pero ciertamente no es imposible.

Campo nombre Gotcha:

Hay al menos dos cosas a buscar con los nombres de campo.

Primero, un nombre de campo con un espacio tiene que ser escapado en el XSL. Probablemente se trata de una cuestión:

        <XSL:variable nombre="totalProposed" 
Seleccione="Conde(/dsQueryResponse/filas/fila[espacio de normalizar(@Status) = 'Propuesto'])" />

Si tu estado"" columna realmente es llamado "código de Estado" a continuación, debe hacer referencia a él como "Status_x0020_Code":

   <XSL:variable nombre="totalProposed" 
Seleccione="Conde(/dsQueryResponse/filas/fila[espacio de normalizar(@ Status_x0020_Code) = 'Propuesto'])" />

Segundo, y me siento un poco borroso en este, pero también hay que estar alerta para los cambios de nombre de campo. Si llama a su campo "código de estado" y más tarde en, cámbiele el "Estado de AFE", el nombre interno"" no cambia. El nombre interno seguirá siendo "código de estado" y debe hacer referencia como "Status_x0020_Code". Los "otros recursos" enlaces pueden ayudar a diagnosticar y corregir este tipo de problema.

Acerca de ese Color:

Elegí "rojo" porque es agradable a mí en el momento. No sería una gran cosa para mostrar diferentes colores para dar más que una descripción visual de un número, sino también proporcionar un KPI útil. Por ejemplo, Si el porcentaje de "estancado" AFE es > 10% a continuación mostramos rojo, de lo contrario, mostrarlo en negro. Uso <XSL:Elija> para lograr esto.

Otros recursos:

Transformar feliz!

<final />

Suscribirse a mi blog!

Etiquetas de Technorati: , , , , , ,

17 pensamientos sobre "Crear gráficos de barras en SharePoint

  1. Chris B

    Esta página casi completado la tarea que estaba buscando.

    Tengo un grupo que quiere usar la lista de la encuesta de SharePoint para crear una encuesta semanal. Las capturas? No quieren ver código… O cambiar el sistema cada vez envíen la encuesta (prevista para una actualización semanal).

    Pude conectar este a la lista de encuesta y crear el gráfico en la primera columna de respuesta. Aunque lo que no puedo predecir son los valores y las etiquetas que necesitan avanzar. Para complicar peor pueden tener más o menos respuestas disponibles cada semana.

    Voy a mirar en otros lugares por si acaso, pero nadie ha encontrado una manera para crear filas y etiquetas en función de la cantidad de opciones disponibles y establecer dinámicamente estos en lugar de codificación duro los valores esperados?

    Respuesta
  2. Greg Laushine

    Gracias Paul. Muy útil. Gracias a su trabajo, Fui capaz de añadir una columna de barra del gráfico a un DVWP existente (por ejemplo:. para las tareas) muy fácilmente con unas pocas líneas de código.
    En SharePoint Designer, Se ha insertado una vista de datos con el título y % completar las columnas de una lista de tareas. Coloque el cursor en una de las celdas y haga clic derecho. Yo seleccione Insertar una columna a la derecha. En la vista Código, Encontré la <TD> y reemplazó el <XSL:elemento de texto dentro de la celda con el código:
    <tabla cellpadding ="0" cellspacing ="0" frontera ="0"
    ancho = "{Ronda(@ PercentComplete * 100)+1}%">
    <estilo de TR = "background-color:rojo">
    <XSL:texto disable-output-escaping = "yes"><![CDATA[&nbsp;]]></XSL:texto>
    </TR>
    </mesa>

    Nota he cambiado el código de color de la fila de bgcolor = "rojo" estilo = "background-color:rojo"
    También, fue capaz de seleccionar una de las columnas en mi lista (@ PercentComplete) en lugar de "$ BarPercent"
    Greg

    Respuesta
  3. Wolfgang
    Paul, Gracias por esto! He creado una copia exacta de lo que hiciste y funciona casi perfecto. Hubo un pequeño problema en fila el 2 º párrafo del código:
    <XSL:Partido de plantilla = "/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Después corregido que funciona como encanto! Ahora se adaptará esto a mi propia lista y estado pero estoy seguro que no será dificil. (Publicaremos el resultado)
    Gracias de nuevo
    ~ Wolle
    Respuesta
  4. Sin nombre
    pregunta –
    ¿Qué pasa si en mi gráfico, quería una variable para no solo contar un Estado sino contar los múltiples?
    Por lo tanto, por ejemplo qué pasa si tuve —
    <XSL:nombre de variable = "RequestsInitialized"
    Seleccione = "Conde(/dsQueryResponse/filas/fila[espacio de normalizar(@Status)= 'WIP'])" />
    –La cosa es, Quiero contar las instancias de 'Curso', pero también quiero esta variable para contar algo más como "Pendiente de revisión".. Cómo sería ello?
    Gracias!
    Respuesta
  5. Murty Srirangam
    Hola Pablo,
    Iam realmente esto es realmente un gran esfuerzo por parte de usted. Puede por favor explicar donde sería publicar este código. He creado un proyecto con cuatro nuevos archivos. A continuación, puede explicar con más detalle lo que debo hacer.
    Gracias
    Murty
    Respuesta
  6. Andrew Carrington
    Hola, Estoy tratando de modificar ligeramente para que se muestre un gráfico de tareas en una lista de tareas contra la información de usuario. Utiliza una columna denominada @ AsignadoA que es una columna de presencia de usuario. Puede obtenerlo para mostrar teh prestado HTML, pero no puede obtenerlo para calcular y mostrar los valores de.
    Todas las ideas?
    Gracias
    Andy
    Respuesta
  7. Patrik Luca escribió:
    Hola Pablo,
    gran post!
    Una pregunta:
    Le gustaría de filtrar por dos campos al mismo tiempo: ¿cómo esto se consigue?
    Por ejemplo, una de las variables se denomina totalStalled y filtra en @ Status.
    Le gustaría de filtrar al mismo tiempo reducir mi número de registros devueltos en otro campo.
    Ya he encontrado cómo hacer una ‘O’, pero donnot arreglo para encontrar la ‘Y’
    Un ‘OR’ puede lograrse este:
    <XSL:nombre de variable = "totalStalled" Seleccione = "Conde(/dsQueryResponse/filas/fila[espacio de normalizar(@Status) = ‘Stalled’] | /dsQueryResponse/filas/fila[espacio de normalizar(@ ExtraFilterField) = ‘Valor’])" />
    Respuesta
  8. Robin Meuré

    Hola Pablo!

    Buen trabajo! También tuve algo como esto en mi mente para ver las listas de SharePoint de una manera gráfica 😉

    Respuesta
  9. Frank

    Tengo un ‘Uso de cuadros de mando en SharePoint’ pregunta. Somos un hospital militar utilizando el estándar MOSS para nuestra Intranet y nos gustaría construir un tablero de instrumentos para nuestro grupo de comandos para ver ‘tiempo real’ Si es posible. Uno de los principales puntos es ver la carga de trabajo actual en tiempo real dentro de las instalaciones y literalmente ver cambiar hacia arriba y abajo (puede tener que hacer clic en “actualizar”/F5).

    Gracias de antemano,

    Respuesta

Contesta

su dirección de correo electrónico no será publicada. Los campos necesarios están marcados *