Gráficas Sharepoint 2007, listas, Xslt y JavaScript

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

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=”/” xmlns:x=”http://www.w3.org/2001/XMLSchema” xmlns:dsp=”http://schemas.microsoft.com/sharepoint/dsp” xmlns:asp=”http://schemas.microsoft.com/ASPNET/20” xmlns:__designer=”http://schemas.microsoft.com/WebParts/v2/DataView/designer” xmlns:SharePoint=”Microsoft.SharePoint.WebControls”>

<xsl:call-template name=”dvt_1″/>

</xsl:template>

<xsl:template name=”dvt_1″>

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

<table border=”1″ width=”100%” cellpadding=”2″ cellspacing=”0″>

<tr>

<td align=”center” valign=”middle”>

<xsl:call-template name=”dvt_1.GraficaBarraMeses”>

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

</xsl:call-template>

</td>

<td align=”center” valign=”middle”>

<xsl:call-template name=”dvt_1.GraficaBarraSector”>

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

</xsl:call-template>

</td>

</tr>

<tr>

<td align=”center” valign=”middle” colspan=”2″>

<xsl:call-template name=”dvt_1.GraficaBarra”>

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

</xsl:call-template>

</td>

</tr>

</table>

</xsl:template>

<xsl:template name=”dvt_1.GraficaBarraMeses”>

<xsl:param name=”Rows” />

<div id=”chartsBarrasMeses” class=”chart” align=”center” style=”width:400px; height:300px;”></div>

<script type=”text/javascript”>

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

DatosArrayMeses(<xsl:value-of select=”position()”/>,&apos;<xsl:value-of select=”@Mes”></xsl:value-of>&apos;,<xsl:value-of select=”@Importe”></xsl:value-of>);

</xsl:for-each>

var myChartBarrasMeses;

var chartBarrasMeses = new EJSC.Chart(&quot;chartsBarrasMeses&quot;,{title: “Ventas por Mes”,show_x_axis: false});

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

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

chartBarrasMeses.setXAxisCaption(“Meses”);

chartBarrasMeses.setYAxisCaption(“Importes”);

myChartBarrasMeses = new EJSC.BarSeries(new EJSC.ArrayDataHandler(arrayDataMeses));

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

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

myChartBarrasMeses.color = &apos;rgb(50,210,50)&apos;;

myChartBarrasMeses.lineWidth = 2;

chartBarrasMeses.addSeries(myChartBarrasMeses)

</script>

</xsl:template>

<xsl:template name=”dvt_1.GraficaBarraSector”>

<xsl:param name=”Rows” />

<div id=”chartsBarrasSector” class=”chart” align=”center” style=”width:400px; height:300px;”></div>

<script type=”text/javascript”>

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

DatosArraySector(<xsl:value-of select=”position()”/>,&apos;<xsl:value-of select=”@Sector”></xsl:value-of>&apos;,<xsl:value-of select=”@Importe”></xsl:value-of>);

</xsl:for-each>

var myChartBarrasSector;

var chartBarrasSector = new EJSC.Chart(&quot;chartsBarrasSector&quot;,{title: “Ventas por Sector”});

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

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

chartBarrasSector.setXAxisCaption(“Sector”);

chartBarrasSector.setYAxisCaption(“Importes”);

myChartBarrasSector = new EJSC.BarSeries(new EJSC.ArrayDataHandler(arrayDataSector));

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

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

myChartBarrasSector.color = &apos;rgb(50,210,50)&apos;;

myChartBarrasSector.lineWidth = 2;

chartBarrasSector.addSeries(myChartBarrasSector)

</script>

</xsl:template>

<xsl:template name=”dvt_1.GraficaBarra”>

<xsl:param name=”Rows” />

<div id=”chartsTorta” class=”chart” align=”center” style=”width:400px; height:300px;”></div>

<script type=”text/javascript”>

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

DatosArrayTorta(<xsl:value-of select=”position()”/>,<xsl:value-of select=”@Importe”></xsl:value-of>,&apos;<xsl:value-of select=”@Mes”></xsl:value-of>&apos;,&apos;<xsl:value-of select=”@Sector”></xsl:value-of>&apos;);

</xsl:for-each>

var myChartTorta;

var chart = new EJSC.Chart(&quot;chartsTorta&quot;,{title: “Ventas Totales”,show_x_axis: false});

chart.setXAxisCaption(“Meses”);

chart.setYAxisCaption(“Importes”);

myChartTorta = new EJSC.PieSeries(new EJSC.ArrayDataHandler(arrayDataTorta),{onPieceNeedsColor: ColoresPorMes});

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

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

chart.addSeries(myChartTorta)

</script>

</xsl:template>

</xsl:stylesheet>


Código Fuente – JavaScript


var arrayDataMeses = new Array();
var arrayDataSector = new Array();
var arrayDataTorta = new Array();
var posMes = 0;
var posSector = 0;
var arrayAux;

function DatosArrayMeses(pPos, pValueX, pValueY)
{
var lPosMes = ExisteMes(pValueX);
if(lPosMes != -1)
{
var importe = arrayDataMeses[lPosMes][1];
importe += pValueY;
arrayDataMeses[lPosMes][1] = importe;
}
else
{
arrayAux = new Array(pValueX,pValueY);
arrayDataMeses[posMes] = arrayAux;
posMes++;
}
}

function DatosArraySector(pPos, pValueX, pValueY)
{
var lPosSector = ExisteSector(pValueX);
if(lPosSector != -1)
{
var importeSec = arrayDataSector[lPosSector][1];
importeSec += pValueY;
arrayDataSector[lPosSector][1] = importeSec;
}
else
{
arrayAux = new Array(pValueX,pValueY);
arrayDataSector[posSector] = arrayAux;
posSector++;
}
}

function DatosArrayTorta(pPos, pValueX, pValueY, pValueSector)
{
var labelPorcion = pValueY + “<br/>” + pValueSector;
arrayAux = new Array(pValueX,labelPorcion);
arrayDataTorta[pPos-1] = arrayAux;
}

function ExisteMes(pMes)
{
var retorno = -1;
for(i = 0; i < arrayDataMeses.length; i++)
{
if(arrayDataMeses[i][0] == pMes)
{
retorno = i;
break;
}
}
return retorno;
}

function ExisteSector(pSector)
{
var retorno = -1;
for(i = 0; i < arrayDataSector.length; i++)
{
if(arrayDataSector[i][0] == pSector)
{
retorno = i;
break;
}
}
return retorno;
}
function ColoresPorMes(point, series, chart)
{
if(point.label.indexOf(“Enero”) != -1)
{
return ‘rgb(255,140,0)’;
}
else if(point.label.indexOf(“Febrero”) != -1)
{
return ‘rgb(178,34,34)’;
}
else if(point.label.indexOf(“Marzo”) != -1)
{
return ‘rgb(153,50,204)’;
}
else if(point.label.indexOf(“Abril”) != -1)
{
return ‘rgb(255,255,0)’;
}
else if(point.label.indexOf(“Mayo”) != -1)
{
return ‘rgb(112,219,147)’;
}
else if(point.label.indexOf(“Junio”) != -1)
{
return ‘rgb(35,107,142)’;
}
else if(point.label.indexOf(“Julio”) != -1)
{
return ‘rgb(35,107,102)’;
}
else if(point.label.indexOf(“Agosto”) != -1)
{
return ‘rgb(35,107,242)’;
}
else if(point.label.indexOf(“Septiembre”) != -1)
{
return ‘rgb(35,127,142)’;
}
else if(point.label.indexOf(“Octubre”) != -1)
{
return ‘rgb(35,197,142)’;
}
else if(point.label.indexOf(“Noviembre”) != -1)
{
return ‘rgb(135,107,142)’;
}
else if(point.label.indexOf(“Diciembre”) != -1)
{
return ‘rgb(235,107,142)’;
}
}



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

Fabián Imaz
Siderys Elite Software

Compartir