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
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 an AmChart, JavaScript chart, column chart with scroll.
I'd like to be able to pull the category axis data for the min and the max values that are currently being displayed in the chart.
Example:
If I have 0-10 on the x-axis and I zoom to 4-6, I want to be able to reference the data on point 4 and point 6.
I am new to AmCharts so hopefully I am just missing something simple but I can't seem to figure this out.
Here is a link to a chart I made:
https://live.amcharts.com/U4YmV/
You can use the zoomed event to capture the startIndex and endIndex from its event object.
In the example below, zoomedData is the zoom selection.
chart.addListener("zoomed", zoomed);
function zoomed (e) {
var chart = e.chart,
data = chart.dataProvider,
zoomedData = data.slice(e.startIndex, e.endIndex + 1);
}
Please check the example here: https://codepen.io/team/amcharts/pen/246e8f826610e848b7389fb85657348a
I am new to dc.js and d3.js. I have created a bar chart along with pie charts and a line chart with dc.js.
Now, in the bar chart I want to sort the bars based on the value that each bar represents. (For example, by clicking a button.) Is this possible with dc.js?
Note that I have designed my bar chart such that the X-axis represents geographic locations and the Y-axis is scaling on some value.
Could you show us some code ?
In the past I have done that this way for a row chart :
var topRowChart = dc.rowChart("#chart-top-dest");
topRowChart
.height(400)
.width(400)
.dimension(destination, "destination")
.group(calls,"calls")
.ordering(function(t){return t.calls;})
.label(function(d){ return d.key + " : " + d.value + " calls" ;})
.cap(10);
The important bits are :
.ordering(function(t){return t.calls;})
.cap(10);
You have to pass a function to ordering() that returns the dimension/group that will be used for sorting.
Surprisingly removing cap() cancels the sorting.
I am using NVD3 chart library to display charts in my application.I used to show many chart types say line,bar,pie,scatter,etc..
Till now ,i used to show only integer/float values at x-axis of line/bar chart chart..Its working well.(Sample data : (x-10, y-50),(x-20, y-100))
But the problem is,when am trying to display the line chart with some string value at x-axis,the nvd3 chart doesn't display anything..Dont know where am going wrong?
(sample data : (x-sun,y-50),(x-mon,y-75),(x-tue,y-100))
Need help.Thanks in advance
Try this, it works for me:
select all the svg element that corresponds to text. container is a variable referring a string for selection of text;
d3.selectAll(container + ' .nv-x .tick text').text(function(d){return d;})
I've a Highstock chart (Line with markers and shadow) and would like to show a highstock tooltip programmatically, i.e. when i select, for example, a row on some table (that contains chart data) i would like to show the corresponding highstock tooltip.
Is that possible?
For StockChart this solution doesn't work:
In this example you have to replace this:
chart.tooltip.refresh(chart.series[0].data[i]);
to this:
chart.tooltip.refresh([chart.series[0].points[i]]);
The solution is available here.
If what you want is to trigger tooltip on the plot near ith data point, then probaly you can use this answer, which suggest to do something like
chart.series[0].data[i].setState('hover');
where chart is the result of your new Highcharts.Chart. (jsfiddle from the comments to that answer).
I guess that if you want to do it on <tr> click, than your js could finally look like this
var chart = new Highcharts.Chart({ <your options> });
$('#yourTableId tr').click(function(){
var i = $(this).index(); // `this` points to <tr>, get its index
chart.series[0].data[i].setState('hover');
});