I might have missed something obvious but how do you plot a non-stacked line chart in dc-js ?
I have used the example jsFiddle as a base to try and add a second group to the lineChart definition but to no avail here : https://jsfiddle.net/chapo/pcn7mot5/
I defined a second group as :
speedSumGroup2 = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 500;});
How do I plot it along with speedSumGroup ?
The stacked chart adds each line to the previous.
If the lines should be independent, the series chart is the way to go.
Related
I've followed the nvd3 scatter plot example to create a scatter plot: http://nvd3.org/examples/scatter.html
What i'd like to do is display the "size" property (from the data) beneath each circle. I've been trying various combinations of trying to selectAll of the "g.nv-group" elements and then appending "text", but nothing is working.
Any thoughts?
If the data has a label property and
chart.showLabels(true)
then this discussion on a closed (not merged) PR suggests it should work. Works on lineCharts.
I tweaked code from the link from the comment above, in my case, this worked
d3.selectAll(".nv-group path")[0].forEach(function(d){
var tf = d3.select(d).attr("transform")
t = d3.transform(tf).translate;
t[0] = t[0] +10;//moving the translate x by 5 pixel.
console.log(d3.select(d).data()[0])//data associated with the point
d3.select(d.parentNode)
.append("text")
.attr("class", "label")
.text("data: "+ d3.select(d).data()[0][0].size)//putting data
.attr("transform", "translate("+t[0]+","+t[1]+")");
});
I am stuck on a problem here. Could be simple though but i am having a tough time figuring it out. I want to show multiple lines on a dc composite chart.
My data is like this:
{ Name: Mike, mark1: 26.9, mark2: 62.3 },
{ Name: John, mark1: 23.5, mark2: 60.3 },
{ Name: Firen, mark1: 24.3, mark2: 62.5 }
I need the name plotted against X axis and mark1 and mark2 plotted as lines against the Y axis. I found a fiddle here which uses a linear scale to achieve the same result. http://jsfiddle.net/anmolkoul/mzx6mnru/3/
But it uses a linear scale as the base dimension is numerical. My base dimension is a string and hence not working with the same code. I figured it is due to the scale definition that i am using. Here is the fiddle that i need help with: http://jsfiddle.net/anmolkoul/pjLoh1az/1/
I have currently defined my x axis as
.x(d3.scale.ordinal().domain(nameDimension))
.xUnits(dc.units.ordinal)
I think this is where it is going wrong. I have two supplementary questions as well:
Once this is done, how to assign different colors to the lines ( it should reflect in the legend as well)
I was taking a look at the dc.js series chart, what does this line of code do?
runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });
Does it pivot the two dimensions? or is it just a quicker way of creating two crossfilter dimensions.
Thank you for the help!`
You can get the ordinal values with :
nameDimension.top(Infinity).map(function(d) {return d.Name}))
which returns ["Mike", "John", "Firen"] , then use it for the ordinal domain.
But it's not necessary, it's calculated automatically :
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
For colors, you can use :
dc.lineChart(lineChart1).group(mark1Group,"Mark 1").colors("#FF0000")
Here is a fiddle with those modifications : http://jsfiddle.net/1exo25u9/
I have a composite chart of three line charts. One of the charts is using a "fake" group as suggested here. As you can see in the snapshot below though the scale of the 3rd chart is very different from the other two. The solution I would like is to have a dual axis chart as shown here in pure d3. I think it can be done using a .renderlet() on the main composite chart but I was wondering if there was a "sexier" solution with pure dc.js?
Here is a snapshot:
and here is my code. (in coffeescript) I tried using .y and .yAxis on the internal charts but that had no effect.
actualValuesChart = dc.lineChart(mainChart)
.group(metric, "actual " + #displayName)
.valueAccessor (d) -> d.value.avg
.colors(['green'])
.interpolate('basis-open')
normValuesChart = dc.lineChart(mainChart)
.group(metric, "normal " + #displayName)
.valueAccessor (d) -> d.value.avg_avg
.colors(['rgba(0,0,255,1)'])
.interpolate('basis-open')
clipsCountChart = dc.lineChart(mainChart)
.group(buildFakeGroup(defaultClipsArray))
.colors(['red'])
.interpolate('basis-open')
# .y(d3.scale.linear().range([100, 0]))
# .yAxis(d3.svg.axis().scale(d3.scale.linear().range([100, 0])))
mainChart
.dimension(#dimension.monthStamp)
.width(thisChart.width + 30)
.height(thisChart.width*.333)
.yAxisLabel(#displayName)
.elasticY(true)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.months)
.brushOn(true)
.legend(dc.legend().x(60).y(10).itemHeight(13).gap(5))
.renderHorizontalGridLines(true)
.compose([actualValuesChart,normValuesChart,clipsCountChart])
Yes! It's a pretty new feature and I haven't tried it out myself, but if you create some of your subcharts with useRightYAxis, and then set rightY for the second scale on the composite chart, you should get what you're looking for.
But this is totally bleeding edge and I see that the example is currently broken (web/examples/right-axis.html). So please follow up if you run into trouble by creating an issue or starting a discussion on the user group.
I am using NVD3.js multiChart to show multiple lines and bars in the chart. All is working fine, but the x-axis labels is aligned only to the line points, not bars. I want to correctly align labels directly below the bars as it should. But I get this:
With red lines I marked where the labels should be.
I made jsFiddle: http://jsfiddle.net/n2hfN/
Thanks!
As #Miichi mentioned, this is a bug in nvd3...
I'm surprised that they have a TODO to "figure out why the value appears to be shifted" because it's pretty obvious... The bars use an ordinal scale with .rangeBands() and the line uses a linear scale, and the two scales are never made to relate to one another, except in that they share the same endpoints.
One solution would be to take the ordinal scale from the bars, and simply adjust it by half of the bar width to make the line's x-scale. That would put the line points in the center of the bars. I imagine that something similar is done in the nv.models.linePlusBarChart that #LarsKotthoff mentioned.
Basically, your line's x-scale would look something like this:
var xScaleLine = function(d) {
var offset = xScaleBars.rangeBand() / 2;
return xScaleBars(d) + offset;
};
...where xScaleBars is the x-scale used for the bar portion of the chart.
By combing through the source code for nvd3, it seems that this scale is accessible as chart.bars1.scale().
Maybe someday the authors of nvd3 will decide that their kludge of a library deserves some documentation. For now, I can show you the kind of thing that would solve the problem, by making a custom chart, and showing how the two scales would relate.
First, I'll use your data, but separate the line and bar data into two arrays:
var barData = [
{"x":0,"y":6500},
{"x":1,"y":8600},
{"x":2,"y":17200},
{"x":3,"y":15597},
{"x":4,"y":8600},
{"x":5,"y":814}
];
var lineData = [
{"x":0,"y":2},
{"x":1,"y":2},
{"x":2,"y":4},
{"x":3,"y":6},
{"x":4,"y":2},
{"x":5,"y":5}
];
Then set up the scales for the bars. For the x-scale, I'll use an ordinal scale and rangeRoundBands with the default group spacing for nvd3's multiBar which is 0.1. For the y-scale I'll use a regular linear scale, using .nice() so that the scale doesn't end on an awkward value as it does by default in nvd3. Having some space above the largest value gives you some context, which is "nice" to have when trying to interpret a chart.
var xScaleBars = d3.scale.ordinal()
.domain(d3.range(barData.length))
.rangeRoundBands([0, w], 0.1);
var yScaleBars = d3.scale.linear()
.domain([0, d3.max(barData, function(d) {return d.y;})])
.range([h, 0])
.nice(10);
Now here's the important part. For the line's x-scale, don't make a separate scale, but just make it a function of the bars' x-scale:
var xScaleLine = function(d) {
var offset = xScaleBars.rangeBand() / 2;
return xScaleBars(d) + offset;
};
Here's the complete example as a JSBin. I've tried to document the major sections with comments so it's easy to follow the overall logic of it. If you can figure out from the nvd3 source code exactly what each of the elements of the multiChart are called and how to set the individual scales of the constituent parts, then you might be able to just plug in the new scale.
My feeling on it is that you need to have a pretty good handle on how d3 works to do anything useful with nvd3, and if you want to customize it, you're probably better off just rolling your own chart. That way you have complete knowledge and control of what the element classes and variable names of the parts of your chart are, and can do whatever you want with them. If nvd3 ever gets proper documentation, maybe this will become a simple fix. Good luck, and I hope this at least helps you get started.
In this live code link,
http://nvd3.org/livecode/index.html#codemirrorNav
if you add chart.yRange([0, 300]) for inverting the y-axis, the x-axis moves up
and sticks to the top(near the legend).
Any possible fix?
PS: The problem is with most of the charts on that page but 'Cumulative line chart' is closest to my use case.
The position of the x axis is hardcoded to y.range()[0] in the NVD3 source, but you can adjust this after the chart has been drawn. In your particular case, add the following code after .call(chart):
d3.select('.nv-x.nv-axis')
.attr('transform', 'translate(0,' + chart.yAxis.range()[1] + ')');