El componente graphic permite embeber gráficos de líneas, áreas o barras en experiencias web. Permite elegir distintos elementos de filtro de fechas, personalizar los textos, etc.
Ver online: https://jsfiddle.net/bue36s5q/
Este gráfico se genera a partir del siguiente código:
<!-- importa librería JS -->
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.0/dist/js/components.js'></script>
<!-- importa hoja de estilos CSS -->
<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.0/dist/css/components.css'/>
<!-- código HTML donde ubicar un div con un gráfico -->
<div id="tmi"></div>
<!-- JS que genera el gráfico en el div -->
<script>
window.onload = function() {
TSComponents.Graphic.render('tmi', {
// Llamada a la API de Series de Tiempo
graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg',
title: 'Tasa de Mortalidad Infantil de Argentina',
source: 'Dirección de Estadística e Información en Salud (DEIS). Secretaría de Gobierno de Salud'
})
}
</script>
| Nombre | Requerido | Descripción | Tipo | Default | Ejemplos |
|---|---|---|---|---|---|
| graphicUrl | Si | URL completa del llamado a la API. | string | Ninguno | https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg |
| chartOptions | No | Cualquier opción válida para [Highcharts](https://api.highcharts.com/highcharts/). | object | {} | |
| navigator | No | Indica si está habilitada la funcionalidad de navegación de la serie. | boolean | Dinámico | true / false |
| locale | No | Valores posibles: "AR" o "US" (pendientes nuevos valores). Representan qué _locale_ usar para formatear números, es decir, separadores de miles o de decimales. | string | AR | AR o US |
| zoom | No | Indica si tiene habilitada la funcionalidad de zoom. | boolean | Dinámico | true / false |
| exportable | No | Indica si tiene habilitada la funcionalidad de exportar el gráfico. | boolean | Dinámico | true / false |
| colors | No | Paleta de colores alternativa a la default. Los códigos de colores pueden ser tanto hexadecimales (ej. "#00CC44") como numeros que son mapeados a la paleta por defecto (del 0 al 8) Ver paleta por defecto más abajo. | list | ["#0072BB", "#2E7D33", "#C62828", "#F9A822", "#6A1B99", "#EC407A", "#C2185B", "#039BE5", "#6EA100"] [0, 1, 2, 3, 4, 5, 6, 7, 8] | ["#2E7D33", 2, "#F9A822"] |
| backgroundColor | No | Color de fondo del gráfico en formato hexadecimal. | string | #cdcdcd | #cdcdcd |
| datePickerEnabled | No | Indica si el selector de fechas está habilitado. | boolean | Dinámica | true / false |
| legendField | No | Indica el campo de la serie a usar para mostrar la leyenda. | string | 'title' | "title", "description" o "id" |
| chartTypes | No | Especifica el tipo de gráfico a usar para cada serie<./td> | object | 'line' para todas las series | {'tmi_arg': 'column', 'tmi_02': 'line', 'tmi_06': 'area'} | </tr>
| title | No | Especifica el título el gráfico. | string | Ninguno | Tasa de Mortalidad Infantil de Argentina |
| source | No | Especifica el texto al pie del gráfico. | string | Ninguno | Dirección de Estadística e Información en Salud (DEIS). Secretaría de Gobierno de Salud |
| displayUnits | No | Indica si se muestran las unidades del gráfico. | boolean | Dinámico | true / false |
| legendLabel | No | Especifica el texto a mostrar como leyenda por cada serie. | object | {} | {'serie01': 'leyenda custom'} |
| seriesAxis | No | Especifica de qué lado del gráfico mostrar las ordenadas y unidades de cada serie representada. Puede haber más de una serie en un mismo lado. Si hay una sola serie, debe ir obligatoriamente del lado izquierdo. | object | {} | {'serie01': 'right', 'serie02': 'left'} |
| chartType | No | Especifica un tipo de gráfico para aplicar a todas las series como default. En caso de estar especificado un tipo para una serie en chartTypes, este último será priorizado para la misma. | string | 'line' | 'line', 'area' o 'column' |
| decimalLeftAxis | No | Especifica cuántos dígitos decimales tendrán los valores de las ordenadas del eje izquierdo (principal) del gráfico. | int | Ninguno | 6 |
| decimalRightAxis | No | Especifica cuántos dígitos decimales tendrán los valores de las ordenadas del eje derecho (auxiliar) del gráfico. | int | Ninguno | 0 |
| decimalTooltips | No | Especifica cuántos dígitos decimales mostrará el texto en el tooltip para cada serie, mapeando ids de series con cantidades de decimales. | object | Ninguno | {'serie01': 4, 'serie02': 1} |
| decimalTooltip | No | Especifica la cantidad de dígitos decimales a mostrar en el texto del tooltip para toda serie que no lo haya definido en el parámetro decimalTooltips. | int | Ninguno | 3 |
| numbersAbbreviate | No | Flag que indica si se deben abreviar los números grandes y formatearlos con el sufijo pertinente; si está apagado, no se realizará abreviatura alguna. Ver la sección de "Abreviatura" para más detalle. | boolean | true | false |
| decimalsBillion | No | Cantidad de dígitos decimales a mostrar en aquellos números que son abreviados y divididos por un billón. Supeditará al valor del parámetro decimals. | int | 2 | 4 |
| decimalsMillion | No | Cantidad de dígitos decimales a mostrar en aquellos números que son abreviados y divididos por un millón. Supeditará al valor del parámetro decimals. | boolean | 2 | 0 |
| startDate | No | Fecha de inicio de la región del gráfico sobre la cual hacer un zoom inicial al renderizarlo; en caso de ser menor a la fecha con datos más antigua de la serie, será reemplazada por tal. Debe estar en formato ISO 8601 (AAAA-MM-DD). | string | Fecha más antigua de la serie | '2014-03-30' |
| endDate | No | Fecha de fin de la región del gráfico sobre la cual hacer un zoom inicial al renderizarlo; en caso de ser mayor a la fecha con datos más reciente de la serie, será reemplazada por tal. Debe estar en formato ISO 8601 (AAAA-MM-DD). | string | Fecha más reciente de la serie | '2018-12-09' |
| frequencySelector | No | Presencia del selector de frecuencias al pie del componente. Sus opciones serán todas las frecuencias menores o iguales a las de la menor de las series involucradas. | boolean | false | true |
| aggregationSelector | No | Presencia del selector de tipo de agregación al pie del componente. Sus opciones serán todas las permitidas en consultas a la API. | boolean | false | true |
| unitsSelector | No | Presencia del selector de unidades (modo de representación) para las series involucradas. La opción elegida será aplicada a toda serie que no tenga un modificador explícito en su ID. | boolean | false | true |
| chartTypeSelector | No | Presencia del selector de tipo de gráfico a dibujar para las series involucradas. La opción elegida será empleada para toda aquella serie que no tenga un tipo de gráfico específico definido en el parámetro chartTypes. | boolean | false | true |