Selection-tool creating a table

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <!-- bootstrap for grid -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

  <script nonce="undefined" src="https://cdn.zingchart.com/2.6.1/zingchart.min.js"></script>
  <style>
    .chart {
      width: 100%;
      display: inline-block;
      background-color: #F7F7F7;
    }
  </style>
</head>

<body>
  <div id="myChart" class="chart"></div>
  <table id="dataTable" class="table">
  </table>
  <script>
    var SCALEY = {
      minValue: -2,
      maxValue: 2,
      step: 1,
      guide: {
        visible: false
      },
      lineColor: '#90CAF9',
      lineWidth: 2,
      refLine: {
        lineColor: '#90CAF9',
        lineWidth: 2
      },
      item: {
        fontColor: '#90CAF9',
        fontSize: 14
      },
      tick: {
        lineColor: '#90CAF9'
      }
    };

    var myConfig = {
      type: "scatter",
      backgroundColor: '#F7F7F7',
      title: {
        text: 'Points Along A Sin Wave'
      },
      plot: {
        selectionMode: "none", // turn off normal selection   
        marker: {
          borderWidth: 0
        },
        selectedMarker: {
          size: 8,
          borderWidth: 1,
          borderColor: '#000',
        },
        hoverMarker: {
          size: 7
        },
        tooltip: {
          backgroundColor: '#FFF',
          fontColor: '#000',
          fontSize: 14,
          borderRadius: 4,
          borderWidth: 1,
          borderColor: '#000',
          text: '%t: %v'
        }
      },
      plotarea: {
        margin: 'dynamic'
      },
      scaleX: {
        visible: false
      },
      scaleY: SCALEY,
      selectionTool: {
        mask: {
          borderWidth: 2,
          borderColor: "red",
          backgroundColor: "yellow",
          alpha: 0.5
        }
      },
      series: [{
          values: (function() {
            var aV = [];
            var len = 100;
            var x = 0;
            while (len--) {
              x = (Math.random() * 10).toFixed(3) - 0;
              aV.push([
                x,
                (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
              ]);
            }
            return aV;
          })(),
          backgroundColor: '#F48FB1',
          text: 'Sin Wave One',
          marker: {
            size: 5,
            alpha: .85,
            backgroundColor: '#F48FB1'
          }
        },
        {
          values: (function() {
            var aV = [];
            var len = 100;
            var x = 0;
            while (len--) {
              x = (Math.random() * 10).toFixed(3) - 0;
              aV.push([
                x,
                (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
              ]);
            }
            return aV;
          })(),
          backgroundColor: '#F48FB1',
          text: 'Sin Wave Two',
          marker: {
            size: 5,
            alpha: .85,
            backgroundColor: '#CE93D8'
          }
        }
      ]
    };

    /*
     * example outline used from bootstrap grid example 1
     * http://v4-alpha.getbootstrap.com/content/tables/
     */
    var TABLE_OUTLINE = "<thead><tr><th>#</th><th>Pink Dots</th><th>Purple Dots</th></tr></thead>";

    // api event
    zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
      var dataTable = document.getElementById('dataTable');
      var a = {};
      var values1 = [];
      var values2 = [];
      var tableLength = 0;
      var tableString = TABLE_OUTLINE + "<tbody>";
      var tableRowString = "";
      // Calculate Sum of selection into an array
      for (var i = 0; i < e.nodes.length; i++) {
        a = e.nodes[i];

        if (a.plotindex === 0)
          values1.push(a.value);
        else
          values2.push(a.value);
      }

      // make length of table the longer of values found
      tableLength = values1.length > values2.length ? values1.length : values2.length;
      for (var i = 0; i < tableLength; i++) {
        tableRowString = "<tr><th scope=\"row\">" + (i + 1) + "</th>";

        if (values1[i])
          tableRowString += "<td>" + values1[i] + "</td>";
        else
          tableRowString += "<td>&nbsp;</td>";

        if (values2[i])
          tableRowString += "<td>" + values2[i] + "</td>";
        else
          tableRowString += "<td>&nbsp;</td>";

        // close row
        tableRowString += "</tr>";

        // assign row to table
        tableString += tableRowString;
      }

      // close table and render
      tableString += "</table>";
      dataTable.innerHTML = tableString;

    });

    // Load the selection-tool and render the charts once its loaded
    zingchart.loadModules('selection-tool', function() {
      zingchart.render({
        id: 'myChart',
        data: myConfig,
        height: 400,
        width: '100%',
        modules: 'selection-tool'
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <!-- bootstrap for grid -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

  <script src="https://cdn.zingchart.com/2.6.1/zingchart.min.js"></script>
</head>

<body>
  <div id="myChart" class="chart"></div>
  <table id="dataTable" class="table">
  </table>
</body>

</html>

.chart {
  width: 100%;
  display: inline-block;
  background-color: #F7F7F7;
}

var SCALEY = {
  minValue: -2,
  maxValue: 2,
  step: 1,
  guide: {
    visible: false
  },
  lineColor: '#90CAF9',
  lineWidth: 2,
  refLine: {
    lineColor: '#90CAF9',
    lineWidth: 2
  },
  item: {
    fontColor: '#90CAF9',
    fontSize: 14
  },
  tick: {
    lineColor: '#90CAF9'
  }
};

var myConfig = {
  type: "scatter",
  backgroundColor: '#F7F7F7',
  title: {
    text: 'Points Along A Sin Wave'
  },
  plot: {
    selectionMode: "none", // turn off normal selection   
    marker: {
      borderWidth: 0
    },
    selectedMarker: {
      size: 8,
      borderWidth: 1,
      borderColor: '#000',
    },
    hoverMarker: {
      size: 7
    },
    tooltip: {
      backgroundColor: '#FFF',
      fontColor: '#000',
      fontSize: 14,
      borderRadius: 4,
      borderWidth: 1,
      borderColor: '#000',
      text: '%t: %v'
    }
  },
  plotarea: {
    margin: 'dynamic'
  },
  scaleX: {
    visible: false
  },
  scaleY: SCALEY,
  selectionTool: {
    mask: {
      borderWidth: 2,
      borderColor: "red",
      backgroundColor: "yellow",
      alpha: 0.5
    }
  },
  series: [{
      values: (function() {
        var aV = [];
        var len = 100;
        var x = 0;
        while (len--) {
          x = (Math.random() * 10).toFixed(3) - 0;
          aV.push([
            x,
            (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
          ]);
        }
        return aV;
      })(),
      backgroundColor: '#F48FB1',
      text: 'Sin Wave One',
      marker: {
        size: 5,
        alpha: .85,
        backgroundColor: '#F48FB1'
      }
    },
    {
      values: (function() {
        var aV = [];
        var len = 100;
        var x = 0;
        while (len--) {
          x = (Math.random() * 10).toFixed(3) - 0;
          aV.push([
            x,
            (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
          ]);
        }
        return aV;
      })(),
      backgroundColor: '#F48FB1',
      text: 'Sin Wave Two',
      marker: {
        size: 5,
        alpha: .85,
        backgroundColor: '#CE93D8'
      }
    }
  ]
};

/*
 * example outline used from bootstrap grid example 1
 * http://v4-alpha.getbootstrap.com/content/tables/
 */
var TABLE_OUTLINE = "<thead><tr><th>#</th><th>Pink Dots</th><th>Purple Dots</th></tr></thead>";

// api event
zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
  var dataTable = document.getElementById('dataTable');
  var a = {};
  var values1 = [];
  var values2 = [];
  var tableLength = 0;
  var tableString = TABLE_OUTLINE + "<tbody>";
  var tableRowString = "";
  // Calculate Sum of selection into an array
  for (var i = 0; i < e.nodes.length; i++) {
    a = e.nodes[i];

    if (a.plotindex === 0)
      values1.push(a.value);
    else
      values2.push(a.value);
  }

  // make length of table the longer of values found
  tableLength = values1.length > values2.length ? values1.length : values2.length;
  for (var i = 0; i < tableLength; i++) {
    tableRowString = "<tr><th scope=\"row\">" + (i + 1) + "</th>";

    if (values1[i])
      tableRowString += "<td>" + values1[i] + "</td>";
    else
      tableRowString += "<td>&nbsp;</td>";

    if (values2[i])
      tableRowString += "<td>" + values2[i] + "</td>";
    else
      tableRowString += "<td>&nbsp;</td>";

    // close row
    tableRowString += "</tr>";

    // assign row to table
    tableString += tableRowString;
  }

  // close table and render
  tableString += "</table>";
  dataTable.innerHTML = tableString;

});

// Load the selection-tool and render the charts once its loaded
zingchart.loadModules('selection-tool', function() {
  zingchart.render({
    id: 'myChart',
    data: myConfig,
    height: 400,
    width: '100%',
    modules: 'selection-tool'
  });
});