node click adds marker at node + label

<!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,
    #myChart {
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      type: 'line',
      title: {
        text: 'Click On A Node'
      },
      plot: {
        tooltip: {
          visible: false
        },
        cursor: 'hand'
      },
      scaleX: {
        labels: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
      },
      scaleY: {
        markers: []
      },
      series: [{
          values: [35, 42, 67, 89, 25, 34, 67]
        },
        {
          values: [15, 42, 67, 89, 25, 34, 67].sort()
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });

    /*
     * define marker class to construct
     * markers on the fly easier.
     */
    function Marker(_index, _text, _plotindex) {
      return {
        type: 'line',
        lineColor: (_plotindex == 0) ? '#4CAF50' : '#FFC107',
        lineWidth: 5,
        offsetY: (_plotindex == 0) ? -2 : 2,
        range: [_index],
        label: {
          text: _text,
          angle: 0,
          offsetY: (_plotindex == 0) ? 0 : 17,
        }
      }
    }

    // global array for markers since you can only update the whole array
    var markersArray = [];

    // hash table for markers
    var markerHashTable = {};
    markerHashTable['plotindex_0'] = {};
    markerHashTable['plotindex_1'] = {};

    /*
     * Register a node_click event and then render a chart with the markers
     */
    zingchart.bind('myChart', 'node_click', function(e) {
      console.log(e)

      // check hash table. Add marker
      if (!markerHashTable['plotindex_' + e.plotindex][e.value]) {
        var labelText = e.scaletext + ' plotindex: ' + e.plotindex + ' with a value of ' + e.value + ' was clicked';

        // create a marker
        var newMarker = new Marker(e.value, labelText, e.plotindex);

        markerHashTable['plotindex_' + e.plotindex][e.value] = true;
        markersArray.push(newMarker);

        // render the marker
        myConfig.scaleY.markers = markersArray;
        zingchart.exec('myChart', 'setdata', {
          data: myConfig
        });
      }

    });
  </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'></div>
</body>

</html>

html,
body,
#myChart {
  height: 100%;
  width: 100%;
}

var myConfig = {
  type: 'line',
  title: {
    text: 'Click On A Node'
  },
  plot: {
    tooltip: {
      visible: false
    },
    cursor: 'hand'
  },
  scaleX: {
    labels: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
  },
  scaleY: {
    markers: []
  },
  series: [{
      values: [35, 42, 67, 89, 25, 34, 67]
    },
    {
      values: [15, 42, 67, 89, 25, 34, 67].sort()
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: '100%',
  width: '100%'
});

/*
 * define marker class to construct
 * markers on the fly easier.
 */
function Marker(_index, _text, _plotindex) {
  return {
    type: 'line',
    lineColor: (_plotindex == 0) ? '#4CAF50' : '#FFC107',
    lineWidth: 5,
    offsetY: (_plotindex == 0) ? -2 : 2,
    range: [_index],
    label: {
      text: _text,
      angle: 0,
      offsetY: (_plotindex == 0) ? 0 : 17,
    }
  }
}

// global array for markers since you can only update the whole array
var markersArray = [];

// hash table for markers
var markerHashTable = {};
markerHashTable['plotindex_0'] = {};
markerHashTable['plotindex_1'] = {};

/*
 * Register a node_click event and then render a chart with the markers
 */
zingchart.bind('myChart', 'node_click', function(e) {
  console.log(e)

  // check hash table. Add marker
  if (!markerHashTable['plotindex_' + e.plotindex][e.value]) {
    var labelText = e.scaletext + ' plotindex: ' + e.plotindex + ' with a value of ' + e.value + ' was clicked';

    // create a marker
    var newMarker = new Marker(e.value, labelText, e.plotindex);

    markerHashTable['plotindex_' + e.plotindex][e.value] = true;
    markersArray.push(newMarker);

    // render the marker
    myConfig.scaleY.markers = markersArray;
    zingchart.exec('myChart', 'setdata', {
      data: myConfig
    });
  }

});