Update HTML Table based on the Chart's Selected Region | CanvasJS JavaScript Charts

Update HTML Table based on the Chart's Selected Region | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<table id="tableId">

  <tr class="email">
    <th>Series no.</th>
    <th>Minimum</th>
    <th>Maximum</th>
    <th>Average</th>
    <th>Current Value</th>
  </tr>
</table>

JavaScript

var noOfRows = 0;

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  zoomEnabled: true,
  rangeChanged: showTableData,
  theme: "dark2", // “light1”, “light2”, “dark1”, “dark2”
  title: {
    text: "Binance Volume Analyser"
  },
  axisX: {
    title: ""
  },
  axisY: {
    title: "",
    titleFontColor: "#4F81BC",
    lineColor: "#4F81BC",
    labelFontColor: "#4F81BC",
    tickColor: "#4F81BC"
  },
  legend: {
    cursor: "pointer",
    dockInsidePlotArea: true,
  },
  data: [{
    name: "Myrtle Beach",
    type: "spline",
    yValueFormatString: "#0.## °C",
    showInLegend: true,
    dataPoints: [
      { x: new Date(2017, 6, 24), y: 25 },
      { x: new Date(2017, 6, 25), y: 29 },
      { x: new Date(2017, 6, 26), y: 31 },
      { x: new Date(2017, 6, 27), y: 29 },
      { x: new Date(2017, 6, 28), y: 26 },
      { x: new Date(2017, 6, 29), y: 22 },
      { x: new Date(2017, 6, 30), y: 29 }
    ]
  }, {
    name: "Martha Vineyard",
    type: "spline",
    yValueFormatString: "#0.## °C",
    showInLegend: true,
    dataPoints: [
      { x: new Date(2017, 6, 24), y: 50 },
      { x: new Date(2017, 6, 25), y: 40 },
      { x: new Date(2017, 6, 26), y: 45 },
      { x: new Date(2017, 6, 27), y: 48 },
      { x: new Date(2017, 6, 28), y: 43 },
      { x: new Date(2017, 6, 29), y: 28 },
      { x: new Date(2017, 6, 30), y: 45 }
    ]
  }, {
    name: "Nantucket",
    type: "spline",
    yValueFormatString: "#0.## °C",
    showInLegend: true,
    dataPoints: [
      { x: new Date(2017, 6, 24), y: 45 },
      { x: new Date(2017, 6, 25), y: 50 },
      { x: new Date(2017, 6, 26), y: 40 },
      { x: new Date(2017, 6, 27), y: 45 },
      { x: new Date(2017, 6, 28), y: 48 },
      { x: new Date(2017, 6, 29), y: 43 },
      { x: new Date(2017, 6, 30), y: 28 },
    ]
  }, {
    name: "Vineyard",
    type: "spline",
    yValueFormatString: "#0.## °C",
    showInLegend: true,
    dataPoints: [
      { x: new Date(2017, 6, 24), y: 71 },
      {...