Vamos a hacer ahora un ejemplo con un timeline (un gráfico de tiempo)
Va a ser igual que el post sobre el gráfico de nodos, pero así veremos que todos los gráficos en visjs se dibujan igual.
Primero hay que tener descargado el visJS y metido en la carpeta donde se sirven nuestas webs. En mi caso, por ejemplo: C:\xampp\htdocs\WebEntornos\visJS
Una vez hecho esto solo necesitamos, un html (en el que se mostrará el timeline) y un script que lo generará.
El html es una web normal y corriente:
<html>
<head>
<title>Timeline | demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../visJS/dist/vis.js"></script>
<link href="../visJS/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="timeline"></div>
</body>
</html>
Básicamente en este html lo que estamos haciendo son dos cosas:
- llamar a los ficheros javascript y css de los gráficos de visJS
- crear un apartado (un div) donde va a ir nuestro gráfico: <div id=»timeline»></div>. Esta vez, no le estamos dando ni estilo ni dimensiones a este apartado, así que ocupará todo el ancho de la página y el alto que necesite.
Ahora que ya tenemos un espacio en nuestra web para meter nuestro timeline, vamos con la parte de javascript, que es precisamente la que va a coger y dibujar los datos.
Dentro de nuestro script vamos a necesitar tres cosas:
- Un conjunto de datos (lo que se llama un DataSet)
- Unas opciones para dibujarlos
- Un lugar donde dibujarlos (el que hemos creado en el html)
Conjunto de datos
El conjunto de datos está formado por Ítems (llamémoslos así). Un ítem es cada elemento que queremos mostrar en el timeline. Cada ítem tiene muchos parámetros, pero los básicos son tres.
El «id», que nos va a servir para identificarlo. Normalmente se pone un número, pero puede ser una cadena de texto. Y, evidentemente, no se puede repetir entre nodos. El «content», que es el texto que se muestra en el nodo. Es texto. El «start», que es la fecha en la que se sitúa dicho ítem
{id: 1, content: 'item 1', start: '2013-04-20'},
Sin embargo, habrá eventos que queramos representar y que no son puntuales, sino que tienen una duración en el tiempo. Para estos ítems está el parámetro «end» que, evidentemente, indica la fecha en la que termina el evento (la fecha en la que empieza es el «start»)
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
Opciones
Las opciones ofrecen un montón de parámetros que permiten configurar toda la visualización del timeline. Como en el gráfico de nodos, son muchas las opciones de configuración, y lo mejor para aprenderlas es cogerse el tutorial e ir probando.
Pero los parámetros tienen valor por defecto, por lo que no es obligatorio dar valor a ninguno para que el timeline se construya. Solo es necesario tener la variable si se va a pasar al constructor del Network.
var options = {};
Lugar para dibujar
La parte más fácil. El lugar para dibujar la gráfica lo hemos creado en el html, así que solo hay que hacer referencia a dicho espacio.
var container = document.getElementById('timeline');
Y finalmente, para dibujar la gráfica, se crea un objeto Timeline con los tres elementos anteriores:
var timeline = new vis.Timeline(container, items, options);