Chart.js 2.2.1
Any idea how to trigger the code that runs when I hover over a datapoint, and that runs when I move the mouse off? I need to programmatically show and hide a chart's tooltip.
openTip(oChart, datasetIndex, pointIndex){
// how to open a specific tooltip?
}
closeTip(oChart, datasetIndex, pointIndex){
// how to close the same tooltip?
}
I would show sample code if I could, but I don't even know where to start. The chart method docs haven't helped.
JSFiddle
I would be careful accessing/modifying private variables that begin with _. You may find yourself with unexpected behavior. Why not trigger the canvas mousemove event
function openToolTip (myChart, index) {
var mouseMoveEvent, meta, point, rectangle, value;
meta = myChart.getDatasetMeta(0);
rectangle = myChart.canvas.getBoundingClientRect();
point = meta.data[index].getCenterPoint();
mouseMoveEvent = new MouseEvent('mousemove', {
clientX: rectangle.left + point.x,
clientY: rectangle.top + point.y
});
myChart.canvas.dispatchEvent(mouseMoveEvent);
},
To close the tooltip just trigger the mouseout event
function closeToolTip (myChart) {
var mouseOutEvent = new MouseEvent('mouseout');
return myChart.canvas.dispatchEvent(mouseOutEvent);
}
The code below will handle one or more tooltips.
function openTip(oChart,datasetIndex,pointIndex){
if(window.oChart.tooltip._active == undefined)
window.oChart.tooltip._active = []
var activeElements = window.oChart.tooltip._active;
var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex];
for(var i = 0; i < activeElements.length; i++) {
if(requestedElem._index == activeElements[i]._index)
return;
}
activeElements.push(requestedElem);
//window.oChart.tooltip._view.body = window.oChart.getDatasetMeta(datasetIndex).data;
window.oChart.tooltip._active = activeElements;
window.oChart.tooltip.update(true);
window.oChart.draw();
}
function closeTip(oChart,datasetIndex,pointIndex){
var activeElements = window.oChart.tooltip._active;
if(activeElements == undefined || activeElements.length == 0)
return;
var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex];
for(var i = 0; i < activeElements.length; i++) {
if(requestedElem._index == activeElements[i]._index) {
activeElements.splice(i, 1);
break;
}
}
window.oChart.tooltip._active = activeElements;
window.oChart.tooltip.update(true);
window.oChart.draw();
}
Complete solution provided by #BeetleJuice - https://jsfiddle.net/ucvvvnm4/5/
For Chart.js#3 here's official solution: https://www.chartjs.org/docs/latest/samples/advanced/programmatic-events.html
function triggerTooltip(chart) {
const tooltip = chart.tooltip;
if (tooltip.getActiveElements().length > 0) {
tooltip.setActiveElements([], {x: 0, y: 0});
} else {
const chartArea = chart.chartArea;
tooltip.setActiveElements([
{
datasetIndex: 0,
index: 2,
}, {
datasetIndex: 1,
index: 2,
}
],
{
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
});
}
chart.update();
}
Related
I just learned about a group in phaser 3,
is there a way how to bind a click handler to a group of Sprites ?
Here is the snippet that shows how to accomplish it
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
game.load.image('beball', 'assets/sprites/beball1.png');
game.load.image('bikkuriman', 'assets/sprites/bikkuriman.png');
}
var text = '';
var group1;
var group2;
function create() {
// Let's create 2 Groups
group1 = game.add.group();
group2 = game.add.group();
// This will automatically inputEnable all children added to both Groups
group1.inputEnableChildren = true;
group2.inputEnableChildren = true;
// Create 10 Sprites per Group
for (var i = 0; i < 10; i++)
{
var sprite1 = group1.create(64 + (64 * i), 150, 'beball');
sprite1.name = 'group1-child-' + i;
var sprite2 = group2.create(64 + (64 * i), 350, 'bikkuriman');
sprite2.name = 'group2-child-' + i;
}
// And now we'll listen to the Group events
group1.onChildInputDown.add(onDown, this);
group2.onChildInputDown.add(onDown, this);
group1.onChildInputOver.add(onOver, this);
group2.onChildInputOver.add(onOver, this);
group1.onChildInputOut.add(onOut, this);
group2.onChildInputOut.add(onOut, this);
}
function onDown (sprite) {
text = "onDown: " + sprite.name;
sprite.tint = 0x00ff00;
}
function onOver (sprite) {
text = "onOver: " + sprite.name;
sprite.tint = 0xff0000;
}
function onOut (sprite) {
text = "onOut: " + sprite.name;
sprite.tint = 0xffffff;
}
function render() {
if (text === '')
{
game.debug.text("Interact with the Sprites.", 32, 32);
}
else
{
game.debug.text(text, 32, 32);
}
}
thank you, sir,
but sir, what if we only want only to bind, click handler to an individual isolated Sprite?"
but are there other in-depth examples, which lead me there, I'm still confused about how to use it, I'm still a beginner in phaser 3
I'm building a timeline in vue.js app so I decided to use vis.js but I'm having problems with it when I want to add some events. First of all when i set #drop="myDropCallback()" and when I drop one item nothing happens so the function is not called but when i put #mouseOver="myDropCallback()" then it works, its strange.
Second when I'm doing the mouseOver event I want to get the event properties with this.$refs.timeline.getEventProperties(event) but I'm getting this error every time
Error in event handler for "click": "TypeError: Cannot read property 'center' of undefined"
and this error
Cannot read property 'center' of undefined
So does anyone know how to fix that? Or am I doing something wrong?
Template
<timeline v-if="items.length > 0" ref="timeline"
:items="items"
:groups="groups"
:options="options"
#drop="myDropCallback()">
</timeline>
Drop function
myDropCallback: function (event) {
console.log('value', this.$refs.timeline.getEventProperties())
},
Picture of timeline
Here's an excerpt from the vis.js source. You'll notice that the first thing it tries to do is to find the event's center value.
Timeline.prototype.getEventProperties = function (event) {
var clientX = event.center ? event.center.x : event.clientX;
var clientY = event.center ? event.center.y : event.clientY;
var x;
if (this.options.rtl) {
x = util.getAbsoluteRight(this.dom.centerContainer) - clientX;
} else {
x = clientX - util.getAbsoluteLeft(this.dom.centerContainer);
}
var y = clientY - util.getAbsoluteTop(this.dom.centerContainer);
var item = this.itemSet.itemFromTarget(event);
var group = this.itemSet.groupFromTarget(event);
var customTime = CustomTime.customTimeFromTarget(event);
var snap = this.itemSet.options.snap || null;
var scale = this.body.util.getScale();
var step = this.body.util.getStep();
var time = this._toTime(x);
var snappedTime = snap ? snap(time, scale, step) : time;
var element = util.getTarget(event);
var what = null;
if (item != null) {
what = 'item';
} else if (customTime != null) {
what = 'custom-time';
} else if (util.hasParent(element, this.timeAxis.dom.foreground)) {
what = 'axis';
} else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {
what = 'axis';
} else if (util.hasParent(element, this.itemSet.dom.labelSet)) {
what = 'group-label';
} else if (util.hasParent(element, this.currentTime.bar)) {
what = 'current-time';
} else if (util.hasParent(element, this.dom.center)) {
what = 'background';
}
return {
event: event,
item: item ? item.id : null,
group: group ? group.groupId : null,
what: what,
pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,
x: x,
y: y,
time: time,
snappedTime: snappedTime
};
};
So your issue is most likely due to not giving the method a valid event. I believe that this is because you aren't supplying any parameters to the getEventProperties method. I would try something like:
myDropCallback: function (event) {
console.log('value', this.$refs.timeline.getEventProperties(event))
},
Also, here is a good stack overflow post answered by one of the authors of vis.js: vis.js timeline how to add mouse over event to vis-item box-box
I am trying to implement a plugin that allows the user to dump relevant information about points selected by the LinkedBrush plugin. I think my question is sort of related to this example. I have meta information tied to each point via the HTMLTooltip plugin. Ideally, I would somehow be able to dump this too. In the example I linked to, the information is outputted via a prompt. I wish to be able to save this information to a text file of some kind.
Put slightly differently: How do I determine which points in a scatter plot have been selected by the LinkedBrush tool so that I can save the information?
To solves this, I ended up just editing the LinkedBrush plugin code. I added a button that, when clicked, outputs the extent of the brush window by using brush.extent(). This prints the minimum and maximum x and y coordinates. I will basically use these coordinates to trace back to the input data set and determine which points fell within the bounds of the brush. If anyone has a better idea of how to solve this, I would welcome it.
class LinkedBrush(plugins.PluginBase):
JAVASCRIPT="""
mpld3.LinkedBrushPlugin = mpld3_LinkedBrushPlugin;
mpld3.register_plugin("linkedbrush", mpld3_LinkedBrushPlugin);
mpld3_LinkedBrushPlugin.prototype = Object.create(mpld3.Plugin.prototype);
mpld3_LinkedBrushPlugin.prototype.constructor = mpld3_LinkedBrushPlugin;
mpld3_LinkedBrushPlugin.prototype.requiredProps = [ "id" ];
mpld3_LinkedBrushPlugin.prototype.defaultProps = {
button: true,
enabled: null
};
function mpld3_LinkedBrushPlugin(fig, props) {
mpld3.Plugin.call(this, fig, props);
if (this.props.enabled === null) {
this.props.enabled = !this.props.button;
}
var enabled = this.props.enabled;
if (this.props.button) {
var BrushButton = mpld3.ButtonFactory({
buttonID: "linkedbrush",
sticky: true,
actions: [ "drag" ],
onActivate: this.activate.bind(this),
onDeactivate: this.deactivate.bind(this),
onDraw: function() {
this.setState(enabled);
},
icon: function() {
return mpld3.icons["brush"];
}
});
this.fig.buttons.push(BrushButton);
var my_icon = "data:image/png;base64,longstring_that_I_redacted";
var SaveButton = mpld3.ButtonFactory({
buttonID: "save",
sticky: false,
onActivate: this.get_selected.bind(this),
icon: function(){return my_icon;},
});
this.fig.buttons.push(SaveButton);
}
this.extentClass = "linkedbrush";
}
mpld3_LinkedBrushPlugin.prototype.activate = function() {
if (this.enable) this.enable();
};
mpld3_LinkedBrushPlugin.prototype.deactivate = function() {
if (this.disable) this.disable();
};
mpld3_LinkedBrushPlugin.prototype.get_selected = function() {
if (this.get_selected) this.get_selected();
};
mpld3_LinkedBrushPlugin.prototype.draw = function() {
var obj = mpld3.get_element(this.props.id);
if (obj === null) {
throw "LinkedBrush: no object with id='" + this.props.id + "' was found";
}
var fig = this.fig;
if (!("offsets" in obj.props)) {
throw "Plot object with id='" + this.props.id + "' is not a scatter plot";
}
var dataKey = "offsets" in obj.props ? "offsets" : "data";
mpld3.insert_css("#" + fig.figid + " rect.extent." + this.extentClass, {
fill: "#000",
"fill-opacity": .125,
stroke: "#fff"
});
mpld3.insert_css("#" + fig.figid + " path.mpld3-hidden", {
stroke: "#ccc !important",
fill: "#ccc !important"
});
var dataClass = "mpld3data-" + obj.props[dataKey];
var brush = fig.getBrush();
var dataByAx = [];
fig.axes.forEach(function(ax) {
var axData = [];
ax.elements.forEach(function(el) {
if (el.props[dataKey] === obj.props[dataKey]) {
el.group.classed(dataClass, true);
axData.push(el);
}
});
dataByAx.push(axData);
});
var allData = [];
var dataToBrush = fig.canvas.selectAll("." + dataClass);
var currentAxes;
function brushstart(d) {
if (currentAxes != this) {
d3.select(currentAxes).call(brush.clear());
currentAxes = this;
brush.x(d.xdom).y(d.ydom);
}
}
function brushmove(d) {
var data = dataByAx[d.axnum];
if (data.length > 0) {
var ix = data[0].props.xindex;
var iy = data[0].props.yindex;
var e = brush.extent();
if (brush.empty()) {
dataToBrush.selectAll("path").classed("mpld3-hidden", false);
} else {
dataToBrush.selectAll("path").classed("mpld3-hidden", function(p) {
return e[0][0] > p[ix] || e[1][0] < p[ix] || e[0][1] > p[iy] || e[1][1] < p[iy];
});
}
}
}
function brushend(d) {
if (brush.empty()) {
dataToBrush.selectAll("path").classed("mpld3-hidden", false);
}
}
this.get_selected = function(d) {
var brush = fig.getBrush();
var extent = brush.extent();
alert(extent);
}
this.enable = function() {
this.fig.showBrush(this.extentClass);
brush.on("brushstart", brushstart).on("brush", brushmove).on("brushend", brushend);
this.enabled = true;
};
this.disable = function() {
d3.select(currentAxes).call(brush.clear());
this.fig.hideBrush(this.extentClass);
this.enabled = false;
};
this.disable();
};
"""
def __init__(self, points, button=True, enabled=True):
if isinstance(points, mpl.lines.Line2D):
suffix = "pts"
else:
suffix = None
self.dict_ = {"type": "linkedbrush",
"button": button,
"enabled": False,
"id": utils.get_id(points, suffix)}
I'm facing weird behaviour of Jit Infovis i'm using. I have two different html files that include a load json function from a Javascript file. The function is using infovis library to display a hypertree map from a json file. Both two html files load the same json file.
One html file has been succeeded rendering the map properly. But another one has not. It renders the map almost properly, but after i debugged it, i got it not iterating over the root node. Then, the root node becames inactive without label and clickability.
This is the js function i'm using.
var labelType, useGradients, nativeTextSupport, animate;
(function () {
var ua = navigator.userAgent,
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
typeOfCanvas = typeof HTMLCanvasElement,
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
textSupport = nativeCanvasSupport
&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
//I'm setting this based on the fact that ExCanvas provides text support for IE
//and that as of today iPhone/iPad current text support is lame
labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML';
nativeTextSupport = labelType == 'Native';
useGradients = nativeCanvasSupport;
animate = !(iStuff || !nativeCanvasSupport);
})();
var Log = {
elem: false,
write: function (text) {
if (!this.elem)
this.elem = document.getElementById('log');
this.elem.innerHTML = text;
this.elem.style.left = (350 - this.elem.offsetWidth / 2) + 'px';
}
};
function init(slugParam, pageParam) {
var isFirst = true;
var isSetAsRoot = false;
// alert(slugParam+ " | "+pageParam);
var url = Routing.generate('trade_map_buyer_json', { slug : slugParam, page : pageParam });
//init data
$.getJSON(url, function (json) {
var type = 'Buyer';
//end
var infovis = document.getElementById('infovis');
infovis.style.align = "center";
infovis.innerHTML = '';
// infovis.innerHTML = '<img align="center" id="gifloader" style="margin-left:50%; margin-top:50%" src="{{ asset('/bundles/jariffproject/frontend/images/preloader.gif') }}" width="30px" height="30px"/>'
var w = infovis.offsetWidth - 50, h = infovis.offsetHeight - 50;
url = url.replace("/json/", "/");
window.history.pushState("object or string", "Title", url);
//init Hypertree
var ht = new $jit.Hypertree({
//id of the visualization container
injectInto: 'infovis',
Navigation: {
enable: false,
panning: 'avoid nodes',
},
//canvas width and height
width: w,
height
: h,
//Change node and edge styles such as
//color, width and dimensions.
Node: {
dim: 9,
overridable: true,
color: "#66FF33"
},
Tips: {
enable: true,
type: 'HTML',
offsetX: 0,
offsetY: 0,
onShow: function(tip, node) {
// dump(tip);
tip.innerHTML = "<div style='background-color:#F8FFC9;text-align:center;border-radius:5px; padding:10px 10px;' class='node-tip'><p style='font-size:100%;font-weight:bold;'>"+node.name+"</p><p style='font-size:50%pt'>"+node.data.address+"</p></div>";
}
},
Events: {
enable: true,
type: 'HTML',
onMouseEnter: function(node, eventInfo, e){
var nodeId = node.id;
var menu1 = [
{'set as Root':function(menuItem,menu) {
menu.hide();
isSetAsRoot = true;
console.log(nodeId);
init(nodeId, 0);
}},
$.contextMenu.separator,
{'View details':function(menuItem,menu) {
}}
];
$('.node').contextMenu(menu1,{theme:'vista'});
}
},
Edge: {
lineWidth: 1,
color: "#52D5DE",
overridable: true,
},
onBeforePlotNode: function(node)
{
if (isFirst) {
console.log(node._depth);
var odd = isOdd(node._depth);
if (odd) {
node.setData('color', "#66FF33"); // hijau (supplier)
} else {
node.setData('color', "#FF3300"); // merah (buyer)
}
isFirst = false;
}
},
onPlotNode: function(node)
{
if (isSetAsRoot) {
var nodeInstance = node.getNode();
var nodeId = nodeInstance.id;
init(nodeId, 0);
isSetAsRoot = false;
}
},
onBeforeCompute: function (domElement, node) {
var dot = ht.graph.getClosestNodeToOrigin("current");
type = isOdd(dot._depth) ? 'Supplier' : 'Buyer';
},
//Attach event handlers and add text to the
//labels. This method is only triggered on label
//creation
onCreateLabel: function (domElement, node) {
var odd = isOdd(node._depth);
if (odd) {
node.setData('color', "#66FF33"); // hijau (supplier)
} else {
node.setData('color', "#FF3300"); // merah (buyer)
}
domElement.innerHTML = node.name;
// if (node._depth == 1) {
console.log("|"+node.name+"|"+node._depth+"|");
// }
$jit.util.addEvent(domElement, 'click', function () {
ht.onClick(node.id, {
onComplete: function () {
console.log(node.id);
ht.controller.onComplete(node);
}
});
});
},
onPlaceLabel: function (domElement, node) {
var style = domElement.style;
style.display = '';
style.cursor = 'pointer';
if (node._depth <= 1) {
style.fontSize = "0.8em";
style.color = "#000";
style.fontWeight = "normal";
} else if (node._depth == 2) {
style.fontSize = "0.7em";
style.color = "#555";
} else {
style.display = 'none';
}
var left = parseInt(style.left);
var w = domElement.offsetWidth;
style.left = (left - w / 2) + 'px';
},
onComplete: function (node) {
var dot = ht.graph.getClosestNodeToOrigin("current");
console.log(dot._depth);
var connCount = dot.data.size;
var showingCount = '';
if (connCount != undefined) {
var pageParamInt = (parseInt(pageParam)+1) * 10;
var modulus = connCount%10;
showingCount = (pageParamInt - 9) + " - " + pageParamInt;
if (connCount - (pageParamInt - 9) < 10) {
showingCount = (pageParamInt - 10) + " - " + ((pageParamInt - 10) + modulus);
}
} else {
connCount = '0';
showingCount = 'No Connections Shown'
}
}
});
//load JSON data.
ht.loadJSON(json);
//compute positions and plot.
ht.refresh();
//end
ht.controller.onComplete();
});
}
function isEven(n)
{
return isNumber(n) && (n % 2 == 0);
}
function isOdd(n)
{
return isNumber(n) && (n % 2 == 1);
}
function isNumber(n)
{
return n === parseFloat(n);
}
function processAjaxData(response, urlPath){
}
function dump(obj) {
var out = '';
for (var i in obj) {
out += i + ": " + obj[i] + "\n";
}
out = out + "\n\n"
console.log(out);
// or, if you wanted to avoid alerts...
var pre = document.createElement('pre');
pre.innerHTML = out;
document.body.appendChild(pre)
}
What's probably causing this?
Please check whether there is conflict id. Basically infovis render each nodes by the id.
And if there is an DOM element that has the same id with one DOM element of a node. It would conflict and won't render
you can check it by duming dom element iterating over the nodes.
Here is an excerpt of my code. You can ignore most of it: the bit of concern is with the refreshDimensions method, the call to said method inside zoomTo, and the block of code after that call.
function refreshDimensions(node) {
_("refreshdimensions");
t = $("#contents");
var other = $(selectednode).parent().parent(":not(#contents)");
if(!other.length) {
other = selectednode || zoomednode || start;
t.width("100%");
} else {
t.width("100%");
t.width((t.width() + other.position().left));
}
t.height($(other).position().top);
/* Begin animating */
t.animate({ fontSize: zoom }, {duration: 0, queue: false });
//
}
function zoomTo(node, select) {
var oldzoom, zoomdepth, t;
oldzoom = zoomednode;
if($(node)[0] != $(zoomednode)[0]) {
savedepth = t = zoomdepth = $(node).parents("ul").length;
if(!zoomednode)
zoomednode = topChapter;
$(zoomednode).toggleClass("zoomednode", false);
if(!node)
node = topChapter;
/* capture values */
var sz;
var capp = cBaseSz.slice((zoom = zoomnum = sz = parseFloat(cBaseSz)+"").length);
/* end capture */
while(--t > 0) {
zoomnum = (zoom *= 1.15);
}
zoom += capp;
zoomdepth -= $(zoomednode).parents("ul").length;
if(zoomdepth < 0)
zoomdepth *= -1;
zoomednode = node;
zoomednode.toggleClass("zoomednode", true);
switch(select) {
case 0:
case false:
default:
break;
case true:
case 1:
toggleNode(selectednode, false);
toggleNode(node, true);
break;
case 2:
toggleNode(zoomednode, false);
zoomednode = 0;
}
/* Handle showing/hiding */
//////////////////////////////
//
var showzoom = 1, showselect = 1, showidea = 1, seldepth, zdepth, showlist, hidelist = {};
/* This is the 'brute force' way of doing it, horribly inefficient */
if(zoomednode)
zdepth = $(zoomednode).parents(".chapter").length;
if(selectednode)
seldepth = $(selectednode).parents(".chapter").length;
else
seldepth = zdepth;
if(!seldepth)
seldepth = zdepth = 0;
showlist=$(".chapter, .idea").filter( function() {
if($(this).parents("li").length < (zdepth+showzoom))
return true;
else {
hidelist = $(hidelist).add(this);
return false;
}
});
$(showlist).show()/*.not(hidelist)*/;
if(hidelist && hidelist.length) {
$(hidelist).hide();
}
/* End showing/hiding */
refreshDimensions(node);
if(node) {
_("top: " + $(zoomednode).position().top);
$("html,body").stop().animate(
{ scrollTop: $(zoomednode).position().top - topAdjust }, {duration: 60+60*zoomdepth, queue: false }, 0);
}
}
else {
var dest;
if($(zoomednode).parents(".chapter").length > 1)
dest = $(zoomednode).parent().parent().prevAll(".chapter:first .chapterheading:first");
else {
// if($(zoomednode)[0] != $("#contents")[0]) {
toggleNode(selectednode, false);
dest = $("#contents");
// } else
// dest = $(start);
}
zoomTo(dest, 0);
}
}
So my problem is that when I move the bit of code after the call to refreshDimensions (the block beginning with 'if(node) {'), into refreshDimensions (at the end), the desired effect stops working. I have dumped all the variables that the line uses into the console and they are consistent across both instances, yet when I move the code to refreshDimensions my page gets 'trapped' at the top of the screen and won't scroll at all. This really has me stumped as everything points to that it should work exactly the same...
turns out it was because 'zoomdepth' should have been a global rather than local variable.