This question is a follow up to In high chart how to add event for label click
Is there a way to make the total sum number (ie. 10,9, 11, 11, 8)
as shown at http://jsfiddle.net/t07ok5v3/5/ clickable? (ie. add the same functionality to the "9" as the "Oranges" label). What if there is only one number per column at the top representing the sum?
The following code was the code given in the answer to add the label click.
chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label)
{
label.style.cursor = "pointer";
label.onclick = function(){
alert('You clicked on '+this.textContent);
}
}
UPDATE: I have made the stackLabels all appear to be clickable (they now have cursor "pointer', see jsfiddle link below). Now I just need to add the actual functionality of the click event to the stackLabel. Can someone help me with this?
http://jsfiddle.net/w291/gc1fdd1v/
Note: I don't have access to jquery in the development environment I am using.
UPDATE 2: The answer to this other question seems to solve my problem [so far] (I will update the post with my solution if it works): Click event on clicking on the graph
For this purpose, you can use Custom Events plugin. It will allow you to add custom events on various elements like axis labels, legend, etc.
Plugin Reference:
https://www.highcharts.com/plugin-registry/single/15/Custom-Events
Example:
http://jsfiddle.net/trmks8p2/
Related
Intro:
I'm working with Google Docs and have been trying (and struggling) to create a tooltip that pops up on selected (highlighted with cursor) words after the click of a button, for the purpose of creating notes for studying.
For example, if I have the words "Dynamic Programming" and I want to add the definition of it to the instances of "Dynamic Programming" so that when I hover/click on it, the definition will appear and I won't have to constantly scroll around or CTRL+F for it.
My question is if there is any advice on how to attach a tooltip to the selected text. I'm thinking of maybe creating a class="tooltip" and altering the inner HTML to include this class using xpath selection, but I'm struggling to put this idea into place. Are there any suggestions for how to approach this issue?
I've tried altering the selected text using the Document.ExecCommand(), like bolding it but there are no results. I see that this command is deprecated but I'm not sure what else I can use in its place. I wanted to use it's insertHTML().
My code so far:
I'm currently able to get the user's text selection (to attach the tooltip to), although it doesn't work entirely as planned. Even if you select only one word, it returns the entire line.
function createPopup(text) {
var text = [];
var selection = DocumentApp.getActiveDocument().getSelection().getSelectedElements();
if (selection) {
for (var i = 0; i < selection.length; i++) {
text.push(selection[i].getElement().asText().getText());
}
DocumentApp.getUi().alert(text);
}
}
Answer:
Unfortunately, this is not possible.
More Information:
The tool-tip-like pop-ups that show for hyperlinks such as this one are not customisable and not a feature that is currently in Google Sheets.
Workaround:
You can use comments on cells which act similarly to these tooltips: hovering over the cell will reveal the comment like so:
Feature Request:
Alternatively, if you would like something more customaible than cell comments, I would suggest filing a feature request to Google with the details.
You can do this from the Google Sheets UI, by following the Help > Help Sheets improve menu item.
There is also a feature request here which details being able to add and manipulate comments directly from Google Apps Script, so add a star to the issue to help its visibility.
I am trying to modify the handsontable doubleclick event to have additional functionality. My current code is as follows:
hot.view.wt.update('onCellDblClick', function (row,cell) {
console.log("sucess");
});
This will sucessfully fire when a cell is double clicked on. However, it removes the current editing functionality of the cell.
Is there any way to update the on cell double click event whilst maintaining its current functionality?
Alright I ended up figuring this one out myself. So I thought I'd post the answer in the chance it helps anyone in the future.
hot.view.wt.update('onCellDblClick', function (row,cell) {
//Get editor and begin edit mode on current cell (maintain current double click functionality)
var activeEditor = hot.getActiveEditor();
activeEditor.beginEditing();
//Do whatever you want...
});
Thanks to the answer in the following post for defining how to manipulate the editor.
When using Handsontable how to force a selected cell into edit mode?
Dear StackOverflow Users
I am currently working on a data analysis web app.
Now in this app you can drag and drop graphs and you can remove it by unselecting it. Also you can add the graph with a plus button. Only problem is there is no way to unselect it when you add it by that plus button(Which I put the code of ""$("#tb_add").button"" )
What I am trying to do is find a way to write a function button that would undo what the add graph button did, or close it or delete it, since there is no unselect button.
My question is: "Is there such a javascript function that would undo or remove what the $("#tb_add").button did.
so let's say I want to add a button called $("#tb_remove").button
is there any simple javascript that would simply undo what was added ?
If there is what is it called ? can you direct me to it ?
Thank you
In your click handler you could add a way to remove the section. jQuery has a .remove() function. You could use classes to control it as well.
if($(this).hasClass("added")){
$(this).removeClass("added");
$("panel selector").remove();
$(this).addClass("removed");
} else {
analysis.addPanel();
$(this).removeClass("removed");
$(this).addClass("added");
}
something along those lines should help you.
tableDnD (table Drag and Drop) is a jQuery plugin I'm using to be able to re-order rows in my html table. It's a pretty cool library, but the fact that you can click, drag, and drop rows -- disables the ability to select that row by clicking -- it thinks you might be starting a drag and drop, or doing a 0-distance drag.
So you can view my example here, and see what I'm talking about -- http://jsfiddle.net/du31ufts/5/
It starts off as disabled, so enable the row re-ordering and see the library. Then, try to select just one row in the middle. The only way the blue highlighting indicating selection shows up is if you click outside the bounds of the table, and thus you would only be able to select starting from the bottom or top, and not be able to select one row at a time. I need to select these rows to be able to copy-paste these rows into excel.
I've tried looking into the library itself and detaching $('__dragtable_disable_text_selection__'), I've tried jquerys removeAttr for unselectable, I've tried
$('.dragtable-sortable').attr('-moz-user-select', 'none');
Nothing is re-enabling my ability to be able to click and select single rows. I'd like to do this without modifying tableDnD functions.
Which CSS properties could be affecting my ability to select table rows?
Create a textarea somewhere with ID #spot.
Use this code to extract data on click from a row and select it. Its delimited by tab so it should be pastable into excel easily.
$('tr').click(function(){
var copyContent = "";
$(this).children('td').each(function(){
copyContent = copyContent+$(this).text()+"\t";
});
$('#spot').val(copyContent);
$('#spot').select();
});
I asked about this on github and got an answer: It did require modification of the library. Specifically, replacing the if block starting at line 207 of the fiddle in this question with this
if (!$(this).hasClass("nodrag")) {
if (e.target.tagName == "TD") {
$.tableDnD.initialiseDrag(this, table, this, e, config);
return false;
}
}
modified fiddle. Thank you tschqr
I want to plot a graph within a jQuery accordion but it causes the graph to chopped and the scales to be displayed. Anyone got a fix for this?
As explained on jqPlot's Tab and Accordion UI Widgets page, jqPlot needs to know the size of the chart when it's plotted, and it can't do that if the chart is hidden by an accordion or tab. The solution is to either specify the chart's dimensions in an alternate fashion or to call replot when the accordion is expanded. See Tab and Accordion UI Widgets for full details and example code.
Everything in the accordion is hidden until it is expanded, which means it is dimensionless. You need to wait until the portion of the DOM your accordion chart is contained in is shown, and then plot the graph. If you look at the ui.html example included in the latest release of jqPlot, you'll see this:
Here, the plot is created at a div named chart1, which is inside a hidden jQuery UI Tab:
plot1 = $.jqplot('chart1', [l1, l2, l3], {
title: "I was hidden",
lengend:{show:true},
series:[{},{yaxis:'y2axis'}, {yaxis:'y3axis'}],
cursor:{show:true, zoom:true},
axesDefaults:{useSeriesColor:true}
});
And then an event handler is registered with the 'tabsshow' event fired by the jQUery UI Tab. In your case, you'll want to register a handler for the 'accordionchange' event fired by the jQuery UI Accordion widget upon completion of changing the accordion's state. Here's how you bind to the Tab's 'tabsshow' event for the above code example:
$('#tabs').bind('tabsshow', function(event, ui) {
if (ui.index == 1 && plot1._drawCount == 0) {
plot1.replot();
}
else if (ui.index == 2 && plot2._drawCount == 0) {
plot2.replot();
}
});
There's also a working example in the same ui.html file with an accordion. You can find the example in the latest release from bitbucket here: jqplot.1.0.0a_r701
Also, make sure that you don't instantiate multiple jqPlot objects on the same div, or you'll have plots sitting on top of one another and overload the browser.
Hidden elements, like a tab or accordion element have no size, so you may want to use a technique mentioned in jqplot's documentation, ie.:
provide dimensions of the graph in an alternative way (eg. data-height and data-width attributes) AND
call replot() when the graph gets displayed.
However, the example in the documentation uses for 2. an event name which can be incorrect with your version of jquery-ui. For example, if you use Bootstrap 3, the proper event has a different name: "shown.bs.tab".
Links:
http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html
http://getbootstrap.com/javascript/#tabs-events