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

Fusion Charts

Fusión Charts es una librería JavaScript que nos permite crear gráficos/mapas mediante datos serializados en JSON o XML. Además utiliza HTML5 que nos permitirá poder visualizar estos gráficos desde dispositivos móviles y navegadores multiplataforma.
Con Fusion Charts también podremos crear gráficos más complejos dónde incluso podremos hacer "drill down"

Fusion Charts en SageCRM
SageCRM incluye esta librería a partir de la versión de SageCRM 7.1,
Esto nos permitía tener gráficos (generados a través de los informes) animados e interactivos y visibles desde los dispositivos móviles.

A continuación veremos cómo podemos crear gráficos mediante desarrollo y páginas personalizadas, "inyectando" nosotros los valores que queremos visualizar. Obtenidos a través de la CRM COM API.

Como insertar Fusion Charts en Cuadro de Mandos Interactivo
La idea es crear un gadget tipo Web, que acceda a una página personalizada dónde se generará el gráfico a partir de ciertos valores obtenidos mediante las funciones de la CRM COM API.
Tal y como se comenta en este artículo:
https://community.sagecrm.com/partner_community/b/hints_tips_and_tricks/archive/2012/02/29/using-the-com-api-in-a-custom-gadget.aspx
cuando utilizamos el gadget de Página Web dentro del Cuadro de Mandos Interactivo no se pasa en ningún momento el SID (identificador de sesión), por lo tanto el objeto de CRM/eWare no se puede crear y no podemos utilizar la COM API.
Para hacerlo, tal y como se describe en el artículo, tendremos que crear una página puente, que obtenga los parámetros del parent window, y los transfiera a la nueva página personalizada dónde definiremos todos nuestro código.

#crm_server#/custompages/gadgetredirector.asp?gadgetPath=custompages/Informes/Ejemplo.asp

Ejempo Página Personalizada con Fusion Charts

Lo primero que tenemos que hacer es incluir la librería de sagecrm.js para poder instanciar el objeto eWare/CRM y así poder utilizar la CRM COM API.
A continuación también incluiremos la referencia de la libreria FusionCharts.js para poder generar y renderizar los gráficos correspondientes.
Mediante JavaScript instanciaremos el chart que queremos visualizar, pasándole los datos correspondientes (mediante XML), y finalmente lo renderizaremos mostrándolo en la página HTML en el DIV que hemos llamado "ChartDiv".

Para poder utilizar los métodos del objeto de CRM, tendremos que insertar código de servidor dentro del bloque de <script>.
En este ejemplo, lo único que hacemos es obtener todos los usuarios de CRM, y para cada usuario obtener el número de empresas que tiene asignadas. Y en cada iteración vamos construyendo una sección del fichero XML

…

…

Grafico.

</div>

//Instantiate the Chart

var chart_Chart = new FusionCharts("../../FusionCharts/Pie3D.swf", "Chart", "650", "325", "0", "1");

//Set the dataURL of the chart

//Provide entire XML data using dataXML method

strXML="<chart caption='Empresas por Gestor de Cuenta' palette='2' animation='1' showValues='0' formatNumberScale='0' showPercentInToolTip='0'>"

recordUsers=eWare.FindRecord("users", "")

while(!recordUsers.eof)

{

iduser=recordUsers.User_Userid

username=recordUsers.User_FirstName + " " + recordUsers.User_LastName

recordEmpresas=eWare.FindRecord("Company", "comp_deleted is null and comp_type='Customer' and comp_primaryuserid=" + iduser)

if (recordEmpresas.RecordCount>0)

{

strXML= strXML + "<set label='" + username + "' value='" + recordEmpresas.RecordCount + "' isSliced='0' />"

}

recordUsers.NextRecord();

}

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

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

//Finally, render the chart.

chart_Chart.render("ChartDiv");

</script>

Resultado de los datos en XML, que le pasaremos al gráfico de tipo Pie3D

</definition>

</application>

</styles>

</chart>

Gráfico Generado a Través de los datos de SageCRM

Diferencias entre hacer gráficos mediante Informes de SageCRM o mediante desarrollo

Los dos gráficos utilizan la librería FusionCharts.js
Los gráficos de los informes de SageCRM són más fáciles de hacer, ya que no requeren programación, simplemente se tiene que crear un informe que contenga un gráfico (pero no son tan potentes).
Los gráficos de los informes de SageCRM tienen la posibilidad que al clicarlos podemos visualizar el informe en sí (listado de los datos). Desde los gráficos hechos por desarrollo solamente podemos ver el gráfico
En un mismo espacio de pantalla, se visualizan mucho más grande y mejor los gráficos hechos por desarrollo
Tanto en los gráficos de Informes, cómo en los gráficos de desarrollo, podemos girar el gráfico e interactuar con él (ya que los dos gráficos están hechos con FusionCharts)
Si queremos hacer "drill down", sólo lo podremos hacer mediante gráficos de desarrollo
Si queremos hacer gráficos comparativos (multibarra) sólo lo podremos hacer con desarrollo.
Los gráficos hecho por desarrollo nos permiten personalizar más cosas (como por ejemplo mostrar tooltip, mostrar el valor “€” en los importes, mostrar porcentajes…)

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

viernes, 15 de noviembre de 2013

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

No hay comentarios:

Publicar un comentario