Create marker through input

<!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%;
    }

    #mask {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #FFF;
      z-index: 500;
      opacity: .5;
      visibility: hidden;
    }

    form {
      background-color: #E0E0E0;
      height: 50px;
      width: 300px;
      position: fixed;
      top: calc(50% - 25px);
      left: calc(50% - 150px);
      z-index: 1000;
      padding: 10px;
      border-radius: 5px;
      opacity: 1;
      visibility: hidden;
    }
  </style>
</head>

<body>
  <div id="mask"></div>

  <form>
    <label>Marker text:</label>
    <input type="text" id="marker-text">
    <hr>
    <button onclick="return drawMarker();">Submit</button>
  </form>

  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      type: "line",
      title: {
        text: 'Click on scale text (items)'
      },
      plot: {
        tooltip: {
          visible: false
        }
      },
      crosshairX: {},
      "scale-x": {
        markers: [],
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        item: {
          flat: false,
          cursor: 'hand'
        },
        label: {
          text: "Click scale text numbers"
        }
      },
      "scale-y": {
        markers: [],
        item: {
          flat: false,
          cursor: 'hand'
        }
      },
      series: [{
          values: [35, 42, 67, 89, 25, 34, 67]
        },
        {
          values: [35, 42, 67, 89, 25, 34, 67].sort()
        }
      ]
    };

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

    function Marker(index) {
      return {
        type: 'line',
        lineColor: '#8BC34A',
        lineWidth: 2,
        range: [index],
        label: {
          text: "Default text",
          angle: 0
        }
      }
    }

    var activeMarkers = {};
    var activeMarkerInfo = {
      windowIsActive: false,
      marker: null,
      scale: null,
      index: null
    };
    activeMarkers['scale-x'] = [];
    activeMarkers['scale-y'] = [];

    zingchart.label_click = function(e) {

      // If user trys to trick us by adjusting CSS put a light clientside validation
      if (!activeMarkerInfo.windowIsActive) {
        console.log(e)
        var scale = e.scale;
        var nodeIndex = scale == 'scale-x' ? e.label.index : e.text;
        var newMarker = new Marker(nodeIndex);
        activeMarkerInfo.marker = newMarker;
        activeMarkerInfo.scale = e.scale;
        activeMarkerInfo.index = nodeIndex;

        // check to see if that marker already exists. If it does set the modal text
        if (activeMarkers[scale][nodeIndex] && activeMarkers[scale][nodeIndex].type) {
          document.getElementById('marker-text').value = activeMarkers[scale][nodeIndex].label.text;
        }

        document.getElementById('mask').style.visibility = 'visible';
        document.querySelector('form').style.visibility = 'visible';
        activeMarkerInfo.windowIsActive = true;
        document.querySelector('form #marker-text').focus();
      }
    }

    window.drawMarker = function() {
      var formElem = document.querySelector('form');
      var scale = activeMarkerInfo.scale;
      var nodeIndex = activeMarkerInfo.index;
      var newMarker = activeMarkerInfo.marker;
      var markerText = null;
      markerText = formElem.querySelector('#marker-text').value;

      if (markerText === "") {
        markerText = "Default Text"
      }

      // update marker
      newMarker.label.text = markerText;
      activeMarkers[scale][nodeIndex] = newMarker;

      // update chart
      myConfig[scale].markers = activeMarkers[scale];
      zingchart.exec('myChart', 'setdata', {
        data: myConfig
      });

      // hide and clear elements
      document.getElementById('mask').style.visibility = 'hidden';
      formElem.querySelector('#marker-text').value = '';
      formElem.style.visibility = 'hidden';
      activeMarkerInfo.windowIsActive = false;

      // make sure form doesn't execute! 
      return false;
    };
  </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="mask"></div>

  <form>
    <label>Marker text:</label>
    <input type="text" id="marker-text">
    <hr>
    <button onclick="return drawMarker();">Submit</button>
  </form>

  <div id='myChart'></div>
</body>

</html>

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

#mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFF;
  z-index: 500;
  opacity: .5;
  visibility: hidden;
}

form {
  background-color: #E0E0E0;
  height: 50px;
  width: 300px;
  position: fixed;
  top: calc(50% - 25px);
  left: calc(50% - 150px);
  z-index: 1000;
  padding: 10px;
  border-radius: 5px;
  opacity: 1;
  visibility: hidden;
}

var myConfig = {
  type: "line",
  title: {
    text: 'Click on scale text (items)'
  },
  plot: {
    tooltip: {
      visible: false
    }
  },
  crosshairX: {},
  "scale-x": {
    markers: [],
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    item: {
      flat: false,
      cursor: 'hand'
    },
    label: {
      text: "Click scale text numbers"
    }
  },
  "scale-y": {
    markers: [],
    item: {
      flat: false,
      cursor: 'hand'
    }
  },
  series: [{
      values: [35, 42, 67, 89, 25, 34, 67]
    },
    {
      values: [35, 42, 67, 89, 25, 34, 67].sort()
    }
  ]
};

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

function Marker(index) {
  return {
    type: 'line',
    lineColor: '#8BC34A',
    lineWidth: 2,
    range: [index],
    label: {
      text: "Default text",
      angle: 0
    }
  }
}

var activeMarkers = {};
var activeMarkerInfo = {
  windowIsActive: false,
  marker: null,
  scale: null,
  index: null
};
activeMarkers['scale-x'] = [];
activeMarkers['scale-y'] = [];

zingchart.label_click = function(e) {

  // If user trys to trick us by adjusting CSS put a light clientside validation
  if (!activeMarkerInfo.windowIsActive) {
    console.log(e)
    var scale = e.scale;
    var nodeIndex = scale == 'scale-x' ? e.label.index : e.text;
    var newMarker = new Marker(nodeIndex);
    activeMarkerInfo.marker = newMarker;
    activeMarkerInfo.scale = e.scale;
    activeMarkerInfo.index = nodeIndex;

    // check to see if that marker already exists. If it does set the modal text
    if (activeMarkers[scale][nodeIndex] && activeMarkers[scale][nodeIndex].type) {
      document.getElementById('marker-text').value = activeMarkers[scale][nodeIndex].label.text;
    }

    document.getElementById('mask').style.visibility = 'visible';
    document.querySelector('form').style.visibility = 'visible';
    activeMarkerInfo.windowIsActive = true;
    document.querySelector('form #marker-text').focus();
  }
}

window.drawMarker = function() {
  var formElem = document.querySelector('form');
  var scale = activeMarkerInfo.scale;
  var nodeIndex = activeMarkerInfo.index;
  var newMarker = activeMarkerInfo.marker;
  var markerText = null;
  markerText = formElem.querySelector('#marker-text').value;

  if (markerText === "") {
    markerText = "Default Text"
  }

  // update marker
  newMarker.label.text = markerText;
  activeMarkers[scale][nodeIndex] = newMarker;

  // update chart
  myConfig[scale].markers = activeMarkers[scale];
  zingchart.exec('myChart', 'setdata', {
    data: myConfig
  });

  // hide and clear elements
  document.getElementById('mask').style.visibility = 'hidden';
  formElem.querySelector('#marker-text').value = '';
  formElem.style.visibility = 'hidden';
  activeMarkerInfo.windowIsActive = false;

  // make sure form doesn't execute! 
  return false;
};