CODEWITHSUNDEEP
ruby-on-railschartkick
Whooper
Whooper

Reputation: 625

Grouped Stacked Bar/Column Chart with Chartkick on Ruby on Rails

I have two datasets containing data gathered automatically by AI and another data gathered manually by humans. I currently display these into two separate column charts using Chartkick for Rails:

enter image description here

enter image description here

As shown above, the AI data is displayed as a stacked column chart that shows the breakdown of the confirmed, rejected, and unverified data because we still do confirmation checks to see the accuracy of our AI while the Human Operated Data is displayed as is, hence, no need to use a stacked column chart.

Now, what I want to achieve is to display the AI and Human Operated Data side by side (grouped), while maintaining the stacked property of the AI Data. So it should look like this:

enter image description here

The code that I currently have for the two separate charts are:

controller

# Data for Stacked Column Chart
@ai_operated_data = [
  {
     name: "Confirmed",
     data: PotentialViolator.where(confirmation_status: 1).group_by_week(:capture_time).count
  },
  {
     name: "Rejected",
     data: PotentialViolator.where(confirmation_status: 0).group_by_week(:capture_time).count
  },
  {
     name: "Unverified",
     data: PotentialViolator.where(confirmation_status: -1).group_by_week(:capture_time).count
  }
]

# Data for Single Column Chart
@human_operated_data = [
  {
     name: "Human Operated Data",
     data: ManuallyCaughtViolator.group_by_week(:capture_time).count
  }
]

view

<div class="ui container">
    <h1>Performance Analytics</h1>
    <div class="ui divider"></div>
      <%= column_chart @ai_operated_data, stacked: true %>
      <%= column_chart @human_operated_data %>
</div>

Upvotes: 1

Views: 2450

Answers (1)

Whooper
Whooper

Reputation: 625

I was able to find the an example from the Chartkick.js examples and found out that there's just the stack option which you can pass as a parameter to specify if a series will be a part of the stack or not.

My final code in my view now looks like:

<%= column_chart [
        {
            name: "Confirmed AI-PWD Operated Data",
            data: PotentialViolator.where(confirmation_status: 1).group_by_week(:capture_time).count,
            stack: "stack 1"           
        },
        {
            name: "Rejected AI-PWD Operated Data",
            data: PotentialViolator.where(confirmation_status: 0).group_by_week(:capture_time).count,
            stack: "stack 1"                
        },
        {
            name: "Unverified AI-PWD  Operated Data",
            data: PotentialViolator.where(confirmation_status: -1).group_by_week(:capture_time).count,
            stack: "stack 1"                
        },
        {
            name: "PWD-Operated Data",
            data: ManuallyCaughtViolator.group_by_week(:capture_time).count,
            stack: "stack 2"
        }
    ], stacked: true
%>

So it produces this chart:

enter image description here

Upvotes: 7

Related Questions