Para este ejemplo de visualización de datos, haremos uso del gráfico MotionChart perteneciente a la API de visualización de Google y de un archivo JSONP que contiene el valor detallado que adopta la cuenta contable ACTIVOS para todos los meses de año 2009 y para todas las instituciones financieras. Este es obtenido mediante el API de Información Financiera de la Superintendencia de Bancos e Instituciones Financieras.
Lo que se obtiene es un gráfico interactivo para visualizar la evolución temporal de la cuenta ACTIVOS (código de cuenta 1000000 de Balances) desde Enero a Diciembre del 2009.
La URL usada para generar los datos que se usan en visualización y que genera al recurso JSONP es la siguiente:
El archivo que retorna el servidor tiene la forma:
despliegue
{"códigosBalances":[
{
"códigoCuenta":"1000000",
"DescripcionCuenta":"ACTIVOS",
"códigoInstitucion":"001",
"NombreInstitucion":"BANCO DE CHILE",
"Anho":2009,
"Mes":1,
"MonedaChilenaNoReajustable":"8682304,00",
"MonedaReajustablePorIPC":"6322304,00",
"MonedaReajustablePorTipoDeCambio":"92678,00",
"MonedaExtranjera":"3147762,00",
"MonedaReajustable":null,
"MonedaTotal":"18245048,00"
},
{
"códigoCuenta":"1000000",
"DescripcionCuenta":"ACTIVOS",
"códigoInstitucion":"009",
"NombreInstitucion":"BANCO INTERNACIONAL",
"Anho":2009,
"Mes":1,
"MonedaChilenaNoReajustable":"296492,00",
"MonedaReajustablePorIPC":"100539,00",
"MonedaReajustablePorTipoDeCambio":"0,00",
"MonedaExtranjera":"83845,00",
"MonedaReajustable":null,
"MonedaTotal":"480876,00"
}
.
.
.
{
"códigoCuenta":"1000000",
"DescripcionCuenta":"ACTIVOS",
"códigoInstitucion":"999",
"NombreInstitucion":"SISTEMA FINANCIERO",
"Anho":2009,
"Mes":12,
"MonedaChilenaNoReajustable":"49492612,00",
"MonedaReajustablePorIPC":"40102116,00",
"MonedaReajustablePorTipoDeCambio":"398351,00",
"MonedaExtranjera":"11910686,00",
"MonedaReajustable":null,
"MonedaTotal":"101903765,00"
}
]}
);
Esto significa, que al momento de insertar el siguiente script en mi sitio web:
se invoca a la función de callback definida en la URL (en este caso a la función llamada despliegue), usando como parámetro el objeto Javascript que viene en el archivo JSONP.
Como se puede ver, es importante que previo a la inserción de este script debe estar definida la función de callback, como se muestra en el código de ejemplo.
Finalmente, el código contenido dentro de la función despliegue pertenece al manejo del API de Visualización de Google para el gráfico de lineas interactivo, está documentado en su sitio.
El gráfico demora en cargar y podría no cargar si se ha consumido la cuota de uso de la clave.
Actualizado: 01/12/2010