Gráficas en Sharepoint 2007, Xslt y JavaScript

No solo de WebParts vive el hombre – Parte 2 – Demostración 1

En el día 13-12-2007 tuvimos la oportunidad de realizar el segundo WebCast a la comunidad de desarrolladores de Sharepoint y le damos las gracias a Brandon Aday de Microsoft por la oportunidad que nos brindo nuevamente

En este WebCast desarrollamos unos componentes para gráfica datos utilizando JavaScript, Xslt y Emprise JavaScript Charts, motor para crear gráficas escritas totalmente en JavaScript y compatibles con todos los Browser. Este componente esta licenciado y se pude descargar una versión de evaluación para probarlo desde la siguiente página oficial del sitio. Esta versión de evaluación que nosotros utilizamos para realizar esta demostración solo consume datos de conformados por un Array de JavaScript, pero en la versión licenciada los orígenes de datos pueden ser otros, como por ejemplo Xml.

En el siguiente artículo encontrarán el código fuente completo de la demostración uno realizada, el cual podrán copiar y pegar.

Código Fuente – Xslt

<xsl:stylesheet

xmlns:x="http://www.w3.org/2001/XMLSchema"

xmlns:dsp="http://schemas.microsoft.com/sharepoint/dsp"

version="1.0"

exclude-result-prefixes="xsl msxsl ddwrt"

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"

xmlns:asp="http://schemas.microsoft.com/ASPNET/20"

xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

xmlns:msxsl="urn:schemas-microsoft-com:xslt"

xmlns:SharePoint="Microsoft.SharePoint.WebControls"

xmlns:ddwrt2="urn:frontpage:internal">

<xsl:output method="html" indent="no"/>

<xsl:template match="/">

<xsl:call-template name="dvt_1"/>

</xsl:template>

<xsl:template name="dvt_1">

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>

<tr>

<xsl:call-template name="dvt_1.GraficaTorta">

<xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>

</td>

<xsl:call-template name="dvt_1.GraficaBarras">

<xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>

</td>

</tr>

<tr>

<xsl:call-template name="dvt_1.GraficaAreas">

<xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>

</td>

</tr>

</table>

</xsl:template>

<xsl:template name="dvt_1.GraficaTorta">

<xsl:param name="Rows" />

<xsl:for-each select="$Rows">

DatosGraficaTorta(<xsl:value-of select="position()"/>,<xsl:value-of select="@Importe"></xsl:value-of>,'<xsl:value-of select="@Title"></xsl:value-of>');

</xsl:for-each>

var myChartSeries;

var chart = new EJSC.Chart("chartsTorta",{title: "Ventas Anuales – Gráfica de Torta"});

chart.y_axis_formatter = new EJSC.NumberFormatter({ forced_decimals: 2 });

chart.x_axis_formatter = new EJSC.NumberFormatter({ forced_decimals: 2 });

chart.setXAxisCaption("Meses");

chart.setYAxisCaption("Importes");

myChartSeries = new EJSC.PieSeries(new EJSC.ArrayDataHandler(arrayData));

myChartSeries.y_axis_formatter = new EJSC.NumberFormatter({ forced_decimals: 2 });

myChartSeries.x_axis_formatter = new EJSC.NumberFormatter({ forced_decimals: 2 });

chart.addSeries(myChartSeries)

</script>

</xsl:template>

<xsl:template name="dvt_1.GraficaBarras">

<xsl:param name="Rows" />

<xsl:for-each select="$Rows">

DatosGraficaBarras(<xsl:value-of select="position()"/>,'<xsl:value-of select="@Title"></xsl:value-of>',<xsl:value-of select="@Importe"></xsl:value-of>);

</xsl:for-each>

var myChartBarras;

var chartBarras = new EJSC.Chart("chartsBarras",{title: "Ventas Anuales – Gráfica de Barras",show_x_axis: false});

chartBarras.y_axis_formatter = new EJSC.NumberFormatter({ forced_decimals: 2 });

chartBarras.x_axis_formatter = new EJSC.NumberFormatter({ forced_decimals: 2 });

chartBarras.setXAxisCaption("Meses");

chartBarras.setYAxisCaption("Importes");

alert(arrayDataBarras);

myChartBarras = new EJSC.BarSeries(new EJSC.ArrayDataHandler(arrayDataBarras));

myChartBarras.y_axis_formatter = new EJSC.NumberFormatter({ forced_decimals: 2 });

myChartBarras.x_axis_formatter = new EJSC.NumberFormatter({ forced_decimals: 2 });

myChartBarras.color = 'rgb(50,210,50)';

myChartBarras.lineWidth = 2;

chartBarras.addSeries(myChartBarras)

</script>

</xsl:template>

<xsl:template name="dvt_1.GraficaAreas">

<xsl:param name="Rows" />

<xsl:for-each select="$Rows">

DatosGraficaAreas(<xsl:value-of select="position()"/>,'<xsl:value-of select="@Title"></xsl:value-of>',<xsl:value-of select="@Importe"></xsl:value-of>);

</xsl:for-each>

var myChartAreas;

var chartAreas = new EJSC.Chart("chartsAreas",{title: "Ventas Anuales – Gráfica de Área",show_x_axis: false});

chartAreas.y_axis_formatter = new EJSC.NumberFormatter({ forced_decimals: 2 });

chartAreas.x_axis_formatter = new EJSC.NumberFormatter({ forced_decimals: 2 });

chartAreas.setXAxisCaption("Meses");

chartAreas.setYAxisCaption("Importes");

alert(arrayDataAreas);

myChartAreas = new EJSC.AreaSeries(new EJSC.ArrayDataHandler(arrayDataAreas));

myChartAreas.y_axis_formatter = new EJSC.NumberFormatter({ forced_decimals: 2 });

myChartAreas.x_axis_formatter = new EJSC.NumberFormatter({ forced_decimals: 2 });

myChartAreas.color = 'rgb(50,210,50)';

myChartAreas.lineWidth = 2;

chartAreas.addSeries(myChartAreas)

</script>

</xsl:template>

</xsl:stylesheet>

Código Fuente – JavaScript

var arrayData = new Array();
var arrayAux;
var arrayDataBarras = new Array();
var arrayDataAreas = new Array();
function DatosGraficaTorta(pPos, pValueX, pValueY)
{
    arrayAux = new Array(pValueX,pValueY);
    arrayData[pPos-1] = arrayAux;
}
function DatosGraficaBarras(pPos, pValueX, pValueY)
{
    arrayAux = new Array(pValueX,pValueY);
    arrayDataBarras[pPos-1] = arrayAux;
}
function DatosGraficaAreas(pPos, pValueX, pValueY)
{
    arrayAux = new Array(pValueX,pValueY);
    arrayDataAreas[pPos-1] = arrayAux;

}

Muchas gracias a los que asistieron y nos hicieron llegar sus comentarios.
Nuestra mayor recompensa fue haber compartido con todos ustedes nuestra experiencia.

Deja un comentario Cancelar respuesta