I have a nvd3 bar chart.
I have click event defined as below:
chart.multibar.dispatch.on("elementClick", function(e) {});
When I click a bar element, I can get the element information via "e" parameter in the callback and it gives me
Object {data: Object, index: 1, color: "rgb(31, 119, 180)"}
How can I change a specific bar's color using this index value?
You've got a series index and a point index in series, you need just to find corresponding bar and change its style, like that
chart.multibar.dispatch.on("elementClick", function(e)
{
d3.select('.nv-series-'+ e.seriesIndex +
' .nv-bar:nth-child('+ (e.pointIndex + 1) +')').style('fill','red');
});
Related
I'd like to use images (icon or svg) instead of the default rectangles for the legend of the pie chart.
Would it be possible to do this in dc.js?
For example:
Many thanks.
This feature isn't built-in, but it's usually easy to "escape to d3" and customize your charts as you see fit.
In this case, we want to wait until the chart is rendered and then replace the rectangles with images:
chart.on('pretransition', function(chart) { // 1
var items = chart.selectAll('.dc-legend .dc-legend-item'); // 2
items.selectAll('rect').remove(); // 3
var images = items.selectAll('image').data(function(x) { // 4
return [x];
});
images.enter().append('image').attr({ // 5
width: 25,
height: 25,
href: function(leg) { return _icons[leg.name]; }
});
console.log('items', items.data());
});
Wait for chart render/redraw
Select the legend items
Remove any rect under each item (if it's a line chart you'll have to look for line instead
Select any existing images (the "trick" of returning a single-item array is so that we can cleanly replace anything which was there, and not keep adding more images)
And set up the image - in this example I'm using some the first SVG icons I could find on a CDN; we map stack names to SVG URLs using an object.
Finally, we also need to set the legend's item height to match the image height:
chart.legend(dc.legend().itemHeight(25));
Example output:
Example fiddle: https://jsfiddle.net/gordonwoodhull/Lss5wsz6/9/
I have a pie chart in angular-nvd3. https://krispo.github.io/angular-nvd3/#/pieChart The issue I have is with a pie chart, I have 5 slices, when all the pie slices are labeled, it looks very scrunched together. I want to instead modify the legend so that instead of just displaying the keys, I want to show:
<key> + <number of records in that key>
Using "labelType" I can change what is shown on the labels of the slices pie chart, but how can I change what is shown in the legend?
Could not find anything in the API to do this.
But here is a bit of hack to do it via d3:
After render
1) get all the text DOM
2) run a for loop on all the text.
3) get the text's data and change the inner HTML.
dispatch: {
renderEnd: function(e) {
//for each text
d3.selectAll(".nv-legend text")[0].forEach(function(d){
//get the data
var t= d3.select(d).data()[0];
//set the new data in the innerhtml
d3.select(d).html(t.key + " - " + t.y);
});
}
}
working code here
I am trying to get the X axis and Y axis value in crosshair tooltip of kendo chart. Please see: http://dojo.telerik.com/iDanE
How can this be done? How to specify the template for tooltip to contain both X axis and Y axis value? Want to have both category and value axis value in the same crosshair tooltip. Can this be done?
I just found a question with same requirement: http://www.telerik.com/forums/show-multiple-series-value-in-a-categoryaxis-crosshair-tooltip-
But how can use this in my example : http://dojo.telerik.com/iDanE ?
Thanks in advance.
According to their documentation, the crosshair tooltip template only has access to the axis value: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.crosshair.tooltip.template
So you could either add the second crosshair on the valueAxis:
DEMO
or just show a regular tooltip with both category and value:
tooltip: {
visible: true,
template: "#: category # - #: value #"
},
DEMO
The problem with using labels is that if a slice is too small the labels doesn't shows up and therefore, getting the value of label during onClick event fails
The problem is reproduced here http://plnkr.co/edit/3rCHWnxW7EFPXxWHLo96?p=preview. You will see that for Taxes the label is missing and therefore I can't get its value on click event
what would be awesome?
If I can get the value from tooltip or legend instead of labels because labels are not a good idea to get values
Because I pass the value of label onclick to display other graph
In line 144-145 of your script.js, you can change this:
.on('click', function(){
var parentCategory = this.getElementsByClassName("nv-label")[0].textContent;
to this:
.on('click', function(d){
var parentCategory = d.data.label;
This way, you are passing in the __data__ of the clicked element to the click function, which you can access with d. This should solve your issue. You can also throw a console.log(d) within that function to see all the options available on the __data__ object.
Is there any way to store IDs in Bar Charts and then getting the ID of a clicked Bar in JQplot Bar chart?
This ID won't be shown on any axis.
This is the code which I am using, but it just shows Point Index, or its x-axis value, how to get the ID?
$('#'+chartName).bind('jqplotDataClick',
function(ev, seriesIndex, pointIndex, data) {
alert('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
}
);
The pointIndex is not the x-axis value, so it should be fine to use as an Id for a clicked bar. It is the data object that contains the actual x/y values.
If you have multiple series, then the Id could be determined by also taking into account the seriesIndex.