How to change style of a clicked element in nvd3.js - d3.js

I have this code for add an event when you click in an element of the chart
chart.multibar.dispatch.on('elementClick', function(e) {
console.log(e);
});
I need to change the fill color of the clicked element

Related

How handle style chart click event on nvd3

I want to remove stream style (state ? ("Stream", "Stacked" and "Expanded")) on stacked area chart and use this code :
d3.selectAll("g.nv-series")
.filter(function() {
return d3.select(this).select("text").text() == "Stream";
})
.remove();
But it works only the first time.
I tryed to handle events on chart because i want to refresh rendering of chart but it didn't work for the styles click. It works only for the legend click.
chart.legend.dispatch.on('legendClick', function(e){
console.log('legend was clicked', 'no namespace.');
});
How i can i handle click on style event ?
setter
chart.style('stream');
getter
chart.dispatch.on('stateChange', function(e) {
console.log(e); //e.style holds the current style
});
List of available styles can be found here https://github.com/novus/nvd3/blob/master/src/models/stackedArea.js#L299-L318
I also had hard time with this issue so I hope this would help you.
Cheers!

change kendo grid ui toolbar dynamically

I'm using kendo ui grid, and for initialization I pass create and edit button to grid toolbar like this :
var grid = elem.kendoGrid({
...
toolbar: getToolBar(),
});
getToolbar function return an array list of buttons. now for example after user click on edit button I wanna add two new button with the name of Cancel and Save . I have used this code but I was useless :
var grid = elem.kendoGrid({
...
edit: function (e) {
e.sender.options.toolbar = getCancelToolBar();
}
});
I wander how can I change this buttons on toolbar after user click on edit button .
any idea is welcome and thanks in forward.
You have to specify all button you need in getToolBar() function and then use CSS & JS to toggle them.
CSS:
.k-grid .k-grid-save-changes,
.k-grid .k-grid-cancel-changes {
display: none;
}
JS:
var grid = elem.kendoGrid({
...
edit: function (e) {
e.sender.element.find('.k-grid-save-changes').show();
e.sender.element.find('.k-grid-cancel-changes').show();
}
});

JQuery Vector Map: Tooltip remains displayed on the map after click

I am using JQuery VectorMap.
When I click on a country, the tooltip containing the description is shown.
However, when I click on another country, the previously displayed tooltip is not removed from the screen.
I don't understand why the tooltip of the clicked region stays displayed, since the onRegionClick event does not save the state of the tooltip.
Here is the code:
onRegionClick: function(event, code){
if (gdpData[code]) {
$('#currencyHidden').val(wm2idCurrencyMap[code]);
$('#calculatorCurrencyToHidden').val(wm2idCurrencyMap[code]);
$('#calculatorWmCurrencyToHidden').val(wm2idCurrencyMap[code]);
submitCurrenciesFormWithOptions();
}
},
function submitCurrenciesFormWithOptions() {
// sets the form options and submits the form
$('#currenciesForm').ajaxSubmit(currenciesFormOptions);
//submitCalculatorFormWithOptions();
return false;
}
Thank you !
Checked your onLabelShow function.
onLabelShow: function(e, el, code){
el.html(el.html()+' (GDP - '+gdpData[code]+')');
};
jvectormap example site url. http://jvectormap.com/examples/world-gdp/

How to enable click event for y axis ticks (label) in horizontal bar chart using Jqplot

I am trying to implement the horizontal bar chart using jqplot.I want to enable click event for the y axis labels.
But i tried it with the jquery using class name to get access of "y axis ticks" .
$('.jqplot-yaxis-tick').click(function ()
{
alert("you have clicked the label");
});
Is there any event to do this like "jqplotDataClick" event in jqplot?
This issue was solved
From Here
just update the z-index of the .jqplot-yaxis-tick so it would be the first div to be clicked and added .live (or .on)
$('.jqplot-yaxis-tick').css({
cursor: "pointer",
zIndex: "200"
}).live('click', function (e) {
alert("you have clicked the label");
});

click on a empty jqgrid

Can anyone please tell how to get the click event of an empty grid.
i have an empty grid, and after inserting i need to refresh the grid for that i use a right click menu in the grid.
So at first there will be no data and need a click event of the grid,
Thanks,
Devan
It seems to me that you should trigger 'reloadGrid' after the filling of the grid.
If you do need implement 'click' or 'right click' event handler to the whole grid and not only the grid body you can use gbox div which will be constructed by jqGrid and which includes all jqGrid elements (see here for details):
var myGrid = $("#list");
// ...
$('#gbox_'+myGrid[0].id).click(function(e) {
alert("click!");
}).bind('contextmenu', function(e) {
alert("right click!");
});
See the corresponding demo here.

Resources