Crear un gráfico con VisJS

Antes de nada hay que tener descargado el visJS y metido en la carpeta donde se sirven nuestas webs. En mi caso, por ejemplo (yo utilizo xampp como servidor) :
C:\xampp\htdocs\WebEntornos\visJS

¿Como se crea un gráfico básico?

Pongamos por ejemplo un diagrama de nodos.
Todo comienza con un html normal y corriente:

<!doctype html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <title>Network | Saving and loading networks</title>

        <style type="text/css">
            #network {
                float:left;
                width: 1000px;
                height: 700px;
                margin:5px;
                border: 1px solid lightgray;
            }
         </style>

        <script type="text/javascript" src="../visJS/dist/vis.js"></script>
        <link href="../visJS/dist/vis.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>

    </head>

    <body>

        <div id="mynetwork"></div>
        
    </body>
</html>

Básicamente en este html lo que estamos haciendo son tres 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=»network»></div>)
darle un pequeño estilo para especificar las dimensiones de ese apartado

<style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
</style>

Ahora que ya tenemos un espacio en nuestra web para meter nuestro gráfico, 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)

El conjunto de datos

El conjunto de datos está formado por Nodos y Enlaces, y hay que crear un DataSet para cada uno (Nodos y Enlaces).
Cada Nodo tiene muchos parámetros, pero los básicos son dos. 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 «label», que es el texto que se muestra en el nodo. Es texto plano.

var nodes = new vis.DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4" },
  { id: 5, label: "Node 5" }
]);

Los Enlaces son las líneas que van de un nodo a otro. Cada Enlace tiene también varios parámetros y hay 4 que son importantes.
«id» y «label» –> Igual que en los nodos, sirven para identificarlos y para ponerles una etiqueta (si se quiere). Como normalmente no se trabaja con los Enlaces, estos dos datos se pueden dejar sin poner.

«from» y «to» –> Estos sí se utilizan. Indican de que Nodo(«from») a que Nodo(«to») va el Enlace. Se pueden utilizar números o cadenas, y se corresponden con el «id» del Nodo al que queramos hacer referencia.

var edges = new vis.DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 3 }
]);

Para construir la red de nodos hay que pasarle una única variable con todos los datos: Nodos y Enlaces. Para esto se utiliza la función setData

setData({nodes: DataSet, edges: DataSet})

O bien se pasa todo a una variable que luego se le pasará al Network en el constructor.

var data = {
  nodes: nodes,
  edges: edges
};

Las opciones

Las opciones ofrecen un montón de parámetros que permiten configurar toda la visualización del gráfico. Si va a tener movimiento, como se ordenan los nodos, etc…

Los parámetros tienen valor por defecto, por lo que no es obligatorio dar valor a ninguno. Solo es necesario tener la variable declarada, si se va a pasar al constructor del Network.

var options = {};

El 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("mynetwork");

Y finalmente, para dibujar la gráfica, se crea un objeto Network con los tres elementos anteriores:

var network = new vis.Network(container, data, options);

Y, con esto, ya tenemos nuestro primer gráfico con VisJS. Cualquier tipo de gráfico se construye con estos mismos pasos aunque, dependiendo de lo rebuscado que queramos que sea nuestro gráfico, cada paso tendrá más o menos complejidad.

Crear un gráfico con VisJS

Etiquetado en:Gráficos VisJS