I have a pie chart generated by nvd3, but it has too many slices.
By clicking legend, we can control the slice display or not, I want top 10 (by count) of the chart slices show by default, and others hide (by clicking legend, they can be added to pie chart).
Can I do this in nvd3?
Finally, I complete this by transforming my data:
[{
'x': 10,
'y': 1,
'disabled': true,
}]
set the disabled attribute to true.
Related
I am working with amchart to build a strip chart using AMstock (rotated).
Is there a way to display only category axes values on a panel? see sample screenshot here.
I have 2 charts. Left should show only category axes values. the right shows the strip chart.
Right now I am stuck at creating the chart options to show only category axes values (double values).
Any help will be appreciated.
I was able to solve this by removing the stock graphs entry for my panels.
...
'panels': [
{
'showCategoryAxis': true,
'title': 'Value',
'percentHeight': 100,
'lineThickness': 2,
'autoMargins': true,
'autoMarginOffset': 0,
// as you can see, the stockGraphs is commented out.
// 'stockGraphs': [{
// }],
}
],
...
hopefully this helps somebody.
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've got a multi-axis chart with several lines in the graph.Currently as I move the mouse over the chart, several balloons appear at each point showing the values of the various lines at that point. At the same time, the legend at the bottom of the graph also displays values for these points. Is there a way I can disable the balloon text from appearing when I hover over the chart. The values appearing in the legend area is sufficient.
Just insert "showBalloon": false for each graph. Reference
use baloon object in graph option to enable and disable amchart baloon.
"graphs": [
{
"valueAxis": "item1",
"balloon": {
"enabled": false
}
]
I am using kendo UI dataviz charts to display data that has text(symbols) on x-axis and a numerical value on the y-axis. I have serverside datasource that provides the data. How can I achieve this?
I tried to use Scatter charts but they are XY charts and need numerical values on both x and y axis. I can display the data as a linecharts which are categorical but the line connecting the markers is meaningless in my case and I don't need that displayed.
here's an example of my data
var data = [{id:"1", number:"1.23", label:"A"},{id:"2", number:"4.11", label:"B"}]
You could use simple line chart and set
markers visible
series.opacity to 0
series: [{
field: "value",
type: "line",
opacity: 0,
markers: {
size: 5,
visible: true,
}
}]
http://docs.kendoui.com/api/dataviz/chart#configuration-series.opacity
I'm currently working with highcharts to generate a chart that has several pie charts inside. So basically a data set that has 3 or 4 series, each with their own name and data. The charts render perfectly, and now I would like to place the series name above each pie in the chart. The only way I can see to do this is with the label property. The issue that I'm having is that the series are positioned within the chart with percentages. A series looks like:
series: [
{
name: 'series name',
data: [25, 25, 50],
center: ['33%']
}
]
So now I want to apply a label to that series, but I'm having issues deriving what the "style" property should be set to. using the series center (which I was hoping would position the label directly over the series pie) doesn't seem to work.
Any ideas?