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

<div class="row">
  <div class="col-md-9 col-lg-9">
    <div class="panel-group" id="accordion">
      <% if current_user.role == 'administrator' || current_user.role == 'manager' %>           
            <div class="row">
              <div class="col-md-6">
                <div class="panel">
                  <div class="panel-heading"><h4>Top Products</h4></div>
                  <div class="panel-body">
                    <canvas id="top_products" width="400" height="200"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="panel">
                  <div class="panel-heading"><h4>Inventory</h4></div>
                  <div class="panel-body">
                    <canvas id="inventory" width="400" height="200"></canvas>
                  </div>
                </div>
              </div>
            </div>
            <br><br>
            <div class="row">
              <div class="col-md-6">
                <div class="panel">
                  <div class="panel-heading"><h4>Hourly Sales</h4></div>
                  <div class="panel-body">
                    <canvas id="hourly_sales" width="400" height="200"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="panel">
                  <div class="panel-heading"><h4>Employee Sales</h4></div>
                  <div class="panel-body">
                    <canvas id="employee_sales" width="400" height="200"></canvas>
                  </div>
                </div>
              </div>
            </div>
        <% elsif current_user.role == 'manager' %>

        <% elsif current_user.role == 'supervisour' %>
       
        <% elsif current_user.role == 'cashier' %>
        
      
        <% elsif current_user.role == 'account' %>
        
      <% end %>
    </div>
  </div>

      <div class="col-md-3">
        <div class="card" id="oqs" onclick="location.href='<%= oqs_root_path %>'">
          <div class="card-content dashboard-nav">OQS</div>
        </div>

        <div class="card" id="origami" onclick="location.href='<%= origami_root_path %>'">
          <div class="card-content dashboard-nav">Cashier</div>
        </div>

        <div class="card" id="crm" onclick="location.href='<%= crm_root_path %>'">
          <div class="card-content dashboard-nav">CRM</div>
        </div>

        <div class="card" id="backend" onclick="location.href='<%= inventory_path %>'">
          <div class="card-content dashboard-nav">Inventory</div>
        </div>
      </div>
</div>

<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 chart = new Chart("top_products", {
          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 myChart = new Chart("hourly_sales", {
          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 myChart = new Chart("employee_sales", {
          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 myChart = new Chart("inventory", {
          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>