How to update chart (Chartkick) on a page after filtering?

Question

I have a problem. I have made some filters using ransack and they work fine, but I have no idea how to update the pie chart that I have implemented under the table that I filter. The chart is made using Chartkick. I am fairly new to ror and programing in general. Here is my index file:

<h1>Lista Przychodów</h1>

<h2><%= link_to 'Nowy Przychód', new_income_path %></h2>

<%= search_form_for @q do |f| %>

 <div class="field">
 <%= f.label :title_cont, "Tytuł zawiera" %>
 <%= f.search_field :title_cont %>
 </div>

 <div class="field">
 <%= f.label :text_cont, "Opis zawiera" %>
 <%= f.search_field :text_cont %>
 </div>

 <div class="field">
 <%= f.label :category_name_cont, "Kategoria zawiera" %>
 <%= f.search_field :category_name_cont %>
 </div>

 <div class="field">
 <%= f.label :amount_gteq, "Kwota pomiędzy" %>
 <%= f.search_field :amount_gteq %>
 <%= f.label :amount_lteq, "a" %>
 <%= f.search_field :amount_lteq %>
 </div>

 <%= f.submit "Szukaj" %>

 <div class="button">
 <%= link_to 'Wyczyść filtry', request.path, class:"cancel-button" %>
 </div>

<% end %>

<div style="overflow-x:auto;">


<table class="center">
 <tr>
   <th><%= sort_link(@q, :title, 'Tytuł', default_order: :desc) %></th>
   <th><%= sort_link(@q, :text, 'Opis') %></th>
   <th><%= sort_link(@q, :amount, 'Kwota') %></th>
   <th><%= sort_link(@q, :category_id, 'Kategoria') %></th>
   <th colspan="3"></th>
 </tr>

 <% @incomes.each do |income| %>
   <tr>
     <td><%= income.title %></td>
     <td><%= income.text %></td>
     <td><%= number_to_currency(income.amount, :unit => "zł", :format => "%n %u") %></td>
     <td><%= Category.find(income.category_id).name %></td>
     <td><%= link_to 'Pokaż', income_path(income) %></td>
     <td><%= link_to 'Edytuj', edit_income_path(income) %></td>
     <td><%= link_to 'Usuń', income_path(income),
             method: :delete,
             data: { confirm: 'Czy na pewno chcesz usunąć ten wpis?' } %></td>
   </tr>
 <% end %>
</table>

</div>

<%= pie_chart Income.joins(:category).group(:name).sum(:amount),suffix: " zł", thousands: ",", messages: {empty: "Nie ma wpisów"}, download: {filename: "wykres"}, title: "Podział przychodów na kategorie" %>

<footer><%= link_to 'Strona główna', controller: 'welcome' %></footer>

And my controller file if it is needed:

class IncomesController < ApplicationController
  helper_method :sort_column, :sort_direction

  http_basic_authenticate_with name: "admin", password: "admin", except: [:index, :show]

  def index
    @q = Income.search(params[:q])
    @incomes = @q.result.includes(:category)
  end

  def show
    @income = Income.find(params[:id])
  end

  def new
    @income = Income.new
    @categories = Category.all.map { |c| [c.name, c.id]}
  end

  def edit
    @income = Income.find(params[:id])
    @categories = Category.all.map { |c| [c.name, c.id]}
  end

  def create
    @income = Income.new(income_params)
    @categories = Category.all.map { |c| [c.name, c.id]}

    if @income.save
      redirect_to @income
    else
      render 'new'
    end
  end

  def update
    @income = Income.find(params[:id])

    if @income.update(income_params)
      redirect_to @income
    else
      render 'edit'
    end
  end

  def destroy
    @income = Income.find(params[:id])
    @income.destroy

    redirect_to incomes_path
  end

  private
    def income_params
      params.require(:income).permit(:title, :text, :amount, :category_id)
    end

    def sort_column
        params[:sort] || "title"
    end

    def sort_direction
        params[:direction] || "asc"
    end
end

I already looked on the internet for a similar problem but didn't find anything. I would appreciate some help with that or at lest some directions what to do. I got really hooked on ror and would like to learn more about it, that's why I came here for help. Thanks in advance for answers.

Answer 1

If you mean the filters are applied on the table but not on the chart, this is because you are making another query for the chart only, in this line:

<%= pie_chart Income.joins(:category).group(:name).sum(:amount),suffix: " zł", thousands: ",", messages: {empty: "Nie ma wpisów"}, download: {filename: "wykres"}, title: "Podział przychodów na kategorie" %>

You should use the same instance variable that has the filtered data:

@incomes

So it should be something like:

<%= pie_chart @incomes.sum(:amount), suffix: " zł", thousands: ",", messages: { empty: "Nie ma wpisów" }, download: { filename: "wykres" }, title: "Podział przychodów na kategorie" %>