I have a model which stores Network Stats including Nodes. I want to display that rendered in HTML. Here is my table

interfaceModel

Interface   IPaddress       Hostname
AE1         1.1.1.1              A
AE1         2.2.2.2              B
AE2         3.3.3.3              C
AE2         4.4.4.4              D
AE3         5.5.5.5              E
AE3         6.6.6.6              F

I am using highcahrts Network Graph to draw a Network Graph https://www.highcharts.com/blog/tutorials/network-graph/

Here is the Code which displays the following demo graph

    <style>
    #container {
        background: #1f1f1f;
        min-width: 320px;
        max-width: 500px;
        margin: 0 auto;
        height: 500px;
      } 
</style>  
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<div id="container"></div>
<script>

Highcharts.chart('container', {
    chart: {
      type: 'networkgraph',
      marginTop: 80
    },
    title: {
      text: 'Network graph'
    },
    plotOptions: {
      networkgraph: {
        keys: ['from', 'to'],
      }
    },
    series: [{
      marker: {
        radius: 30
      },
      dataLabels: {
        enabled: true,
        linkFormat: '',
        allowOverlap: true
      },
      data: [
        ['Node 1', 'Node 2'],
        ['Node 1', 'Node 3'],
        ['Node 1', 'Node 4'],
        ['Node 4', 'Node 5'],
        ['Node 2', 'Node 5']
      ]
    }]
  });

</script>

How can i replace the data in the JS data array looping from my Interfacedatabase hostname? It is a direct single straight connection with no inter connections A>B>C>D>E>F

data should look something similar as follows

      data: [
            [A, B],
            [B, C],
            [C, D],
            [D, E],
            [E, F]
}