Sencha Ext JS 4 trouble getting drag&drop to work properly - drag-and-drop

I'm attempting to learn extjs 4 and I've been struggling with drag and drop for the past couple of days. I've attempted to build a simple application with a viewport and 1 panel. I've set the panel to be draggable: true and the viewport to be a dropzone. When I try and drag the panel around the viewport it jumps erratically.
This is a short video clip of the behavior:
http://youtu.be/6WRf5j_CAR0
These are my two files:
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'CS',
appFolder: 'ccms/app',
autoCreateViewport: true,
controllers: [
// 'TestCreator',
// 'Primary',
// 'Manager'
],
launch: function(){
var viewport = Ext.ComponentQuery.query('viewport');
if(viewport.length > 0)
viewport[0].add([{
xtype: 'panel',
width: 300,
height: 300,
draggable: true
}]);
}
});
Viewport.js
Ext.define('CS.view.Viewport', {
extend: 'Ext.container.Viewport',
// layout: 'fit',
listeners: {
render: function(sender){
console.log(sender);
sender.dropZone = new Ext.dd.DropZone(sender.container, {
getTargetFromEvent: function(e) {
console.log('getTargetFromEvent');
var temp = {
x: e.getX() - this.DDMInstance.deltaX,
y: e.getY() - this.DDMInstance.deltaY
};
console.log(temp);
return temp;
},
// On entry into a target node, highlight that node.
onNodeEnter : function(target, dd, e, data){
// Ext.fly(target).addCls('my-row-highlight-class');
},
// On exit from a target node, unhighlight that node.
onNodeOut : function(target, dd, e, data){
// Ext.fly(target).removeCls('my-row-highlight-class');
},
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data){
console.log('onNodeDrop');
data.panel.setPosition(target.x, target.y, true);
return true;
}
});
}
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cobar Systems Continuity Suite</title>
<link rel="stylesheet" type="text/css" href="http://themis.dev/ccms/resources/css/ext-all.css">
<script type="text/javascript" src="http://themis.dev/ccms/extjs/bootstrap.js"></script>
<script type="text/javascript" src="http://themis.dev/ccms/app.js"></script>
</head>
<body>
</body>
</html>
Can anyone tell me what is going on?
I've tried this with Ext JS 4.07 and the 4.1 Beta, same results


Make sure to Change your Panel to DOM element though Panel is a component
listener: {
render: function (panel) {
var PanelEl = Ext.get(panel.id);
sender.dropZone = new Ext.dd.DropZone(PanelEl, {
//...
}
}

Related

How to use supercluster

I am new to mapbox.
I need to use the supercluster project of mapbox in order to plot 6 millions of gps in a map.
i tried to use the demo in localhost but i only get an empty map !?
this is my code in index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Supercluster Leaflet demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<link rel="stylesheet" href="cluster.css" />
<style>
html, body, #map {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="index.js"></script>
<script src="https://unpkg.com/supercluster#3.0.2/dist/supercluster.min.js">
var index = supercluster({
radius: 40,
maxZoom: 16
});
index.load(GeoObs.features);
index.getClusters([-180, -85, 180, 85], 2);
</script>
</body>
</html>
Note : GeoObs is my geojson file
what is wrong ?

FWIW here is a self-contained example of how to use supercluster, without a Web Worker. It is also simply based on the repo demo.
var map = L.map('map').setView([0, 0], 0);
// Empty Layer Group that will receive the clusters data on the fly.
var markers = L.geoJSON(null, {
pointToLayer: createClusterIcon
}).addTo(map);
// Update the displayed clusters after user pan / zoom.
map.on('moveend', update);
function update() {
if (!ready) return;
var bounds = map.getBounds();
var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
var zoom = map.getZoom();
var clusters = index.getClusters(bbox, zoom);
markers.clearLayers();
markers.addData(clusters);
}
// Zoom to expand the cluster clicked by user.
markers.on('click', function(e) {
var clusterId = e.layer.feature.properties.cluster_id;
var center = e.latlng;
var expansionZoom;
if (clusterId) {
expansionZoom = index.getClusterExpansionZoom(clusterId);
map.flyTo(center, expansionZoom);
}
});
// Retrieve Points data.
var placesUrl = 'https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/test/fixtures/places.json';
var index;
var ready = false;
jQuery.getJSON(placesUrl, function(geojson) {
// Initialize the supercluster index.
index = supercluster({
radius: 60,
extent: 256,
maxZoom: 18
}).load(geojson.features); // Expects an array of Features.
ready = true;
update();
});
function createClusterIcon(feature, latlng) {
if (!feature.properties.cluster) return L.marker(latlng);
var count = feature.properties.point_count;
var size =
count < 100 ? 'small' :
count < 1000 ? 'medium' : 'large';
var icon = L.divIcon({
html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
className: 'marker-cluster marker-cluster-' + size,
iconSize: L.point(40, 40)
});
return L.marker(latlng, {
icon: icon
});
}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/demo/cluster.css" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/supercluster#4.0.1/dist/supercluster.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="map" style="height: 180px"></div>

var map = L.map('map').setView([0, 0], 0);
// Empty Layer Group that will receive the clusters data on the fly.
var markers = L.geoJSON(null, {
pointToLayer: createClusterIcon
}).addTo(map);
// Update the displayed clusters after user pan / zoom.
map.on('moveend', update);
function update() {
if (!ready) return;
var bounds = map.getBounds();
var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
var zoom = map.getZoom();
var clusters = index.getClusters(bbox, zoom);
markers.clearLayers();
markers.addData(clusters);
}
// Zoom to expand the cluster clicked by user.
markers.on('click', function(e) {
var clusterId = e.layer.feature.properties.cluster_id;
var center = e.latlng;
var expansionZoom;
if (clusterId) {
expansionZoom = index.getClusterExpansionZoom(clusterId);
map.flyTo(center, expansionZoom);
}
});
// Retrieve Points data.
var placesUrl = 'https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/test/fixtures/places.json';
var index;
var ready = false;
jQuery.getJSON(placesUrl, function(geojson) {
// Initialize the supercluster index.
index = supercluster({
radius: 60,
extent: 256,
maxZoom: 18
}).load(geojson.features); // Expects an array of Features.
ready = true;
update();
});
function createClusterIcon(feature, latlng) {
if (!feature.properties.cluster) return L.marker(latlng);
var count = feature.properties.point_count;
var size =
count < 100 ? 'small' :
count < 1000 ? 'medium' : 'large';
var icon = L.divIcon({
html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
className: 'marker-cluster marker-cluster-' + size,
iconSize: L.point(40, 40)
});
return L.marker(latlng, {
icon: icon
});
}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/demo/cluster.css" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/supercluster#4.0.1/dist/supercluster.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="map" style="height: 180px"></div>
var map = L.map('map').setView([0, 0], 0);
// Empty Layer Group that will receive the clusters data on the fly.
var markers = L.geoJSON(null, {
pointToLayer: createClusterIcon
}).addTo(map);
// Update the displayed clusters after user pan / zoom.
map.on('moveend', update);
function update() {
if (!ready) return;
var bounds = map.getBounds();
var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
var zoom = map.getZoom();
var clusters = index.getClusters(bbox, zoom);
markers.clearLayers();
markers.addData(clusters);
}
// Zoom to expand the cluster clicked by user.
markers.on('click', function(e) {
var clusterId = e.layer.feature.properties.cluster_id;
var center = e.latlng;
var expansionZoom;
if (clusterId) {
expansionZoom = index.getClusterExpansionZoom(clusterId);
map.flyTo(center, expansionZoom);
}
});
// Retrieve Points data.
var placesUrl = 'https://dev.infrapedia.com/api/assets/map/facilities.points.json';
var index;
var ready = false;
jQuery.getJSON(placesUrl, function(geojson) {
// Initialize the supercluster index.
index = supercluster({
radius: 60,
extent: 256,
maxZoom: 18
}).load(geojson.features); // Expects an array of Features.
ready = true;
update();
});
function createClusterIcon(feature, latlng) {
if (!feature.properties.cluster) return L.marker(latlng);
var count = feature.properties.point_count;
var size =
count < 100 ? 'small' :
count < 1000 ? 'medium' : 'large';
var icon = L.divIcon({
html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
className: 'marker-cluster marker-cluster-' + size,
iconSize: L.point(40, 40)
});
return L.marker(latlng, {
icon: icon
});
}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/demo/cluster.css" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/supercluster#4.0.1/dist/supercluster.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="map" style="height: 180px"></div>

I Solved my issue.
to use the supercluster project you need :
1) download and install : node and npm
2) with npm install supercluster: npm i supercluster
then you will get a folder named node_modules in which you will find supercluster folder under it copy the folder named dist (node_modules>supercluster>dist)
3) download from github the project supercluster here you will get a folder named supercluster-master past in it the folder dist copied in step 2)
Now you can test it by selecting index.html into your browser (supercluster-master>demo>index.html)
if you want to test another JSON or GEOJSON file just:
1) put this file under fixtures folder
(supercluster-master>test>fixtures)
then
2) open worker.js (supercluster-master>demo>worker.js) and change the first variable of the geojson function to point on that file
example :
getJSON('../test/fixtures/myFile.geojson', function (geojson) {
Alternatively
you can use the super-cluster algorithme directley in mapbox gl js mapBox gl js example or with jupyter version;mapbox-jupyter mapbox-jupyter example

Leaflet zooms so now and than too much on clicking a cluster

Leaflet zooms so now and than too much on clicking a cluster.
A small part of 1 marker is shown on the right and a small part from the other marker is shown on the left side of the map.
My workaround is counting markers in scope and re-adjust the zoomlevel when the counter = 0.
Shouldn't that be in the zoomcalculation of leaflet?
The zoom correction:
mcg.on('clusterclick', function () {
if (markersInScope == 0) {
var zoom = map.getZoom();
map.setZoom(zoom - 1);
}
});

You could try adjusting the zoom to fit the bounds of the mcg and add some padding
mcg.on('clusterclick', function () {
map.fitBounds(mcg.getBounds().pad(0.5));
}
});

If you add the markers to a featureGroup, the bounds for the group will available to you:
Here is a sample file from Leaflet:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<button onclick="geojsonLayerBounds();">Show GeoJSON layer bounds</button>
<button onclick="featureGroupBounds();">Show feature group bounds</button>
<script src="geojson-sample.js"></script>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
rectangle,
featureGroup;
var map = new L.Map('map', {
center: new L.LatLng(0.78, 102.37),
zoom: 7,
layers: [osm]
});
var geojson = L.geoJson(geojsonSample, {
style: function (feature) {
return {color: feature.properties.color};
},
onEachFeature: function (feature, layer) {
var popupText = 'geometry type: ' + feature.geometry.type;
if (feature.properties.color) {
popupText += '<br/>color: ' + feature.properties.color
}
layer.bindPopup(popupText);
}
});
geojson.addLayer(new L.Marker(new L.LatLng(2.745530718801952, 105.194091796875)))
var eye1 = new L.Marker(new L.LatLng(-0.7250783020332547, 101.8212890625));
var eye2 = new L.Marker(new L.LatLng(-0.7360637370492077, 103.2275390625));
var nose = new L.Marker(new L.LatLng(-1.3292264529974207, 102.5463867187));
var mouth = new L.Polyline([
new L.LatLng(-1.3841426927920029, 101.7333984375),
new L.LatLng(-1.6037944300589726, 101.964111328125),
new L.LatLng(-1.6806671337507222, 102.249755859375),
new L.LatLng(-1.7355743631421197, 102.67822265625),
new L.LatLng(-1.5928123762763, 103.0078125),
new L.LatLng(-1.3292264529974207, 103.3154296875)
]);
map.addLayer(eye1).addLayer(eye2).addLayer(nose).addLayer(mouth);
featureGroup = new L.FeatureGroup([eye1, eye2, nose, mouth]);
map.addLayer(geojson);
map.addLayer(featureGroup);
function geojsonLayerBounds() {
if (rectangle) {
rectangle.setBounds(geojson.getBounds());
} else {
rectangle = new L.Rectangle(geojson.getBounds());
map.addLayer(rectangle);
}
}
function featureGroupBounds() {
if (rectangle) {
rectangle.setBounds(featureGroup.getBounds());
} else {
rectangle = new L.Rectangle(featureGroup.getBounds());
map.addLayer(rectangle);
}
}
</script>
</body>
</html>

Highcharts - How to add background in bar series? And how to print page without lose quality?

I need your help, i try use "pattern" in Highcharts to use background in bars, but the images don't fill the space that i wanna.
Bar Chart Example
I wanna know, how i do to leave the image with -90° than the way that is? And how i do to leave the image with height 100% and width 25%?
And beyond that i wanna of know, how i print the screen without lose the quality in image, because when i press "ctrl+p" i see all all blurred.
Print blurred
Follow below the current code:
<!DOCTYPE html>
<html>
<head>
<title>HighCharts - Pattern Color</title>
<meta http-equiv="Content-Type" contetn="text/html;" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
Highcharts.chart('container', {
chart: {
type: 'bar',
backgroundColor: null
},
title: {
text: 'Como você está?'
},
xAxis: {
categories: ['']
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'percent',
dataLabels: {
enabled: true,
format: '<b>{point.percentage:.2f}%</b>',
//point.percentage:.1f
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Alegre',
data: [30],
color: {
pattern: 'http://emoticons.topfriends.biz/favicon.png',
width: '30',
height: '30'
}
// color: '#B22222'
}, {
name: 'Feliz',
data: [30],
color: {
pattern: 'https://t4.ftcdn.net/jpg/01/58/30/09/240_F_158300957_MhRWEx1vDO6SPVHdGS4dqNG7nLP8rdZ4.jpg',
width: '30',
height: '30'
}
// color: '#2E8B57'
}]
});
});
</script>
<div id="container" style="min-width: 80%; height: 200px; max-width: 80%; margin: 0 auto"></div>
</body>
</html>
Since now i thanks!

1. PATTERN FILL ADJUSTMENT
Refer to this live working example: http://jsfiddle.net/kkulig/opa73k8L/
Full code:
var redrawEnabled = true,
ctr = 0;
$('#container').highcharts({
chart: {
events: {
render: function() {
if (redrawEnabled) {
redrawEnabled = false;
var chart = this,
renderer = chart.renderer;
chart.series[0].points.forEach(function(p) {
var widthRatio = p.shapeArgs.width / p.shapeArgs.height,
id = 'pattern-' + p.index + '-' + ctr;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: widthRatio,
id: id,
patternContentUnits: 'objectBoundingBox'
});
renderer.image('http://emoticons.topfriends.biz/favicon.png', 0, 0, 1, widthRatio).attr({
}).add(pattern);
p.update({
color: 'url(#' + id + ')'
}, false);
});
ctr++;
chart.redraw();
redrawEnabled = true;
}
}
}
},
series: [{
type: 'bar',
borderWidth: 1,
borderColor: '#000000',
data: [10, 29.9, 71.5]
}]
});
In the redraw event I iterate all the points, create a separate pattern for every point based on its width/height ratio, apply pattern and redraw the chart.
On every redraw new set of patters are created which is not an elegant solution (old ones should be replaced instead). ctr variable is used to create unique name for each pattern.
redrawEnabled serves to prevent infinite recursive loop because chart.redraw() also calls the render event.
In my opinion the easiest way to have the rotated image is to simply provide the already rotated one.
API references:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#createElement
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image
2. PRINTING ISSUE
It seems to be a bug reported here: https://github.com/highcharts/pattern-fill/issues/20

Group Kendo ui chart category axis Date label rounding

On my below Kendo UI chart, I always wanted to show exactly 5 category (X) axis labels (which is achieved).
I have 2 questions (refer attached image for more details),
1) These labels have to be properly rounded in near by hour or 30 minute
2) Tooltip has to be formatted in dd.MM.yy HH:tt
Data for this chart is received dynamically. I cannot use the category axis type as 'Date' as I wanted to show all data points on the graph.
My sample code is available below,
var dataSource=[{"precisionIndex":0,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:16:29.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-7.6000000000,"data_5":-3.0000000000},{"precisionIndex":800,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:16:29.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-7.6000000000,"data_5":-3.0000000000},{"precisionIndex":1,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:24:50.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.8000000000,"data_4":-7.8000000000,"data_5":-2.9000000000},{"precisionIndex":3,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:36:00.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.8000000000,"data_4":-7.4000000000,"data_5":-2.8000000000},{"precisionIndex":4,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:41:34.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.9000000000,"data_4":-7.5000000000,"data_5":-3.0000000000},{"precisionIndex":5,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:47:09.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-7.7000000000,"data_5":-3.1000000000},{"precisionIndex":6,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:52:44.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.6000000000,"data_4":-8.1000000000,"data_5":-3.1000000000},{"precisionIndex":7,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:58:18.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.6000000000,"data_4":-8.3000000000,"data_5":-3.3000000000},{"precisionIndex":8,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:03:53.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.6000000000,"data_4":-9.0000000000,"data_5":-3.3000000000},{"precisionIndex":9,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:09:28.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.8000000000,"data_4":-9.1000000000,"data_5":-3.5000000000},{"precisionIndex":10,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:15:02.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.8000000000,"data_4":-9.5000000000,"data_5":-3.8000000000},{"precisionIndex":11,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:20:37.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.6000000000,"data_4":-9.7000000000,"data_5":-3.7000000000},{"precisionIndex":12,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:26:12.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-9.9000000000,"data_5":-3.8000000000},{"precisionIndex":13,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:31:46.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.6000000000,"data_4":-10.2000000000,"data_5":-3.9000000000},{"precisionIndex":14,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:37:21.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.5000000000,"data_4":-10.6000000000,"data_5":-4.3000000000},{"precisionIndex":15,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:42:56.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-11.0000000000,"data_5":-4.5000000000},{"precisionIndex":16,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:48:30.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-11.4000000000,"data_5":-4.3000000000},{"precisionIndex":17,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:54:05.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.5000000000,"data_4":-11.8000000000,"data_5":-4.8000000000},{"precisionIndex":18,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:59:40.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-12.1000000000,"data_5":-5.1000000000},{"precisionIndex":24,"subPrecisionIndex":0,"measurementDate":"2017-06-07T15:33:07.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-12.3000000000,"data_5":-5.5000000000},{"precisionIndex":26,"subPrecisionIndex":0,"measurementDate":"2017-06-07T15:44:17.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-12.2000000000,"data_5":-5.7000000000},{"precisionIndex":27,"subPrecisionIndex":0,"measurementDate":"2017-06-07T15:49:51.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.6000000000,"data_4":-12.3000000000,"data_5":-5.7000000000},{"precisionIndex":28,"subPrecisionIndex":0,"measurementDate":"2017-06-07T15:55:26.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-12.4000000000,"data_5":-5.8000000000},{"precisionIndex":29,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:01:01.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.5000000000,"data_4":-13.1000000000,"data_5":-5.9000000000},{"precisionIndex":30,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:06:35.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.5000000000,"data_4":-13.4000000000,"data_5":-6.3000000000},{"precisionIndex":31,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:12:10.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.9000000000,"data_4":-13.6000000000,"data_5":-6.7000000000},{"precisionIndex":32,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:17:45.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.0000000000,"data_4":-13.9000000000,"data_5":-6.9000000000},{"precisionIndex":33,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:23:19.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.1000000000,"data_4":-13.7000000000,"data_5":-7.4000000000},{"precisionIndex":34,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:28:54.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.1000000000,"data_4":-14.3000000000,"data_5":-7.9000000000},{"precisionIndex":35,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:34:29.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.3000000000,"data_4":-14.3000000000,"data_5":-8.0000000000},{"precisionIndex":36,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:40:03.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.3000000000,"data_4":-14.4000000000,"data_5":-8.4000000000},{"precisionIndex":37,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:45:38.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.4000000000,"data_4":-14.8000000000,"data_5":-8.4000000000},{"precisionIndex":38,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:51:13.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.4000000000,"data_4":-15.0000000000,"data_5":-9.0000000000},{"precisionIndex":39,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:56:47.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.2000000000,"data_4":-15.2000000000,"data_5":-9.3000000000},{"precisionIndex":40,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:02:22.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.4000000000,"data_4":-15.6000000000,"data_5":-9.6000000000},{"precisionIndex":41,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:07:57.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.5000000000,"data_4":-15.7000000000,"data_5":-10.0000000000},{"precisionIndex":42,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:13:31.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.6000000000,"data_4":-16.1000000000,"data_5":-10.6000000000},{"precisionIndex":43,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:19:06.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.5000000000,"data_4":-16.6000000000,"data_5":-11.5000000000},{"precisionIndex":44,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:24:40.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.8000000000,"data_4":-16.6000000000,"data_5":-11.7000000000},{"precisionIndex":45,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:30:15.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-16.7000000000,"data_5":-11.8000000000},{"precisionIndex":46,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:35:50.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-16.4000000000,"data_5":-12.0000000000},{"precisionIndex":47,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:41:24.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-17.2000000000,"data_5":-12.5000000000},{"precisionIndex":48,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:46:59.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.9000000000,"data_4":-17.3000000000,"data_5":-12.6000000000},{"precisionIndex":50,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:58:08.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.8000000000,"data_4":-17.4000000000,"data_5":-13.0000000000},{"precisionIndex":52,"subPrecisionIndex":0,"measurementDate":"2017-06-07T18:09:18.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-17.4000000000,"data_5":-12.9000000000},{"precisionIndex":53,"subPrecisionIndex":0,"measurementDate":"2017-06-07T18:14:52.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-17.4000000000,"data_5":-13.0000000000},{"precisionIndex":55,"subPrecisionIndex":0,"measurementDate":"2017-06-07T18:26:02.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-17.7000000000,"data_5":-13.1000000000},{"precisionIndex":57,"subPrecisionIndex":0,"measurementDate":"2017-06-07T18:37:11.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.8000000000,"data_4":-17.5000000000,"data_5":-13.1000000000},{"precisionIndex":59,"subPrecisionIndex":0,"measurementDate":"2017-06-07T18:48:20.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-17.6000000000,"data_5":-13.0000000000}];
$("#chart").kendoChart({
dataSource: dataSource,
seriesDefaults: {
type: "line"
},
series: [
{
field: "data_3",
name: "Profit 2"
},
{
field: "data_4",
name: "Profit 1"
}],
categoryAxis: {
field: "measurementDate",
type:"category",
labels: {
template: function(e){
var val =new Date(e.value);
var label = kendo.toString(val, "dd.MM.yy HH:mm");
return label.split(" ").join("\n");
}
}
},
valueAxis: {
axisCrossingValue: Number.MIN_SAFE_INTEGER
},
tooltip: {
visible: true,
shared: true
},
dataBound: function (e) {
var ds = this.dataSource.data();
var maxDateCategories = 4;
var step = Math.round(ds.length / maxDateCategories);
// display only 'n'th categories on xAxis
this.options.categoryAxis.labels.step = step;
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<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/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script></head>
<body>
<div id="chart"> </div>
</body>
</html>

For the Tooltip you can use the sharedTemplate to format the category as desired:
sharedTemplate: '<div> #= kendo.toString(new Date(category), "dd.MM.yy HH:mm") # </div># for (var i = 0; i < points.length; i++) { # <div>#: points[i].series.name# : #: points[i].value #</div># } #'
For the label template, add your own rounding logic for the timestamp, e.g.:
labels: {
template: function(e){
var val =new Date(e.value);
var mins = val.getMinutes();
if (mins < 15 ) {
val.setMinutes(0);
} else if (mins < 45) {
val.setMinutes(30);
} else {
val.setHours(val.getHours() + 1);
val.setMinutes(0);
}
var label = kendo.toString(val, "dd.MM.yy HH:mm");
return label.split(" ").join("\n");
}
}
DEMO

infinite scrolling not compatible with masonry

I'm having a lot of trouble getting masonry to work alongside infinite scrolling. I've done everything I possibly can do and still nothing. Is there something wrong with my code, or did I just miss something completely?
This is my code:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script>
$(window).load( function() {
$('#content').masonry({
"itemSelector": ".entry",
"columnWidth": ".grid-sizer",
});
$container.infinitescroll({
itemSelector : ".entry",
navSelector : "#pagination",
nextSelector : "#pagination a",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>

You are loading infinite-scroll twice (1st and 4th in the following code) and I do not see you are loading jQuery, which should be first. A jsfiddle would help to narrow down other issues.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>