I have just started using NVD3 for drawing simple charts such as line/pie/bar and such.
I would like to add some mouse interactivity to these charts but cannot find specific documentation nor example code:
allow user to click a specific line point, pie slice, bar component
receive in my program notification of the click with details of the series and point/data row pertinent to the click.
E.g., if I drew sales versus years, I would like user to be able to drill down to sales of a particular year. The line graph onclick example I have seen here are way too coarse for such detailed interaction.
Is there a relevant page(s) that documents the mouse click specifications for these types of charts?
Is it even possible with NVD3?
Thanks.
here you can see the plunker example ,may be you can get some help .
this example is for the pie chart drill down using angularjs and Nvd3 charting lib.
http://plnkr.co/edit/UjOP0k5Jo3OvQ6A79Qv9?p=preview
Related
I am trying to display an interactive tool-tip on box plot data points with dc.js. i tried different ways with d3 and mouse event to display the tool-tip. But the data which comes when mouseover on point is 0 1 2 like the indexes of dots.
Does it possible to achieve result like second pic with dc.js or customizing with d3 anything ?
I am using the latest version of d3.js and dc.js. Can anyone help me with the little code and suggestion etc. i am unable to resolving such issues.
I am looking to create a chart with nvd3 that looks like the one below:
In this chart, it is essentially a nested x-axis where I have a price ranges, and I am tracking the prices from different stores (and the categories within each store) in those ranges. I know I can do a simple chart with just one store and then I wouldn't need the nested x-axis, but I need to be able to do the side-by-side comparison as well.
Looking through the examples and documentation, it appears that nvd3 does not support this advanced chart type. I have used nvd3 to create plenty of simple bar charts, but this is my first attempt at a more advanced chart. If nvd3 does not support this, is there a library outside of d3 itself that you can recommend. I have looked at dimple.js, but it does not look like that it is being actively supported as the last commit was in 2016.
I'm on a project which has a requirement to make data visualization. But more than just data visualization, there're some tricky interactive requirements.
Imagine a scatter plot, instead of little circles, clickable rectangles(like button) are placed on the chart. When user clicks on those buttons, the rectangles turns into some input fields, user can type make some inputs.
How to draw these buttons and input fields with d3.js?
After doing some research, the root of the problem is : how to put html in svg? Then there's plenty of questions and answers out there. Basically the solution is to use svg element: foreighObject. refer to this SO question:
Insert HTML code inside SVG Text element
I've created a page using dc.js/d3.js with multiple bar charts and a row chart, and when I hover over them and interact, the brush functionality works as expected in all charts.
I'm trying to get just one of the charts to have the brush and a range appear on page load, but when I try this using .filter on one chart, the other charts become disabled. I have also experimented with .extent.
Image of the two version of the charts:
http://neil-s.com/unison/images/Brush3.png
I have looked at some related posts on SO, but they aren't quite what I need. The main crossfilter page has an example, but since the code is so different, I want to see if I can retain what I have, otherwise I'll use the crossfilter page code.
Updated:
Here is a jsfiddle - http://jsfiddle.net/jth32/22/
And here is a small sample of the bar chart code:
// Bar Chart 3-------------------------------
psalBarChart
.width(300).height(150)
.dimension(psalDim)
.group(psalGroup)
.x(d3.scale.linear()
.domain([25, 40]))
.xAxisLabel("Salinity")
.centerBar(true);
// Bar Chart 4 -----------------------------------
depthBarChart
.width(300).height(150)
.dimension(depthDim)
.group(depthGroup)
.x(d3.scale.linear()
.domain([0, 2050]))
.xAxisLabel("Depth")
.centerBar(true)
//.filter([0,1000]) // Creates Brush, but disables other charts
Thanks
I found out it had to do with the version of dc.js that I was using. The latest version on github (v2.0) is what I had, but the CDN link I used in jsfiddle used version 1.6.0, and that works fine as Ethan mentioned. Once I switched to 1.6.0 in my dev environment, that fixed my issue.
I posted a message to the dc-js google user group, and I'll add another message here if this is indeed a bug in dc.js v2.0.
So, in nvd3 charts, clicking on a legend entry basically filters that out of the chart window (for instance in the case of area charts). I want to invert this functionality..i.e. show the particular chart when its corresponding legend is shown and hide all the others...is there a way to do it?
It is similar to what happens when user hits the chart itself (i.e. only the one that is clicked is expanded and rest of the streams hide).
I am referring to this example: http://nvd3.org/ghpages/stackedArea.html
There's a radioButtonMode that should do exactly what you want. You should be able to set this on the chart, i.e.
chart.radioButtonMode(true);