|

|
|
 |
|
 |
|
 |
|
 |
|
Información disponible
|
 |
|
 |
|
 |
|
Prototipos de visualización
|
 |
|
 |
|
Para desarrolladores
|
 |
|
 |
|
|
|
|
|
|
|
|
| Presentación
|
|
Esta sección muestra qué es SDMX, sus tecnologías y aplicaciones. Así como la implementación de servicios creados por INEGI para consumir datos estadísticos en formato SDMX, así como su visualización.
|
|
Qué es SDMX
|
La iniciativa para el intercambio de datos y metadatos estadísticos (SDMX) fue lanzado en 2001 por siete organizaciones que trabajan con datos estadísticos a nivel internacional: el Banco de Pagos Internacionales (BIS), el Banco Central Europeo (BCE), Eurostat, el Fondo Monetario Internacional (FMI), la Organización para la Cooperación y el Desarrollo Económico (OECD), la División de Estadística de Naciones Unidas (UNSD) y el Banco Mundial.
Estas siete organizaciones actúan como los patrocinadores de la iniciativa SDMX. El objetivo declarado de SDMX fue el desarrollo y uso más eficientes de los procesos de intercambio y diseminación de datos y metadatos estadísticos entre los organismos internacionales y sus países miembros. Para lograr este objetivo, SDMX ofrece un modelo de información para generar formatos estándar para los datos y metadatos, junto con las directrices de contenido y una arquitectura de tecnología de información, para el intercambio de datos y metadatos. Las organizaciones son libres de hacer uso de cualquiera de los elementos que sean más apropiados para cada caso.
Con Internet y la "World Wide Web", el intercambio electrónico y el intercambio de datos se han convertido en algo más fácil y más común, pero el intercambio a menudo ha tenido lugar utilizando todo tipo de formatos y conceptos no-estandarizados. Esto crea la necesidad de normas y directrices comunes que permitan procesos más eficientes para el intercambio y difusión de datos y metadatos estadísticos, por ello SDMX busca la armonización conceptual estadística que facilite la integración y la comparabilidad de datos provenientes de diversas fuentes. SDMX garantiza que los metadatos siempre vengan junto con los datos, haciendo que la información sea inmediatamente comprensible y utilizable.
Así mismo, la evolución de SDMX y su implementación a través de Servicios Web, está dando lugar a que la diseminación de datos estadísticos a usuarios finales sea también a través de SDMX, promoviendo el desarrollo de herramientas muy llamativas de visualización, graficación y representación en mapas.
Sus principales elementos son:
- Modelo de información SDMX: Datos estadísticos (dimensiones, atributos y medidas) y Metadatos estadísticos (metadatos estructurales y metadatos de referencia).
- Lineamientos y pautas orientados al contenido: Conceptos de dominio cruzado (transversales), dominios estadísticos temáticos vocabulario común de metadatos.
- La arquitectura IT para el intercambio de datos: Formatos estándar para el intercambio de datos y metadatos, arquitecturas para el intercambio de datos.
Además existen herramientas que permiten procesar datos, convertir, relacionar, repositorios, etc. que trabajan bajo el estándar SDMX.
Historia
La versión 1.0 de las normas SDMX incluyen el modelo de información, así como los formatos de datos basados en xml y SDMX-ML y el formato de datos GESMES / TS, renombrado SDMX-EDI. La versión 1.0 de las normas SDMX fueron aprobadas por los patrocinadores en septiembre de 2004 y aceptadas como una especificación técnica de ISO (ISO / TS 17369:2005) en abril de 2005.
En noviembre de 2005, los patrocinadores aprobaron la versión 2.0 de las normas SDMX, que son totalmente compatibles con la versión 1.0, pero además proveen el intercambio de metadatos de referencia (explicativos) e incluyen la especificación de la interfaz de registro. SDMX 2.0 contiene ajustes, correcciones y atiende los comentarios recibidos de la versión 1.0. Incluye además: Directrices orientadas a contenidos estadísticos y fue dada a conocer al público en marzo de 2006, y en su versión consolidada en febrero 2008, aunque la liberación plena de las Directrices orientadas a los contenidos se llevó a cabo hasta enero de 2009 ya que fueron ampliamente revisadas por muchas organizaciones. Estas Directrices mejorarán la calidad de los datos y metadatos estructurales en el futuro, promoviendo el uso de conceptos estadísticos consistentes y listas de códigos a través de dominios y entre organizaciones. Esto hará que sea más fácil para los Institutos Nacionales de Estadística (NSI's) compartir archivos de datos de forma automática desde sus almacenes de datos. El concepto DSD, cuyo uso es acordado en las distintas organizaciones, también reducirá la carga de trabajo de los NSI's facilitando los acuerdos "de intercambio de datos".
En marzo de 2007, las instituciones patrocinadoras firmaron un memorando de entendimiento (MoU), que tiene por objeto establecer las disposiciones necesarias para una colaboración duradera por los patrocinadores en todos los aspectos de la iniciativa. En las conclusiones de la 39 ª reunión de la Comisión de Estadística de la ONU (Nueva York, febrero de 2008), SDMX fue reconocido y apoyado como "el estándar preferido para intercambio y difusión de datos y metadatos en la comunidad estadística mundial". Esta aceptación de la iniciativa SDMX a nivel de las Naciones Unidas es un paso importante hacia el uso más amplio de SDMX a nivel mundial.
En abril de 2011 fueron liberadas algunas especificaciones técnicas en la version 2.1 de SDMX y corregidas en agosto del 2011.
Beneficios
- Reducción de costos/tiempos
- Reutilización de herramientas (Infraestructura de Eurostat, de OCDE, etc.)
- Intercambio directo sin ser "intrusivo" (Servicios Web)
- Acelera la velocidad de producción (integración de datos en tiempo real)
- Herramientas para múltiples propósitos (Navegador estadístico)
- Posible combinación de aplicaciones ("Mashups")
- Reducción de errores
- Reduce la intervención de personas en el camino de la información
- Mejora la distribución y uso de la información
- Información útil para ser procesada por los sistemas
- Posible concentrar la información de diferentes fuentes en un punto, facilitando su localización
- Facilita la comprensión
- Facilita la comparabilidad
- Estandarización de clasificadores/conceptos
Nota: Texto basado en el contenido del sitio SDMX
|
| |
|
Usos
|
Las normas SDMX se diseñaron para el intercambio de información estadística entre dos o más socios. Evidentemente, las normas SDMX se desarrollaron por las organizaciones patrocinadoras con el fin de dar cabida a sus miembros, que incluyen oficinas nacionales de estadística, bancos centrales, dependencias, entidades y otros órganos. Dentro de estos grupos, las normas son para informar y compartir datos estadísticos con sus metadatos de la manera más eficiente.
SDMX también se puede utilizar dentro de un sistema nacional para transmitir o compartir datos y metadatos estadísticos. Esto es especialmente interesante en países con una estructura federal o un sistema de estadísticas descentralizada. En tales casos, una estrecha relación puede ser establecida entre el sistema nacional de intercambio de datos y sus Unidades de Estado que lo alimentan, lo que permite una mayor eficiencia de las organizaciones involucradas.
Aún y cuando SDMX fue diseñado originalmente para el intercambio de datos (Publicación y Recolección), su funcionalidad y las herramientas de "software" desarrolladas para soportarlo han permitido su evolución, que ahora abarca también el ámbito de Visualización o Diseminación gracias a los diversos formatos de extracción y a las Definiciones de Estructuras de Datos (DSD's), como se muestra en el siguiente diagrama:
Infraestructura SDMX en INEGI para el SNIEG
El Sistema Nacional de Información Estadística y Geográfica (SNIEG) es el conjunto de Unidades organizadas a través de los Subsistemas, coordinadas por el Instituto y articuladas mediante la Red Nacional de Información, con el propósito de producir y difundir la información de interés nacional. En el Programa Estratégico del Sistema Nacional de Información Estadística y Geográfica, publicado en el Diario Oficial de la Federación el 16 de abril de 2010, se establece la incorporación de SDMX para la transmisión de datos y metadatos, dentro de las políticas y líneas de acción que deberán atender los Comités Ejecutivos de los Subsistemas Nacionales de Información e implementarse a través de los Comités Técnicos Especializados y Unidades del Estado. Por lo anterior, el INEGI ha definido la siguiente Arquitectura SDMX como un elemento de la Plataforma Tecnológica de la Red Nacional de Información (RNI):
SNIEG

|
|
Herramientas
|
El sentido de la implementación de SDMX en el INEGI es utilizarlo por su funcionalidad para el intercambio y la integración de datos y metadatos que proviene de diferentes fuentes y que están en diferentes formatos, así como por su versatilidad para diseminar y visualizar la información estadística en diversas aplicaciones y plataformas informáticas como dispositivos móviles, ipads, pc's, etc. El proyecto está planteado en tres etapas (publicación, recolección y visualización). Para la primera etapa, se adoptaron diversas herramientas de "software" de Eurostat como el "Data Structure Wizard", el "Mapping Assistant" y el "Servicio Web NSI" (Infraestructura de referencia de Eurostat). El Servicio Web se complementó con el desarrollo de una interface REST (Infraestructura de referencia de Eurostat con adecuaciones del INEGI) para su explotación a través de una URL. Esto conforma la infraestructura de publicación de flujos de datos SDMX, de estructuras de datos (DSD’s) y demás componentes, los cuales pueden consumirse a través de "Query Messages" (SOAP) y de "Restful" (URL) cuyo formato de salida puede ser XML, JSON, JSONP, PNG, CSV.

Proceso de extracción de información SDMX.
La siguiente imagen resume el proceso de extracción que se lleva a cabo al consultar el Servicio Web SDMX, cuya llamada puede hacerse desde un navegador Web o desde una aplicación de "software" que consuma el Servicio Web. La transformación se hace en línea, ejecutándose un Query no intrusivo, con un acceso de sólo lectura, a la Base de Datos Estadísticos de Información Pública (que puede estar en SQLServer, ORACLE o MySQL), y transformando el resultado al formato SDMX de acuerdo a su Definición de Estructura de Datos (DSD) correspondiente.

|
|
Flujos de datos
|
Nota:
Pasos para hacer uso de la aplicación
Usando las pestañas de abajo puede especificar el criterio a ser usado para filtrar la consulta de datos. Dando clic sobre algún filtro se verá reflejado el criterio en la URL que aparece arriba de las pestañas, ya que cada dimensión se representa entre los puntos que conforma la llave "key=". Por ello, no es necesario entrar a las pestañas cuyo criterio se quiera como "todo". Posteriormente elija el formato SDMX y el tipo de archivo, finalmente oprima el botón para descargar los datos. Adicionalmente si desea puede copiar la URL para utilizarla directamente desde cualquier aplicación.
1. Seleccionar un flujo de datos.
2. Al seleccionar el flujo de datos, tiene la opción de:
- Obtener su estructura (DSD) dando click en el botón DSD, el cual abrirá una ventana emergente
que contiene la URL que puede copiar y pegar en su navegador web para descargar la estructura,
así como los botones "Descargar el KeyFamily" ó "Descargar DSD".
- Descargar los datos de la URL que estará visualizando, la cual está conformada
de tal manera para obtener los datos completos del flujo seleccionado, elegir su formato
SDMX (compact o generic) y el tipo de archivo que desea obtener (XML, JSON, JSONP, CSV, DSPL).
Asi también puede copiar la URL y pegar en su navegador web para descargar la información.
3. Si desea acotar la consulta puede aplicar filtros a los datos, eligiendo los criterios de
selección en las pestañas (dimensiones) del tabulador que se mostrará dando click en el botón
filtrar consulta. Para mas información de como trabajar con el filtrado de la consulta, dar
click en el botón Instrucciones para filtrar consulta.
4. Seleccionar el formato (compact ó generic) y descargar la consulta, seleccionando el tipo
de archivo deseado (XML, JSON, JSONP, CSV, DSPL).
Asi mismo puede copiar la URL con o sin filtros para pegarla en su navegador web y descargar
los datos.
|
|
Estructuras y catálogos
|
Nota:
Pasos para hacer uso de la aplicación
Paso 1. Seleccionar un DSD.
Paso 2. Si se desea descargar el KeyFamily o el DSD dar click en los botones correspondientes.
Paso 3. Click en el botón Consultar DSD para visualizar la información del mismo con la referencia a sus codelist; la consulta de algunos codelist puede tardar varios minutos debido a que contienen una gran cantidad de datos, favor de esperar
|
|
Guía para construcción de consultas a través de URL
|
En esta sección se presenta un caso práctico completo para consultar el Servicio Web SDMX y obtener resultados en los diferentes formatos disponibles como son: XML, CSV, PNG, JSON y JSONP. Se inicia con una consulta a todos los flujos de datos disponibles, cuyo resultado se presenta relacionándolos con su correspondiente Definición de Estructura de Datos (DSD's). Así, la siguiente consulta se refiere al DSD completo (cuando se pone references=shallow), o solamente el Keyfamily (cuando se omite references). Una vez que se conoce el flujo de datos que se desea consultar y su estructura, se pueden extraer los datos completos o filtrados; es decir, el flujo de datos íntegro o un subconjunto de éste.
1. Consulta todos los Flujos de Datos (Dataflow)
El primer paso que se deberá considerar para extraer datos, es conocer la información que está disponible. Esto se logra haciendo una consulta pidiendo todos los flujos de datos. Con esto se obtiene la relación de información disponible y su correspondiente DSD (Estructura de Datos/DataStructure). A continuación se muestran ejemplos de cómo hacerlo en los diferentes tipos de salida:
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/{RESOURCE}/{AGENCYID}/{ID}/{VERSION}?references={REFERENCES}&alt=
{ALT}&callback={CALLBACK}
Restful
XML
XML es un Lenguaje de Etiquetado Extensible muy simple, pero estricto que tiene un papel
fundamental en el intercambio de una gran variedad de datos. Es un lenguaje muy parecido a HTML
pero su función principal es describir datos y no mostrarlos como es el caso de HTML. XML es un
formato que permite la lectura de datos a través de diferentes aplicaciones.
Por lo tanto XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes
para diferentes necesidades.
Ejemplo:
< menu_almuerzo>
< comida>
< nombre>Pasteles< /nombre>
< precio>$4.00< /precio>
< descripción>Pasteles baratos< /descripción>
< calorias>670< /calorias>
< /comida>
< comida>
< nombre>Hot-dog< /nombre>
< precio>$4.00< /precio>
< descripción>El hot-dog mas rico< /descripción>
< calorias>1800< /calorias>
< /comida>
< /menu_almuerzo>
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Dataflow/ALL/ALL/ALL
JSON
JSON, acrónimo de JavaScript Object Notation, es un formato ligero para el intercambio
de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no
requiere el uso de XML. La simplicidad de JSON ha dado lugar a la generalización de su uso,
especialmente como alternativa a XML en AJAX. Una de las supuestas ventajas de JSON sobre XML
como formato de intercambio de datos en este contexto es que es mucho más sencillo escribir un
analizador semántico de JSON. En JavaScript, un texto JSON se puede analizar fácilmente usando el
procedimiento eval(), lo cual ha sido fundamental para que JSON haya sido aceptado por parte de la
comunidad de desarrolladores AJAX, debido a la ubicuidad de JavaScript en casi cualquier navegador web.
Ejemplo:
Este es un ejemplo de los datos XML:
< persona>
< nombre>Jorge< /nombre>
< apellido>Pérez < /apellido>
< genero>masculino< /genero>
< edad>38< /edad>
< /persona>
Y estos son los mismos datos en JSON:
{
"nombre" : "Jorge",
"apellido" : "Pérez",
"genero" : "masculino",
"edad" : 38
}
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Dataflow/ALL/ALL/ALL?alt=json
JSONP
JSONP es el acrónimo de JavaScript Object Notation with Padding, es decir, una forma de
extensión de JSON para soportar llamadas entre dominios.JSONP se basa en la capacidad que
tienen los navegadores de añadir scripts de otros dominios para acceder a la información.
Sin embargo, el método JSONP implica un poco de colaboración extra de nuestro servidor de
datos, de forma que el servidor se tiene que encargar de meter dichos datos como parámetro
de una función que sí existe en nuetro código
Todos los servidores que expongan API en JSON, deberían (o deben) aceptar un parámetro GET
en el cual le especificamos cual será en nombre de la función recibidora en nuestro código
local, para que pueda ser más dinámico y personalizable.
Ejemplo:
JSONP({
"nombre" : "Jorge",
"apellido" : "Perez",
"genero" : "masculino",
"edad" : 38
})
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Dataflow/ALL/ALL/ALL?alt=json&callback=jsonp
SOAP
Es un protocolo estándar que define cómo dos objetos en diferentes procesos pueden comunicarse
por medio de intercambio de datos XML.
Además es un protocolo de mensajes entre computadores y especifica el formato de
mensaje que accede e invoca a los objetos, más que un objeto en particular.
Su objetivo primordial es:
Establecer un protocolo estándar de invocación de servicios remotos, basado en
protocolos estándares de Internet: HTTP para la transmisión y XML para la
codificación de datos.
2. Consulta de un DSD específico
Derivado de la consulta anterior, se puede observar en su archivo de salida que existen cierto número de flujos (información) disponibles con su correspondiente DSD. Ahí se nota, por ejemplo, que al flujo "DF_SHORT_TERM" le corresponde un DSD llamado "DSD_SHORT_TERM". Para extraer este DSD sólo resta tomar la URL de referencia y el parámetro {Resource} se substituye por el tipo de componente requerido, en este caso DataStructure, y en la posición de {ID} teclea el nombre del DSD, en este caso "DSD_SHORT_TERM". Es importante mencionar que se está utilizando el parámetro references=shallow, con esto se obtiene el DSD con todos sus componentes relacionados, tales como Catálogos (Codelists), HierarchicalCodelists, etc.
Nota: el tamaño del archivo resultante puede ser muy grande, ya que extrae todo el DSD con sus componentes relacionados, se puede extraer solamente el DSD sin los catálogos relacionados como se muestra en el siguiente paso, y posteriormente se podrá consultar los catálogos que se requieran como se muestra en el paso 4.
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/{RESOURCE}/{AGENCYID}/{ID}/{VERSION}?references={REFERENCES}
&alt={ALT}&callback={CALLBACK}
Restful
XML
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/DataStructure/ALL/DSD_SHORT_TERM/ALL?references=shallow
JSON
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/DataStructure/ALL/DSD_SHORT_TERM/ALL?alt=json&references=shallow
JSONP
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/DataStructure/ALL/DSD_SHORT_TERM/ALL?alt=json&callback=jsonp&
references=shallow
SOAP
3. Consulta de un DSD sin catálogos (Keyfamily)
El modo de estructurar esta consulta es muy semejante al anterior, con la única diferencia de que se omite el parámetro references o se define como ?=None. El archivo resultante será más pequeño que el anterior, ya que regresa solamente la Estructura de Datos (antes conocida como keyfamily), sin los catálogos (CodeLists) relacionados.
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/{RESOURCE}/{AGENCYID}/{ID}/{VERSION}?references={REFERENCES}&alt=
{ALT}&callback={CALLBACK}
Restful
XML
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/DataStructure/ALL/DSD_SHORT_TERM/ALL
JSON
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/DataStructure/ALL/DSD_SHORT_TERM/ALL?alt=json
JSONP
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/DataStructure/ALL/DSD_SHORT_TERM/ALL?alt=json&callback=jsonp
SOAP
4. Traer un catálogo (Codelist)
Para poder hacer alguna consulta de datos filtrada se necesitará al menos un valor de alguna dimensión, éstos se obtienen consultando los catálogos (Codelist), se toma como ejemplo "CL_INDICADORES_ST", que viene dentro del Keyfamily consultado del punto 3.
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/{RESOURCE}/{AGENCYID}/{ID}/{VERSION}?references={REFERENCES}&alt=
{ALT}&callback={CALLBACK}
Como Obtener un Codelist
Restful
XML
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Codelist/ALL/CL_INDICADORES_ST/ALL
JSON
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Codelist/ALL/CL_INDICADORES_ST/ALL?alt=json
JSONP
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Codelist/ALL/CL_INDICADORES_ST/ALL?alt=json&callback=jsonp
SOAP
5. Consulta de Datos
Para consultar los datos que se deseen se deberá seguir la siguiente sintaxis para la formación de la URL, la cual podemos observar que cambió al modo Data:
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/{FLOWID}/{PROVIDERID}?key={KEY}&startPeriod=
{STARTPERIOD}&endPeriod={ENDPERIOD}format={STRINGFORMAT}
Tanto el parámetro de {FLOWID} como el de {PROVIDERID} se obtienen de la consulta de flujos que se explicó en el punto 1. Estos serían los dos únicos parámetros obligatorios para obtener una consulta de datos válidos. Por ejemplo, para consultar los datos de Indicadores de Corto Plazo la URL sería (en formato genérico generic, aunque también podría ser compacto compact):
RESTFUL
XML
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/INEGI?key=ALL&format=generic
JSON
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/INEGI?key=ALL&format=generic&alt=json
JSONP
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/INEGI?key=ALL&format=generic&alt=json&callback=jsonp
PNG
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/INEGI?key=ALL&format=generic&alt=chart
CSV
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/INEGI?key=ALL&format=generic&alt=csv
SOAP
6. Consulta de Datos Condicionada
Si se quisiera hacer algún filtro a los datos para no extraer toda la información, esto sería posible condicionando la consulta de datos indicando los valores deseados para todas o algunas de las dimensiones que conformen la llave {KEY}. Esto es, a través de la consulta del DSD que se explicó en los puntos 2 y 3, se conocen las dimensiones y los catálogos/CodeLists con las que están relacionadas. Los valores posibles de cada catálogo, para poder condicionar la consulta se pueden obtener como se explicó en el punto 4. De esta manera, tomando otra vez como ejemplo el flujo de Indicadores de corto plazo ("DF_SHORT_TERM") los parámetros que llevará son:
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/{FLOWID}/{PROVIDERID}?key={KEY}&startPeriod={STARTPERIOD}&endPeriod={ENDPERIOD}&format={STRINGFORMAT}
| Identificador |
Valor |
| {KEY} |
ALL, para todo el flujo, o puede ser los valores de dimensiones separadas por punto, si se requieren más de dos valores en una dimensión específica deberán estar separadas por el signo "+", en el siguiente orden: REF_AREA.ADJUSTMENT.FREQ.INDICADOR_ST.PRICE
|
| {STARTPERIOD} |
Mensual, se compone de yyyy-mm |
| {ENDPERIOD} |
Mensual, se compone de yyyy-mm |
| format |
compact para formato compacto, generic para genérico |
RESTFUL
XML
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/INEGI?key=...C1161+C1162+C5004.&format=compact
JSON
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/INEGI?key=...C1161+C1162+C5004.&format=compact
&alt=json
JSONP
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/INEGI?key=...C1161+C1162+C5004.&format=compact
&alt=json&callback=jsonp
PNG
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/INEGI?key=...C1161+C1162+C5004.&format=compact
&alt=chart
CSV
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/INEGI?key=...C1161+C1162+C5004.&format=compact
&alt=csv
SOAP
7. Esquema de Conceptos (ConceptScheme)
Restful
XML
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/ConceptScheme/ALL/ALL/ALL
JSON
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/ConceptScheme/ALL/ALL/ALL?alt=json
JSONP
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/ConceptScheme/ALL/ALL/ALL?alt=json&callback=jsonp
SOAP
8. Esquema de Categorías (CategoryScheme)
Restful
XML
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/CategoryScheme/ALL/ALL/ALL
JSON
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/CategoryScheme/ALL/ALL/ALL?alt=json
JSONP
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/CategoryScheme/ALL/ALL/ALL?alt=json&callback=jsonp
SOAP
|
|
Gráfica genérica
|
| La graficación que permite este prototipo genérico está diseñada para visualizar cualquier flujo de series de tiempo. |
Prototipo 1
-
Gráfica dinámica con barra de zoom incluida que compara varias series con respecto al tiempo y con capacidad de presentar los datos de manera diaria, mensual, trimestral, anual o todos.
Navegadores: Funciona en Ópera, Safari, Chrome, Firefox e Internet Explorer 9.
|
|
|
Otros ejemplos de gráficas
|
Este conjunto de gráficas están diseñadas para visualizar un flujo de serie de tiempo en específico.
|
Prototipo 1
- Gráfica con línea básica y hace referencia al flujo de indicadores de corto plazo SHORT TERM para poder graficar.
Navegadores: Funciona en Ópera, Safari, Chrome, Firefox e Internet Explorer 9.
Prototipo 2
- Gráfica de tipo área y hace referencia al flujo PIB trimestral a precios constantes por actividad económica.
Navegadores: Funciona en Ópera, Safari, Chrome, Firefox e Internet Explorer 9.
Prototipo 3
- Gráfica con barra animada que hace referencia al flujo de indicadores de corto plazo SHORT TERM.
Navegadores: Funciona en Safari, Chrome, Firefox.
Prototipo 4
- Gráfica de área con barra de zoom y hace referencia al flujo PIB trimestral a precios constantes por actividad económica.
Navegadores: Funciona en Safari, Chrome y Firefox.
Prototipo 5
- Gráfica de movimiento con distintas funcionalidades y hace referencia al flujo de indicadores de corto plazo SHORT TERM para poder graficar.
Navegadores: Funciona en Ópera, Safari, Chrome, Firefox y Internet Explorer 9.
|
|
|
Hoja de Ayuda
|
En esta sección se podrá observar los tipos de consultas existentes para el Servicio Web, con sus distintas combinaciones. Para comenzar se tienen dos grandes agrupaciones, las consultas de ESTRUCTURAS y las de DATOS. En las consultas de estructuras se pueden extraer componentes identificables tales como CategoryScheme, DSD's, KeyFamilies, ConceptScheme, CodeList, HierarchicalCodelist, Dataflows y en las consultas de datos podremos observar las información deseada y acotarla según se requiera.
Cómo construir URL's para REST Estructuras http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/{RESOURCE}/{AGENCYID}/{ID}
/{VERSION}?references={REFERENCES}&alt={ALT}&callback={CALLBACK}
Donde:
| Identificador |
Descripción |
Posibles Valores |
| {RESOURCE} |
Proporciona el componente a traer |
DataStructure, Dataflow, Codelist, ConceptScheme, CategoryScheme, |
| {AGENCYID} |
Identificador para agencia proveedora del componente |
INEGI, SDMX, OECD, ALL (trae todos) |
| {ID} |
Identificador, nombre del componente a consultar |
Según componente |
| {VERSION} |
Versión del componente a consultar |
1.0, ALL (trae todos) |
| {REFERENCES} |
Parámetro para traer componentes directamente relacionados con el componente a consultar |
shallow, omitirlo no trae referencias |
| {ALT} |
Parámetro para dar diferentes tipos de formato a la salida |
json, omitirlo trae XML |
| {CALLBACK} |
Solo funciona cuando "alt=json", y nos entrega la salida json en modo función (jsonp) |
jsonp (catálogos, ConceptSchemes, etc. ) |
Datos
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/{FLOWID}/{PROVIDERID?key={KEY}&startPeriod={STARTPERIOD}&endPeriod=
{ENDPERIOD}&format={STRINGFORMAT}&alt={ALT}&callBack={CALLBACK}
Donde:
| Identificador |
Descripción |
Posibles Valores |
| {FLOWID} |
Identificador, nombre del flujo a consultar |
Cualquier ID de flujo (flowID), resultante de la consulta llamada "Todos los flujos de datos (Dataflow)", paso 1 del caso práctico; como por ejemplo: "DF_SHORT_TERM", "DF_PIB", "DF_COMTRADE", "DF_MDG" |
| {PROVIDERID} |
Identificador para agencia proveedora del Flujo |
INEGI, ALL (trae todos) |
| {KEY} |
Parámetro donde se declaran las dimensiones a filtrar separadas por puntos. Si se desea mas de un valor para una dimensión deberán estos separarse por comas, si se desean todas las descripciones de esa dimensión, deberán ir en blanco |
Según flujo a consultar, ejemplo: key=MX...C1161+C1162+C1162 |
| {STARTPERIOD} |
Fecha de inicio a consultar, si se omite obtendrá el primer registro |
Según el formato de fecha del flujo, ya sea, mensual (AAAA-MM), trimestral (AAAA-Qx), Anual (AAAA) |
| {ENDPERIOD} |
Fecha final a consultar, si se omite obtendrá el último registro |
Según el formato de fecha del flujo, ya sea, mensual (AAAA-MM), trimestral (AAAA-Qx), Anual (AAAA) |
| {FORMAT} |
Parámetro para identificar que tipo de mensaje de salida traerá, si se omite traerá genérico |
Compact, generic,crosssectional |
| {ALT} |
Parámetro para dar diferentes tipos de formato a la salida |
Json, chart, csv, omitirlo trae XML |
| {CALLBACK} |
Solo funciona cuando "alt=json", y nos entrega la salida json en modo función (jsonp) |
Campo abierto, deberá ser una cadena de caracteres |
Cómo construir QueryMessage SOAP
-
El "Query message" permite al estándar consultar bases de datos y Servicios Web compiladas para SDMX. Está enfocado para ser usado en extraer datos, metadatos, key family's, DSD's, Codelist, conceptos y otros metadatos estructurales. Los documentos de respuesta son formatos de datos (consultas de datos), formato de metadatos (consultas de metadatos), y mensaje de estructuras SDMX (para las consultas restantes).
-
QueryType, el elemento Query es el primer elemento para este “espacio” de nombres, el cual está referenciado por el empaquetado del mensaje SDMX, o podría estar dentro de otra envoltura, como el SOAP (protocolo para intercambio de mensajes). Contiene una consulta y los elementos son los siguientes:
Elementos:
-
DataWhereType.- Representa una consulta de datos. Contiene todas las cláusulas en esa consulta, representadas por sus elementos hijos. Los valores son los identificadores (ID's) del objeto referenciado:
- Dataset (xs: string)
- KeyFamily (xs:string)
- Dimension (DimensionType)
- Attribute (AttibuteType)
- Codelist (CodelistType)
- Time (TimeType)
- Category (CategoryType)
- Concept (xs:string)
- Dataprovider (xs:string)
- Dataflow (xs:string)
- Version (xs:string)
- Or (OrType)
- And (AndType)
-
AndType.- Para el elemento AND, cada uno de sus elementos “hijos” inmediatos, representan cláusulas, las cuales indican condiciones que deberán ser cumplidas. Si tuviera hijos A, B y C, entonces una respuesta legítima cumplirá con las condiciones A, B, y C. Los valores son los ID's de los objetos referenciados:
Elementos:
- DataSet (xs:string)
- MetaDataSer (xs:string)
- KeyFamily (xs:string)
- MetadataStructure (xs:string)
- Dimension (DimensionType)
- StructureComponent (StructureComponentType)
- Attribute (AttributeType)
- Codelist (CodelistType)
- Time (TimeType)
- Category (CategoryType)
- Concept (ConceptType)
- AgencyID (xs:string)
- DataProvider (xs:string)
- Dataflow (xs:string)
- Metadataflow (xs:string)
- Version (xs:string)
- Or (OrType)
- And (AndType)
-
OrType.- Los elementos "hijos" inmediatos representan cláusulas en una consulta en donde una de todas deberá ser cumplida para satisfacer la consulta. Si tuviera como hijos A, B ó C, entonces el resultado que cumpla con la condición A, B ó C será suficiente. Los valores son los ID's de los objetos referenciados: Elementos:
-
DataSet (xs:string)
-
MetaDataSer (xs:string)
-
KeyFamily (xs:string)
-
MetadataStructure (xs:string)
-
Dimension (DimensionType)
- StructureComponent (StructureComponentType)
-
Attribute (AttributeType)
-
Codelist (CodelistType)
-
Time (TimeType)
-
Category (CategoryType)
-
Concept (ConceptType)
-
AgencyID (xs:string)
-
DataProvider (xs:string)
-
Dataflow (xs:string)
-
Metadataflow (xs:string)
-
Version (xs:string)
-
Or (OrType)
- And (AndType)
-
DimensionType.- Los elementos "dimensión" contienen un valor único a ser buscado de una llave dentro de un Dataset. El atributo ID, representa la ID de la dimensión. Si el contenido está vacío entonces la consulta es para cualquier dimensión con el nombre dado. Si el nombre del atributo no se encuentra, entonces la consulta es para el valor dado dentro de cualquier dimensión.
-
AttributeType.- Los elementos "atributos" contienen un único valor de un atributo consultado.
-
CodelistType.- El elemento permite especificar un valor único encontrado dentro del contenido del elemento Codelist, y el nombre del Codelist deberá estar especificado en el atributo name. Si no se especifica el contenido entonces la consulta será para todo el Codelist nombrado, si el atributo name es omitido entonces el valor es buscado en cualquier Codelist.
-
CategoryType.- El elemento Category permite realizar una búsqueda dentro de una categoría específica, la cual se define dentro del atributo name. Si no hay contenido dentro del elemento entonces la búsqueda es para la categoría nombrada en name, si el nombre no es suministrado, entonces el valor de la categoría será buscado en todas las categorías disponibles.
-
KeyFamilyWhereType.- Este elemento representa una consulta de uno o varios KeyFamiliy. Contiene todas las cláusulas en esa consulta dentro de sus elementos "hijo". Los valores son los ID's de los objetos referenciados.
Elementos:
- KeyFamily (xs:string)
- Dimension (DimensioType)
- Attributte (AttributeType)
- Codelist (CodelistType)
- Category (CategoryType)
- Concept (ConceptType)
- AgencyID (xs:string)
- Version (xs:string)
- Or (OrType)
- And (AndType)
-
CodelistWhereType.- El elemento representa una consulta para uno o varios KeyFamily. Contiene todas las cláusulas en una consulta, representadas por sus elementos "hijos". Los valores son los ID's de los objetos referenciados.
Elementos:
- Codelist (CodelistType)
- AgencyId (xs:string)
- Version (xs:string)
- Or (OrType)
- And (AndType)
-
ConceptWhereType.- Este elemento representa una consulta de uno o varios conceptos. Contiene todas las cláusulas en esa consulta, representada por sus elementos "hijos". Los valores son los ID's del objeto referenciado.
Elementos:
- Concept (xs:string)
- AgencyID (xs:string)
- Version (xs:string)
- Or (OrType)
- And (AndType)
-
TimeType.- Este elemento contiene el punto de tiempo o periodo que deberá mostrar los resultados. Se usan "StarTime" y "EndTime".
-
HierarchicalCodelistWhereType.- Este elemento representa una consulta de uno o varios HierarchicalCodelist. Como cualquier otro objeto mantenible deberá ser consultado para utilizar información relacionada con su Agencia, ID, y/o Versión. Cualquier campo nulo será tomado como todo tipo de datos.
Elementos:
- AgencyID (xs:string)
- ID (xs:string)
- Version (xs:string)
-
DataflowWhereType.- Este elemento representa una búsqueda de uno o varios Dataflows. Como cualquier otro objeto mantenible deberá ser consultado para utilizar información relacionada con su Agencia, ID, y/o Versión. Cualquier campo nulo será tomado como todo tipo de datos.
Elementos:
- AgencyID (xs:string)
- ID (xs:string)
- Version (xs:string)
-
OrganizationSchemeType.- Este elemento representa una búsqueda de uno o varios OrganizationScheme. Como cualquier otro objeto mantenible deberá ser consultado para utilizar información relacionada con su Agencia, ID, y/o Versión. Cualquier campo nulo será tomado como todo tipo de datos.
Elementos:
- AgencyID (xs:string)
- ID (xs:string)
- Version (xs:string)
-
ConceptSchemeType.- Este elemento representa una búsqueda de uno o varios ConceptScheme. Como cualquier otro objeto mantenible deberá ser consultado para utilizar información relacionada con su agencia, ID, y/o versión. Cualquier campo nulo será tomado como todo tipo de datos.
Elementos:
- AgencyID (xs:string)
- ID (xs:string)
- Version (xs:string)
-
CategorySchemeWhereType.- El elemento CategorySchemeWhere representa una búsqueda de uno o varios CategoryScheme. Como cualquier otro objeto mantenible deberá ser consultado para utilizar información relacionada con su Agencia, ID, y/o Versión. Cualquier campo nulo será tomado como todo tipo de datos.
Elementos:
- AgencyID (xs:string)
- ID (xs:string)
- Version (xs:string)
|
| Tutorial para construir gráfica genérica |
Tecnologías utilizadas: Breve explicación
HTML (HyperText Markup Language)
HTML es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
Ejemplo:
< html>
< head>
< script type="text/javascript">
function hola(){
alert("hola);
}
< /script>
< /head>
< body>
< div>
< a href="javascript:hola();">< /a>
< /div>
< /body>
< /html>
JAVASCRIPT
Javascript es un lenguaje de programación que permite a los desarrolladores crear acciones en sus páginas web. Javascript es un lenguaje que puede ser utilizado por profesionales y para quienes se inician en el desarrollo y diseño de sitios web. No requiere de compilación ya que el lenguaje funciona del lado del cliente, los navegadores son los encargados de interpretar estos códigos. Javascript tiene la ventaja de ser incorporado en cualquier página web, puede ser ejecutado sin la necesidad de instalar otro programa para ser visualizado.
JQUERY
jQuery es una biblioteca o "framework" de JavaScript, que permite simplificar la manera de interactuar con los
documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la
técnica AJAX a páginas web. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas
en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta
biblioteca se logran grandes resultados en menos tiempo y espacio.
Url: jquery
Tutorial: Visualizar gráfica genérica
Objetivo
Al final de este tutorial un desarrollador web podrá construir una gráfica que visualiza la información publicada
en flujos SDMX con el formato de serie de tiempo.
Pasos previos
Estructura de un html
Esta es la estructura básica de una página web:
< HTML>
< HEAD>
< TITLE>página web< /TITLE>
< /HEAD>
< BODY>
< H1 align="center" >página web < /H1>
< HR>
< P>contenido.< /P>
< /BODY>
< /HTML>
Todo lo que no está encerrado entre los símbolos < y >, es el contenido de la página, pero ¿y lo que está entre esos paréntesis angulares (signo mayor que-signo menor que)? pues esas son las etiquetas que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el título de la página, etc. Cada etiqueta tiene un comienzo y un fin:
< ETIQUETA parámetros> ... < /ETIQUETA>
Apertura y un cierre. Algunas etiquetas (como < BR> cambio de línea o < HR> línea horizontal) no llevan cierre. La primera etiqueta que tenemos es < HTML> terminada al final del documento con < /HTML>, eso quiere decir que estamos ante un HTML:
< HTML> ... < /HTML>
Existe una cabecera, que se reconocerá porque está limitada con la etiqueta < HEAD> < /HEAD>.
El contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la página en sí. Contiene por ejemplo el título que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto:
< HEAD>
< TITLE>Mi página web< /TITLE>
< /HEAD>
La otra parte es el cuerpo o < BODY> < /BODY>, es el contenido de la página web. Tiene una etiqueta con cierre:
< BODY> ... < /BODY>
Y ahora el contenido:
< H1 align="center"> Mi primera página web< /H1>
Con esto colocaremos el texto en formato < H1> (o cabecera 1) y centrado (align="center"),
o sea, en tamaño grande y centrado en la página, una forma de resaltar la frase. Ahora separamos esa frase por medio de una línea horizontal: < HR>
Como ves este es un ejemplo de etiqueta sin cierre. Esto es un texto dentro de un párrafo (< P>< /P>), esto es, un bloque de texto con un espacio por delante y otro por detrás:
< P>contenido.< /P>
Capas de una página web
Las capas, layouts o divs son la misma cosa. Para tener un concepto definido, podemos imaginarlos como contenedores o bloques donde
podemos meter lo que se necesite (imágenes, texto, animaciones, otro bloque, o todo al mismo tiempo) a los que se le asigna un ancho,
alto y posición, de esta manera consiguiendo la estructura que queremos.
Ejemplo gráfico:

Tenemos 3 capas estructuradas de la siguiente manera:
- Capa 1: es la capa principal y contenedora.
- Capa 2: capa dentro de la capa contenedora 1 y alineada a la izquierda (float:left;).
- Capa 3: misma que la capa 2, solo que tiene un margen con respecto a esta última (float:left; margin: 10px;).
Proceso
Paso 1.
Crear una carpeta llamada SDMX en cualquier lugar del disco duro.
Paso 2.
Dentro de la carpeta SDMX crear una carpeta llamada "css", la cual contendrá las hojas de estilo necesarias para
que la página tenga un diseño predeterminado.
Paso 3.
Crear dentro de la carpeta SDMX una carpeta llamada "js", y descargar las siguientes librerías dentro de esta
carpeta ("js"):
Clic en descarga de esta librería y guardarla dentro de la carpeta js que se ubica dentro de la carpeta SDMX.
Descomprimir el archivo con winrar o con el descompactador por default de windows, fuera de la carpeta de SDMX y buscar el archivo "highstock" dentro de la carpeta "js", y pegar el archivo dentro de la carpeta "js" que se encuentra dentro de la carpeta SDMX. De este archivo descomprimido entrar en la carpeta modules y copiar el archivo "exporting" a la carpeta js que se encuentra de la carpeta SDMX.
Dar formato al código a través de "netbeans"; esto es, pegar el código fuente de la librería en "netbeans" y dar clic derecho sobre el código y dar "Format". Esto es para facilitar la ubicación de las siguientes líneas de código y modificarlas:
Línea: 2507 a.plotTop-25 cambiar por -11
Línea: 2508 a.chartWidth - a.plotLeft - a .plotWidth cambiar por 65
Línea: 4468 a.name cambiar por this.name
Línea: 1000 T[0].key cambiar por T[0].x
Si no se tiene "netbeans", abrir la librería con un bloc de notas y ubicar con el buscador que tiene por default, las líneas que se mencionaron anteriormente y modificarlas.
Nota: Si no tiene winrar descargarlo de aquí: winrar.
Paso 4. Dentro de la carpeta SDMX crear un documento de texto y renombrarlo como "index". Abrirlo con el bloc de notas,
 e insertar el siguiente código:
Código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<link rel="stylesheet" type="text/css" href="css/baseline.compress.css" />
<link rel="stylesheet" type="text/css" href="css/sitio.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jsr_class.js"></script>
<script type="text/javascript" src="js/descripciones.js"></script>
<script type="text/javascript" src="js/highstock.js"></script>
<script type="text/javascript" src="js/graficar.js"></script>
<script type="text/javascript" src="js/core_highstock.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
</head>
<body>
<a href="index.jsp"><b >Regresar</b></a>
<div id="page">
<div>
<b>Graficador de series de tiempo</b>
<pre>Notas importantes:
-Las gráficas pueden tardar un poco en visualizarse debido a la cantidad de información requerida
y además al tamaño de los <em>Codelist</em> necesarios para presentar la descripción de las series,suele ser muy grande
-Si se utiliza la barra de zoom que se encuentra debajo de la gráfica, utilizar los botones 1m, 3m, All, etc...
para resetear las líneas de las series, en el caso de que desaparezcan.
-Para comenzar a usar esta aplicación dar clic en alguna url Rest SDMX y clic en el botón visualizar
ejemplo; en el caso de que la url Rest SDMX se filtrada, modificarla en el cuadro de texto después de
hacer clic en alguna de ellas.
-Si se desea obtener la información de los atributos a nivel de observación, dar clic en algún
símbolo del apuntador cuando se coloca el cursor del mouse sobre alguna línea de la gráfica.
-Así como, si desea observar alguna serie(línea) en especial, dirigirse a la tabla que se encuentra
debajo de la gráfica dar clic sobre alguna/s fila/s que se desee para mostrar u ocultar dicha serie.
</pre>
<div id="highstockchart">
<p>Ejemplos de REST:</p>
<A HREF="javascript:void(0)" onClick="document.getElementById('camposelector').value+='http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/ALL?key=...C1161+C1162+C5001+C5002+C5003.&startPeriod=2008-1&endPeriod=2010-1&format=compact&alt=json&callback=getdatos'">http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/ALL?key=...C1161+C1162+C5001+C5002+C5003.&startPeriod=2008-1&endPeriod=2010-1&format=compact&alt=json&callback=getdatos</A>
<p></p>
<A HREF="javascript:void(0)" onClick="document.getElementById('camposelector').value += 'http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/data/DF_PIB/INEGI?key=.........Z........&startPeriod=2004-Q1&endPeriod=2006-Q3&format=compact&alt=json&callback=getdatos';">http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/data/DF_PIB/INEGI?key=.........Z........&startPeriod=2004-Q1&endPeriod=2006-Q3&format=compact&alt=json&callback=getdatos</A>
<p></p>
<A HREF="javascript:void(0)" onClick="document.getElementById('camposelector').value += 'http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_MDG/INEGI?key=..SH_IMM_MEAS+EN_ATM_ODS+SH_DYN_IMRT.....&format=compact&alt=json&callback=getdatos';">http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_MDG/INEGI?key=..SH_IMM_MEAS+EN_ATM_ODS+SH_DYN_IMRT.....&format=compact&alt=json&callback=getdatos</A>
<form>
Escriba_URL:
<input type="Text" name="camposelector" id="camposelector"></input>
<input type="reset" id="boton2" value="Visualizar ejemplo"></input>
</form>
<script type="text/javascript" >
$(document).ready(function () {
$("#boton2").click(function () {
var url = $("#camposelector").attr("value");
var obj = document.getElementById('test');
obj.innerHTML = "";
hs.expand(document.getElementById('container'));
sdmx(url);
});
});
</script>
<div id="container" style="height:500px;"></div>
<div id="test" style="overflow:auto; overflow-y:auto; height:200px;width:1000px; padding:0;">
</div>
</div>
</div>
<a href="http://www.inegi.org.mx//default.aspx?" title="INEGI"><img src="images/INEGI.gif" style="width:100px; margin: 2em;" alt="Instituto Nacional de Estadística y Geografía " /></a>
</div >
<script type="text/javascript" src="js/sdmx/highstock/exporting.js"></script>
</body>
</html>
Guardar el documento con el nombre "index" con extensión .html y verificando que en el selector "Tipo:" diga "Todos los archivos".
Se crea otro documento con el nombre index pero de tipo html. Eliminar el archivo .txt que creamos previamente con el nombre de "index".
Paso 5.
Descargar la siguiente librería de hoja de estilo en la siguiente página, clic en download:
Descomprimir el archivo descargado en otra carpeta que no sea SDMX y buscar en la carpeta "baseline.0.5.3"--->
css--->compressed el archivo "baseline.compress.css" y guardarlo dentro de la carpeta css que se encuentra en la carpeta SDMX que creamos.
Paso 6.
Abrir la carpeta css y crear un documento de texto con el nombre "sitio", abrirlo con el bloc de notas y colocar el siguiente código:
Código
body {
text-align: center;
background-color: white;
}
p + p {
text-indent: 0 ; }
p {
padding-bottom: 1em;
}
pre {
padding: 0.5em;
margin: 1em 2em;
font-family: monaco, monospace;
background-color: #dadada;
}
h3, div.ref-section {
padding-top: 1.5em;
}
h1 {
padding-bottom: 1em;
}
h1.mainhead {
font-weight: bold;
text-align:right;
color: white;
}
h1.subhead {
}
h1 span.unselected {
color:#dadada;
}
span.arrow {
color:white;
}
h1 span.selected {
color:black;
font-weight:bold;
}
h1 a.menu {
text-decoration: none;
}
.toc a {
color: orange;
font-weight: bold;
text-decoration: none;
}
div.ref-section h2 {
cursor: pointer;
}
blockquote {
background-color: #FBF9EA;
border: 1px solid #E2E1D5;
margin: 2em;
}
h2 {
margin-top: 2em ;
padding: 0.2em 1em;
border-bottom: 1px solid #dadada;
color: white;
font-size: 16px;
font-weight: bold;
background-color: lightblue;
-moz-border-radius: 8px;
border-radius: 8px;
}
div.ref thead th {
cursor: pointer;
}
span.loading {
color:white;
font-weight:bold;
background-color: orange;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0.5em;
}
div.ref {
display:none;
height:400px;
overflow:auto;
}
div#page {
clear: both;
margin: 4em auto;
text-align: left;
background-color: white;
padding: 1em;
width: 1000px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.code {
font-family: monospace;
background-color: #dadada;
padding: 0.3em;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 1px 1px 1px #ffffff;
}
a.back2top {
position:relative;
float:right;
font-size: smaller;
text-decoration:none;
color:orange;
}
span.hover {
color: orange ;
text-decoration: underline;
}
Guardar el documento con extensión .css y verificando que en el selector "Tipo:" diga "Todos los archivos". Se crea otro documento con el nombre "sitio"
pero de tipo html. Eliminar el archivo .txt que creamos previamente con el nombre de "sitio".
Paso 7.
Crear un documento de texto dentro de la carpeta js y renombrarlo como "core_highstock" e insertar el siguiente código:
Código
var URLDATOS,URLFLUJOREF;
var FLUJO,ATRIBUTOS_SERIES,CODELIST_REF_AND_AGENCY,DATOS,DESCRIPCION_DATAFLOW;
function sdmx(urldatos)
{
this.URLDATOS=urldatos;
var url2=urldatos.split("/");
this.FLUJO=url2[7];
this.URLFLUJOREF='http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Dataflow/ALL/'+FLUJO+'/ALL?references=shallow&alt=json&callback=getflujoref'
bObj = new JSONscriptRequest(urldatos);
// Build the dynamic script tag
bObj.buildScriptTag();
// Add the script tag to the page
bObj.addScriptTag();
}
function getdatos(datos)
{
DATOS=datos;
//DATOS_GRAFICAR=getdatos(datos);
ATRIBUTOS_SERIES=getatributos_serie(datos);
ATRIBUTOS_OBSERVACION=getatributos_observacion(datos);
bObj.removeScriptTag();
bObj = new JSONscriptRequest(URLFLUJOREF);
// Build the dynamic script tag
bObj.buildScriptTag();
// Add the script tag to the page
bObj.addScriptTag();
}
function getflujoref(flujoref){
CODELIST_REF_AND_AGENCY_SERIES=getcodelist_ref_and_agency_series(flujoref);
CODELIST_REF_AND_AGENCY_OBSERVACIONES=getcodelist_ref_and_agency_observaciones(flujoref);
var dsd=flujoref.RegistryInterface.QueryStructureResponse['registry:Dataflows']['structure:Dataflow']['structure:KeyFamilyRef']['structure:KeyFamilyID'];
DESCRIPCION_DATAFLOW=flujoref.RegistryInterface.QueryStructureResponse['registry:Dataflows']['structure:Dataflow']['structure:Name']['#text'];
bObj.removeScriptTag();
sdmxdescrip(CODELIST_REF_AND_AGENCY_SERIES,dsd,DATOS,CODELIST_REF_AND_AGENCY_OBSERVACIONES,DESCRIPCION_DATAFLOW);
}
function getcodelist_ref_and_agency_series(obj){
var dimensiones=obj.RegistryInterface.QueryStructureResponse['registry:KeyFamilies']['structure:KeyFamily']['structure:Components']['structure:Dimension'];
var atributos=obj.RegistryInterface.QueryStructureResponse['registry:KeyFamilies']['structure:KeyFamily']['structure:Components']['structure:Attribute'];
var info=[],temporal=[];
var flagesnoesdimension=false,find=true;
$.each(ATRIBUTOS_SERIES,function(h,r){
$.each(r,function(q,n){
var objnew={
name:n.name,
value:n.value,
codelist:"",
codelistagency:""
}
if(flagesnoesdimension==false)
{
$.each(dimensiones,function(a,k){
if(n.name==k['@conceptRef'])
{
if(dimensiones.length-1==a)
{
flagesnoesdimension=true;
objnew.codelist=k['@codelist'];
objnew.codelistagency=k['@codelistAgency'];
info.push(objnew);
return false
}
else
{
objnew.codelist=k['@codelist'];
objnew.codelistagency=k['@codelistAgency'];
info.push(objnew);
return false
}
}
else
return ;
});
}
else
{
$.each(atributos,function(f,b){
if(b['@conceptRef']==n.name)
{
objnew.codelist=b['@codelist'];
objnew.codelistagency=b['@codelistAgency'];
info.push(objnew);
return false;
}
else
return;
});
}
});
temporal.push(info);
flagesnoesdimension=false
info=[];
});
return temporal;
}
function getcodelist_ref_and_agency_observaciones(obj)
{
var temp=[];
var atributos=obj.RegistryInterface.QueryStructureResponse['registry:KeyFamilies']['structure:KeyFamily']['structure:Components']['structure:Attribute'];
var arr=[],arrfinal=[];
$.each(ATRIBUTOS_OBSERVACION,function(d,q){
$.each(q,function(h,i){
$.each(i,function(b,n){
var obj9={
name:n.name,
value:n.value,
codelist:undefined,
codelistagency:undefined
}
$.each(atributos,function(b,y){
if(y['@conceptRef']==n.name)
{
obj9.codelist=y['@codelist'];
obj9.codelistagency=y['@codelistAgency'];
return false;
}
else
return
});
temp.push(obj9)
});
arr.push(temp);
temp=[];
});
arrfinal.push(arr);
arr=[];
});
return arrfinal;
}
function getatributos_serie (obj)
{
if(obj.CompactData['nsi:DataSet']['nsi:Series'].length>1)
{
var arr=[];
var newarr=[];
var arrfinal=[];
var atrib=obj.CompactData['nsi:DataSet']['nsi:Series'];
$.each(atrib[0],function(h){
if('nsi:Obs'!=h)
arr.push(h);
else
return;
});
$.each(arr,function(j){
var temp= arr[j].split("@");
$.each(temp,function(l){
if(temp[l]=="")
return;
else
newarr.push(temp[l])
});
})
var temp=[];
$.each(atrib,function(d,e){
$.each(newarr,function(m){
var obj3={
name:newarr[m],
value:e['@'+newarr[m]]
}
temp.push(obj3);
});
arrfinal.push(temp);
temp=[];
});
return arrfinal;
}
////////
else
{
var arr=[];
var newarr=[];
var arrfinal=[];
var atrib=obj.CompactData['nsi:DataSet']['nsi:Series'];
$.each(atrib,function(h){
if('nsi:Obs'!=h)
arr.push(h);
else
return;
});
$.each(arr,function(j){
var temp= arr[j].split("@");
$.each(temp,function(l){
if(temp[l]=="")
return;
else
newarr.push(temp[l])
});
})
var temp=[];
$.each(newarr,function(m){
var obj3={
name:newarr[m],
value:atrib['@'+newarr[m]]
}
temp.push(obj3);
});
arrfinal.push(temp);
return arrfinal;
}
}
function getatributos_observacion(obj)
{
var arr=[];
var newarr=[];
var arrfinal=[];
var arrobs=[];
var temp=[];
if(obj.CompactData['nsi:DataSet']['nsi:Series'].length>1)
{
var atrib=obj.CompactData['nsi:DataSet']['nsi:Series'];
$.each(atrib[0]['nsi:Obs'][0],function(h){
arr.push(h);
});
$.each(arr,function(j){
var temp= arr[j].split("@");
$.each(temp,function(l){
if(temp[l]=="")
return;
else
newarr.push(temp[l])
});
})
$.each(atrib,function(d,e){
$.each(e["nsi:Obs"],function(g){
$.each(newarr,function(m){
if(newarr[m]=='TIME_PERIOD'||newarr[m]=='TIME'||newarr[m]=='OBS_VALUE'||newarr[m]=='OBS')
{
if(newarr[m]=='OBS_VALUE'||newarr[m]=='OBS')
{
var obj3={
name:newarr[m],
value:e['nsi:Obs'][g]['@'+newarr[m]]
}
temp.push(obj3);
}
else
{
var obj3={
name:newarr[m],
value:""
}
temp.push(obj3);
}
}
else
{
var obj6={
name:newarr[m],
value:e['nsi:Obs'][g]['@'+newarr[m]]
}
temp.push(obj6);
}
});
arrobs.push(temp);
temp=[];
});
arrfinal.push(arrobs);
arrobs=[];
});
return arrfinal;
}
else
{
if(obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs'].length>1)
{
var atrib=obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs'][0];
$.each(atrib,function(h){
arr.push(h);
});
$.each(arr,function(j){
var temp= arr[j].split("@");
$.each(temp,function(l){
if(temp[l]=="")
return;
else
newarr.push(temp[l])
});
})
var temp=[];
var atrib_obs=obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs']
$.each(atrib_obs,function(g,e){
$.each(newarr,function(m){
if(newarr[m]=='TIME_PERIOD'||newarr[m]=='TIME'||newarr[m]=='OBS_VALUE'||newarr[m]=='OBS')
{
if(newarr[m]=='OBS_VALUE'||newarr[m]=='OBS')
{
var obj3={
name:newarr[m],
value:e['@'+newarr[m]]
}
temp.push(obj3);
}
else
{
var obj3={
name:newarr[m],
value:""
}
temp.push(obj3);
}
}
else
{
var obj6={
name:newarr[m],
value:e['@'+newarr[m]]
}
temp.push(obj6);
}
});
arrobs.push(temp);
temp=[];
});
arrfinal.push(arrobs);
return arrfinal;
}
else
{
var atrib=obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs'];
$.each(atrib,function(h){
arr.push(h);
});
$.each(arr,function(j){
var temp= arr[j].split("@");
$.each(temp,function(l){
if(temp[l]=="")
return;
else
newarr.push(temp[l])
});
})
var temp=[];
$.each(newarr,function(m){
if(newarr[m]=='TIME_PERIOD'||newarr[m]=='TIME'||newarr[m]=='OBS_VALUE'||newarr[m]=='OBS')
{
var obj3={
name:newarr[m],
value:""
}
temp.push(obj3);
}
else
{
var obj3={
name:newarr[m],
value:atrib['@'+newarr[m]]
}
temp.push(obj3);
}
});
arrfinal.push(temp);
return arrfinal;
}
}
}
Guardar el documento con extensión js y verificando que en el selector "Tipo:" diga "Todos los archivos". Se crea otro documento con el nombre
"core_highstock" pero de tipo html. Eliminar el archivo .txt que creamos previamente con el nombre de "core_highstock".
Paso 8.
Crear dentro de la carpeta js un documento de texto y renombrarlo como "descripciones" e insertar el siguiente código:
Código
var OBJ, ATRIBUTOSCONDESCRIPCION, SERIESDATOS, ATRIBUTOSNIVELOBS;
function sdmxdescrip(dimen_atrib_codelistref, DSD, datos, atributosnivelobs, descripcion_flujo)
{
FLUJONAME=descripcion_flujo;
ATRIBUTOSNIVELOBS=atributosnivelobs;
SERIESDATOS=datos;
OBJ=dimen_atrib_codelistref;
var url= 'http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/DataStructure/ALL/'+DSD+'/ALL?references=shallow&alt=json&callback=getdescripciones';
bObj = new JSONscriptRequest(url);
// Build the dynamic script tag
bObj.buildScriptTag();
// Add the script tag to the page
bObj.addScriptTag();
}
function getdescripciones(objc)
{
OBJC=objc;
var temp=[],arrfinal=[];
$.each(OBJ,function(b,k){
$.each(k,function(j,u){
if(u.codelist!=undefined)
{
var obj={
name:u.name,
value:getdescripcion_codelist(u.codelist,u.codelistagency,u.value)
}
temp.push(obj);
}
else
{
var obj={
name:u.name,
value:u.value
}
temp.push(obj);
}
});
arrfinal.push(temp);
temp=[];
});
///////////////
var temp2=[],arrfinal2=[];var arrr=[]
$.each(ATRIBUTOSNIVELOBS,function(b,k){
$.each(k,function(j,u){
$.each(u,function(f,y){
if(y.codelist!=undefined)
{
var obj={
name:y.name,
value:getdescripcion_codelist(y.codelist,y.codelistagency,y.value)
}
temp2.push(obj);
}
else
{
var obj={
name:y.name,
value:y.value
}
temp2.push(obj);
}
});
arrr.push(temp2);
temp2=[];
});
arrfinal2.push(arrr)
arrr=[];
});
bObj.removeScriptTag();
graficarhighstock(arrfinal, SERIESDATOS, arrfinal2, FLUJONAME);
}
function getdescripcion_codelist(namecodelist,agencycodelist,valor){
var descripcion,find=false;
var codelist=OBJC.RegistryInterface.QueryStructureResponse['registry:CodeLists']['structure:CodeList'];
$.each(codelist,function(v,t){
if(t['@id']==namecodelist&&t['@agencyID']==agencycodelist&&find==false)
{
if(t['structure:Code'].length>1&&find==false)
{
$.each(t['structure:Code'],function(j,k){
if(k['@value']==valor)
{
if(k['structure:Description'].length>1)
{
$.each(k['structure:Description'],function(e,m){
if(m['@xml:lang']!='fr')
{
descripcion=m['#text'];
find=true;
return false
}
else
return;
});
}
else
{
descripcion=k['structure:Description']['#text'];
find=true;
return false
}
}
else
return
});
}
else
t['structure:Code'];
}
else
{
if(find==true)
{
return false;
}
else
return;
}
});
return descripcion
}
Guardar el documento con extensión .js y verificando que en el selector "Tipo:" diga "Todos los archivos". Se crea otro documento con el nombre
"descripciones" pero de tipo html. Eliminar el archivo .txt que creamos previamente con el nombre de "descripciones".
Paso 9.
Crear un documento de texto dentro de la carpeta js y renombrarlo como "graficar" e insertar el siguiente código:
Código
function graficarhighstock(arr,datos,atributosobs,nameflujo){
NAMES=getdatoscondescripcion(datos,arr,atributosobs);
var seriesOptions=[],
yAxisOptions = [],
colors = Highcharts.getOptions().colors;
seriesOptions=NAMES;
//var tam="<a href='#' onclick"+"="+"holamundo("+"'"+arr[u]+"'"+');'+">"+A+"</a>";
//var v1=document.createElement('a');
//7v1.setAttribute('href','www.google.com.mx');
//v1.appendChild(document.createTextNode('hola'));
$.each(seriesOptions, function(u) {
// create one y axis for each series in order to be able to compare them
yAxisOptions[u] = {
alternateGridColor: null,
gridLineWidth: u ? 0 : 1, // only grid lines for the first series
opposite: u ? true : false,
minorGridLineWidth: 0,
title: {
text: null,//"<a href='#' onclick"+"="+"holamundo("+"'"+arr[u]+"'"+');'+">"+A+"</a>",//"Series"+u,
style: {
color: colors[u]
}
},
lineWidth: 2,
lineColor: colors[u]
};
});
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
load: function(event) {
alert ('Visualización cargada');
hs.loading.style.left = '-9999px';
}
} ,
alignTicks: false
},
rangeSelector: {
selected: 'All'
},
title: {
text: nameflujo
},
yAxis: yAxisOptions,
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText:Highcharts.dateFormat(' %b %e, %Y', this.x)+'<br>'+"ATRIBUTOS A NIVEL DE OBSERVACIÓN"+'<br>'+this.options.name2 +'<br> ',
width: 400
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: seriesOptions
},
function(chart){
$(chart.series).each(function(i, serie){
if(seriesOptions.length!=i)
{
var tbl = "<table>";
tbl += thead2(arr);
tbl += tbody2(arr,i);
tbl += "</table>";
$('<li style="color: '+serie.color+';width:100px;font-size:5px; ">'+tbl+'</li>').click(function(){
serie.visible ? serie.hide() : serie.show();
}).appendTo('#test')
}
else
return false;
});
}
);
}
function getdatoscondescripcion(obj,atributos_series,atributosobs){
var frecuencia;
var tam=atributos_series[0];
$.each(tam,function(p){
if(tam[p].name=='FREQ')
{
frecuencia=tam[p].value;
return false
}
else
return;
});
var tamanio=obj.CompactData['nsi:DataSet']['nsi:Series'].length;
if(tamanio>1)
{
var arr = [];
$.each( atributosobs, function(ii,rr) {
var objg = {
data: [],
yAxis:ii
};
if(frecuencia=='Monthly')
{
$.each(rr,function(zz,cc){
var timeperiod="";
$.each(cc,function(dd,tt){
if(tt.name=='TIME_PERIOD'||tt.name=='TIME')
timeperiod=tt.name
if(tt.name=='OBS_VALUE'||tt.name=='OBS')
{
var dia='01-';
dia+=obj.CompactData['nsi:DataSet']['nsi:Series'][ii]['nsi:Obs'][zz]["@"+timeperiod];
var date = dia.split('-');
var x = Date.UTC(date[1], date[2]-1,date[0])
objg.data.push({
name:'OBS_VALUE',
x:x,
y:parseFloat(tt.value),
name2:getobs_grafica(cc)
});
}
else
return
});
});
}
if(frecuencia=='Quarterly')
{
$.each(rr,function(zz,cc){
var timeperiod="";
$.each(cc,function(dd,tt){
if(tt.name=='TIME_PERIOD'||tt.name=='TIME')
timeperiod=tt.name
if(tt.name=='OBS_VALUE'||tt.name=='OBS')
{
var dia='01-';
dia+=obj.CompactData['nsi:DataSet']['nsi:Series'][ii]['nsi:Obs'][zz]["@"+timeperiod];
var date = dia.split('-');
switch(date[2])
{
case 'Q1':
date[2]='03';
break;
case 'Q2':
date[2]='06';
break;
case 'Q3':
date[2]='09';
break;
case 'Q4':
date[2]='12';
break;
}
var x = Date.UTC(date[1], date[2]-1,date[0])
objg.data.push({
name:'OBS_VALUE',
x:x,
y:parseFloat(tt.value),
name2:getobs_grafica(cc)
});
}
else
return
});
});
}
if(frecuencia=='Annual'||frecuencia=='Two-year average'||frecuencia=='Undeterminated')
{
$.each(rr,function(zz,cc){
var timeperiod="";
$.each(cc,function(dd,tt){
if(tt.name=='TIME_PERIOD'||tt.name=='TIME')
timeperiod=tt.name
if(tt.name=='OBS_VALUE'||tt.name=='OBS')
{
var dia='01-';
dia+='12-'
dia+=obj.CompactData['nsi:DataSet']['nsi:Series'][ii]['nsi:Obs'][zz]["@"+timeperiod];
var date = dia.split('-');
var x = Date.UTC(date[2], date[1]-1,date[0])
objg.data.push({
name:'OBS_VALUE',
x:x,
y:parseFloat(tt.value),
name2:getobs_grafica(cc)
});
}
else
return
});
});
}
arr.push(objg);
});
return arr;
}
else
{
var arr2 = [];
$.each( atributosobs, function(ii,rr) {
var objg = {
data: [],
yAxis:ii
};
if(frecuencia=='Monthly')
{
$.each(rr,function(zz,cc){
var timeperiod="";
$.each(cc,function(dd,tt){
if(tt.name=='TIME_PERIOD'||tt.name=='TIME')
timeperiod=tt.name
if(tt.name=='OBS_VALUE'||tt.name=='OBS')
{
var dia='01-';
dia+=obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs'][zz]["@"+timeperiod];
var date = dia.split('-');
var x = Date.UTC(date[1], date[2]-1,date[0])
objg.data.push({
name:'OBS_VALUE',
x:x,
y:parseFloat(tt.value),
name2:getobs_grafica(cc)
});
}
else
return
});
});
arr2.push(objg);
}
if(frecuencia=='Quarterly')
{
$.each(rr,function(zz,cc){
var timeperiod="";
$.each(cc,function(dd,tt){
if(tt.name=='TIME_PERIOD'||tt.name=='TIME')
timeperiod=tt.name
if(tt.name=='OBS_VALUE'||tt.name=='OBS')
{
var dia='01-';
dia+=obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs'][zz]["@"+timeperiod];
var date = dia.split('-');
switch(date[2])
{
case 'Q1':
date[2]='03';
break;
case 'Q2':
date[2]='06';
break;
case 'Q3':
date[2]='09';
break;
case 'Q4':
date[2]='12';
break;
}
var x = Date.UTC(date[1], date[2]-1,date[0])
objg.data.push({
name:'OBS_VALUE',
x:x,
y:parseFloat(tt.value),
name2:getobs_grafica(cc)
});
}
else
return
});
});
arr2.push(objg);
}
if(frecuencia=='Annual'||frecuencia=='Two-year average'||frecuencia=='Undeterminated')
{
$.each(rr,function(zz,cc){
var timeperiod="";
$.each(cc,function(dd,tt){
if(tt.name=='TIME_PERIOD'||tt.name=='TIME')
timeperiod=tt.name
if(tt.name=='OBS_VALUE'||tt.name=='OBS')
{
var dia='01-';
dia+='12-'
dia+=obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs'][zz]["@"+timeperiod];
var date = dia.split('-');
var x = Date.UTC(date[2], date[1]-1,date[0])
objg.data.push({
name:'OBS_VALUE',
x:x,
y:parseFloat(tt.value),
name2:getobs_grafica(cc)
});
}
else
return
});
});
arr2.push(objg);
}
});
return arr2;
}
}
function thead2(obj ) {
//var thead = "<thead><tr>"; // empty cell in header
var thead = "<thead><tr><td> </td>";
var headers=[];
$.each(obj,function(j,t){
if(j==0)
{
$.each(t,function(h){
headers.push(t[h].name);
});
}
else
return false;
});
$.each(headers,function(i) {
thead += "<td>" + headers[i] + "</td>";
}
);
thead += "</tr></thead>";
return thead;
}
function tbody2(obj,numserie){
var tbody = "<tbody>";
$.each(obj,function(k,s){
if(numserie==k)
{
tbody += "<tr BGCOLOR="+"#CCEEFF"+">";
tbody +="<td></td>";
$.each(s,function(j){
tbody += "<td >"+s[j].value+"</td>";
});
tbody += "</tr>";
return false
}
else
return;
});
tbody += "</tbody>";
return tbody;
}
function getobs_grafica(objss){
var obs="";
var obs_value="";
$.each(objss,function(a,xxx){
if(xxx.name=='OBS_VALUE'||xxx.name=='OBS')
var lo;
if(a>=2)
obs+=xxx.name+":"+xxx.value+"<br>";
});
obs+=obs_value;
return obs;
}
Guardar el documento con extensión .js y verificando que en el selector "Tipo:" diga "Todos los archivos". Se crea otro documento con el nombre "graficar"
pero de tipo html. Eliminar el archivo .txt que creamos previamente con el nombre de "graficar".
Paso 10.
Abrir el documento index.html con firefox, chrome, opera o safari y dar clic en cualquier url de ejemplo y clic en el botón url y esperar a que grafique.
Glosario
CSS (Hojas de estilo en cascada): Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, sólo en casos avanzados se pueden escribir en un archivo aparte y enlazar la página con ese archivo. Y como definición son plantillas que se pueden utilizar para crear documentos HTML y dar formato a los textos que se presenten en pantalla. Por ejemplo, determinar el tipo, tamaño y color de la letra. Las hojas de estilo en cascada resultan muy prácticas, ya que permiten ahorrar líneas de código y gestionar mejor la presentación de texto. Javascript: Es un lenguaje de programación interpretado, se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas, aunque existe una forma de JavaScript del lado del servidor. La forma de agregar un script a una página web es colocando la siguiente sintáxis.
<script type="text/javascript"></script>
Ó
<script type="text/javascript" src="js/jquery-1.6.js"></script>
Donde se hace referencia a un script ubicado en determinado lugar de la página web, esto es, en una carpeta, dirección de red, de internet, etc.
Objeto: Una entidad con una serie de propiedades que definen su estado y unos métodos (funciones) que actúan sobre esas propiedades. Este mismo puede contener datos en su interior con una estructura muy compleja.
REST (Representational State Transfer): Los sistemas que siguen los principios REST se llaman con frecuencia RESTful. Es un enfoque para llevar el contenido de la información de un sitio Web mediante la lectura de una página Web que contiene un XML. En pocas palabras un servicio RESTful se utiliza a través de una url, como la que se pone en cualquier navegador web para consultar información.
JSON: Es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.
Ejemplo:
{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}
JSONP: Se trata de generar un archivo JSON dinámicamente dejando abierto en el script que lo crea, una variable que podemos definir nosotros mismos. Esa variable, tal cual es escrita en la llamada a la url será colocada antes del objeto Json. Así si yo al crear mi script Json decido que la variable "callback" será la que ayude a lanzar JsonP distintos dominios. Por ejemplo: // llamada: http://blog.ikhuerta.com/JsonP?callback=funcionPuente
funcionPuente({
"propiedad1" : "valor1",
"propiedad2" : "valor2"
})
Instanciar: El crear en memoria un ejemplar de un conjunto de datos y código definido por una clase o estructura. O lo que es lo mismo, crear un objeto de una determinada clase.
Dataflow: En SDMX un Dataflow, es una estructura que describe, categoriza y restringe el conjunto de datos permitidos que los proveedores darán para diferentes periodos de referencia.
Metadatos: Son datos que describen otros datos. En SDMX serían los datos que describen a un conjunto de información.
DSD's: Conjunto de metadatos estructurales asociados a un conjunto de datos, los cuales incluyen información acerca de cómo los conceptos están asociados con las medidas, dimensiones y atributos de un cubo de información. Esto es:
Codelist: En SDMX, es una lista de códigos con descripción, de donde la información estadística toma sus valores.
Nivel de serie: En SDMX, es una propiedad que define que los atributos de una serie(s) están ligados a los datos o metadatos. Esto es:

Nivel de observación: En SDMX, es una propiedad que define que los atributos de una serie(s) en sus observaciones, están ligados a los datos o metadatos. Esto es:

donde time_period,obs_value y obs_status son los atributos a nivel de observación.
Función CALLBACK: Con callback podemos hacer una secuencia de llamadas a funciones o una pila de funciones que se ejecutarán una detrás de otra. En términos simples para nuestro caso, el parámetro callback se manda a llamar cuando hacemos referencia a una función definida en el parámetro callback de nuestra url y la insertamos en las etiquetas de la página web como script.
Formato compacto SDMX: Es una forma de representar los datos en SDMX. Esto es:

Formato generic SDMX: Es una forma de representar los datos en SDMX. Esto es:

Serie de tiempo: Una serie de tiempo en SDMX, en un conjunto de datos ordenados mediante un periodo de tiempo determinado.
¿Por qué se usó JSONP?
Actualmente cada vez más webs publican sus aplicaciones para que puedan ser consumidas por aplicaciones de terceros. Sin embargo, en Javascript nos encontramos con una restricción que impide hacer peticiones entre dominios vía AJAX. Este tutorial muestra como poder hacer esas llamadas mediante un nuevo concepto llamado JSONP.
Seguro que alguna vez ha intentado: hacer una petición AJAX a un dominio distinto al que se está trabajando y devuelve un error. En concreto el error que da Firefox es: "Access to restricted URI denied code: 1012".
Esto es normal ya que por seguridad, los navegadores no permiten hacer este tipo de llamadas. ¿Entonces, por qué hay aplicaciones que exponen sus datos en JSON?
Para esta pregunta, existen al menos dos respuestas:
- La aplicación puede ser igualmente consumida por cualquier tipo de programa que no sea un navegador, como un script.
- Realmente existe una forma para poder acceder a esos datos desde Javascript. Es un nuevo concepto llamado JSONP, que genera un archivo JSON dinámicamente dejando abierto en el script que lo crea una variable que podemos definir nosotros mismos.
Esa variable, tal cual es escrita en la llamada a la url será colocada antes del objeto. Si se toma la decisión de crear dinámicamente el script para insertar el código Json, la variable "callback" será la que ayude a lanzar JsonP, y entonces un ejemplo sería: http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM/ALL?key=ALL&format=compact&alt=json&CALLBACK=getdatos
Sin embargo, el método JSONP implica un poco de colaboración extra de nuestro servidor de datos, de forma que el servidor se tiene que encargar de meter dichos datos como parámetro de una función que sí existe en nuestro código.
Lógica de programación para obtener una gráfica genérica
La lógica que se tomó para poder graficar datos SDMX se basó en el tipo de formato en que se extrae la información. SDMX tiene formas o formatos de extraer la información: compact, generic o cross-sectional.
Para nuestro caso se optó en la primera fase o versión de los prototipos por manejar datos compactos o compact.
Cabe mencionar que la técnica utilizada o el método que se usó para graficar puede variar de programador a programador y ésta no es la forma más óptima para hacerlo pero sí una de tantas de cómo hacerlo.
La gráfica que se obtiene es la siguiente y es la que se obtuvo en el tutorial "Cómo graficar":

La lógica es obtener la forma o estructura al objeto que manipulamos durante la codificación, tal como está un conjunto de datos SDMX en formato compacto o compact. Esto es:

Notas importantes para la explicación del código.
Los comentarios que explicarán el código se encontrarán dentro de los símbolos siguientes: /*comentarios*/ y en caso del archivo index.html los comentarios van entre < !-- comentarios-->.
Este tutorial explica 4 archivos:index.html, core_highstock.js, descripciones.js y graficar.js
INDEX.html
<meta content="IE=8" http-equiv="X-UA-Compatible">
<meta content="IE=9" http-equiv="X-UA-Compatible">
<link rel="stylesheet" type="text/css" href="css/baseline.compress.css" />
<link rel="stylesheet" type="text/css" href="css/sitio.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jsr_class.js"></script>
<script type="text/javascript" src="js/descripciones.js"></script>
<script type="text/javascript" src="js/highstock.js"></script>
<script type="text/javascript" src="js/graficar.js"></script>
<script type="text/javascript" src="js/core_highstock.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.highcharts.com/highslide/highslide.config.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
Regresar
Graficador de series de tiempo
Notas importantes:
-Las gráficas pueden tardar un poco en visualizarse debido a la cantidad de información requerida
y además al tamaño de los Codelist necesarios para presentar la descripción de las series,suele ser muy grande
-Si se utiliza la barra de zoom que se encuentra debajo de la gráfica, utilizar los botones 1m, 3m, All, etc...
para resetear las líneas de las series, en el caso de que desaparezcan.
-Para comenzar a usar esta aplicación dar clic en alguna url Rest SDMX y clic en el botón visualizar
ejemplo; en el caso de que la url Rest SDMX se filtrada, modificarla en el cuadro de texto después de
hacer clic en alguna de ellas.
-Si se desea obtener la información de los atributos a nivel de observación, dar clic en algún
símbolo del apuntador cuando se coloca el cursor del mouse sobre alguna línea de la gráfica.
-Así como, si desea observar alguna serie(línea) en especial, dirigirse a la tabla que se encuentra
debajo de la gráfica dar clic sobre alguna/s fila/s que se desee para mostrar u ocultar dicha serie.
<a title="INEGI" href="http://www.inegi.org.mx//default.aspx?"><img style="margin: 2em; width: 100px;" alt="Instituto Nacional de Estadística y Geografía " src="images/INEGI.gif"></a>
<script type="text/javascript" src="js/sdmx/highstock/exporting.js"></script>
CORE_HIGHSTOCK.JS
//Variables que guardan información necesaria para poder graficar.
var URLDATOS, URLFLUJOREF;
var FLUJO, ATRIBUTOS_SERIES, CODELIST_REF_AND_AGENCY, DATOS, DESCRIPCION_DATAFLOW;
//Función que fue llamada en la página index y la cual obtiene como parametro la url en la cual haremos clic.
function sdmx(urldatos)
{
//Se guarda el objeto json en una variable temporal por si surgieran cambios en la original o con la que se trabajará
this.URLDATOS=urldatos;
//Se separa la url en partes(guardandose en un arreglo) através de un separador "/"
var url2=urldatos.split("/");
//Obtenemos la posición 8 que es la posición donde estara el nombre del flujo del cual obtendremos datos.
this.FLUJO=url2[7];
// Colocamos el nombre del flujo en la posicion llamada FLUJO dentro de la url y se guarda dentro de una variable que usaremos mas adelante en el código.
this.URLFLUJOREF='http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Dataflow/ALL/'+FLUJO+'/ALL?references=shallow&alt=json&callback=getflujoref'
//Instanciamos la clase de la librería jsr_class con la url como parámetro.
bObj = new JSONscriptRequest(urldatos);
// Construimos una etiqueta tipo script dinamicamente
bObj.buildScriptTag();
// Agregar la etiqueta tipo script a la página
bObj.addScriptTag();
}
//Función que fue llamada al momento de insertar la etiqueta tipo script através de una función callback, esto es que al momento de la inserción del script se hace el llamado a la función getdatos que fue colocada como parametro en la url de nuestra interfaz de la gráfica esto es: callback=getdatos
function getdatos(datos)
{
//Variable que guarda la respuesta de la petición que trae nuestros datos en formato compacto SDMX y esta es la url correspondiente: http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Data/DF_SHORT_TERM_M/ALL?key=...C1161+C1162+C5002+C5003&startPeriod=2001-1&endPeriod=2006-1&format=compact&alt=json&callback=getdatos
DATOS=datos;
//Mandamos como parametro la variable datos a la función getatributos_serie.(Ir a la función)
ATRIBUTOS_SERIES=getatributos_serie(datos);
//Mandamos como parametro la variable datos a la función getatributos_observacion.(Ir a la función)
ATRIBUTOS_OBSERVACION=getatributos_observacion(datos);
//Removemos la información con datos SDMX por seguridad del script insertado.
bObj.removeScriptTag();
//Instaciamos la clase de la librería jsr_class pero ahora con la siguiente url:
http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/Dataflow/ALL/DF_SHORT_TERM_M/ALL?references=shallow&alt=json&callback=getflujoref
bObj = new JSONscriptRequest(URLFLUJOREF);
bObj.buildScriptTag();
bObj.addScriptTag();
}
//Función llamada con la función callback que fue llamada anteriormente de la misma forma que se explico.Y cuyo objeto contiene todas las referencias que un DSD puede tener, ya sea a Codelist, category schems, etc?.
function getflujoref(flujoref){
//Función que obtiene las referencias a los Codelist correspondientes y sus agencias de las series.(Ir a getcodelist_ref_and_agency_series)
CODELIST_REF_AND_AGENCY_SERIES=getcodelist_ref_and_agency_series(flujoref);
//Función que obtiene las referencias a los codelist correspondientes y sus agencias de las observaciones.(Ir a getcodelist_ref_and_agency_observaciones)
CODELIST_REF_AND_AGENCY_OBSERVACIONES=getcodelist_ref_and_agency_observaciones(flujoref);
//Obtención del nombre del DSD del flujo al que se hizo referencia.
var dsd=flujoref.RegistryInterface.QueryStructureResponse['registry:Dataflows']['structure:Dataflow']['structure:KeyFamilyRef']['structure:KeyFamilyID'];
//Obtención del nombre completo del flujo al que se hizo referencia.
DESCRIPCION_DATAFLOW=flujoref.RegistryInterface.QueryStructureResponse['registry:Dataflows']['structure:Dataflow']['structure:Name']['#text'];
bObj.removeScriptTag();
//Función que se manda a llamar dentro de otro script llamado descripciones.js(Ir a paso 11)
sdmxdescrip(CODELIST_REF_AND_AGENCY_SERIES, dsd, DATOS, CODELIST_REF_AND_AGENCY_OBSERVACIONES, DESCRIPCION_DATAFLOW);
}
//Función que obtendrá como resultado el mismo objeto que se obtuvo en la función getatributos_serie(), pero agregando las referencias a sus respectivos Codelist y agencias de los conceptos respectivos.Esto es:

function getcodelist_ref_and_agency_series(obj){
//Función que obtiene las dimensiones de nuestro objeto con referencias
var dimensiones=obj.RegistryInterface.QueryStructureResponse['registry:KeyFamilies']['structure:KeyFamily']['structure:Components']['structure:Dimension'];
//Función que obtiene los atributos de nuestro objeto con referencias.
var atributos=obj.RegistryInterface.QueryStructureResponse['registry:KeyFamilies']['structure:KeyFamily']['structure:Components']['structure:Attribute'];
var info=[], temporal=[];
var flagesnoesdimension=false, find=true;
$.each(ATRIBUTOS_SERIES,function(h,r){
$.each(r,function(q,n){
var objnew={
name:n.name,
value:n.value,
codelist:"",
codelistagency:""
}
if(flagesnoesdimension==false)
{
$.each(dimensiones,function(a,k){
if(n.name==k['@conceptRef'])
{
if(dimensiones.length-1==a)
{
flagesnoesdimension=true;
objnew.codelist=k['@codelist'];
objnew.codelistagency=k['@codelistAgency'];
info.push(objnew);
return false
}
else
{
objnew.codelist=k['@codelist'];
objnew.codelistagency=k['@codelistAgency'];
info.push(objnew);
return false
}
}
else
return ;
});
}
else
{
$.each(atributos,function(f,b){
if(b['@conceptRef']==n.name)
{
objnew.codelist=b['@codelist'];
objnew.codelistagency=b['@codelistAgency'];
info.push(objnew);
return false;
}
else
return;
});
}
});
temporal.push(info);
flagesnoesdimension=false
info=[];
});
//Regresa el resultado del procesamiento de las variables dimensiones y atributos agregando sus referencias a Codelist.
return temporal;
}
function getcodelist_ref_and_agency_observaciones(obj)
{
var temp=[];
/*Se guardan los atributos de la estructura del DSD del flujo a consultar*/
var atributos=obj.RegistryInterface.QueryStructureResponse['registry:KeyFamilies']['structure:KeyFamily']['structure:Components']['structure:Attribute'];
var arr=[],arrfinal=[];
/*Se obtiene el mismo objeto con la misma estructura que se obtuvo en la funcion getatributos_observacion pero ahora obteniendo además las referencias a sus Codelist de cada observación, si la tiene.Esto es:*/

$.each(ATRIBUTOS_OBSERVACION,function(d,q){
$.each(q,function(h,i){
$.each(i,function(b,n){
var obj9={
name:n.name,
value:n.value,
codelist:undefined,
codelistagency:undefined
}
$.each(atributos,function(b,y){
if(y['@conceptRef']==n.name)
{
obj9.codelist=y['@codelist'];
obj9.codelistagency=y['@codelistAgency'];
return false;
}
else
return
});
temp.push(obj9)
});
arr.push(temp);
temp=[];
});
arrfinal.push(arr);
arr=[];
});
return arrfinal;
}
//Función que regresará un objeto con una estructura tipo xml, obteniendo el número de series y sus respectivos atributos a nivel de serie,esto es:

/*y la estructura original en xml de la consulta dada originalmente(http://www.sdmx.snieg.mx/sistemas/sdmx/
restsdmx/Data/DF_SHORT_TERM/ALL?key=...C1161+C1162+C5002+C5003&startPeriod=2001-1&endPeriod=2006-1&format=
compact&alt=json&callback=getdatos) para traer datos en formato compacto es:*/

function getatributos_serie (obj)
{
//Preguntar si el tamaño de las series es mayor a 1
if(obj.CompactData['nsi:DataSet']['nsi:Series'].length>1)
{
//crear variables que se usarán dentro de la función
var arr=[];
var newarr=[];
var arrfinal=[];
//Asignación del número o grupo de series de la consulta de datos compacto
var atrib=obj.CompactData['nsi:DataSet']['nsi:Series'];
//Función para obtener los atributos de cada serie, puesto que no varían.Esto es:

$.each(atrib[0],function(h){
if('nsi:Obs'!=h)
arr.push(h);
else
return;
});
//Función que optimiza el arreglo anterior quitandoles el signo de "@" arroba.
$.each(arr,function(j){
var temp= arr[j].split("@");
$.each(temp,function(l){
if(temp[l]=="")
return;
else
newarr.push(temp[l])
});
})
//Función que determina la estructura tipo xml en un objeto de datos y se regresa el resultado final.Esto es:

var temp=[];
$.each(atrib,function(d,e){
$.each(newarr,function(m){
var obj3={
name:newarr[m],
value:e['@'+newarr[m]]
}
temp.push(obj3);
});
arrfinal.push(temp);
temp=[];
});
//Se regresa el objeto de la figura anterior.
return arrfinal;
}
//Este condicional(else{código}) indica que solo existe una serie y se hará todo el procesamiento anterior pero para una sola serie.
else
{
var arr=[];
var newarr=[];
var arrfinal=[];
var atrib=obj.CompactData['nsi:DataSet']['nsi:Series'];
$.each(atrib,function(h){
if('nsi:Obs'!=h)
arr.push(h);
else
return;
});
$.each(arr,function(j){
var temp= arr[j].split("@");
$.each(temp,function(l){
if(temp[l]=="")
return;
else
newarr.push(temp[l])
});
})
var temp=[];
$.each(newarr,function(m){
var obj3={
name:newarr[m],
value:atrib['@'+newarr[m]]
}
temp.push(obj3);
});
arrfinal.push(temp);
return arrfinal;
}
}
//Función que obtendrá los atributos a nivel de observación del número de series obtenidas en la consulta REST de datos compactos en formato SDMX como tipo xml.Esto es:


$.each(atrib[0]['nsi:Obs'][0],function(h){
arr.push(h);
});
/*Función para elimiar el caracter ?@?*/
$.each(arr,function(j){
var temp= arr[j].split("@");
$.each(temp,function(l){
if(temp[l]=="")
return;
else
newarr.push(temp[l])
});
})
/*Conjunto de funciones que regresarán el objeto con el formato de número de series y dentro de cada serie el número de observaciones y a su vez el número y cuales observaciones son.Esto es:*/

function getatributos_observacion(obj)
{
/*Inicialización de las variables a utilizar dentro de la función*/
var arr=[];
var newarr=[];
var arrfinal=[];
var arrobs=[];
var temp=[];
/*Verificar si la cantidad de series es mayor a 1*/
if(obj.CompactData['nsi:DataSet']['nsi:Series'].length>1)
{
/*Se asigna el objeto json de las series a una variable*/
var atrib=obj.CompactData['nsi:DataSet']['nsi:Series'];
/*Se obtienen el nombre de las observaciones que consta en cada serie de tiempo.Para este ejemplo son:*/

$.each(atrib,function(d,e){
$.each(e["nsi:Obs"],function(g){
$.each(newarr,function(m){
if(newarr[m]=='TIME_PERIOD'||newarr[m]=='TIME'||newarr[m]=='OBS_VALUE'||newarr[m]=='OBS')
{
if(newarr[m]=='OBS_VALUE'||newarr[m]=='OBS')
{
var obj3={
name:newarr[m],
value:e['nsi:Obs'][g]['@'+newarr[m]]
}
temp.push(obj3);
}
else
{
var obj3={
name:newarr[m],
value:""
}
temp.push(obj3);
}
}
else
{
var obj6={
name:newarr[m],
value:e['nsi:Obs'][g]['@'+newarr[m]]
}
temp.push(obj6);
}
});
arrobs.push(temp);
temp=[];
});
arrfinal.push(arrobs);
arrobs=[];
});
return arrfinal;
}
/*Condicional para validar las series con cantidad a 1 */
else
{
/*Valida si la cantidad de observaciones es mayor a 1 y si lo es realiza todo el proceso anterior para obtener el mismo objeto*/
if(obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs'].length>1)
{
var atrib=obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs'][0];
$.each(atrib,function(h){
arr.push(h);
});
$.each(arr,function(j){
var temp= arr[j].split("@");
$.each(temp,function(l){
if(temp[l]=="")
return;
else
newarr.push(temp[l])
});
})
var temp=[];
var atrib_obs=obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs']
$.each(atrib_obs,function(g,e){
$.each(newarr,function(m){
if(newarr[m]=='TIME_PERIOD'||newarr[m]=='TIME'||newarr[m]=='OBS_VALUE'||newarr[m]=='OBS')
{
if(newarr[m]=='OBS_VALUE'||newarr[m]=='OBS')
{
var obj3={
name:newarr[m],
value:e['@'+newarr[m]]
}
temp.push(obj3);
}
else
{
var obj3={
name:newarr[m],
value:""
}
temp.push(obj3);
}
}
else
{
var obj6={
name:newarr[m],
value:e['@'+newarr[m]]
}
temp.push(obj6);
}
});
arrobs.push(temp);
temp=[];
});
arrfinal.push(arrobs);
return arrfinal;
}
/*Se valida la condicional de que es menor a 1, la cantidad de observaciones y se realiza el mismo proceso para obtener el objeto necesario*/
else
{
var atrib=obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs'];
$.each(atrib,function(h){
arr.push(h);
});
$.each(arr,function(j){
var temp= arr[j].split("@");
$.each(temp,function(l){
if(temp[l]=="")
return;
else
newarr.push(temp[l])
});
})
var temp=[];
$.each(newarr,function(m){
if(newarr[m]=='TIME_PERIOD'||newarr[m]=='TIME'||newarr[m]=='OBS_VALUE'||newarr[m]=='OBS')
{
var obj3={
name:newarr[m],
value:""
}
temp.push(obj3);
}
else
{
var obj3={
name:newarr[m],
value:atrib['@'+newarr[m]]
}
temp.push(obj3);
}
});
arrfinal.push(temp);
return arrfinal;
}
}
DESCRIPCIONES.JS
//Variables que servirán durante este script, ya sea para guadar los datos temporalmente si hay cambios dentro de la variable o tener globalmente para nuestro uso.
var OBJ, ATRIBUTOSCONDESCRIPCION, SERIESDATOS, ATRIBUTOSNIVELOBS;
//Función que fue llamada desde el script core_highstock.js y la cual trae como parámetros los atributos de las series con su respectiva referencia a sus Codelist y su agencia, el nombre del DSD al que se hizo referencia al flujo que consultamos, el objeto que contiene los datos de la consulta que trae datos en formato compacto, los atributos de las observaciones con su referencia a sus Codelist y su agencia y el nombre completo del flujo.
function sdmxdescrip(dimen_atrib_codelistref, DSD, datos, atributosnivelobs, descripcion_flujo)
{
//Hacemos un asignacion de variables para poderlas usar goblamente.
FLUJONAME=descripcion_flujo;
ATRIBUTOSNIVELOBS=atributosnivelobs;
SERIESDATOS=datos;
OBJ=dimen_atrib_codelistref;
//Guardamos la url que hace como petición una consulta de estructuras a un DSD y haciendo referencias al mismo.
var url= 'http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/DataStructure/ALL/'+DSD+'/ALL?references=shallow&alt=json&callback=getdescripciones';
//Instanciamos la librería con la url para hacer la inserción de la etiqueta script y hacer el callback.
bObj = new JSONscriptRequest(url);
bObj.buildScriptTag();
bObj.addScriptTag();
}
//Función que fue llamada a través del callback y recibe como parámetro el objeto json de la estructura de un DSD con referencias.
function getdescripciones(objc)
{
OBJC=objc;
var temp=[],arrfinal=[];
$.each(OBJ,function(b,k){
$.each(k,function(j,u){
if(u.codelist!=undefined)
{
var obj={
name:u.name,
//La función getdescripcion_codelist se le mandan como parámetros del objeto de atributos de serie visto con anterioridad, el nombre del Codelist, agencia y valor del código al que hacen referencia.Esto es:

//Variables que servirán durante este script, ya sea para guadar los datos temporalmente si hay cambios dentro de la variable o tener globalmente para nuestro uso.
var OBJ, ATRIBUTOSCONDESCRIPCION, SERIESDATOS, ATRIBUTOSNIVELOBS;
//Función que fue llamada desde el script core_highstock.js y la cual trae como parámetros los atributos de las series con su respectiva referencia a sus Codelist y su agencia, el nombre del DSD al que se hizo referencia al flujo que consultamos, el objeto que contiene los datos de la consulta que trae datos en formato compacto, los atributos de las observaciones con su referencia a sus Codelist y su agencia y el nombre completo del flujo.
function sdmxdescrip(dimen_atrib_codelistref, DSD, datos, atributosnivelobs, descripcion_flujo)
{
//Hacemos un asignacion de variables para poderlas usar goblamente.
FLUJONAME=descripcion_flujo;
ATRIBUTOSNIVELOBS=atributosnivelobs;
SERIESDATOS=datos;
OBJ=dimen_atrib_codelistref;
//Guardamos la url que hace como petición una consulta de estructuras a un DSD y haciendo referencias al mismo.
var url= 'http://www.sdmx.snieg.mx/sistemas/sdmx/restsdmx/DataStructure/ALL/'+DSD+'/ALL?references=shallow&alt=json&callback=getdescripciones';
//Instanciamos la librería con la url para hacer la inserción de la etiqueta script y hacer el callback.
bObj = new JSONscriptRequest(url);
bObj.buildScriptTag();
bObj.addScriptTag();
}
//Función que fue llamada a través del callback y recibe como parámetro el objeto json de la estructura de un DSD con referencias.
function getdescripciones(objc)
{
OBJC=objc;
var temp=[],arrfinal=[];
$.each(OBJ,function(b,k){
$.each(k,function(j,u){
if(u.codelist!=undefined)
{
var obj={
name:u.name,
//La función getdescripcion_codelist se le mandan como parámetros del objeto de atributos de serie visto con anterioridad, el nombre del Codelist,agencia y valor del código al que hacen referencia.Esto es:

var temp2=[],arrfinal2=[];
$.each(ATRIBUTOSNIVELOBS,function(b,k){
$.each(k,function(j,u){
if(u.codelist!=undefined)
{
var obj={
name:u.name,
value:getdescripcion_codelist(u.codelist,u.codelistagency,u.value)
}
temp2.push(obj);
}
else
{
var obj={
name:u.name,
value:u.value
}
temp2.push(obj);
}
});
arrfinal2.push(temp2);
temp2=[];
});
bObj.removeScriptTag();
//Función que se dirige al script graficar para empezar a construir la gráfica con los datos obtenidos.Y manda como parametros los objetos de serie y observación así como el objeto de datos en formato compacto y el nombre del flujo completo.
graficarhighstock(arrfinal,SERIESDATOS,arrfinal2,FLUJONAME);
}
//Función que devuelve un valor de texto el cual corresponde a la descripción del código que tenia nuestro objeto de atributos de serie.
function getdescripcion_codelist(namecodelist,agencycodelist,valor){
var descripcion,find=false;
var codelist=OBJC.RegistryInterface.QueryStructureResponse['registry:CodeLists']['structure:CodeList'];
$.each(codelist,function(v,t){
if(t['@id']==namecodelist&&t['@agencyID']==agencycodelist&&find==false)
{
if(t['structure:Code'].length>1&&find==false)
{
$.each(t['structure:Code'],function(j,k){
if(k['@value']==valor)
{
if(k['structure:Description'].length>1)
{
$.each(k['structure:Description'],function(e,m){
if(m['@xml:lang']!='fr')
{
descripcion=m['#text'];
find=true;
return false
}
else
return;
});
}
else
{
descripcion=k['structure:Description']['#text'];
find=true;
return false
}
}
else
return
});
}
else
t['structure:Code'];
}
else
{
if(find==true)
{
return false;
}
else
return;
}
});
return descripcion
}
GRAFICAR.JS
//Función que se mando llamar desde el script descripciones.js y recibe como parámetros el objeto que contiene las series ya con la descripción de cada concepto de los atributos de series, el objeto que contiene los datos en formato compacto, el objeto que contiene los atributos de las observaciones y el nombre completo del flujo que se consulto.
function graficarhighstock(arr, datos, atributosobs, nameflujo){
//Función que regresa el objeto con una estructura correcta que lea la librería de la gráfica sin problema.Y manda como parametros, los datos en formato compacto, el objeto con los atributos de las series y los atributos a nivel de observación.
NAMES=getdatoscondescripcion(datos,arr,atributosobs);
//Se crean variables que se usarán para graficar.
var seriesOptions=[],
yAxisOptions = [],
colors = Highcharts.getOptions().colors;
seriesOptions=NAMES;
$.each(seriesOptions, function(u) {
//Se crea un eje y por cada serie ordenada y además se especifica las características de la gráfica, esto es el color el tamaño, donde empezará a graficar,etc.
yAxisOptions[u] = {
alternateGridColor: null,
gridLineWidth: u ? 0 : 1,
opposite: u ? true : false,
minorGridLineWidth: 0,
//Se añade color a las líneas de la gráfica
title: {
text: null,
style: {
color: colors[u]
}
},
//Se crea el apuntador o barra que cuando se desplaze mostrará los valores necesarios.
cursor:'pointer',
lineWidth: 2,
lineColor: colors[u]
lineWidth: 2,
lineColor: colors[u]
};
});
//Se instancia la clase de la librería para poder graficar. Y se especifican las características de toda la gráfica.
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
load: function(event) {
alert ('Visualización cargada');
/*Se evita que la ventana emergente se quede abierta y se muestre como debe ser*/
hs.loading.style.left = '-9999px';
}
},
alignTicks: false
},
rangeSelector: {
selected: 'All'
},
title: {
text: nameflujo
},
xAxis: {
type: 'datetime',
maxZoom: 14 * 24 * 3600000,
title: {
text: null
}
},
yAxis: yAxisOptions,
/*Configuración para agregar la funcionalidad de ventana emergente cuando se realiza un clic en algun apuntador del cursor, esto es, algun icono de la series*/
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText:Highcharts.dateFormat(' %b %e, %Y', this.x)+' '+"ATRIBUTOS A NIVEL DE OBSERVACIÓN"+' '+this.options.name2 +' ',
width: 400
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: seriesOptions
},
//Función que especifica la creación de la tabla de los metadatos.
function(chart){
$(chart.series).each(function(i, serie){
if(seriesOptions.length!=i)
{
var tbl = "<table>";
tbl += thead2(arr);
tbl += tbody2(arr,i);
tbl += "</table>";
//En esta parte se agrega color a cada renglón de la tabla que construimos y además se relacion con una función click que interactua con la librería de la gráfica para poder aparecer o desaparecer la variedad de líneas que se veran en la gráfica.
$('<li style="color: '+serie.color+';width:100px;font-size:5px; ">'+tbl+'</li>').click(function(){
serie.visible ? serie.hide() : serie.show();
//Este es el contenedor donde se coloca la tabla completa y se hace llamar en el index.html a través de un div con id test.
}).appendTo('#test')
}
else
return false;
});
}
);
}
//Función que regresa el objeto necesario con la estructura necesaria que requiere la librería para poder graficar adecuadamente, ya con los datos en formato compacto dentro. Esto es:

function getdatoscondescripcion(obj,atributos_series,atributosobs){
var frecuencia;
var tam=atributos_series[0];
/*Obtenemos la frecuencia con la que esta el flujo*/
$.each(tam,function(p){
if(tam[p].name=='FREQ')
{
frecuencia=tam[p].value;
return false
}
else
return;
});
var tamanio=obj.CompactData['nsi:DataSet']['nsi:Series'].length;
if(tamanio>1)
{
var arr = [];
$.each( atributosobs, function(ii,rr) {
var objg = {
data: [],
yAxis:ii
};
/*Condicionales para la variable frecuencia y así estructurar el objeto que regresaremos de acuerdo a cada periodo de frencuencia obtenido(mensual,trimestral,anual).Durante cada condicional de frecuencia, se hace el mismo proceso variando solo en validar la frecuencia trimestral y annual.Dentro del código se observa mejor la diferencia*/
if(frecuencia=='Monthly')
{
$.each(rr,function(zz,cc){
var timeperiod="";
$.each(cc,function(dd,tt){
if(tt.name=='TIME_PERIOD'||tt.name=='TIME')
timeperiod=tt.name
if(tt.name=='OBS_VALUE'||tt.name=='OBS')
{
var dia='01-';
dia+=obj.CompactData['nsi:DataSet']['nsi:Series'][ii]['nsi:Obs'][zz]["@"+timeperiod];
var date = dia.split('-');
/*Transformación de la fecha del parametro TIME_PERIOD a un formato UTC que la librería interpretara para asignar una fecha válida*/
var x = Date.UTC(date[1], date[2]-1,date[0])
objg.data.push({
/*La función getobs_grafica regresa como resultado los string correspondientes a las observaciones ya con su descripción de Codelist obtenido, con el formato correspondiente para que se muestre en la gráfica */
name: name:'OBS_VALUE',
x:x,
y:parseFloat(tt.value),
/*Función que obtiene las observaciones individuales y mostrarlas en la ventana emergente que se implementó*/
name2:getobs_grafica(cc)
});
}
else
return
});
});
}
if(frecuencia=='Quarterly')
{
$.each(rr,function(zz,cc){
var timeperiod="";
$.each(cc,function(dd,tt){
if(tt.name=='TIME_PERIOD'||tt.name=='TIME')
timeperiod=tt.name
if(tt.name=='OBS_VALUE'||tt.name=='OBS')
{
var dia='01-';
dia+=obj.CompactData['nsi:DataSet']['nsi:Series'][ii]['nsi:Obs'][zz]["@"+timeperiod];
var date = dia.split('-');
switch(date[2])
{
case 'Q1':
date[2]='03';
break;
case 'Q2':
date[2]='06';
break;
case 'Q3':
date[2]='09';
break;
case 'Q4':
date[2]='12';
break;
}
var x = Date.UTC(date[1], date[2]-1,date[0])
objg.data.push({
name:'OBS_VALUE',
x:x,
y:parseFloat(tt.value),
name2:getobs_grafica(cc)
});
}
else
return
});
});
}
if(frecuencia=='Annual'||frecuencia=='Two-year average'||frecuencia=='Undeterminated')
{
$.each(rr,function(zz,cc){
var timeperiod="";
$.each(cc,function(dd,tt){
if(tt.name=='TIME_PERIOD'||tt.name=='TIME')
timeperiod=tt.name
if(tt.name=='OBS_VALUE'||tt.name=='OBS')
{
var dia='01-';
dia+='12-'
dia+=obj.CompactData['nsi:DataSet']['nsi:Series'][ii]['nsi:Obs'][zz]["@"+timeperiod];
var date = dia.split('-');
var x = Date.UTC(date[2], date[1]-1,date[0])
objg.data.push({
name:'OBS_VALUE',
x:x,
y:parseFloat(tt.value),
name2:getobs_grafica(cc)
});
}
else
return
});
});
}
arr.push(objg);
});
return arr;
}
/*En esta condicional validamos si fue solo una serie y hacemos el mismo proceso tomando en cuenta que solo existe una serie*/
else
{
var arr2 = [];
$.each( atributosobs, function(ii,rr) {
var objg = {
data: [],
yAxis:ii
};
if(frecuencia=='Monthly')
{
$.each(rr,function(zz,cc){
var timeperiod="";
$.each(cc,function(dd,tt){
if(tt.name=='TIME_PERIOD'||tt.name=='TIME')
timeperiod=tt.name
if(tt.name=='OBS_VALUE'||tt.name=='OBS')
{
var dia='01-';
dia+=obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs'][zz]["@"+timeperiod];
var date = dia.split('-');
var x = Date.UTC(date[1], date[2]-1,date[0])
objg.data.push({
name:'OBS_VALUE',
x:x,
y:parseFloat(tt.value),
name2:getobs_grafica(cc)
});
}
else
return
});
});
arr2.push(objg);
}
if(frecuencia=='Quarterly')
{
$.each(rr,function(zz,cc){
var timeperiod="";
$.each(cc,function(dd,tt){
if(tt.name=='TIME_PERIOD'||tt.name=='TIME')
timeperiod=tt.name
if(tt.name=='OBS_VALUE'||tt.name=='OBS')
{
var dia='01-';
dia+=obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs'][zz]["@"+timeperiod];
var date = dia.split('-');
switch(date[2])
{
case 'Q1':
date[2]='03';
break;
case 'Q2':
date[2]='06';
break;
case 'Q3':
date[2]='09';
break;
case 'Q4':
date[2]='12';
break;
}
var x = Date.UTC(date[1], date[2]-1,date[0])
objg.data.push({
name:'OBS_VALUE',
x:x,
y:parseFloat(tt.value),
name2:getobs_grafica(cc)
});
}
else
return
});
});
arr2.push(objg);
}
if(frecuencia=='Annual'||frecuencia=='Two-year average'||frecuencia=='Undeterminated')
{
$.each(rr,function(zz,cc){
var timeperiod="";
$.each(cc,function(dd,tt){
if(tt.name=='TIME_PERIOD'||tt.name=='TIME')
timeperiod=tt.name
if(tt.name=='OBS_VALUE'||tt.name=='OBS')
{
var dia='01-';
var dia+='12-'
dia+=obj.CompactData['nsi:DataSet']['nsi:Series']['nsi:Obs'][zz]["@"+timeperiod];
var date = dia.split('-');
var x = Date.UTC(date[2], date[1]-1,date[0])
objg.data.push({
name:'OBS_VALUE',
x:x,
y:parseFloat(tt.value),
name2:getobs_grafica(cc) });
}
else
return
});
});
arr2.push(objg);
}
});
return arr2;
}
}
function thead2(obj ) {
//var thead = "<thead><tr>"; // empty cell in header
var thead = "<thead><tr><td></td>";
var headers=[];
$.each(obj,function(j,t){
if(j==0)
{
$.each(t,function(h){
headers.push(t[h].name);
});
}
else
return false;
});
$.each(headers,function(i) {
thead += "<td>" + headers[i] + "</td>";
}
);
thead += "</tr></thead>";
return thead;
}
function tbody2(obj,numserie){
var tbody = "<tbody>";
$.each(obj,function(k,s){
if(numserie==k)
{
tbody += "<tr BGCOLOR="+"#CCEEFF"+">";
tbody +="<td >"+"Serie"+k+"</td>";
$.each(s,function(j){
tbody += "<td >"+s[j].value+"</td>";
});
tbody += "</tr>";
return false
}
else
return;
});
tbody += "</tbody>";
return tbody;
}
/*Función que regresa un string para colocar en la gráfica como observaciones.Esto es: "OBS_STATUS:Normal;OBS_VALUE"*/
function getobs_grafica(objss){
var obs="";
var obs_value="";
$.each(objss,function(a,xxx){
if(xxx.name=='OBS_VALUE'||xxx.name=='OBS')
var lo;
if(a>=2)
obs+=xxx.name+":"+xxx.value+"<br>";
});
obs+=obs_value;
return obs;
}
|
|
|
|