Kendo sandbox

by Edson Henrique

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<div id="chart"></div>
<img id ='img' src=''/>

JavaScript

$(document).ready(function() {

var positions = [];

const collisionAvoid = (position, list) => {
	if(_.some(list, i => Math.abs(i[0] - position[0]) <= 15 && Math.abs(i[1] - position[1]) <= 15)) {
  	return moveObject(position);
  }
  
  return _.clone(position);
}

const moveObject = (obj) => {
	let position =_.clone(obj);
  position[1] += 130;
  return position;
}

var data = _.map(_.range(0, 12), (i) => ({
                        value: _.random(600, 700),
                        value2: _.random(600, 700),
                        value3: _.random(600, 700)
                    }));
                    
  var labelPosition = (e) => {
  console.log(e.rect);
    	let center = e.rect.center();
  		let position =  collisionAvoid([center.x, e.rect.origin.y], positions);
      
      positions.push(position);
      return new kendo.drawing.Text(e.text, position);
  }

 	$("#chart").kendoChart({
  	series: [
    {type: "line", labels: { visible: true, visual: labelPosition  }, name: "Series 1", data: _.map(data, i=> i.value)},
  ]
	})
  
  var chart = $("#chart").getKendoChart();
  _.delay(() => chart.exportImage().done(function(data) {$('#img').attr('src', data);}), 1000);
  
	//console.log($('#chart svg g[clip-path] > text'));
});