I am trying to draw svg markers on a PixiOverlay.js (a drawing overlay using Pixi.js). Completely new to Pixi myself, I think I have put something together that draws a diamond shape, see first code snippet (if it is not correct, or needs improvement let me know)
On pixiOverlay github page there is a nice demo that renders lots of polygons on a map. I have stripped this demo down to its bare minimum (see second code snippet below). In this code there is a drawPoly function which as the name suggests, draws the polygons.
I want to replace that with another function that just draws the diamond-shaped svg marker at some predefined point (could be the first point in the polygon coordinates for example, or just a random one)
How can I do this please?
In real life I have quite a few of these markers, all some geometric shape like triangles, stars, squares, circles, etc, and in total there will be several thousands of them (like 100K or even more, depending on the zoom level ofcourse. At zoom=0 could be close to a million)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src='https://d157l7jdn8e5sf.cloudfront.net/dev/pixi.js'></script>
<!--<script src="https://cdn.rawgit.com/manubb/Leaflet.PixiOverlay/master/docs/js/example.min.js">--></script>
<script id="rendered-js">
var renderer;
renderer = PIXI.autoDetectRenderer();
document.body.appendChild(renderer.view);
var graphics = new PIXI.Graphics();
graphics.lineStyle(5, 0x00FF00, 1);
graphics.moveTo(0, 75);
graphics.lineTo(50, 0);
graphics.lineTo(100, 75);
graphics.lineTo(50, 150);
graphics.lineTo(0, 75);
graphics.cacheAsBitmap = true;
renderer.render(graphics);
</script>
</body>
</html>
<!DOCTYPE html>
<html style="height: 100%; margin: 0;">
<head>
<title>Leaflet.PixiOverlay example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!--jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!--d3 -->
<script src='https://d3js.org/d3.v4.min.js'></script>
<!-- leaflet v 1.0.3 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet-src.js"></script>
<!-- I think this Pixi.js and PixiOverlay.js in one file?? -->
<script src="https://cdn.rawgit.com/manubb/Leaflet.PixiOverlay/master/docs/js/example.min.js"></script>
</head>
<body style="height: 100%; margin: 0; overflow: hidden;">
<div id="mymap" style="height: 100%; width: 100%;" >
</div>
<script>
var countries =
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {"name": "UK"},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-4.965, 58.58], [-5.97, 57.58], [-6.459, 56.31], [-5.05, 54.72],[-3.47, 54.36], [-4.08, 53.27],[-5.22, 51.78],[-3.38, 51.37],[-5.58, 50.12], [1.31, 51.09],[0.61, 51.42], [1.66, 52.69],[0.04, 52.88], [0.39, 53.40],[-2.32, 55.97], [-1.80, 57.53],[-3.95, 57.58], [-3.03, 58.60], [-4.96, 58.58],
]
]
}
},
{
"type": "Feature",
"properties": {"name": "France"},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[2.54, 51.09],[-4.65, 48.37],[-1.23, 46.01],[-1.49, 43.61],[3.03, 42.45],[3.64, 43.45],[7.69, 43.77], [5.97, 46.37],[8.04, 48.98],[2.54, 51.09],
]
]
}
}
]
};
function drawPoly(color, alpha, project, container) {
return function (poly) {
var shape = new PIXI.Polygon(poly[0].map(function (point) {
var proj = project([point[1], point[0]]);
return new PIXI.Point(proj.x, proj.y);
}));
container.beginFill(color, alpha);
container.drawShape(shape);
};
}
function renderChart() {
var map = L.map('mymap').setView(new L.LatLng(50, 1.0), 5);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
minZoom: 0,
maxZoom: 9
}).addTo(map);
map.zoomControl.setPosition('bottomright');
var firstDraw = true;
var pixiContainer = new PIXI.Graphics();
var doubleBuffering = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var pixiOverlay = L.pixiOverlay(function (utils) {
var container = utils.getContainer();
var renderer = utils.getRenderer();
var project = utils.latLngToLayerPoint;
var bounds;
if (firstDraw) {
countries.features.forEach(function (feature, index) {
var color = 0xFF0000,
alpha = 0.8;
if (feature.geometry === null) return;
if (feature.geometry.type === 'Polygon') {
bounds = L.bounds(feature.geometry.coordinates[0]);
drawPoly(color, alpha, project, container)(feature.geometry.coordinates);
}
});
}
firstDraw = false;
renderer.render(container);
}, pixiContainer, {
doubleBuffering: doubleBuffering,
destroyInteractionManager: true
});
pixiOverlay.addTo(map);
};
renderChart()
</script>
</body>
</html>
Just as drawPoly() make another function for drawMarker(), put your marker code in it and pass the container (as done in the example you gave).
I have used your example:
<!DOCTYPE html>
<html style="height: 100%; margin: 0;">
<head>
<title>Leaflet.PixiOverlay example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!--jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!--d3 -->
<script src='https://d3js.org/d3.v4.min.js'></script>
<!-- leaflet v 1.0.3 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet-src.js"></script>
<!-- I think this Pixi.js and PixiOverlay.js in one file?? -->
<script src="https://cdn.rawgit.com/manubb/Leaflet.PixiOverlay/master/docs/js/example.min.js"></script>
</head>
<body style="height: 100%; margin: 0; overflow: hidden;">
<div id="mymap" style="height: 100%; width: 100%;" >
</div>
<script>
var countries =
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {"name": "UK"},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-4.965, 58.58], [-5.97, 57.58], [-6.459, 56.31], [-5.05, 54.72],[-3.47, 54.36], [-4.08, 53.27],[-5.22, 51.78],[-3.38, 51.37],[-5.58, 50.12], [1.31, 51.09],[0.61, 51.42], [1.66, 52.69],[0.04, 52.88], [0.39, 53.40],[-2.32, 55.97], [-1.80, 57.53],[-3.95, 57.58], [-3.03, 58.60], [-4.96, 58.58],
]
]
}
},
{
"type": "Feature",
"properties": {"name": "France"},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[2.54, 51.09],[-4.65, 48.37],[-1.23, 46.01],[-1.49, 43.61],[3.03, 42.45],[3.64, 43.45],[7.69, 43.77], [5.97, 46.37],[8.04, 48.98],[2.54, 51.09],
]
]
}
}
]
};
function drawMarker(container, coords)
{
var graphics = new PIXI.Graphics();
graphics.lineStyle(10, 0xFFF0000, 1);
graphics.moveTo(0, 75);
graphics.lineTo(50, 0);
graphics.lineTo(100, 75);
graphics.lineTo(50, 150);
graphics.lineTo(0, 75);
graphics.cacheAsBitmap = true;
//graphics.width = 1000;
posX = 3000; //just a temp value
posY = 2000; // just a temp value
graphics.x = posX;
graphics.y = posY;
console.log(graphics.y);
container.addChild(graphics);
}
function drawPoly(color, alpha, project, container) {
return function (poly) {
var shape = new PIXI.Polygon(poly[0].map(function (point) {
var proj = project([point[1], point[0]]);
return new PIXI.Point(proj.x, proj.y);
}));
container.beginFill(color, alpha);
container.drawShape(shape);
};
}
function renderChart() {
var map = L.map('mymap').setView(new L.LatLng(50, 1.0), 5);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
minZoom: 0,
maxZoom: 9
}).addTo(map);
map.zoomControl.setPosition('bottomright');
var firstDraw = true;
var pixiContainer = new PIXI.Graphics();
var doubleBuffering = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var pixiOverlay = L.pixiOverlay(function (utils) {
var container = utils.getContainer();
var renderer = utils.getRenderer();
var project = utils.latLngToLayerPoint;
var bounds;
if (firstDraw) {
countries.features.forEach(function (feature, index) {
var color = 0xFF0000,
alpha = 0.8;
if (feature.geometry === null) return;
if (feature.geometry.type === 'Polygon') {
bounds = L.bounds(feature.geometry.coordinates[0]);
// drawPoly(color, alpha, project, container)(feature.geometry.coordinates);
drawMarker(container, feature.geometry.coordinates);
}
});
}
firstDraw = false;
renderer.render(container);
}, pixiContainer, {
doubleBuffering: doubleBuffering,
destroyInteractionManager: true
});
pixiOverlay.addTo(map);
};
renderChart()
</script>
</body>
</html>
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
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