Skip to content
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

draw line chart path in the order determined by ordering #598

Open
gordonwoodhull opened this issue May 21, 2014 · 4 comments
Open

draw line chart path in the order determined by ordering #598

gordonwoodhull opened this issue May 21, 2014 · 4 comments
Labels
Milestone

Comments

@gordonwoodhull
Copy link
Contributor

See this SO question:
http://stackoverflow.com/questions/23774871/dc-js-sort-ordinal-chart-by-y-axis-value

image

@mr23
Copy link
Contributor

mr23 commented May 24, 2014

Gordon, I made an example Plunk showing how I implemented a workaround.
http://embed.plnkr.co/VItIQ4ZcW9abfzI13z64/

And I posted it on the StackOverflow entry.

@gordonwoodhull
Copy link
Contributor Author

@gordonwoodhull
Copy link
Contributor Author

gordonwoodhull commented Nov 5, 2015

Notes on the ordinal case:

  1. Currently one must force the ordinal domain and the order of the values in the group to be the same.
  2. _ordinalXDomain() does correctly use .ordering() but plotting does not
  3. sort_group in the FAQ can help with the group ordering (since group.order() doesn't have any way to work with the keys, just the values).

Two methods for getting the ordinal domain right:

  1. The domain can be specified manually, example: https://jsfiddle.net/gordonwoodhull/sjjnx72f/11/
  2. One can use .ordering() just for that: https://jsfiddle.net/gordonwoodhull/sjjnx72f/15/

Seems pretty clear that we must adapt the stack mixin to use .ordering(), especially for line charts, but I don't know if there will be ill consequences.

@gordonwoodhull
Copy link
Contributor Author

Another example:

image

 lineChart_addChurn
 .width(300)
.height(200)
.x(d3.scale.ordinal().domain(data.map(function (d) {return d.Month;})))
.xUnits(dc.units.ordinal)
.clipPadding(10)
.compose([
    dc.lineChart(lineChart_addChurn)
        .dimension(dim_line_month)
        .colors('red')
        .interpolate('step-after')
        .renderArea(false)
        .renderDataPoints(true)
        .group(group_line_adds, "Top Line"),
    dc.lineChart(lineChart_addChurn)
        .dimension(dim_line_month)
        .colors('blue')
        .interpolate('step-after')
        .renderArea(false)
        .renderDataPoints(true)
        .group(group_line_churn, "Bottom Line")
    ])
.brushOn(false)
.render();

http://stackoverflow.com/questions/37055306/dc-js-composite-line-chart-unexpected-behaviour

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants