sx-fc/app/views/home/dashboard.html.erb

<div class="container-fluid">
    <div class="block-header">
        <h2><%= t :dashboard %></h2>
    </div>

    <!-- Widgets -->
    <div class="row clearfix">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-cyan hover-expand-effect">
                <div class="icon">
                    <i class="material-icons">help</i>
                </div>
                <div class="content">
                    <div class="text">SALE COUNT</div>
                    <div class="number count-to" data-from="0" data-to="<%= @total_count%>" data-speed="1000" data-fresh-interval="20"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-pink hover-expand-effect">
                <div class="icon">
                    <i class="material-icons">attach_money</i>
                </div>
                <div class="content">
                    <div class="text">TOTAL SALE</div>
                    <div class="number count-to" data-from="0" data-to="<%= @total_sale%>" data-speed="15" data-fresh-interval="20"></div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-light-green hover-expand-effect">
                <div class="icon">
                    <i class="material-icons">person_add</i>
                </div>
                <div class="content">
                    <div class="text">TOTAL CREDIT</div>
                    <div class="number count-to" data-from="0" data-to="<%= @total_credit%>" data-speed="1000" data-fresh-interval="20"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-orange hover-expand-effect">
                <div class="icon">
                    <i class="material-icons">credit_card</i>
                </div>
                <div class="content">
                    <div class="text">TOTAL CARD</div>
                    <div class="number count-to" data-from="0" data-to="<%= @total_card%>" data-speed="1000" data-fresh-interval="20"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- #END# Widgets -->
    <!-- CPU Usage -->

    <% if current_user.role == 'administrator' || current_user.role == 'manager' %>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <div class="card">
              <div class="body">
                <h4><i class="material-icons md-24">dashboard</i><%= (t :top) + " " + (t :products) %></h4>
                <canvas id="top_products" class="col-md-12"></canvas>
              </div>
            </div>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <div class="card">
              <div class="body">
                <h4><i class="material-icons md-24">store</i><%= t :inventory %></h4>
                <canvas id="inventory" class="col-md-12"></canvas>
              </div>
            </div>
          </div>
        </div>
        <br />
        <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
               <div class="card">
                  <div class="body">
                    <h4><i class="material-icons md-24">av_timer</i><%= (t :hourly) + " " + (t :sale) %></h4>
                    <canvas id="hourly_sales" class="col-md-12"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="card">
                  <div class="body">
                    <h4><i class="material-icons md-24">assignment_ind</i><%= (t :staff) + " " + (t :sale) %></h4>
                    <canvas id="employee_sales" class="col-md-12"></canvas>
                  </div>
                </div>
              </div>
        </div>
    <% end %>
</div>

<!-- <script src="js/Chart.js"></script> -->
<script>
  $(document).ready(function(){
    var top_products = JSON.parse('<%= @top_products.to_json.html_safe %>');
    var hourly_sales = JSON.parse('<%= @hourly_sales.to_json.html_safe %>');
    var employee_sales = JSON.parse('<%= @employee_sales.to_json.html_safe %>');
    var inventories = JSON.parse('<%= @inventories.to_json.html_safe %>');
    showTopProductsChartData(top_products);
    showHourlySalesChartData(hourly_sales);
    showEmployeeSalesChartData(employee_sales);
    showInventoryChartData(inventories);
  });

  function randomColorGenerator () { 
    return '#' + (Math.random().toString(16) + '0000000').slice(2, 8); 
  };

  function showTopProductsChartData(top_products) {
    var labels = [];
    var datasets = [];
    var backgroundColor = [];

    if(top_products!=undefined && top_products!=''){
      if(top_products.length>0){
        $.each(top_products,function(k,val){
          labels.push(val.product_name);
          datasets.push(val.total_item);
          backgroundColor.push(randomColorGenerator());
        });

        var ctx = $("#top_products").get(0).getContext("2d");
      
        var chart = new Chart(ctx, {
          type: 'pie',
          data: {
            labels: labels,
            datasets: [{
              data: datasets,
              backgroundColor: backgroundColor
            }]
          },
          options: {
            legend: {
              labels: {
                fontColor: 'black'
              }
            }
          }
        });
      }
    }
  }

  function showHourlySalesChartData(hourly_sales) {
    var labels = [];
    var datasets = [];
    var backgroundColor = [];

    if(hourly_sales!=undefined && hourly_sales!=''){
      if(Object.keys(hourly_sales).length > 0){
        $.each(hourly_sales,function(k,val){
          labels.push(k.toString());
          datasets.push(val);
          backgroundColor.push(randomColorGenerator());
        });
      
        var ctx = $("#hourly_sales").get(0).getContext("2d");

        var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: labels,
            datasets: [{
              label: '',
              data: datasets,
              backgroundColor: backgroundColor,
              borderWidth: 1
            }]
          },
          options: {
            legend: {
              display:false
            },
            scales: {
              xAxes: [{
                stacked: true,
                categorySpacing: 0,
                barPercentage: 0.5
              }],
              yAxes: [{
                stacked: true,
                ticks: {
                  beginAtZero:true
                }
              }]
            }
          }
        });
      }
    }
  }

  function showEmployeeSalesChartData(employee_sales) {
    var labels = [];
    var datasets = [];
    var backgroundColor = [];
    
    if(employee_sales!=undefined && employee_sales!=''){
      if(Object.keys(employee_sales).length > 0){
        $.each(employee_sales,function(k,val){
          labels.push(k.toString());
          datasets.push(val);
          backgroundColor.push(randomColorGenerator());
        });
        var ctx = $("#employee_sales").get(0).getContext("2d");

        var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: labels,
            datasets: [{
              label: '',
              data: datasets,
              backgroundColor: backgroundColor,
              borderWidth: 1
            }]
          },
          options: {
            legend: {
              display:false
            },
            scales: {
              xAxes: [{
                stacked: true,
                categorySpacing: 0,
                barPercentage: 0.5
              }],
              yAxes: [{
                stacked: true,
                ticks: {
                  beginAtZero:true
                }
              }]
            }
          }
        });
      }
    }
  }

  function showInventoryChartData(inventories) {
    var labels = [];
    var datasets = [];
    var borderColor = [];
    
    if(inventories!=undefined && inventories!=''){
      if(Object.keys(inventories).length > 0){
        $.each(inventories,function(k,val){
          labels.push(k.toString());
          datasets.push(val);
          borderColor.push(randomColorGenerator());
        });

        var ctx = $("#inventory").get(0).getContext("2d");

        var myChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: labels,
            datasets: [{
              fill: false,
              data: datasets,
              borderColor: borderColor
            }]
          },
          options: {
            legend: {
              display:false
            },
            scales: {
              xAxes: [{
                stacked: true
              }],
              yAxes: [{
                stacked: false,
                ticks: {
                  beginAtZero:true
                }
              }]
            }
          }
        });
      }
    }
  }
</script>