<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Network | node as icon</title>

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

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

  <style>
    #mynetworkFA,
    #mynetworkIO {
      height: 300px;
    }
  </style>

  <script language="JavaScript">
    function draw() {
      /*
       * Example for FontAwesome
       */
      var optionsFA = {
        groups: {
          usergroups: {
            shape: 'icon',
            icon: {
              face: 'FontAwesome',
              code: '\uf0c0',
              size: 50,
              color: '#57169a'
            }
          },
          users: {
            shape: 'icon',
            icon: {
              face: 'FontAwesome',
              code: '\uf007',
              size: 50,
              color: '#aa00ff'
            }
          }
        }
      };

      // create an array with nodes
      var nodesFA = [{
        id: 1,
        label: 'User 1',
        group: 'users'
      }, {
        id: 2,
        label: 'User 2',
        group: 'users'
      }, {
        id: 3,
        label: 'Usergroup 1',
        group: 'usergroups'
      }, {
        id: 4,
        label: 'Usergroup 2',
        group: 'usergroups'
      }, {
        id: 5,
        label: 'Organisation 1',
        shape: 'icon',
        icon: {
          face: 'FontAwesome',
          code: '\uf1ad',
          size: 50,
          color: '#f0a30a'
        }
      }];

      // create an array with edges
      var edges = [{
        from: 1,
        to: 3
      }, {
        from: 1,
        to: 4
      }, {
        from: 2,
        to: 4
      }, {
        from: 3,
        to: 5
      }, {
        from: 4,
        to: 5
      }];

      // create a network
      var containerFA = document.getElementById('mynetworkFA');
      var dataFA = {
        nodes: nodesFA,
        edges: edges
      };

      var networkFA = new vis.Network(containerFA, dataFA, optionsFA);

      /*
       * Example for Ionicons
       */
      var optionsIO = {
        groups: {
          usergroups: {
            shape: 'icon',
            icon: {
              face: 'Ionicons',
              code: '\uf47c',
              size: 50,
              color: '#57169a'
            }
          },
          users: {
            shape: 'icon',
            icon: {
              face: 'Ionicons',
              code: '\uf47e',
              size: 50,
              color: '#aa00ff'
            }
          }
        }
      };

      // create an array with nodes
      var nodesIO = [{
        id: 1,
        label: 'User 1',
        group: 'users'
      }, {
        id: 2,
        label: 'User 2',
        group: 'users'
      }, {
        id: 3,
        label: 'Usergroup 1',
        group: 'usergroups'
      }, {
        id: 4,
        label: 'Usergroup 2',
        group: 'usergroups'
      }, {
        id: 5,
        label: 'Organisation 1',
        shape: 'icon',
        icon: {
          face: 'Ionicons',
          code: '\uf276',
          size: 50,
          color: '#f0a30a'
        }
      }];


      // create a network
      var containerIO = document.getElementById('mynetworkIO');
      var dataIO = {
        nodes: nodesIO,
        edges: edges
      };

      var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
    }
  </script>
  <script src="../googleAnalytics.js"></script>
</head>

<body onload="draw()">
<h2>
  <i class="fa fa-flag"></i> Use FontAwesome-icons for node</h2>
<div id="mynetworkFA"></div>
<h2>
  <i class="ion ion-ionic"></i> Use Ionicons-icons for node</h2>
<div id="mynetworkIO"></div>

</body>

</html>