-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Composite Line chart X axis ticks not matching to Chart start and end #662
Comments
I am experiencing the same problem. I have narrowed it down to composite ordinal charts. I have used the line.html example. Current Example var chart = dc.lineChart("#test");
chart
.width(768)
.height(480)
.x(d3.scale.linear().domain([0,20]))
.interpolate('step-before')
.renderArea(true)
.brushOn(false)
.renderDataPoints(true)
.yAxisLabel("This is the Y Axis!")
.dimension(runDimension)
.group(speedSumGroup); Ordinal chart = good var chart = dc.lineChart("#test");
chart
.width(768)
.height(480)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.interpolate('step-before')
.renderArea(true)
.brushOn(false)
.renderDataPoints(true)
.yAxisLabel("This is the Y Axis!")
.dimension(runDimension)
.group(speedSumGroup); Composite chart = good var chart = dc.compositeChart("#test");
chart
.width(768)
.height(480)
.x(d3.scale.linear().domain([0,20]))
.brushOn(false)
.yAxisLabel("This is the Y Axis!")
.dimension(runDimension)
.group(speedSumGroup)
.compose([
dc.lineChart(chart)
.interpolate('step-before')
.renderArea(true)
.renderDataPoints(true)
.dimension(runDimension)
.group(speedSumGroup)
]); Composite AND ordinal = broken var chart = dc.compositeChart("#test");
chart
.width(768)
.height(480)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.brushOn(false)
.yAxisLabel("This is the Y Axis!")
.dimension(runDimension)
.group(speedSumGroup)
.compose([
dc.lineChart(chart)
.interpolate('step-before')
.renderArea(true)
.renderDataPoints(true)
.dimension(runDimension)
.group(speedSumGroup)
]); |
This will be resolved in 2-3 months ? |
We're a volunteer project here. Patches are certainly welcome! |
The problem is that composite charts doe not calculate the rangebands. There are 2 completely different ways on handling the gaps in d3, which I think should change. A workarround for now is to add " ._rangeBandPadding(1) " when creating a compositeChart, so the rangeband is set manually. So this would become: var chart = dc.compositeChart("#test");
chart
.width(768)
.height(480)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.brushOn(false)
.yAxisLabel("This is the Y Axis!")
.dimension(runDimension)
.group(speedSumGroup)
._rangeBandPadding(1)
.compose([
dc.lineChart(chart)
.interpolate('step-before')
.renderArea(true)
.renderDataPoints(true)
.dimension(runDimension)
.group(speedSumGroup)
]); I know this is dirty, but for now the quickest way to solve your problem... |
Ow .. and in addition .. since the bar width of a barChart is being calculated based on this padding you might have to correct this as well. If you are adding a barChart to the composite, just manually set the gap size for this barChart ( .gap(value) ) to fix the very small bars. |
The workaround proposed in the two SO answers (with fixed fiddles) is to set ._rangeBandPadding(1) on the composite chart, and .gap(1)
.centerBar(true) on the child chart. Yes, this is range bands on the composite chart and classic gaps on the child chart. I'm not going to guess why this works. |
How can we address this where we have two line charts are composed as composite chart? |
I have just run into this issue. Are there any updates? At issue for me is that I have a series of 4 charts (1 scatterPlot, 2 lineCharts and 1 compositeChart) arranged vertically on the page. Each chart shares the same x-axis (time scale). The data on the compositeChart is misaligned when compared against corresponding data on the other charts. The work-arounds listed above don't work for me. |
Additionally, the y-Axis is also misaligned on the same compositeChart I mentioned previously. |
Can you create a fiddle demonstrating the problem? |
Sorry it took so long to respond back with a fiddle. In the fiddle, I've shown the first two charts in my page that sit one above the other (same x-axis). Didn't seem to make sense to get all 11 of my page's dc charts into the fiddle :-) Not sure why the vertical and horizontal grid lines don't render in the fiddle, but the end point of the zeroline on the second chart should align exactly with the symbol on the chart above...as you will see, clearly it does not. Without the gridlines, it is also harder to see that the horiztontal zero line is also slighty below where zero should be. https://jsfiddle.net/rander1870/409yoLbv/28/ I hope this helps in being able to offer some guidance. Much appreciated! |
Please refer attached screen print. We have tried to achieve composite line chart for Ad data in our internal application.
Can not post complete code this moment ...but seems if I try to draw just line charts it works but composite dont so.
Any quick solution or patch.
Chart Code as below :
Tried referring existing composite.html example but was not so successful.
The text was updated successfully, but these errors were encountered: