ankane / chartkick

Create beautiful JavaScript charts with one line of Ruby
https://chartkick.com
MIT License
6.33k stars 565 forks source link

Support deduplicating legends across stacks of grouped data #584

Closed G-Rath closed 2 years ago

G-Rath commented 2 years ago

Is your feature request related to a problem? Please describe.

I'm working on a prototype application involving timesheets, and wanting to show a breakdown of what "codes" people worked on over a period of months e.g. "Within Jan 2022, Bob worked 15 minutes on PROTO; Within Nov 2021, Amy worked 30 minutes on WIP", etc.

Currently I'm exploring using a stacked & grouped column chart for this:

image

Sample code & data ```erb <%= column_chart( [ { name: 'INTER', stack: 'Bob', data: [['Oct, 2021', 5], ['Oct, 2021', 5], ['Nov, 2021', 2], ['Dec, 2021', 3], ['Jan, 2022', 4]] }, { name: 'WIP', stack: 'Bob', data: [['Oct, 2021', 1], ['Nov, 2021', 2], ['Dec, 2021', 3], ['Jan, 2022', 4]] }, { name: 'PROTO', stack: 'Bob', data: [['Oct, 2021', 1], ['Nov, 2021', 2], ['Dec, 2021', 3], ['Jan, 2022', 4]] }, { name: 'INTER', stack: 'Amy', data: [['Oct, 2021', 5], ['Nov, 2021', 2], ['Dec, 2021', 3], ['Jan, 2022', 4]] }, { name: 'PROTO', stack: 'Amy', data: [['Oct, 2021', 1], ['Oct, 2021', 7], ['Nov, 2021', 2], ['Dec, 2021', 3], ['Jan, 2022', 4]] }, ], grouped: true, stacked: true ) %> ```

This is working almost perfectly except for a couple of issues:

Describe the solution you'd like

The ability to have the chart rendered with unique entries in the legend.

Additional context

All the examples of stacked + grouped graphs I can find (looking at Highcharts, chartkick, and Google Charts in particular) don't seem to have shared data in both groups - while I think my request is reasonable, I wouldn't be surprised if it would be very hard to implement due to how the data is used; however I'm hoping it could be possible.

I'm happy to help implement a solution for this, but would appreciate some help in getting started (e.g. some pointers on where to look) since graphing can be a complex beast 😅

Also, I'm not actually sure of the right term to be using for "items in the legend" so happy to be corrected if there is a better term.

ankane commented 2 years ago

Hey @G-Rath,

  1. If you add the person's name to the series name, it'll show up in the legend.
  2. You should combine the data before passing it to Chartkick (since you may want to sum, average, etc).
  3. I don't fully understand how you want the chart to appear, but each series gets an entry in the legend by design.
G-Rath commented 2 years ago

@ankane thanks for the reply - I've put the project this was for down for now, so can't remember all the details to answer your questions, but:

If you add the person's name to the series name, it'll show up in the legend. I don't fully understand how you want the chart to appear, but each series gets an entry in the legend by design.

(this is assuming I'm right in thinking each item in the top-level array is a series)

I think at the heart of it what I'm after is a graph that is rendering based on both the series and the stack - or maybe another way to put it, the ability to have multiple stacks per series.

The graph in my image is very close to what I'm wanting, except e.g. PROTO is shown as two distinct series (one for each stack) when what I want is for there to be one PROTO series which can be in many stacks.

Basically this:

image

ankane commented 2 years ago

Thanks for following up. I don't think there's a way to that with Chartkick right now (and don't think it's common enough to add), so anyone looking to do this in the future should try using the charting library directly.