Flot charts. Adapt visible chart to the yaxis - charts

Can I adapt the visble data in the chart to the Yaxis when I drag the chart across the x axis?
In the actual example I can drag the chart across the X Axis, but the chart doesnt adapted to the Y Axes. The y min, and the y max options are the same and calculate for all the chart.
http://plnkr.co/edit/Yulri34tqD80vLFHHGsD?p=preview
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Real-time updates</title>
<link href="http://www.flotcharts.org/flot/examples/examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.navigate.js"></script>
<script type="text/javascript">
$(function() {
// We use an inline data source in the example, usually data would
// be fetched from a server
var data = [],
totalPoints = 300;
var xx = 0;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5;
if (y < 0) { y = 0; } else if (y > 100) { y = 100; }
data.push(y);
}
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]]); ++xx;
}
return res;
}
// Set up the control widget
var updateInterval = 500;
var plot = $.plot("#placeholder", [ getRandomData() ], {
series: {
shadowSize: 0 // Drawing is faster without shadows
},
yaxis: {min: 0,max: 100},
xaxis: {
min: 100,max: 200,
zoomRange: [0, 300],
panRange: [0, 300]
},
yaxis: {
zoomRange: [0, 100], //minimo valor del y data, máximo valor
panRange: [0, 100]
},
crosshair: {
mode: "xy"
},
zoom: { interactive: true},
pan: {interactive: true,cursor: "crosshair"}
});
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
});
</script>
</head>
<body>
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
</body>
</html>


Take a look at
Flot charts - changing the y axis on the fly
You could get the min and max values and set the plot like that:
plot.getOptions().yaxes[0].min = 0;
plot.getOptions().yaxes[0].max = yourMAXNOW;

Related

How to draw svg markers on PixiOverlay?

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>

Mapbox access token restrict to URL does not work with github pages?

I am publishing a web page in github, https://djouallah.github.io/keplergl/ , and I am restricting the access only to those URL,(I am trying different combination)
https://djouallah.github.io
https://djouallah.github.io/keplergl
https://djouallah.github.io/keplergl/
https://djouallah.github.io/keplergl/index.html
but mapbox does not render, it works with my public token, which i can't use as i want to keep it private. here is the code for the html page
<html>
<head>
<title>deck.gl solar Farm Example</title>
<script src="https://unpkg.com/deck.gl#^7.0.0/dist.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
const {DeckGL, ScatterplotLayer} = deck;
function get_colour( d ) {
if( d === '1-pile' ) {
return [0,128,255]
} else if ( d === '2-Tracker') {
return [255,100,128]
} else if ( d === '3-module') {
return [128, 128, 128]
} else {
return [255, 255, 255]
}
}
new DeckGL({
mapboxApiAccessToken: 'pk.eyJ1IjoibWltNzg3IiwiYSI6ImNrMDFwbnNxajJseG8zY21sY2l0Mmp3MnMifQ.LQMXWc8aDucjeSkqGvRNPw',
mapStyle: 'mapbox://styles/mapbox/satellite-streets-v9',
longitude: 5.21,
latitude: 35.504,
zoom: 15,
minZoom: 5,
maxZoom: 20,
pitch: 40.5,
layers:[
new ScatterplotLayer({
id: 'scatter-plot',
data: 'https://raw.githubusercontent.com/djouallah/interactivie_map/master/data.json',
radiusScale: 3,
radiusMinPixels: 0.25,
getPosition: d => [d[0], d[1], 0],
getFillColor: d => get_colour( d[3] )
})
]
});
</script>
</html>

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

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

iTextSharp error Invalid nested tag body found, expected closing tag script

I am getting the following error when trying to generate PDF after converting a Pie Chart to Image.
Can someone advise what is wrong in my HTML file?
**Additional information: Invalid nested tag body found, expected closing tag script.**
The following call in BaseHtmlToPDF.cs raise the exception
parser.Parse(reader);
The is is my HTML file
<html>
<head>
<title> Chart</title>
<link href="https://localhost:44302/Content/report-pdf.css" rel="stylesheet" />
<link href="https://localhost:44303/Content/nv.d3.css" rel="stylesheet" />
<link href="https://localhost:44303/css/app.css" rel="stylesheet" />
<script type="text/javascript" src="https://localhost:44303/Scripts/d3.min.js"></script>
<script type="text/javascript" src="https://localhost:44303/Scripts/d3.tip.v0.6.3.js"></script>
<script type="text/javascript" src="https://localhost:44303/Scripts/nv.d3.js"></script>
</head>
<body class="reportBody">
<div id="SummaryChart">
<table cellpadding="5" cellspacing="0" width="100%" border="0">
<tr>
<td class="title-con">
<h2>IdleTime (Hours)</h2>
</td>
</tr>
<tr>
<td>
<div id="SummaryChart" style="height:500px">
<svg></svg>
</div>
</td>
</tr>
</table>
</div>
<script>
var values = [];
var data = [{
values: values,
key: 'IdleTime'
}];
data[0].values.push({"y": undefined, "x" : '2015/03/01'});
data[0].values.push({"y": undefined, "x" : '2015/03/22'});
data[0].values.push({"y": undefined, "x" : '2015/04/20'});
data[0].values.push({"y": undefined, "x" : '2015/04/21'});
data[0].values.push({"y": 19.5, "x" : '2015/04/22'});
data[0].values.push({"y": undefined, "x" : '2015/04/23'});
data[0].values.push({"y": undefined, "x" : '2015/04/24'});
data[0].values.push({"y": undefined, "x" : '2015/04/29'});
data[0].values.push({"y": undefined, "x" : '2015/04/30'});
init_graphs(data);
function init_graphs(data) {
nv.addGraph(function () {
var chart = nv.models.multiBarChart();
chart.xAxis.tickFormat(function (d) {
var dateTimeFormat = 'dd-MMM-yyyy';
dateTimeFormat = dateTimeFormat.replace('dd', '%d');
dateTimeFormat = dateTimeFormat.replace('MMM', '%b');
dateTimeFormat = dateTimeFormat.replace('yyyy', '%Y');
return d3.time.format(dateTimeFormat)(new Date(d));
});
chart.yAxis.tickFormat(d3.format(',.1f'));
chart.showLegend(false)
chart.xAxis.axisLabel('Time');
chart.yAxis.axisLabel('NPT Hours');
chart.showControls(false);
chart.margin({ left: 90, top: 90, bottom: 50, right: 20 });
chart.transitionDuration(0);
var max = 19.5;
var scale = calculate(0, !max || max < 10 ? 10 : max, 10);
chart.yDomain([scale.niceMin, scale.niceMax]);
d3.select('#SummaryChart svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function niceNum(range, round) {
// exponent of range
var exponent;
// fractional part of range
var fraction;
// nice, rounded fraction
var niceFraction;
exponent = Math.floor(Math.log(range)/Math.LN10);
fraction = range / Math.pow(10, exponent);
if (round) {
if (fraction < 1.5) niceFraction = 1;
else if (fraction < 3) niceFraction = 2;
else if (fraction < 7) niceFraction = 5;
else niceFraction = 10;
} else {
if (fraction <= 1) niceFraction = 1;
else if (fraction <= 2) niceFraction = 2;
else if (fraction <= 5) niceFraction = 5;
else niceFraction = 10;
}
return niceFraction * Math.pow(10, exponent);
}
function calculate (min, max, maxTicks) {
maxTicks = maxTicks ? maxTicks : 10;
var range = niceNum(max - min, false);
var tickSpacing = niceNum(range / (maxTicks - 1), true);
var niceMin = Math.floor(min / tickSpacing) * tickSpacing;
var niceMax = Math.ceil(max / tickSpacing) * tickSpacing;
var tickValues = [];
for (var value = niceMin; value <= niceMax; value += tickSpacing)
tickValues.push(value);
return { niceMin: niceMin, niceMax: niceMax, tickSpacing: tickSpacing, tickValues: tickValues };
}
}
</script>
</body>
</html>