D3 - event on chart type change - d3.js

Is there any callback for the chart type change in d3
I know there is a legendClick event callback which is called when we click on legend but I want a callback when I click on Grouped/Stacked types

You can achieve it like this:
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
Now when grouped is clicked it will log
New State: {"stacked":false,"disabled":[false,false,false]}
Now when stacked is clicked it will log
New State: {"stacked":true,"disabled":[false,false,false]}
Working example here
Hope thsi helps!

Related

How to registery event handlers on the individual categories of a AMCharts v4 CategoryAxis

I have seen https://www.amcharts.com/docs/v4/concepts/event-listeners/ and
https://www.amcharts.com/docs/v4/reference/categoryaxis/#Events
categoryAxis.events.on('hit', function (ev) {
console.log('clicked on ', ev.target)
}, this)
works. However, this returns the complete CategoryAxis. I would like to distinguish on which catgeory the user clicked.
e.g. categoryAxis.category.template.events.on('hit', function (ev) does not exist.
You need to add the hit event listener on the axis renderer's label template in order to capture the category label that was clicked:
categoryAxis.renderer.labels.template.events.on('hit', function(ev) {
alert(ev.target.dataItem.category)
})

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!

google charts remove event listener

I haven't seen much documentation and cant seem to get my code to work. the code snippet is below. I'm trying to remove the on mouse over listener but have had no success. Google charts docs has the method as such - google.visualization.events.remove Listener(listener_handler).
I'm uncertain what the listener_handler actually pertains to. Im trying to remove the on mouse over listener once the chart has been clicked.
google.visualization.events.addListener(chart, 'onmouseover', chartMouseOver);
google.visualization.events.addListener(chart, 'onmouseout', chartMouseOut);
google.visualization.events.addListener(chart, 'select', function () {
google.visualization.events.removeListener(chartMouseOver);
}
You need to store the returned event object in a variable, and pass that to removeListener :
var event = google.visualization.events.addListener(chart, 'onmouseover', function() {
alert('onmouseover');
google.visualization.events.removeListener(event); //the event object as param
});
demo -> http://jsfiddle.net/cmDT2/

ArrowIndicator Event Handling in Dojo

I have a gauge chart which has one arrowIndicator.
Im trying to capture the value change event on the arrowIndicator. I tried dojo.connect() and on() methods to set the event handler for my gauge but failed both times.
This is what I did...
var arrow = new dojox.gauges.AnalogArrowIndicator({....});
dojo.connect(arrow, 'change', handlerFunction);
AND
var arrow = new dojox.gauges.AnalogArrowIndicator({....});
define(["dojo/on"], function(on){
on(arrow, "change", myHandleFunction);
});
I don't get any error message or anything...
How should I go about this?
the valuechange event is exposed at the guage chart level:
dojo.connect(gauge.indicators[0], "valueChanged", dojo.hitch(gauge, function(){
//new value is in this.indicators[0].value
}));
where, gauge is the jsid or js variable holding the gauge dijit
depending on how you are adding the indicators, it might be indicators[1] or similar

How to fire dragend event of a marker in google maps v3?

I want to fire dragend event of a marker in another event say click event on the map. how can I do that?
google.maps.event.addListener(map,'click',function(pt){
posSelectMarker.setPosition(pt.latLng);
//Here I want to fire dragend event.
});
Use event.trigger;
google.maps.event.trigger(markerObject, 'dragend', args);
This is a bit more complete:
theListener = google.maps.event.addListener(posSelectMarker,'dragend',function(event){
console.log(event.latLng);
});
Note that you can get at the object with the event param
Should be:
google.maps.event.addListener
instead of:
google.maps.event.trigger
Quick example:
google.maps.event.addListener(marker_var_name, 'dragend', function(){
alert('drag ended')
});
If you have the marker object, you could call addListener directly to add a dragend event.
var marker = new google.maps.Marker({
...
)};
marker.addListener('dragend', function() {
// do something
});

Resources