Group Kendo ui chart category axis Date label rounding

Group Kendo ui chart category axis Date label rounding - charts

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

Related

How to force a close spider after adding a new group of markers?

I use the following libraries:
leaflet.js
leaflet.markercluster.js
leaflet.subgroup.js
and my own script.
I have 3 marker types, all in a different subgroups. 11 Markers are on the same location. When I open the cluster the spider is shown, on unchecking 1 marker type, the spider is closed and the counter shows the right value. When I reopen the cluster, modified spider is shown.
Checking the marker type does not put the extra spider-marker on the screen, but also does not close the spider.
How can I force the spider to be closed?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bee-Idees kaart</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.3.0/dist/MarkerCluster.Default.css" />
<script type='text/javascript' src='https://unpkg.com/leaflet#1.3.1/dist/leaflet.js'></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster#1.3.0/dist/leaflet.markercluster.js'></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.featuregroup.subgroup#1.0.2/dist/leaflet.featuregroup.subgroup.js'></script>
</head>
<body>
<div id="map" style="height: 580px; border: 1px solid #AAA;"></div>
</body>
<script>
markers = [
{
"name": "Moordrecht",
"lat": 52.019716,
"lng": 5.183973,
"marker": "green"
},
{
"name": "Zoetermeer",
"lat": 52.046985,
"lng": 4.478968,
"marker": "red"
},
{
"name": "Gouda",
"lat": 52.021616,
"lng": 4.687917,
"marker": "green"
},
{
"name": "Gouda 2",
"lat": 52.021616,
"lng": 4.687917,
"marker": "blue"
},
{
"name": "Gouda 3",
"lat": 52.021616,
"lng": 4.687917,
"marker": "red"
}
];
</script>
<script>
var iconBase = 'css\\icons\\';
// Standard fields
var groupLabel = [];
groupLabel[0] = "Red";
groupLabel[1] = "Blue";
groupLabel[2] = "Green";
var map = L.map('map', {
center: [52.021616, 4.85],
zoom: 10
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
subdomains: ['a', 'b', 'c']
}).addTo(map);
var mcg = L.markerClusterGroup(),
group0 = L.featureGroup.subGroup(mcg),
group1 = L.featureGroup.subGroup(mcg),
group2 = L.featureGroup.subGroup(mcg),
control = L.control.layers(null, null, { collapsed: false }), i, a, title, m;
mcg.addTo(map);
var markerClusters = L.markerClusterGroup();
for (var i = 0; i < markers.length; ++i) {
var iconName = iconBase + markers[i].marker + ".png";
var myIcon = L.icon({ iconUrl: iconName, iconAnchor: [20, 40] })
var popup = '<h2>' + markers[i].name + '</h2>';
var m = L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon, title: markers[i].name} )
.bindPopup( popup );
if (markers[i].marker === "red") { m.addTo(group0);}
else if (markers[i].marker === "blue") { m.addTo(group1); }
else if (markers[i].marker === "green") { m.addTo(group2); }
}
control.addOverlay(group0, groupLabel[0]);
control.addOverlay(group1, groupLabel[1]);
control.addOverlay(group2, groupLabel[2]);
control.addTo(map);
group0.addTo(map);
group1.addTo(map);
group2.addTo(map);
map.addLayer(mcg);
map.on('overlayadd', function() {
// How can I close the spider
});
map.on('overlayremove', function() {
});
</script>
</html>

Pasted the code provided in your question into Plunker for a live demo: https://plnkr.co/edit/ZzKRs5NnrJeWfBKWOA3R?p=preview
Hum looks like you are hitting a bug in Leaflet.markercluster.
When you tick in your SubGroup in the Layers Control, the former will use the parent group's (mcg in your case) addLayers method if it exists.
While MCG addLayer (single) correctly unspiderfies, this step is missing in addLayers (batch).
Reproducing the bug with a more simple example: https://plnkr.co/edit/G4GAjax5fi3LUqJRLLPN?p=preview (without Leaflet.FeatureGroup.SubGroup plugin)
Then it should be quite simple to fix this bug: simply unspiderfy, similarly to how it is done in addLayer:
if (this._map && this._unspiderfy) {
this._unspiderfy();
}
Updated simple example: https://plnkr.co/edit/lgvRtiRo7nh9VaWuI0RM?p=preview
Updated your code: https://plnkr.co/edit/CjjcHlZW6vpJ6075Ma3F?p=preview

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

Flot charts. Adapt visible chart to the yaxis

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;

Not able to bind column data when there is space in json

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>OData Date Table Multiple Sorters</title>
<link rel="stylesheet" type="text/css" href="">
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_goldreflection">
</script>
<script>
var airsideTableDataOriginal=
//{"genericTableModel":
[
{"columnId":"col1","WS":"WS 1","Status":0},
{"columnId":"col 2","WS":"WS 2","Status":1},
{"columnId":"col3","WS":"WS 3","Status":2},
{"columnId":"col4","WS":"WS 4","Status":3},
{"columnId":"col5","WS":"WS 5","Status":4},
];
var aColumnData = [{
columnId: "col1"
}, {
columnId: "col 2"
}, {
columnId: "col3"
}, {
columnId: "col4"
}, {
columnId: "col5"
}];
var aData = [{
"col 2": "WS 2",
col3: "WS 3",
col4: "WS 4",
col5: "WS 5"
}];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
columns: aColumnData,
rows: aData
});
var oTable = new sap.ui.table.Table({
title: "Table column and data binding",
showNoData : true,
columnHeaderHeight : 10,
visibleRowCount: 7
});
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(index, context) {
var sColumnId = context.getObject().columnId;
var tempJson=airsideTableDataOriginal;
return new sap.ui.table.Column({
id : sColumnId,
label: sColumnId,
template: new sap.ui.commons.Button({
text : {
path: sColumnId,
formatter: function(value){
if(value!=null){
var specificJson= $.grep(tempJson, function( n, i ) {
return n.columnId === sColumnId.toString() && n.WS === value.toString();
});
if(specificJson[0].Status == 1){
this.setIcon("sap-icon://accept");
this.setStyle(sap.ui.commons.ButtonStyle.Accept);
}
}
if(value === "" || value == undefined){
this.setVisible(false);
}
return value ;
}
},
}),
sortProperty: sColumnId,
filterProperty: sColumnId
});
});
oTable.bindRows("/rows");
oTable.placeAt("content");
</script>
</head>
<body class="sapUiBody" id="body" role="application">
<div id="content"></div>
</body>
</html>
As per the above code there is space between col 2 which gives error "col 2" is not a valid ID.. Here is the bin. But when I replace col 2 with col2 it works fine. But in real time I get spaces in data so how to fix it so that it would work with spaces also.

I would guess, that the error comes from the invalid ID of the Column object: id : sColumnId, (the first line after return new sap.ui.table.Column({) and not from the binding.
Like Mark said in his comment Element IDs cannot contain spaces. But the ID is not visible to the User and you can just replace the spaces of the Column.id while assigning or you can skip the id assignment at all to get automaticaly generated ids.

A client who demands spaces in their ID's I would 1) definitely steer clear from, and if that's not possible, 2) educate them that their "requirement" is utter [...]
Nevertheless, I would simply replace the spaces with underscores (it's really simple Javascript):
airsideTableDataOriginal.forEach(function(obj) {
obj.columnId = obj.columnId.replace(/ /g,"_");
});
aColumnData.forEach(function(obj) {
obj.columnId = obj.columnId.replace(/ /g,"_");
});
aData.forEach(function(obj) {
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
if (~property.indexOf(" ")) {
var newProperty = property.replace(/ /g,"_");
obj[newProperty] = obj[property];
delete obj[property];
}
}
}
});

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

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, {
//...
}
}