POS-Server/app/views/dashboard/_dashboard_for_manager.html.erb

<div class="row">
    <div class="col-md-12">
        <div class="col-md-6">
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption caption-md">
                        <i class="icon-bar-chart font-red"></i>
                        <span class="caption-subject font-red uppercase bold">Ranking de vendedores</span>
                    </div>
                    <div class="actions">
                        <div class="btn-group btn-group-devided" data-toggle="buttons">
                            <label class="btn btn-transparent grey-salsa btn-outline btn-circle btn-sm active">
                                <input type="radio" name="optionsSellers" class="toggle" value="week">Semana
                            </label>
                            <label class="btn btn-transparent grey-salsa btn-outline btn-circle btn-sm">
                                <input type="radio" name="optionsSellers" class="toggle" value="month">Mes
                            </label>
                        </div>
                    </div>
                </div>
                    <div id="SellersByPointsaleChart" class="chart" style="width:100%;height:400px;font-size:11px;"></div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption caption-md">
                        <i class="icon-bar-chart font-red"></i>
                        <span class="caption-subject font-red uppercase bold">10 productos mas vendidos</span>
                    </div>
                    <div class="actions">
                        <div class="btn-group btn-group-devided" data-toggle="buttons">
                            <label class="btn btn-transparent grey-salsa btn-outline btn-circle btn-sm active">
                                <input type="radio" name="optionsRanking" class="toggle" value="week">Semana
                            </label>
                            <label class="btn btn-transparent grey-salsa btn-outline btn-circle btn-sm">
                                <input type="radio" name="optionsRanking" class="toggle" value="month">Mes
                            </label>
                        </div>
                    </div>
                </div>
                 <div id="productRankingChart" class="chart" style="width:100%;height:400px;font-size:11px;"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).on("page:change", function() {
    // vendedores
    MakeChart('serial', <%= @sellers_ranking %>, 'SellersByPointsaleChart', 'seller', 'total');
    // ranking de productos
    MakeChart('pie', <%= @product_ranking %>, 'productRankingChart', 'product', 'quantity');    
});


$('input:radio[name=optionsSellers]').change(function() {
    var period = $('input:radio[name=optionsSellers]:checked').val();
    getChart('sellers', period);
});

$('input:radio[name=optionsRanking]').change(function() {
    var period = $('input:radio[name=optionsRanking]:checked').val();
    getChart('products', period);
});

setTimeout(function() {
    $('.chart a').remove();
}, 1000);


function getChart(chart, period) {
    App.blockUI({
         target: $((chart == "sellers" ? "#SellersByPointsaleChart" : "#productRankingChart")),
         animate: true
    });
    $.ajax({
      type: "get",
      url:  '/get_chart_data_for_dashboard/',
      data: {
        period: period,
        chart: chart
      },
      dataType: 'text',
      success: function(data) {
          var data = JSON.parse(data);
          window.setTimeout(function() {
            App.unblockUI($((chart == "sellers" ? "#SellersByPointsaleChart" : "#productRankingChart")));
            
            if (chart == 'sellers') {
                MakeChart('serial', data, 'SellersByPointsaleChart', 'seller', 'total');
            } else {
                MakeChart('pie', data, 'productRankingChart', 'product', 'quantity');
            }
            $('.chart a').remove();
          }, 100);
      }
    });    
}
</script>