I have been searching for a working example of a chart inside tooltips of the another chart. I have not been able to find something so far. I am wondering if it is at all possible.
Yes, probably it is not very common but as far as I know it is possible and you just need to append the new D3 SVG drawing into the tooltip with the function
d3.select("#tooltip").append("svg:svg") //Line 252
On this D3 chart tooltip JSFiddle I'm adding a D3 chart to the #tooltip element.
Related
Here I am trying to draw a gauge graph according to the following design. So far I have found a couple of examples from codepen on drawing gauge graph
But I was not able to find any documentation for styling these graphs.
I'm looking for a way to achieve those inner shadow overlays inside the circle on hover.
I have a Simple Line Chart in NVD3 like this one http://nvd3.org/examples/line.html
I would like to highlight (overlapping a circle for example) one particular point (a given x) on my serie.
I haven't found something similar to the Highcharts addPoint() in NVD3, example: http://api.highcharts.com/highcharts#Series
Moving the tooltip programmatically could work as well.
Thanks in advance!
I have 3 similar pie charts. They use same dimension but different groups so, their legends look the same. Instead of having 3 same looking legends, I'd like to bind only a single legend to those charts. I tried creating a legend separately and assign it to the charts, however, it didn't work. Is there actually a way to do such thing?
This is not directly supported by dc.js, but it is very similar to a legend on a composite chart. I think if you were willing to do some hacking, you could override the legendables function on the chart you want to put the legend with, and have it accumulate the legendables from its sibling charts.
Take a look at pieChart.legendables:
https://github.com/dc-js/dc.js/blob/master/src/pie-chart.js#L419
And then compositeChart.legendables
https://github.com/dc-js/dc.js/blob/master/src/composite-chart.js#L363
for inspiration.
If this is too much hacking for you, please file an issue. It would certainly be nice to support!
I really appreciate your help on this - I'm fairly new to D3.
I am working on a sort of nested D3 viz. When one element in the first D3 viz is moused over, I want a second D3 viz (say bar chart distribution of the first's elements) to appear. Is this possible? Could you give me a high level overview of how to implement?
To further illustrate: Let's say first viz is scatter plot of GDP vs. population of various countries. When a particular country on the scatter plot is moused over, I want a bar chart to appear in the tooltip that shows the top 5 industries in that country.
Any help on how to approach this would be much appreciate. Thank you again!
I suggest you to take a look into Bootstrap's "popover". I like it because is very easy to use. Inside that popover you can insert SVG element and draw your second visualization.
To keep things clean and reusable, I suggest you to read this article and write your second chart in reusable manner.
Here is plunker - http://plnkr.co/edit/VYH5QbO99ZbMkvc2D4Fe?p=preview
As I add more and more categories, these labels overlap and I can't see anything
Is there a better way to align labels?
Thanks
I rather moved to using NVD3 and created pie charts
The demo and code is availale http://plnkr.co/edit/qJnZzBS4ZOUtD2q9FV11?p=preview