Dynamic labels hooked to nodes

<!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></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      type: "scatter",
      utc: true,
      labels: [],
      title: {
        text: 'Click On A Node!',
      },
      plot: {
        marker: {
          size: 12
        }
      },
      plotarea: {
        margin: '35 dynamic'
      },
      scaleY: {
        label: {
          text: "Sales"
        },
        format: '$%v',
      },
      scaleX: {
        guide: {
          "visible": false
        },
        label: {
          text: "time"
        },
        minValue: 1420070400000,
        step: 86400000,
        transform: {
          type: "date",
          all: "%h:%i:%s<br>%d %M, %Y",
          item: {
            "visible": false
          }
        }
      },
      tooltip: {
        text: '%t <br> Sales: $%v'
      },
      series: [{
          values: [
            [1420070400000, 35],
            [1420156800000, 42],
            [1420243200000, 67],
            [1420329600000, 89],
            [1420416000000, 25],
            [1420502400000, 50],
            [1420588800000, 75]
          ],
          text: 'Department 1'
        },
        {
          values: [
            [1420070400000, 135],
            [1420156800000, 142],
            [1420243200000, 167],
            [1420329600000, 189],
            [1420416000000, 125],
            [1420502400000, 150],
            [1420588800000, 175]
          ],
          text: 'Department 2'
        }
      ]
    };


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

    /*
     * define NodeLabel class to construct
     * node labels on the fly easier.
     */
    function NodeLabel(hook, plotIndex) {
      return {
        text: hook,
        hook: hook,
        fontColor: '#fff',
        fontSize: 15,
        padding: 5,
        offsetY: -35,
        callout: true,
        position: 'bottom',
        backgroundColor: plotIndex == 0 ? '#2196f3' : '#e91e63'
      }
    }

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

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

    /*
     * Register a node_click event and then render a chart with the markers
     */
    zingchart.bind('myChart', 'node_click', function(e) {
      /*
       * example output: node:plot=2;index=9
       */
      var labelHookString = 'node:plot=' + e.plotindex + ';index=' + e.nodeindex;

      // check hash table. Add marker
      if (!nodeLabelsHashTable['plotindex_' + e.plotindex][e.value]) {


        // create a marker
        var newNodeLabel = new NodeLabel(labelHookString, e.plotindex);

        nodeLabelsHashTable['plotindex_' + e.plotindex][e.value] = true;
        nodeLabelsArray.push(newNodeLabel);

        // render the marker
        myConfig.labels = nodeLabelsArray;
        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>

var myConfig = {
  type: "scatter",
  utc: true,
  labels: [],
  title: {
    text: 'Click On A Node!',
  },
  plot: {
    marker: {
      size: 12
    }
  },
  plotarea: {
    margin: '35 dynamic'
  },
  scaleY: {
    label: {
      text: "Sales"
    },
    format: '$%v',
  },
  scaleX: {
    guide: {
      "visible": false
    },
    label: {
      text: "time"
    },
    minValue: 1420070400000,
    step: 86400000,
    transform: {
      type: "date",
      all: "%h:%i:%s<br>%d %M, %Y",
      item: {
        "visible": false
      }
    }
  },
  tooltip: {
    text: '%t <br> Sales: $%v'
  },
  series: [{
      values: [
        [1420070400000, 35],
        [1420156800000, 42],
        [1420243200000, 67],
        [1420329600000, 89],
        [1420416000000, 25],
        [1420502400000, 50],
        [1420588800000, 75]
      ],
      text: 'Department 1'
    },
    {
      values: [
        [1420070400000, 135],
        [1420156800000, 142],
        [1420243200000, 167],
        [1420329600000, 189],
        [1420416000000, 125],
        [1420502400000, 150],
        [1420588800000, 175]
      ],
      text: 'Department 2'
    }
  ]
};


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

/*
 * define NodeLabel class to construct
 * node labels on the fly easier.
 */
function NodeLabel(hook, plotIndex) {
  return {
    text: hook,
    hook: hook,
    fontColor: '#fff',
    fontSize: 15,
    padding: 5,
    offsetY: -35,
    callout: true,
    position: 'bottom',
    backgroundColor: plotIndex == 0 ? '#2196f3' : '#e91e63'
  }
}

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

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

/*
 * Register a node_click event and then render a chart with the markers
 */
zingchart.bind('myChart', 'node_click', function(e) {
  /*
   * example output: node:plot=2;index=9
   */
  var labelHookString = 'node:plot=' + e.plotindex + ';index=' + e.nodeindex;

  // check hash table. Add marker
  if (!nodeLabelsHashTable['plotindex_' + e.plotindex][e.value]) {


    // create a marker
    var newNodeLabel = new NodeLabel(labelHookString, e.plotindex);

    nodeLabelsHashTable['plotindex_' + e.plotindex][e.value] = true;
    nodeLabelsArray.push(newNodeLabel);

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

});