We Keep Coding

ChartJS doughnut legend click

I have a problem with custom onClick function on doughnut chart.
The only thing I need is to override default legend onClick function calling the original one + my custom code.
Following their official documentation and this suggestion on github page I wrote this js
var defaultLegendClickHandler = Chart.defaults.doughnut.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
console.log(legendItem);
defaultLegendClickHandler.call(this, e, legendItem);
};
Then I associate it to the onClick option (JSfiddle here) but it is not working. It seems that the legendItem variable is always an empty array so the default click function does nothing.

Your JSfiddle looks fine except that the newLegendClickHandler is defined at the wrong place inside options. You should define it inside legend as follows.
legend: {
position: 'top',
onClick: newLegendClickHandler
},
Please also check Custom On Click Actions from Chart.js
documentation

The click handler was set to the chart itself and not the legend. Move the new onClick handler inside of the legend options.
var options = {
cutoutPercentage: 20,
responsive: true,
legend: {
position: 'top',
onClick: newLegendClickHandler,
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
};

tippy tooltip position with browser zoom in/out

I have made a popover with tippyjs. Tippy takes next options:
const tippyInstance: any = tippy(element, {
content: loaderTemplate,
placement: 'right',
animation: 'fade',
animateFill: false,
theme: 'kpi-tooltip',
trigger: 'manual',
interactive: true,
onHidden: () => {
tippyInstance.destroy();
},
allowHTML: true
});
"Element" is a plain html element and content loading after response from server. The problem is when i make browser zoom in or zoom out the tooltips changes position. I'm using chrome last version.
Tooltip in normal state:
Tooltip with zoom in:

"appendTo" property option solved the problem.

Google Maps Polygone "clickable: false" shows no effect

I'm working with the google maps API-v3. I'm adding a polygone to my map and a bunch of Polylines. These lines are usually located within the area of the polygones. This looks like so:
I disabled the click-event on the polygone:
let mapPolygone = {
id: currentPolygone.Id, //currentPolygone is just a wrapper
path: path,
stroke: {
color: currentPolygone.LineColor,
weight: currentPolygone.LineWeight
},
fill: {
color: currentPolygone.FillColor,
opacity: currentPolygone.Opacity
},
editable: false,
draggable: false,
geodesic: false,
// I disabled the click
clickable: false,
visible: true,
}
I registered a click-handler on the polyine:
let mapPolyline = {
// currentPolyline is also a wrapper
id: currentPolyline.Id,
path: path,
stroke: {
color: currentPolyline.LineColor,
weight: currentPolyline.LineWeight
},
strokeOpacity: 1,
editable: false,
draggable: false,
geodesic: false,
clickable: true,
visible: true,
icons: this.getIcons(currentPolyline), // generates a standard GMap-Arrow
events: {
//Here goes the click event. Doing stuff on
click: (polyline: any) => {
this.$scope.polyLineClicked(currentPolyline.Id);
}
}
}
What I expect from google, and from another thread, is that the polygone ignores the click and whathever element is below the polyline gets the click.
However, this is not the case. I still get the click-cursor when being above the polygone
and it still gets the click.
The order of drawing polylines/polygones happens in random order. Sometimes the line is clickable (when painted above the polygone), but usually it's not.
Is there any way to get this working without coming up with custom overlays and things like that?
Am I missing something here?
Thank you folks in advance!

Alright, preparing the MWE, recommended by #duncan did the trick.
I'm using the angular-google-map package, which provides an angular wrapper for the Google Maps API.
Polylines and Polygones are being passed to a directive:
<ui-gmap-google-map center='map.center'
zoom='map.zoom'
options="map.options"
aria-label="Google map"
control="map.control"
events="map.events"
refresh="refresh">
<!-- Polylines-->
<ui-gmap-polyline ng-repeat="p in mapPolylines"
path="p.path"
stroke="p.stroke"
visible="p.visible"
geodesic="p.geodesic"
fit="true"
editable="p.editable"
icons="p.icons"
draggable="p.draggable"
events="p.events">
</ui-gmap-polyline>
<!-- Polygones -->
<ui-gmap-polygon ng-repeat="p in mapPolygones"
path="p.path"
stroke="p.stroke"
fill="p.fill"
visible="p.visible"
geodesic="p.geodesic"
fit="true"
editable="p.editable"
draggable="p.draggable"
events="p.events">
</ui-gmap-polygon>
</ui-gmap-google-map>
I missed adding the "clickable" attribute to the ui-gmap-polygon tag. When adding this snipped to the tag, everything worked like a charm:
clickable="p.clickable"
Thank you guys anyways.

For poly* stack ordering, you could also use the zIndex property, which specifies "The zIndex compared to other polys". The angular-google-maps package also provides the option to set the zIndex attribute.

Jquery Function to append variables

I am trying to append the value of map and values inside this test variable using a jQuery function ( which is at the end). How do I do this?
I want to change the value of map: 'ecoMap' to map: developmentRegionMap and values: Chherti to values: testvalue
function Eco_regions() {
test = $('#world-map').vectorMap({
map: 'ecoMap',
backgroundColor: '#FFFFFF',
regionsSelectable: false,
series: {
regions: [{
values: Chhetri,
scale: ['#fffad6', '#d05300'],
normalizeFunction: 'polynomial'
}]
}
});
};
This is the jquery function which is supposed to append the variable.
$('#change_ecoregions').click(function (e) {
e.preventDefault();
test.map.setValue('developmentRegionMap');
test.series.regions[0].setValues(testvalue);
Eco_regions();
});

What you require is plugin-specific; supposing you're using the jQuery Vector Maps plugin, according to the documentation, you'd have to do this in order to change values after the creation (untested):
jQuery('#vmap').vectorMap('set', 'map', 'developmentRegionMap');

I want to change the value of map: 'ecoMap' to map: developmentRegionMap and values: Chherti to values: testvalue
Then just make them parameters of that function:
function Eco_regions(map, value) {
test = $('#world-map').vectorMap({
map: map || 'ecoMap',
backgroundColor: '#FFFFFF',
regionsSelectable: false,
series: {
regions: [{
values: value || Chhetri,
scale: ['#fffad6', '#d05300'],
normalizeFunction: 'polynomial'
}]
}
});
};
$('#change_ecoregions').click(function (e) {
e.preventDefault();
Eco_regions('developmentRegionMap', testvalue);
});

I couldn't find a great way to just change the variable and have it redraw the map. I think you might need to just blow the old map away and append a new one in.
Define an element for the map
var mapElement = '<div id="world_map" style="width:600px; height: 400px;">';
Create a container div
<div id="container"></div>
When the change event is fired, remove the old map, append a new element to the container, and call the vectorMap function with the new settings.
$('#world_map').remove();
$('#container').append(mapElement);
$('#world_map').vectorMap(options);
Here is a fiddle as an example.

You're calling a function setValues where, unless you've omitted some code, you haven't defined it. If you change it to test.series.regions[0].values = testvalue; you should have better luck. Also, without quotes, testvalue is undefined (unless it's global somewhere) so you'll either need to assign that variable some value or else surround it with quotes to make it a string.

I think it's best to rearrange your function slightly so you can easily adjust the properties:
var test= {
map: 'ecoMap',
backgroundColor: '#FFFFFF',
regionsSelectable: false,
series: {
regions: [{
values: Chhetri,
scale: ['#fffad6', '#d05300'],
normalizeFunction: 'polynomial'
}]
}
};
function Eco_regions(settings) {
$('#world-map').vectorMap(settings);
};
$('#change_ecoregions').click(function (e) {
e.preventDefault();
test.map = 'developmentRegionMap';
test.series.regions[0] = testvalue;
Eco_regions(test);
});

JvectorMap Region Selection

I am trying to reuse the region selection feature of JVectorMap. I am using a custom map (js) file. I have tested it in and it works fine for region selection.
Now I need to pass the regions which are selected by the user to the back end vb code. In this case maps.getSelectedRegions() gives an array of the user selected regions. I am not clear on how to pass a javascript array to back end vb code. The window.localstorage as how it is given in the example don't seem to work out here. Can somebody help me out on how this an be done?
This is the link of JVectorMap Region Selection - http://jvectormap.com/examples/regions-selection/
Following is the code I have used so far.
<script>
$(function(){ var maps; maps = new jvm.WorldMap({
container: $('#map'),
map: 'xyz_map',
regionsSelectable: true,
regionStyle: {
initial: {
fill: '#B8E186'
},
selected: {
fill: '#F4A582'
}
},
series: {
},
onRegionSelected: function(){
if (window.localStorage) {
window.localStorage.setItem(
'jvectormap-selected-regions',
JSON.stringify(maps.getSelectedRegions())
);
}
}
}); maps.setSelectedRegions( JSON.parse( window.localStorage.getItem('jvectormap-selected-regions') || '[]' )
); });
</script>
Thanks in advance
Sina

Managed to get a solution for this myself. You can add a hidden control in your asp code and assign the variable to this control.
$(function(){ var maps,temp; var hiddenControl = '<%=
inpHide.ClientID %>'; maps = new jvm.WorldMap({
container: $('#map'),
map: 'xyz_map',
regionsSelectable: true,
regionStyle: {
initial: {
fill: '#B8E186'
},
selected: {
fill: '#F4A582'
}
},
series: {
},
onRegionSelected: function(){
document.getElementById(hiddenControl).value=maps.getSelectedRegions();
} });
});