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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *