how can I show yearly chart on buttonclick in rails

Question

By default I show a chart for monthly data in my view using chartkick and highcharts. i have already prepared a hash for showing yearly chart but how can I show show yearly chart on buttonclick. My html:

<div class="flot-chart">
  <div class="flot-chart-content" id="flot-dashboard-chart">
    <%= column_chart @chart_by_month ,height: "200px",width: "900px" %>
  </div>
</div>

and the button I have added is only month. I will add a chart for yearly data, but how do I show it with button click?

<div class="btn-group">
  <button type="button" id="by_month" class="btn btn-xs btn-white">Monthly</button>                                           
</div>

inye · Accepted Answer · 2017-03-14T12:41:05.543

0

If I understand you, you need to implement the ajax call described in section Say goodbye to timeouts and then add the filter you want in the controller and also js functionality. Do not forget the route.

Some like:

HTML:

<div class="flot-chart">
   <div class="flot-chart-content" id="flot-dashboard-chart">
    <%= column_chart chart_by_period_path( period: "month") ,height: "200px",width: "900px" , id: "id_g1" %>
   </div>
</div>

ROUTE:

...
get 'chart_by_period/(:period)', to: "controller#chart_by_period", as: "chart_by_period"
...

JS:

...
var g1     = Chartkick.charts["id_g1"];

$("button#refresh_graph__year_btn").on('click', function(){
    g1.updateData( "/chart_by_period/year");
});
...

CONTROLLER:

def chart_by_period
    if params[:period] == "month"
        ...
        output = ....
        ...
    elsif params[:period] == "year" 
        ...
        output = ....
        ...
    end

    render json: output
end

edited Mar 14 '17 at 12:41

answered Mar 13 '17 at 15:51

inye

1,786
1
23
31

I do not know, maybe yo can see the documentacion or the code of the gem. Why you do not want json? – inye Mar 14 '17 at 11:53
i have used ajax. and if it could be done with javascript? – Kgb Mar 14 '17 at 12:34
I do not see the problem of use json because you do not have to touch the data, the gem do all, you only have to do the query and ruby/rails make the convertion of ActiveRecord, array or hash to json with `render json: output` . Read the section [Data](https://github.com/ankane/chartkick#data) seems to accept array and hash – inye Mar 14 '17 at 12:38
Thank you so much.. and yes , you're absolutely right about json. But I haven't used json in my application. That's why. – Kgb Mar 14 '17 at 12:43

how can I show yearly chart on buttonclick in rails

1 Answers1