I am using JqPlot with Javascript and would like some help for a GraphMouseOver event. I see that there is the following:
jqplotDataMouseOver
I would like the same as the above, yet instead of MouseOver for just the data, I am looking for a MouseOver for the whole graph.
Is there a list of Events for JqPlot that I can have a look at, or can someone help me with the name of this event?
Thanks in advance.
Try using jqplotMouseMove. E.g.,
$('#chart1').bind('jqplotMouseMove',
function (ev, seriesIndex, pointIndex, data) {
alert('here');
}
);
Going through the jquery.jqplot.js file, the following events are raised:
'jqplotClick'
'jqplotDblClick'
'jqplotMouseDown'
'jqplotMouseUp'
'jqplotRightClick'
'jqplotMouseUp'
'jqplotMouseMove'
'jqplotMouseEnter'
'jqplotMouseLeave'
Related
I have a top 10 chart that works (using a fake group) how all other bar-charts work with cross-filter. If I select one of the things on the top 10 chart it filters all the other charts which is not what I want to have happen. I just want the chart display the chart.title text (the hover-text) while disabling its ability to be clickable.
So far I've looked into dc.js itself to see if there was a configuration for the bar-chart to get what I need and I couldn't find anything.
I've tried using this
ng-click="stopClick($event)"
$scope.stopClick = function (event) {
event.preventDefault();
event.stopPropagation();
};
That didnt do anything to the chart.
I've tried using inline css for the chart
style="pointer-events: none;"
But that disables the hover-text completely.
Any help would be greatly appreciated.
Huh, you would expect .brushOn(false) to do this, but I guess it has no effect for bar charts with ordinal x scale.
Instead, you can disable the event handler manually:
chart.on('pretransition', function(chart) {
chart.selectAll('rect.bar').on('click', null);
});
I wasn't having luck with the chosen answer but Gordon's answer to a different question did work https://stackoverflow.com/a/50702979
chart.onClick = function() {}
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!
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!
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/
I'm using the lineWithFocusChart.js model shown in the nvd3 examples shown here: http://nvd3.org/examples/lineWithFocus.html
I want to be able to get access to the values that the user selects in the brushExtent (slightly related see here) and then apply the focus to all other lineAndFocus charts.
I can do so for the line-chart part with this:
chart.lines.dispatch.on('elementClick.customNameSpace', function(e) {
console.log('click', e);
});
Is there something similar for the brushExtent?
EDIT1: I can control where it focuses using this code. Editing this example here
chart.brushExtent([10,20])
chart.update()
EDIT2: This is what I am looking for, now I just need to put it all together,(i.e. draw the graph,listen for changes, then draw the graph with the changes...)
chart.dispatch.on('brush.update', function(b) {
console.log(b.extent[0], b.extent[1]);
});
Just do:
chart.focus.dispatch.on('onBrush', function brushChanged(brushExtent) {
otherCharts.forEach((chart) => chart.brushExtent(brushExtent));
});
I used a similar approach in my lineWithFocusPlusSecondaryChart model.