I would like to retrieve the coordinates generated by Box Select from a chart made with Plotly JavaScript, but looking in the documentation it seems there is no attribute for the layout.selections.path, how can I retrieve the x.min, x.max, y.min and y.max coordinates of a selection box?
Thanks!
I finally came to a solution, using a callback function of the event plotly_selected:
graphDiv.on("plotly_selected", function (d) {
console.log(d.range);
});
The full code on Codepen
Related
I use this code How can I position an element next to user text selection? to get the position of the selected text, but it doesn't work for the selected text inside an input. Sometimes the position is 0.
Is there some universal method for detecting the position of the selected text?
I want to show a tooltip on mouseup or dblclick the selected text.
You can use the following code to get the position of selected text:
var selection = window.getSelection();
var getRange = selection.getRangeAt(0);
getRect = getRange.getBoundingClientRect();
You can use getSelection api.
After selection a text run below code in console.
var selection = window.getSelection()
var baseOffset = selection.baseOffset
var length = selection.focusOffset -selection.baseOffset
var text = selection.focusNode.data.splice(baseOffset, length)
If you just need to get the position where the user doubleclicked, use the following snippet.
$('#thatInput').on('dblclick', function (e) {
alert('Position X: ' + e.clientX + '\nPosition Y: ' + e.clientY);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="thatInput">
The question is about getting the position of mouse pointer when selecting text. I am trying a solution that also works with keyboard events (choosed keyup).
I wrote a sample html page with a "vanilla" script inside to test the capabilities of the Selection API. This is the idea:
When selecting on text nodes, getting the position of selected text is done by means of the Range Object.
But when the selected text is a part of an Input Element, using the getBoundingClientRect() of the Range Object does not work (gave me a full zero ClientRect Object.
So, the function getSel() will try to consider both scenarios: selecting text just from the HTML or inside some input elements (just considered input and textarea).
On the bottom of the page there is a div#results element, for displaying data, then getSel() will create a new div#boundy with the coordinates of the ClientRect object or the related input element coordinates.
I wish to finish it, but I'm out of ideas on how to get the actual position of the selected text inside the input objects. It will have to be adding in a relative way to the coordinates of the element itself.
Answering Andrew, if this works, you'll be able to use the coordinates of div#boundy to place the tooltip wherever you want.
I've created a codepen here.
This question is similar to my previous question here, the difference is that the answer to that question doesn't work for my new chart.
Code here: Plunker
The issue is that the sorting toggle checkbox stops sorting the chart when you try to uncheck the box again.
If I remove the function from d3.select("#myCheckbox") and replace it with d3.select("#myCheckbox").on('change', update) it works again, but rather than the bars shifting x position it only shifts the ticks position on the x-axis & the bars update and change position simultaniously.
The problem here is that you're reassigning sortIndex when clicking on the checkbox:
d3.select("#myCheckbox").on('change', function() {
sortIndex = data.map( function(d) { return d.State} );
update();
});
However, the very data it uses has been sorted!
The solution is simple, just remove that:
d3.select("#myCheckbox").on('change', update);
Besides that, make sure you're using the proper key function:
var barGroups = g.selectAll(".layer")
.data(data, function(d){return d.State});
Here is the updated Plunker: https://plnkr.co/edit/goU5K7LB4Gj1jhynLqGt?p=preview
I have the following use case: On a page there is a Highcharts column with drilldown as in this example.
When the labels below the bars are clicked, I would like to drilldown, as default. However, when the bar / column itself is clicked, I do not want to drilldown but rather get information on the clicked bar (e. g. the name of the category). How is this possible?
What I've tried so far is to evaluate the click event with jQuery and then stop drilling down by using "return false;". The problem with that is that I have seen no way to retrieve the column data as the JavaScript object itself is not accessible.
What I did then is to use the "drilldown" event. I can now easily access the objects data / properties but have have two difficulties:
How to identify whether a bar or the label below the bar was clicked?
How can I prevent the drilldown in case a bar was clicked?
Thank you in advance for hints and tips!
Andy
You can wrap doDrilldown method, and there decide what should happen and when, snippet:
(function (H) {
H.wrap(H.Point.prototype, 'doDrilldown', function (p, hold, x) {
var UNDEFINED;
if (x !== UNDEFINED) {
p.call(this, hold, x); // x is defined when clicked on a category
} else {
myFun(this); // call your method after click on a bar
}
});
})(Highcharts)
And live demo: http://jsfiddle.net/L51c8fa4/
I have another question regarding AmCharts. I have got numerous graphs, but want to show only one Balloon. I am using the
chartCursor.oneBalloonOnly
right now. I am also using AmLegend. I want to dynamically change the information within the one balloon whenever the user dismisses or adds a graph via legend.
I imagine if kind of like this:
function adjustBalloonText(graphDataItem, graph){
var date = ""; //some kind of getDateInScrollbar here
var distance = ""; // some kind of getGraph1Value here
var duration = ""; // some kind of getGraph2Value here as well
return "date <br> distance <br> duration";
}
Please help me.
Thanks!
I am using amCharts pie chart (v3) and I want to customize the pop up balloon that comes on mouseover on a slice: in addition to routine text like [[value]] [[percent]],
(a) a text that depends on the data item, and
(b) provide different click options to the user depending on data item. Every data row might not have these possibilities in which case the options should not appear.
For example, the pie chart might show wine consumption by country. On hover, I want to provide the user two different click options - one to see consumption by season if available, plus another to see consumption by age group if available.
Is it possible to do so in amCharts? I saw an exit for event clickSlice() here http://docs.amcharts.com/3/javascriptcharts/AmPieChart but nothing on how to modify the balloon text on the fly and add behavior to the balloon that comes on hover.
Will greatly appreciate your help.
For writing dynamic text in the balloon you can also do the folowing:
"graphs": [{
"balloonFunction": function(graphDataItem, graph) {
var value = graphDataItem.values.value;
if (value < 500) {
return value + "<br>(Little)";
} else {
return value + "<br>(A Lot)";
}
}
}],
You can use the following tags: [[title]], [[description]], [[value]] and [[percent]]. says the documentation.
I have used description for a custom field, it works fine.
You can add any custom field to your data provider and then display it in your balloon in the same way as value:
{value:15, title:"slice title", someCustomField:"some custom data"}
and then:
chart.balloonText = "[[someCustomField]]";