Fusion Charts en Cuadro de Mandos Interactivo de SageCRM (II)

Ya vimos en otro post como crear gráficos más avanzados dentro de nuestro cuadro de mandos mediante desarrollo y la librería de FusionCharts.

En esta ocasión, vamos a ver cómo crear gráficos más complejos (comparativos multibarra, con drill-down)

Se muestra la comparativa de la facturación de X3 entre el año anterior y el año actual de las facturas de las empresas que tenga acceso el usuario. Solamente se tendrán en cuenta las facturas de las empresas que el usuario tenga acceso a visualizar.

Para ello primero hemos tenido que crear una vista que una las tablas de Facturas de Sage X3 contra las tablas de empresa del CRM (relacionado por el campo código de cliente). En nuestro caso la hemos llamado “vZSINVOICED”

En nuestra página asp, que llamaremos desde nuestro cuadro de mandos, hemos añadido la llamada a la librería de FusionCharts.js, y hemos insertado un script que se actualiza en tiempo de ejecución mediante código incrustado asp.

El código que insertamos dentro del script, nos generará el XML que acabaremos insertando dentro del objeto del fusionchart

var chart_Raul = new FusionCharts("../../FusionCharts/MSColumn3D.swf", "Raul", "100%", 300, "0", "1");

…

chart_Raul.setDataXML("<%=strXML%>");

chart_Raul.render("RaulDiv");

El XML que se genera acabará teniendo este aspecto:

</categories>

</dataset>

</dataset>

</definition>

</application>

</styles>

</chart>

Para generarlo hacemos lo siguiente:

SID=Request.QueryString("SID")

strXML="<chart caption='Comparativa Facturación Año Anterior-Año Actual' XAxisName='Meses' animation='1' subcaption='(Facturas de X3)' numberPrefix='€' showValues='0' seriesNameInToolTip='1'>"

//Obtener Categorias (Meses)

Hoy=new Date()

MesActual=Hoy.getMonth()+1

strXML= strXML + "<categories>"

for (var i=1;i<=12;i++)

{

idmes=i+MesActual

strXML= strXML + "<category label='" + GetMes(idmes) + "'/>"

}

strXML= strXML + "</categories>"

idEmpresas=ObtenerIdEmpresasAcceso(PerfilUsuario)

//DATOS AÑO ANTERIOR

AnyoAnterior=Hoy.getYear()-1

AnyoAnteriorAnterior=Hoy.getYear()-2

strXML= strXML + "<dataset seriesname='Año Anterior'>"

Query = eWare.CreateQueryObj("SELECT ANYO_0 AS anyo, MES_0 as mes, SUM(AMTNOTLIN_0) as total FROM vZSINVOICED WHERE ((ANYO_0=" + AnyoAnteriorAnterior + " AND MES_0>" + MesActual + ") or (ANYO_0=" + AnyoAnterior + " AND MES_0<=" + MesActual + ")) AND Comp_Companyid IN (" + idEmpresas + ") GROUP BY ANYO_0,MES_0 ORDER BY ANYO_0 , MES_0", "VISTASX3");

Query.SelectSql();

contadormes=MesActual

while (!Query.eof)

{

if (contadormes==13)

contadormes=1

mes=Query.FieldValue("mes")

anyo=Query.FieldValue("anyo")

total=Query.FieldValue("total")

total=total.replace(",",".")

//PARA ASEGURARNOS QUE SE MUESTRAN TODOS LOS MESES

for (var cont=contadormes;cont<mes-1;cont++)

{

strXML= strXML + "<set value='0' />"

contadormes+=1

}

contadormes+=1

strXML= strXML + "<set value='" + total + "' />"

Query.NextRecord();

}

strXML= strXML + "</dataset>"

//DATOS AÑO ACTUAL

AnyoActual=Hoy.getYear()

strXML= strXML + "<dataset seriesname='Año Actual'>"

Query = eWare.CreateQueryObj("SELECT ANYO_0 AS anyo, MES_0 as mes, SUM(AMTNOTLIN_0) as total FROM vZSINVOICED WHERE ((ANYO_0=" + AnyoAnterior + " AND MES_0>" + MesActual + ") or (ANYO_0=" + AnyoActual + " AND MES_0<=" + MesActual + ")) AND Comp_Companyid IN (" + idEmpresas + ") GROUP BY ANYO_0,MES_0 ORDER BY ANYO_0 , MES_0", "VISTASX3");

Query.SelectSql();

contadormes=MesActual

while (!Query.eof)

{

if (contadormes==13)

contadormes=1

mes=Query.FieldValue("mes")

anyo=Query.FieldValue("anyo")

total=Query.FieldValue("total")

total=total.replace(",",".")

//PARA ASEGURARNOS QUE SE MUESTRAN TODOS LOS MESES

for (var cont=contadormes;cont<mes-1;cont++)

{

strXML= strXML + "<set value='0' />"

contadormes+=1

}

contadormes+=1

strXML= strXML + "<set value='" + total + "' link='" + strLink + "'/>"

Query.NextRecord();

}

strXML= strXML + "</dataset>"

strXML= strXML + "<styles><definition><style type='font' name='CaptionFont' size='15' /><style type='font' name='SubCaptionFont' bold='0' /></definition><application><apply toObject='caption' styles='CaptionFont' /><apply toObject='SubCaption' styles='SubCaptionFont' /></application></styles></chart>"

Para hacer drill-down lo único que tenemos que hacer añadir dentro del elemento set del XML de salida, la etiqueta link , con una llamada a una función javascript pasándole por parámetro el mes y el año, que lo que hará es generar otro XML con los datos de facturación de ese mes/año. Y mostrándolos en otro chart situado en la pantalla principal.

function updateCharts(mes, anyo, SID)

{

//Get reference to chart object using Dom ID "SalesByCat"

var chartObj = getChartFromId("chart2");

//Send request for XML

chartObj.setXMLUrl("ComparativaRepMesXML.asp?SID=" + SID + "&mes=" + mes + "&anyo=" + anyo);

chartObj.render("Chart2Div");

}

...

strLink = Server.URLEncode("javaScript:updateCharts(" + mes + "," + anyo + "," + SID + ")")

strXML= strXML + "<set value='" + total + "' link='" + strLink + "'/>"

...

var chart2 = new FusionCharts("../../FusionCharts/MSColumn3D.swf?ChartNoDataText=Selecciona un Mes del grafico superior", "chart2", "100%", 300, "0", "1");

chart2.setDataXML("");

//Finally, render the chart.

chart2.render("Chart2Div");

</script>

4 comentarios:

DB Computer Solutions Ltd12 de octubre de 2015, 10:25
This is in fact a wonderful post, the piece of writing has really allured me, and you have given a definite idea of this issue. Nice!!
IT Support Limerick
Sage Manufacturing
ResponderEliminar
Respuestas
Anónimo10 de octubre de 2017, 11:10
hello Raul , can you provide the view you created in CRM for the X3 Invoice Table and the Companry Table
ResponderEliminar
Respuestas

Añadir comentario

Todo Sobre ASP.NET MVC - SageCRM - y Más...

jueves, 2 de octubre de 2014

Fusion Charts en Cuadro de Mandos Interactivo de SageCRM (II)

4 comentarios: