I am new at protovis and I am having a problem.
I have a html table which has the data and Bar Chart made in protovis using the table's data. Now what I want is to change the color of the individual bars as mouse is hovers on that particular row.
Can anyone help me how it can be done? Thanks in advance.
I've set up a working example here. You can't do what you're asking using just Protovis, because Protovis can't set event handlers on the HTML table. In order to achieve this, you generally need to:
Set up a variable to hold the state (in this case, which of the rows should be highlighted)
Set the visual parameter you want to change in your Protovis code (in this case, fillStyle) to a function that checks the state variable:
.fillStyle(function(d) { return hilighted == d.name ? "orange" : "blue" });
Set an event handler on the HTML table (I used jQuery, as your tag indicated you were using this too) that changes the state variable and re-renders the vis.
In jQuery:
$('#myTable tr').mouseover(function() {
// set the state variable
hilighted = $(this).data('name');
// re-render the vis
vis.render();
});
There are other ways to do this as well, but this is generally the easiest, and for interactions involving other parts of the page it's generally a good idea to hold the state in a separate variable outside your Protovis code.
I've not used Protovis before but the interaction documentation leads me you could do it by adding something like this to your object:
.event("mouseover", function() this.fillStyle("orange")) // override
.event("mouseout", function() this.fillStyle(undefined)) // restore
Related
In a Slickgrid cell, i click and enter a value. Once i move out of this cell using a mouse click the value entered disappears. But if i enter the value in the cell and tab out then the value stays in the cell. I would like to know if this should be manually handled.
OnClick event i am calling
grid.updateRow(grid.getDataItem(args.row));
grid.invalidate();
grid.render();
Thanks,
Asha
You're doing something wrong, updateRow() argument is a row index in the grid but you're passing an item object so that won't work, also if I remember correctly updateRow is only used for re-rendering or refreshing a specific row index, it's not for updating the data but more for rendering purposes (perhaps the naming is confusing).
I personally only use the SlickGrid DataView and the functions to call for updating items are different, you can see how to that in this other Stack Overflow answer Change slickgrid cell data after edit
If you're using the grid object, as it's written in the other SO answer I referenced earlier, then it would be
grid.invalidateRow(args.row);
data[args.row][grid.getColumns()[args.cell].field] = a.msg;
grid.render();
Personally I always use the SlickGrid DataView as it's much more user friendly and comes with a lot more benefit like data grouping and many other functionalities. Again take a look at the other SO answer that I wrote in previous paragraph, that is the correct way to do it
We have a function that is being used to expand all rows in a kendo grid if they have a subgrid. Currently this is indicated by having an arrow. This arrow is used in the code to search for so it knows how to expand the grid.
(function () {
$(".k-grid-header .k-hierarchy-cell").html(
"<div>" +
"<span class=\"k-icon k-i-arrow-60-right grid-expand pointer link\" title=\"Expand all\"></span>" +
"</div>");
$(".grid-expand").click(expandGridDetails);
});
function expandGridDetails() {
var grid = $(".k-grid").data("kendoGrid");
grid.expandRow(grid.tbody.find(".k-master-row").has(".k-hierarchy-cell a.k-icon"));
}
For one of the grids this works perfectly, however for the second grid this function will not expand the rows and instead remove some of the data represented in the detailRow.
The problem seems to occur as soon as the grid.expand() method is executed. If I do anything else such as the grid.tbody.find-statement, the table will stay intact. Using grid.collapseRow() is causing the same thing to happen, not executing but instead removing some of the data. The master-rows stay completely intact throughout the process.
Does anyone have an idea about what might be the cause of this bug?
A senior programmer explained to me what I was doing wrong and I fixed it with his solution. With $(".grid-expand") the code was calling the first grid every single time, even after selecting a row in another grid. The solution is to save a global variable which keeps track of the grid that is currently being viewed. Backdraw is that this global variable would cause problems when the same page is opened multiple times by the same user, but I see no reason to prioritize a solution for this small issue.
Another solution is to use
function expendGridDetails(e) {
var grid = e.sender;
}
The downside to this is that the e variable won't automatically be send to each of the functions. I'm not sure yet as to what determines if they do or don't receive this variable, but it's saver than using a global variable which may not be set to the correct value. e.sender asks the grid that is calling the function for it's name. Or at least that's in wide terms what I understood from the explanation given to me.
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/
I've created an image map using the code:
$('img').mapster({
staticState: true
})
All areas are selected at once and visible. Is there any way, any method I could hide/disable some areas so that they wouldn't be visible ? I would like to filter areas on some conditions.
I know that I can remove 'area' tag or href atribute from javascript level and then call the above code once more (once again recreate imagemapster) but is there any more elegant and smarter way ? Maybe there is some build-in plugin solution but I couldn't find that.
Thank you for any help.
Kind Regards
Marcin
I suggest you to change to
$('img').mapster({
selected: true,
isSelectable: false, // can't change of state by simple click
isDeselectable: false, // can't change of state by simple click
})
you can still bind the onClick callback on all the areas.
once you decide which areas you don't want, you can set the individual state via
$("#id_of_area").mapster('set',false);
or from the map id
$("img").mapster('set',false,'key or string of keys to deselect');
it seems staticState is just for show, and doesn't set everything to a selected state... ( I tried some combinations and had weird results like making it darker like on selected+highlight)
Something like this http://jsfiddle.net/Wvzgj/529/
I'm building a simple asp page on which I have list of peoples with checkbox on left of every name.
I've managed to create a simple jQuery script that allows hiding and showing rows of table based on input:
http://jsfiddle.net/Tq97v/ (first part)
As You can see I can enter part of name and then specific row are hidden.
Using red "x" I can uncheck all checkboxes.
What I'm trying to do now is to change that static red "x" into tristate checkbox.
Don't have idea how to even start.
Do I must add change listener to every checkbox in my list?
Second thing - how to create multiple instances of the same "plugin" on site.
Right now I'm identifying input by it, but it would be nice to call function with that input as param, and it would fine table after that input and create necessary logic.
This way I could call function multiple times on page to have more than one list.
I'm not asking for whole solution (of course it is always welcome :) ) but what I need is idea how to accomplish this in efficient way and as optimized as possible, because sometimes my list has 500+ elements.
P.S. don't look at HTML code, it is ASP generated.
I found this plugin: https://github.com/bcollins/jquery.tristate, but I have no idea how to use it with my list.
UPDATE:
I've managed to turn my code into functions, but right now I must call 3 functions for every list.
Here is my updated code: http://jsfiddle.net/65MEV/4/
How can I change it to one function? Will it be better?
This is my updated code. Still thinking about way of doing that Indeterminate Checkbox instead of my remove image.
UPDATE2
I build working code :)
http://jsfiddle.net/65MEV/9/
But I would like to improve it as much as possible.
Any suggestions are welcome!
A tristate checkbox is like the Three-Portal Device: an illusion.
What you actually want is to make the checkbox indeterminate (by setting the property of the same name to true). To implement this, you will need a change (or click) handler on each checkbox, then you'll need to check if all of them are in the same state, and if not then you set the indeterminate property. It's a hassle, really, because you rarely see indeterminate checkboxes and so most users don't know what to do with them. To be avoided, if possible.
To create multiple instances of the same plugin access elements relatively to an other element.
For example: in your case instead of keeping the item in a jQuery object var $tableRows = $('table.myList tr'); access them in the event.
$('#user_name').keyup(function () {
var sValue = $.trim($('input#user_name').val());
if(lastInput==sValue) return;
var $tableRows = $(this).next().next().find("table.myList tr");
if (sValue == '') {
$tableRows.show();
} else {
$tableRows.each(function () {
var oLabel = $(this).find('label');
if (oLabel.length > 0) {
if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
}
});
lastInput=sValue;
}
});
and you only have your actual list.
And for the tree state checkbox you don t need a plugin just add a button or link and every click check it status you can keep the status by jQuery data and change the element image according to this data.