Kendo Linear Gauge,showing labels only for the values in the series and comma separated labels for repeating ranges

<!DOCTYPE html>
<html>

<head>
  <base href="http://demos.telerik.com/kendo-ui/linear-gauge/scale-options">
  <style>
    html {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <title>Linear Gauge</title>
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />

  <script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
  <script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>

</head>

<body>


  <input type='button' id='increase' value="+" />
  <input type='button' id='decrease' value="-" />
  <div id="example" class="k-content">
    <div id="container" style="width: 350px; height: 550px; border:1px solid black; ">
      <div id="gauge"></div>

    </div>
    <script>
      $(document).ready(function() {
        $(function() {
          panZoomInstance = svgPanZoom('svg', {
            zoomEnabled: true,
            controlIconsEnabled: true,
            fit: true,
            center: true,
            minZoom: 0.1
          });

          // zoom out
          panZoomInstance.zoom(.7)

          $("#move").on("click", function() {
            // Pan by any values from -80 to 80
            panZoomInstance.panBy({
              x: Math.round(Math.random() * 160 - 80),
              y: Math.round(Math.random() * 160 - 80)
            })
          });
        })
      });

      var ggval = [
        {
         from: 0,
        to: 100,
        color: "gray"
      },{
        from: 0,
        to: 20,
        color: "green"
      }, {
        from: 20,
        to: 35,
        color: "blue"
      }, {
        from: 35,
        to: 70,
        color: "yellow"
      }, {
        from: 75,
        to: 90,
        color: "#c20000"
      }];
      var valuesgg = [];

      function getsum() {


        for (var i = 1; i < 5; i++) {
          debugger;


          if (i == 0) {
            valuesgg.push({
              "value": ggval[i].from,
              "color": ggval[i].color,
              "label": 'Lowvalue(' + ggval[i].from + ')'
            });
            index = valuesgg.map(function(e) {
              return e.value;
            }).indexOf(ggval[i].to);

            if (index != -1) {
              valuesgg[index].label = valuesgg[index].label + ',' + 'highvalue(' + ggval[i].to + ')'
            } else {
              valuesgg.push({
                "value": ggval[i].to,
                "color": ggval[i].color,
                "label": 'highvalue(' + ggval[i].to + ')'
              });
            }
          } else {
            index = valuesgg.map(function(e) {
              return e.value;
            }).indexOf(ggval[i].from);

            if (index != -1) {
              valuesgg[index].label = valuesgg[index].label + ',' + 'Lowvalue(' + ggval[i].from + ')'
            } else {
              valuesgg.push({
                "value": ggval[i].from,
                "color": ggval[i].color,
                "label": 'lowvalue(' + ggval[i].from + ')'
              });
            }

            index = valuesgg.map(function(e) {
              return e.value;
            }).indexOf(ggval[i].to);

            if (index != -1) {
              valuesgg[index].label = valuesgg[index].label + ',' + 'highvalue(' + ggval[i].to + ')'
            } else {
              valuesgg.push({
                "value": ggval[i].to,
                "color": ggval[i].color,
                "label": 'highvalue(' + ggval[i].to + ')'
              });
            }
          }
        }

      }
      valcheck = function(val) {
        debugger;
        var retval = '';
        index = valuesgg.map(function(e) {
          return e.value;
        }).indexOf(val);
        if (index != -1) {
          retval = valuesgg[index].label;
        }
        return retval;
      }

      function createGauge() {
        getsum();
        $("#gauge").kendoLinearGauge({

          pointer: {
            value: 1,
            shape: "arrow"
          },

          scale: {
            line: {
              visible: false
            },
            labels: {
              padding: {
                right: 30
              },
              template: '#=valcheck(value)#'
            },
            majorTicks: {
              visible: false
            },
            minorTicks: {
              visible: false
            },
            majorUnit: 10,
            max: 100,
            rangeSize: 20,
            ranges: ggval,
            rangePlaceholderColor:'Gray'
          }
        });
      }

      $(document).ready(function() {
        createGauge();
   
        $("text").click(function() {
   alert($(this).text());        
});
      });
    </script>

    <style scoped>
      #gauge-container {
        text-align: center;
        margin-left: 30px;
        padding: 12px;
        width: 300px;
        height: 500px;
        margin: 0 auto;
      }
      
      #gauge {
        height: 500px;
        zoom: 1.1;
      }
      
      button {}
    </style>
  </div>
  <script>
    $("#increase").on("click", function() {
      var zoomValue = parseFloat($("#gauge").css("zoom"));

      $("#gauge").css("zoom", (zoomValue + 0.1));
    });

    $("#decrease").on("click", function() {
      var zoomValue = parseFloat($("#gauge").css("zoom"));
      if (zoomValue > 1.1)
        $("#gauge").css("zoom", (zoomValue - 0.1));
    });
  </script>

</body>

</html>

// Code goes here

/* Styles go here */