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() {}
Related
I am trying to reset after choosing some of the individual's bar.
index.html: (line no. 62)
<span>
reset
</span>
This seems not to work. I was able to reset all the graphs pie chart, line chart, etc but not this one.
Those two ordinal graphs are created in index.js like this:
var focus = new dc.barChart('#focus');
var range = new dc.barChart('#range');
https://blockbuilder.org/ninjakx/483fd69328694c6b6125bb43b9f7f8a7
Update:
It looks weird now Coz it's showing a single bar and all the bar have got invisible but I want them to be visible (in gray colour) but not clickable.
This example replaces the built-in filtering functionality of the bar chart with its own implementation of ordinal selection, because the chart has a linear scale.
The example uses a global variable focusFilter to store the current selection. We need to empty this out and we also need to update the dimension filter as the original filterAll would do, pulling that code out of the click handler:
focus.applyFilter = function() { // non-standard method
if(focusFilter.length)
this.dimension().filterFunction(function(k) {
return focusFilter.includes(k);
});
else this.dimension().filter(null);
};
focus.filterAll = function() {
focusFilter = [];
this.applyFilter();
};
This will also allow dc.filterAll() to work, for a "reset all" link.
Fork of your block.
For some reason, I could not get the original
reset
links to work at all in this block, so I replaced them with the equivalent D3 click handlers:
d3.select('#reset-focus').on('click', () => {
focus.filterAll();
dc.redrawAll();
})
d3.select('#reset-all').on('click', () => {
dc.filterAll();
dc.redrawAll();
})
I also updated the focus ordinal bar example. Note that automatic hiding/showing of the reset link doesn't work because the chart still has an irrelevant range filter inside of it.
I am modifying the bar size and position using attr.
However the chart attributes are only available after the chart gets rendered.
So I am doing the modification on the fuction
chart.on("renderlet.somename", function (chart) {// modification });
My problem is this looks odd, as the chart gets rendered first then the modifications are applied and it all appears on the page.
I want that the chart should only be visible after the modifications has been applied.
I started to write that you could use the pretransition event, since this fires after everything has been rendered/redrawn, before transitions start.
But you are correct that the bar width is not publicly accessible (it should be!) and you can't read it from the bars until they have transitioned.
So, as you suggested, you could instead hide the whole chart using CSS:
<div id="test" style="visibility: hidden"></div>
And then show it at the start of your renderlet:
chart.on('renderlet', function(chart) {
d3.select('div#test').style('visibility', 'visible');
To eliminate the pause, you could also disable transitions for this chart when you initialize it;
chart
.transitionDuration(0)
And re-enable them in your renderlet:
chart
.on('renderlet', function(chart) {
d3.select('div#test').style('visibility', 'visible');
chart.transitionDuration(750); // default value
Here's a demo, using a fiddle demonstrating error bars (which also need the bar width): http://jsfiddle.net/gordonwoodhull/cw86goxy/32/
Following my previous question Disable resize of brush on range chart from focus charts (dc.js, d3.js) - Solved and my previous fiddle,https://jsfiddle.net/dani2011/uzg48yk7/1/, still need to disable brush drawing on the range chart before selecting a scale from the dropdown and/or on page load (!isPostback):
a) When panning /translating the line of the focus charts (bitChart,bitChart2) the brush is displayed on the whole range of the range chart:
b) It is possible to drag the brush on the range chart
Tried to cancel the zoom event using event listeners as followed:
var anotherRoot = d3.select("div#bitrate-timeSlider-chart.dc-chart").select(".chart-body");
anotherRoot.on("mousedown", null)
anotherRoot.on("mousemove.zoom", null)
anotherRoot.on("dblclick", null)
anotherRoot.on("touchstart", null)
anotherRoot.on("wheel", null)
anotherRoot.on("mousewheel.zoom", null)
anotherRoot.on("MozMousePixelScroll.zoom", null)
Tried to use different SVG scopes instead of anotherRoot such as:
//option 1
var rootSvg = d3.select("#bitrate-timeSlider-chart svg brush")
//option 2
var brushSVG = d3.select("#bitrate-timeSlider-chart").select("g.brush").select("*");
//option 3
d3.select("#bitrate-timeSlider-chart").on("touchstart.zoom", null);
d3.select("#bitrate-timeSlider-chart").on("mouse.zoom",
null);
Tried to cancel the event listeners:
1) Directly in my js file
2) Within the range chart (timeSlider)
3) Within the range chart events such as .on(render...) , .on(postRedraw...)
4) Tried to remove the brush within .on(postRedraw...) and within (!isPostBack) using:
//JS file
function isPostBack() { //function to check if page is a postback-ed one
return document.getElementById('_ispostback').value == 'True';
}
//HTML file
....
</script>
<input type="hidden" id="_ispostback" value="<%=Page.IsPostBack.ToString()%>" />
</body>
</html>
d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("*").data(data[0]).exit().remove();
Any help would be appreciated.
Okay, the answer I provided to the previous question for fixing the brush size was broken by these lines:
document.getElementById("alert").style.display = "inline";
There's no #alert element, so it crashes every time. I've restored that to the way I wrote it and it's a little bit messy when you drag, but at least it locks the brush size.
As for the other parts, now we're (finally) getting into documented behavior. Yay!
It's not perfect, but you can enable the brush only when there is a scale selection. Just disable it at first:
timeSlider
.brushOn(false)
and then enable it with a render when a scale has been selected:
function addHours(amountHours) {
var showBrush = +amountHours !== 0;
if(timeSlider.brushOn() !== showBrush)
timeSlider.brushOn(showBrush)
.render();
The render is not great, we'd rather do a redraw, but apparently the chart will only look at .brushOn() on render. Something to look into in the future.
We can also disable the styles which make it look like it has a ordinal brush and wants to be clicked on, like this:
.dc-chart rect.bar {
cursor: default;
}
.dc-chart rect.bar:hover {
fill-opacity: 1;
}
As for preventing zoom on the focus charts, you just need to set .zoomScale():
bitChartGeneral
.zoomScale([1,1]);
This sets d3.zoom.scaleExtent, locking the zoom.
Here's the updated fiddle: https://jsfiddle.net/gordonwoodhull/dsfqeut8/5/
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 have a Kendo ui chart which displays a column chart from a dynamic data source. But occassionally, the chart opens half the size of the available space. When I click on some links or change the date, it resizes itself. Any idea why its causing it?
In the datasource change event, its showing the container div's width as 0 when it shows this behaviour. I can give more details if needed
I tried the refresh method as given in one of the answers but its not of help
This happens generally when you open a chart in a animated window before it is finished expanding.
My suggestion is to redraw the chart when you are sure everything is loaded and fully opened.
$("#myChart").data("kendoChart").redraw();
If you have not disabled animations you may want to do that before this and re-enable them after.
$("#myChart").data("kendoChart").options.transitions = false;
When you have got all the necessary data in the controller you can call a Javascript CallBack function in which you can set the transition to false and then redraw the chart and set transition to true, also you can hide the chart by default and make it visible on Javascript CallBack function
Try this
var chart=$("#chart").data("kendoChart");
//to check the chart exist or not if exist then redraw it..
if(chart)
{
chart.redraw();
}
Thanks
This is what I using for my charts:
if($("#areaChart").data("kendoChart")) {
$("#areaChart svg").width(Number($('.k-content').width()));
$("#areaChart svg").height(Number($('.k-content').height()));
$("#areaChart").data("kendoChart").refresh();
}
Taken from here
Have you checked the resize() Method?
I fixed it by adding a small delay after calling the CreateChart() function as below:
CreateChart(this.id, this.id + " this week", "week", null);
sleep(1000);
its working fine now
$("#divSensingData").kendoChart({
chartArea: {
width: 900,
height: 500
},
i did face same problem after resize kendo chart.
$(window).resize(function () { $("#chart").data("kendoChart").refresh(); });
it's working