POS-Server/app/views/dashboard/_dashboard_for_admin.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">Ingresos por punto de venta</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="optionsIncomings" class="toggle" value="day">Día
              </label>
              <label class="btn btn-transparent grey-salsa btn-outline btn-circle btn-sm">
                <input type="radio" name="optionsIncomings" class="toggle" value="week">Semana
              </label>
              <label class="btn btn-transparent grey-salsa btn-outline btn-circle btn-sm">
                <input type="radio" name="optionsIncomings" class="toggle" value="month">Mes
              </label>
            </div>
          </div>
        </div>
          <div id="incomingsByPointsaleChart" 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() {
  // ingresos por punto de venta
  MakeChart('serial', <%= @incomings %>, 'incomingsByPointsaleChart', 'pointsale', 'total');
  // ranking de productos
  MakeChart('pie', <%= @product_ranking %>, 'productRankingChart', 'product', 'quantity');
});


$('input:radio[name=optionsIncomings]').change(function() {
  var period = $('input:radio[name=optionsIncomings]:checked').val();
  getChart('incomings', 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 == "incomings" ? "#incomingsByPointsaleChart" : "#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 == "incomings" ? "#incomingsByPointsaleChart" : "#productRankingChart")));

        if (chart == 'incomings') {
          MakeChart('serial', data, 'incomingsByPointsaleChart', 'pointsale', 'total');
        } else {
          MakeChart('pie', data, 'productRankingChart', 'product', 'quantity');
        }
        $('.chart a').remove();
      }, 100);
    }
  });
}
</script>