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!
Related
How do I add a button with event listener in dc.js data table in a new column.
I basically want to add custom html if possible.
Adding the button is simply a matter of returning the html for the column for
dc.dataTable (dom)
.columns ([function (d) { return "<button>Clickedy click</button>" }])
.on('renderlet', function (graph) {
graph.selectAll('button')
.on('click.clickedy',function(d){
console.log(d);
})
'renderlet' or 'pretransition' for the event, don't think it matters much in this case
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() {}
I have a d3 bar chart and I would like to have it so when a bar is clicked on the chart, HTML is loaded in another section of the page. As I've been trying to research how to do this, I am becoming more and more confused. Should I use a <div> or an <iframe>? I have this which works as far as a clicking event goes:
.on("click", function() { alert("Hello world"); })
But I don't think I can use it since I want different bars to open different content. So I also need to figure out how to tie which bar is clicked to which file is opened. Can anyone point me in the right direction? Thanks.
Add an onclick event which passes clicked bar reference to the function which loads html.
.on('click', function(d) {loadHtml(d)});
Then create a loadHtml function
function loadHtml(clickedBar)
{
if (clickedBar[0] = "foo")
{
$('#DivForLoadingHtml').load("http://mydomain.xyz/foo.htm");
}
if (clickedBar[0] = "bar")
{
$('#DivForLoadingHtml').load("http://mydomain.xyz/bar.htm");
}
}
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!
Highcharts offers the opportunity to detect clicks on chart points, but is it possible
to detect other events, such as the double click or mousedown event?
Thanks in advance
Each component only supports certain events, for example the Chart component will detect addSeries, click, load, redraw, and selection. I don't believe this set is extensible, so you can't capture a different event like mousedown.
You could try to inspect the source of your page and attach listeners to the elements that HighCharts generates, but this would be an undocumented work-around and would be liable to break in future releases. In addition, if you have to support < IE9 you would need handlers for both SVG and VML generated markup.
You can get creative with some events. Here's an example of detecting a double click using a click handler:
Working Demo
var clickDetected = false;
// create the chart
$('#container').highcharts({
chart: {
events: {
click: function(event) {
if(clickDetected) {
alert ('x: '+ event.xAxis[0].value +', y: '+ event.yAxis[0].value);
clickDetected = false;
} else {
clickDetected = true;
setTimeout(function() {
clickDetected = false;
}, 500);
}
}
}
},
...
It's possible, but in a different way. In Highcharts you can add event to each element using element.on. For example:
chart.series[0].data[0].graphic.on('dblclick', function() {
//callback here
});
And simple jsFiddle for you. Good thing is that you can add to all elements, and make sure work in all browsers.