Selection-tool creating another chart

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      background-color: #F7F7F7;
    }

    .chart {
      width: 49%;
      display: inline-block;
      background-color: #F7F7F7;
    }
  </style>
</head>

<body>
  <div id='myChart' class="chart"></div>
  <div id='selectionChart' class="chart"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    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: {
        _maxTrackers: 0,
        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',
          selectedState: {
            borderWidth: 2,
            fontSize: 16
          }
        }
      },
      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'
          }
        }
      ]
    };

    // config for second chart
    var selectionConfig = {
      type: 'bar',
      backgroundColor: '#F7F7F7',
      legend: {
        layout: 'h',
        borderWidth: 0,
        align: 'center',
        adjustLayout: false,
        marginTop: 32,
        backgroundColor: 'transparent',
        toggleAction: 'remove',
        item: {
          cursor: 'pointer'
        },
        marker: {
          cursor: 'pointer'
        }
      },
      title: {
        text: 'Selected Values'
      },
      plot: {
        maxTrackers: 250
      },
      scaleX: {
        lineColor: '#90CAF9',
        lineWidth: 2,
        refLine: {
          lineColor: '#90CAF9',
          lineWidth: 2
        },
        item: {
          fontColor: '#90CAF9',
          fontSize: 14
        },
        tick: {
          lineColor: '#90CAF9'
        }
      },
      scaleY: SCALEY,
      series: []
    };

    // api event
    zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
      var a = {};
      var newSeriesData = [];
      var values1 = [];
      var values2 = [];
      // 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);
      }

      // add to array of objects
      newSeriesData.push({
        values: values1,
        backgroundColor: '#F48FB1',
        text: 'Pink Data',
      });

      newSeriesData.push({
        values: values2,
        backgroundColor: '#CE93D8',
        text: 'Purple Data'
      });

      // update the second chart
      zingchart.exec('selectionChart', 'setseriesdata', {
        data: newSeriesData
      });

    });

    // 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'
      });
      zingchart.render({
        id: 'selectionChart',
        data: selectionConfig,
        height: 400,
        width: '100%'
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

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

<body>
  <div id='myChart' class="chart"></div>
  <div id='selectionChart' class="chart"></div>
</body>

</html>

html,
body {
  background-color: #F7F7F7;
}

.chart {
  width: 49%;
  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: {
    _maxTrackers: 0,
    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',
      selectedState: {
        borderWidth: 2,
        fontSize: 16
      }
    }
  },
  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'
      }
    }
  ]
};

// config for second chart
var selectionConfig = {
  type: 'bar',
  backgroundColor: '#F7F7F7',
  legend: {
    layout: 'h',
    borderWidth: 0,
    align: 'center',
    adjustLayout: false,
    marginTop: 32,
    backgroundColor: 'transparent',
    toggleAction: 'remove',
    item: {
      cursor: 'pointer'
    },
    marker: {
      cursor: 'pointer'
    }
  },
  title: {
    text: 'Selected Values'
  },
  plot: {
    maxTrackers: 250
  },
  scaleX: {
    lineColor: '#90CAF9',
    lineWidth: 2,
    refLine: {
      lineColor: '#90CAF9',
      lineWidth: 2
    },
    item: {
      fontColor: '#90CAF9',
      fontSize: 14
    },
    tick: {
      lineColor: '#90CAF9'
    }
  },
  scaleY: SCALEY,
  series: []
};

// api event
zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
  var a = {};
  var newSeriesData = [];
  var values1 = [];
  var values2 = [];
  // 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);
  }

  // add to array of objects
  newSeriesData.push({
    values: values1,
    backgroundColor: '#F48FB1',
    text: 'Pink Data',
  });

  newSeriesData.push({
    values: values2,
    backgroundColor: '#CE93D8',
    text: 'Purple Data'
  });

  // update the second chart
  zingchart.exec('selectionChart', 'setseriesdata', {
    data: newSeriesData
  });

});

// 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'
  });
  zingchart.render({
    id: 'selectionChart',
    data: selectionConfig,
    height: 400,
    width: '100%'
  });
});