CODEWITHSUNDEEP
dc.jscrossfilter
Tales
Tales

Reputation: 303

Convert stacked line chart to multiple line chart(not stacked) using dc.js

I am using dc.js to create multiple line chart. I have created a chart which is a stack chart, I want to change it to multiple line chart.

For example, currently the line stack above each other here, I want them not to stack above each other instead should flow like series chart(it can override each other according to data).

I have render stack in chart using below code

for(let key in curr) {
   if(index === 0) {
      subscriptionChart.group(curr[key], key)
   } else {
      subscriptionChart.stack(curr[key], key)
   }
}

I am adding a JS fiddle below, Please help me with this. Thank you.

Stack chart JS Fiddle

Upvotes: 1

Views: 53

Answers (1)

Gordon
Gordon

Reputation: 20150

I think the heart of your question is: does it really take a completely different data format in order to draw a series chart instead of a stacked chart?

The answer is unfortunately "yes".

Please try to flatten transformedSubscriptionData so that it has one "multikey" and one value per row, e.g. the third row of the current transformed data would be expanded to:

[
   {date: Thu Mar 07 2019 10:06:25 GMT-0500, result: 'canceled', count: 22},
   {date: Thu Mar 07 2019 10:06:25 GMT-0500, result: 'active', count: 2},
   {date: Thu Mar 07 2019 10:06:25 GMT-0500, result: 'skip', count: 10},
   ...
]

Then it should be pretty obvious from the series chart example how to generate that chart.

The important setting is

chart.seriesAccessor(d => d.result)

using the new result column detailed above.

If you run into trouble, please add a section to your question and we can iterate on it.

Upvotes: 1

Related Questions