Im starting NVd3 development and strugling with a big problem. I already finished my horizontal bar chart.
The problem is that the client asked me to regroup labels into groups, something like this: http://peltiertech.com/WordPress/wp-content/img200804/DualCatBar.png
In that example you can see categories of parts. How can that be archieved suing NVD3 or D3?
Thank you for your help.
Related
I am trying to create a composite chart and my requirements are to draw a bar chart, a line chart and a dotted line chart. For that I draw a composite chart. Now I am having problem that points of line chart starts from start of bar chart, but I need that to start from center of line.
You can see the problem in this JSFiddle.
I got some help from Stackoverflow that is:
Align points in centre of bars (DC.JS composite chart)
Seems like a workaround is to assign ._rangeBandPadding(1) the composite chart. Though as mentioned in the github thread that breaks the bar sizes, so adding .gap(1) and .centerBar(true) to the bar chart got everything looking nice.
but after that I got this output
[http://jsfiddle.net/nauman3128/nr0rgzvc/9/][2]
I can't explain why this works, but with some odd combination of range bands and old-style .gap(1), I was able to get it to draw properly.
The trick is
._rangeBandPadding(1)
on the composite chart, and
.gap(1)
.centerBar(true)
on the child bar chart, pretty much as stated in the original question. So this is essentially a duplicate of the earlier question and answer, but I've applied it to your JSFiddle in this fork:
http://jsfiddle.net/gordonwoodhull/nr0rgzvc/22/
Also, it's important not to set barPadding for the child bar chart. So we are using range-band layout for the composite, and classic gap-padding for the bar chart, which sounds like a very bad idea... but the output looks okay!
I'm looking for a way to visualize data with d3.js.
Currently i have bar charts for each week but i want to be able to have an options that can allow me to visualise bar charts monthly or yearly.
Is there any option to draw Bar Chart with weekly, monthly values ?
Without having any other context around what your data looks like etc., this should serve as a good starting point:
http://bl.ocks.org/mbostock/3884955
I am trying to create a composite chart and my requirements are to draw a bar chart, a line chart and a dotted line chart. For that I draw a composite chart. Now I am having problem that points of line chart starts from start of bar chart, but I need that to start from center of line.
You can see the problem in this JSFiddle.
I got some help from Stackoverflow that is:
Align points in centre of bars (DC.JS composite chart)
Seems like a workaround is to assign ._rangeBandPadding(1) the composite chart. Though as mentioned in the github thread that breaks the bar sizes, so adding .gap(1) and .centerBar(true) to the bar chart got everything looking nice.
but after that I got this output
[http://jsfiddle.net/nauman3128/nr0rgzvc/9/][2]
I can't explain why this works, but with some odd combination of range bands and old-style .gap(1), I was able to get it to draw properly.
The trick is
._rangeBandPadding(1)
on the composite chart, and
.gap(1)
.centerBar(true)
on the child bar chart, pretty much as stated in the original question. So this is essentially a duplicate of the earlier question and answer, but I've applied it to your JSFiddle in this fork:
http://jsfiddle.net/gordonwoodhull/nr0rgzvc/22/
Also, it's important not to set barPadding for the child bar chart. So we are using range-band layout for the composite, and classic gap-padding for the bar chart, which sounds like a very bad idea... but the output looks okay!
How could I add some space between two bars from the same group, in NVD3 chart?
I try chart.groupSpacing(0.5) but nothing changes...
I can't put any pictures because I need at least 10 reputation.
The groupSpacing changes distance between groups of bars.
var chart = nv.models.multiBarChart()
.groupSpacing(0.5)
;
I've created an example here
If you want to add space between bars within a particular group then you'll need to modify nvd3 source or write a multibar using pure d3.
This answer will be useful How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?
I need to create a multibar chart using NVD3.js. All the example are showing bars belongs to the same Y1-Axis. I need to show bar1 for Y1-Axis and bar2 for Y2-axis.
Is it possible? How can I achieve it?
It's not possible with NVD3 as it's built for re-usability. You could try drawing multiple bar charts alongside each other or try using pure d3.
Have not done/tried stuff like this.
If you manage to find a solution, please do share your solution. It's interesting.
Update
Have you noticed how the charts in the NVD3 homepage work. All 4 charts change based on the selection of categories on the MultiBarChart legend. You could try something similar.