title: How to draw a network diagram in Grafana?
body: <p>I would like to draw a network diagram in Grafana.</p>
  
  <p>My data are in a table of two columns: one for an id of source node; and the other column refers to a target node. E.g.:</p>
  
  <pre><code> +--------+--------+
   | source | target |
   +--------+--------+
   | 00     | 21     |
   | 00     | 23     |
   | 00     | 28     |
   | 01     | 21     |
   | 02     | 21     |
   | 02     | 22     |
   | 02     | 23     |
   +--------+--------+
  </code></pre>
  
  <p>I'd like to have a diagram with nodes corresponding to the numbers in both columns and lines between the nodes that are on the same row in the table.</p>
  
  <p>Do you have any suggestions how to do that? </p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I have used a text panel and added the following HTML code using <a href="http://visjs.org/" rel="nofollow noreferrer"><code>visjs</code></a> network library.</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" /&gt;
  
  
  &lt;style type="text/css"&gt;
      #mynetwork {
          height: 400px;
          border: 1px solid lightgray;
      }
  &lt;/style&gt;
  &lt;div id="mynetwork"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      // create an array with nodes
      var nodes = new vis.DataSet([
          {id: '00', label: '00', group: 'producers'},
          {id: '01', label: '01', group: 'producers'},
          {id: '02', label: '02', group: 'producers'},
          {id: '21', label: '21', group: 'consumers'},
          {id: '22', label: '22', group: 'consumers'},
          {id: '23', label: '23', group: 'consumers'},
          {id: '28', label: '28', group: 'consumers'}
      ]);
  
      // create an array with edges
      var edges = new vis.DataSet([
          {from: '00', to: '21'},
          {from: '00', to: '23'},
          {from: '00', to: '28'},
          {from: '01', to: '21'},
          {from: '02', to: '21'},
          {from: '02', to: '22'},
          {from: '02', to: '23'}
      ]);
  
      // create a network
      var container = document.getElementById('mynetwork');
  
      // provide the data in the vis format
      var data = {
          nodes: nodes,
          edges: edges
      };    
  
      var options = {
          nodes: {
              shape: 'dot',
              size: 20,
              font: {
                  size: 20,
                    color: '#ffffff'
              },
              borderWidth: 2
          },
          edges: {
              width: 2
          },
          groups: {
              producers: {
                  color: {background:'red',border:'orange'},
                  shape: 'diamond'
              },
              consumers: {
                  shape: 'dot',
                  color: {background: 'cyan',border:'blue'}
              }
          }
      };
  
  
      // initialize your network!
      var network = new vis.Network(container, data, options);
  </code></pre>
  
  <p>The output looks as follows:</p>
  
  <p><img src="https://gist.githubusercontent.com/tomichec/d253dd6ea88d3563a90e015e5226cbf3/raw/48c6943bf1fb6ca02c6f9dc6097283fb4714005a/netDiagram.png" alt="Network Diagram"></p>
  
  <p><strong>Follow up Question:</strong></p>
  
  <p>The data I get are hard coded into the HTML instead of being loaded from my MariaDB (mysql) database.</p>
  
  <p>What changes should I make to load the network data from the database directly?</p>