@extends('layouts.app')
@section('title') {{'Dashboard'}} @endsection
@section('content') 
@php
$pre_year = date("Y") - 1; // Get the previous year
$cur_year = date("Y"); // Get the current year
  
  $colors = array('00a65a','dd4b39','00a65a','dd4b39','f39c12');

  $Y_A_T = '';
  $Y_A_C_R = '';
  $Y_A_S_R = '';
  foreach($targets as $row)
  {
      $title = $row['value'];
      $sales = round($row['yesterday_sales']);
      $achieve =round($row['yesterday_achievement']);

      $Y_A_T .= "'".$title."',";
      $Y_A_C_R .= $sales.",";
      $Y_A_S_R .= $achieve.",";
  }

  $U_T_D_A_T = '';
  $U_T_D_A_C_R = '';
  $U_T_D_A_S_R = '';
  foreach($upto_targets as $row)
  {
      $title = $row['value'];
      $t_sales = round($row['up_to_sales']);
      $t_achieve =round($row['up_to_achievement']);

      $U_T_D_A_T .= "'".$title."',";
      $U_T_D_A_C_R .= $t_sales.",";
      $U_T_D_A_S_R .= $t_achieve.",";
  }

  $Y_Y_A_T = '';
  $Y_Y_A_C_R = '';
  $Y_Y_A_S_R = '';
  foreach($yearly_targets as $row)
  {
      $title = $row['value'];
      $y_t_sales = round($row['yearly_sales']);
      $y_t_achieve =round($row['yearly_sales_achievement']);

      $Y_Y_A_T .= "'".$title."',";
      $Y_Y_A_C_R .= $y_t_sales.",";
      $Y_Y_A_S_R .= $y_t_achieve.",";
  }

  $G_M_T_S = '';
  $G_M_T_S_N = '';
  $G_M_PiChart = '';
  $c=0;
  foreach($dues_status as $row)
  {
        $title = $row['value'];
        $total = round($row['dues']);
        $G_M_T_S .= "'".$title."',";
        $G_M_T_S_N .= $total.",";

        $G_M_PiChart .= "{ value : ".$total.", color : '#".$colors[$c]."', highlight: '#353ae7', label : '".$title."' },";
        $c++;
        if($c==5){  $c=0; }
      }

  $G_M_T_S = rtrim($G_M_T_S,',');
  $G_M_T_S_N = rtrim($G_M_T_S_N,',');
  $G_M_PiChart = rtrim($G_M_PiChart,',');



  $Y_G_S_S = '';
  $Y_G_C_S = '';
  foreach($yearly_grouth as $row)
  {
      $last_year = round($row['last_year']);
      $current_year =round($row['current_year']);
      $Y_G_C_S .= $last_year.", ";
      $Y_G_S_S .= $current_year.", ";
  }
  $monthly_sales = '';
  $monthly_collection = '';
  foreach($monthly_achivement as $row)
  {
      $current_sales = round($row['current_sales']);
      $current_collection = round($row['current_collection']);
      $monthly_sales .= $current_sales.", ";
      $monthly_collection .= $current_collection.", ";
  }
  
  @endphp

  

  <div class="panel panel-default">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Dashboard
        <small>Control panel</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
      </ol>
    </section>

      <section class="content">
          <div class="row">
            <div class="col-xs-12">
              <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    @if(session()->has('success'))
                     <div class="alert alert-success">
                        {{ session()->get('success') }}
                     </div>
                    @endif
                    @if(session()->has('message'))
                      <div class="alert alert-danger">
                        {{ session()->get('message') }}
                      </div>
                    @endif
                    @if ($errors->any())
                      <div class="alert alert-danger">
                        <ul>
                          @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                          @endforeach
                        </ul>
                      </div>
                    @endif

                    
                   

                    <div class="col-md-12">
                      <div class="row clearfix">
                        <div class="row">         
                          <div class="col-md-3">
                            <div class="box box-primary">
                              <div class="box-header with-border">
                                <i class="fa fa-bar-chart-o"></i>
                                <h3 id="s14" class="box-title">Yesterday Achievement </h3>
                                <div class="box-tools pull-right">
                                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                  </button>
                                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                </div>
                              </div>
                              <div class="box-body">
                                <canvas id="comHistoryChart" style="height: 300px;"></canvas>
                              </div>
                            </div>
                          </div>

                          <div class="col-md-3">
                            <div class="box box-primary">
                              <div class="box-header with-border">
                                <i class="fa fa-bar-chart-o"></i>
                                <h3 id="s14" class="box-title">Up To Date Achievement </h3>
                                <div class="box-tools pull-right">
                                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                  </button>
                                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                </div>
                              </div>
                              <div class="box-body">
                                <canvas id="uptoDayChart" style="height: 300px;"></canvas>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-3">
                            <div class="box box-primary">
                              <div class="box-header with-border">
                                <i class="fa fa-bar-chart-o"></i>
                                <h3 id="s14" class="box-title">Yearly Achievement </h3>
                                <div class="box-tools pull-right">
                                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                  </button>
                                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                </div>
                              </div>
                              <div class="box-body">
                                <canvas id="yearlyChart" style="height: 300px;"></canvas>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-3">
                              <div class="box box-primary">
                                 <div class="box-header with-border">
                                  <i class="fa fa-pie-chart"></i>
                                   <h3 id="s14" class="box-title">Monthly Sales Status</h3>
                                   <div class="box-tools pull-right">
                                     <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                     </button>
                                     <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                   </div>
                                 </div>
                                 <!-- /.box-header -->
                                 <div class="box-body">
                                   <div class="row">
                                     <div class="col-md-8">
                                       <div class="chart-responsive">
                                         <canvas id="dashCompPieChart" height="170" width="205" style="width: 205px; height: 170px;"></canvas>
                                       </div>
                                       <!-- ./chart-responsive -->
                                     </div>
                                     <!-- /.col -->
                                     <div class="col-md-4">
                                       <ul class="chart-legend clearfix">
                                        @php
                                          $i = 0;
                                          $colors = array('00a65a','dd4b39','72c5e5','b64dd9','f39c12');
                                        @endphp
                                          <li><i class="fa fa-circle-o" style="color: #{!! $colors[$i] !!}"></i> Achieved</li>
                                          <li><i class="fa fa-circle-o" style="color: #{!! $colors[1] !!}"></i> Due</li>
                                       </ul>
                                     </div>
                                     <!-- /.col -->
                                   </div>
                                   <!-- /.row -->
                                 </div>
                                 <!-- /.box-body -->
                               </div>
                            </div>
                        </div>
                        <!-- /.col -->
                      </div>
                    </div>


                    <div class="col-md-12">
                        <div class="row clearfix">
                          <div class="row">
                              <div class="col-md-6">
                                <!-- BAR CHART -->
                                <div class="box box-success">
                                  <div class="box-header with-border">
                                    <h3 class="box-title">Monthly Achivment</h3>

                                    <div class="box-tools pull-right">
                                      <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                      </button>
                                      <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                    </div>
                                  </div>
                                  <div class="box-body">
                                    <div class="chart">
                                      <canvas id="barChart" style="height:230px"></canvas>
                                    </div>
                                  </div>
                                  <!-- /.box-body -->
                                </div>
                                <!-- /.box -->
                              </div>
                          
                              <div class="col-md-3">
                                <div class="box box-primary">
                                  <div class="box-header with-border">
                                    <i class="fa fa-line-chart"></i>
                                    <h3 id="s14" class="box-title">Yearly Growth Status  </h3>
                                    <div class="box-tools pull-right">
                                      <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                      </button>
                                      <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                    </div>
                                  </div>
                                  <div class="box-body">
                       
                                      <canvas id="YearlyGrowth" height="170" width="205" style="width: 205px; height: 170px;"></canvas> 
                       
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-3">
                                <!-- PRODUCT LIST -->
                                <div class="box box-primary">
                                  <div class="box-header with-border">
                                    <h3 class="box-title">Recently Added Products</h3>

                                    <div class="box-tools pull-right">
                                      <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                      </button>
                                      <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                    </div>
                                  </div>
                                  <!-- /.box-header -->
                                  <div class="box-body">
                                    <ul class="products-list product-list-in-box">
                                      @foreach($RecentlyAddedProducts as $row)
                                          <li class="item">
                                            <div class="product-img">
                                              {{ $row->id}}
                                            </div>
                                            <div class="product-info">
                                              <a href="javascript:void(0)" class="product-title">{{ $row->product_name}}
                                                <span class="label label-warning pull-right">৳ {{ $row->tp_price}}</span></a>
                                                  {{-- <span class="product-description">
                                                    Samsung 32" 1080p 60Hz LED Smart HDTV.
                                                  </span> --}}
                                            </div>
                                          </li>

                                      @endforeach
                                      
                                      <!-- /.item -->
                                    </ul>
                                  </div>
                                  <!-- /.box-body -->
                                  <!-- /.box-footer -->
                                </div>
                                <!-- /.box -->
                              </div>
                              
                              


                          </div>
                          <!-- /.col -->
                        </div>
                      </div>


              <script>
                 

                
                
                      $(function () {
                      // -------------
                      // - PIE CHART -
                      // -------------
                      // Get context with jQuery - using jQuery's .get() method.
                      var pieChartCanvas = $('#dashCompPieChart').get(0).getContext('2d');
                      var pieChart       = new Chart(pieChartCanvas);
                      var PieData        = [
                      {!! $G_M_PiChart !!}
                      ];
                      var pieOptions     = {
                      // Boolean - Whether we should show a stroke on each segment
                      segmentShowStroke    : true,
                      // String - The colour of each segment stroke
                      segmentStrokeColor   : '#fff',
                      // Number - The width of each segment stroke
                      segmentStrokeWidth   : 1,
                      // Number - The percentage of the chart that we cut out of the middle
                      percentageInnerCutout: 50, // This is 0 for Pie charts
                      // Number - Amount of animation steps
                      animationSteps       : 100,
                      // String - Animation easing effect
                      animationEasing      : 'easeOutBounce',
                      // Boolean - Whether we animate the rotation of the Doughnut
                      animateRotate        : true,
                      // Boolean - Whether we animate scaling the Doughnut from the centre
                      animateScale         : false,
                      // Boolean - whether to make the chart responsive to window resizing
                      responsive           : true,
                      // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                      maintainAspectRatio  : false,
                      // String - A legend template
                      legendTemplate       : '<ul class=\'<%=name.toLowerCase()%>-legend\'><% for (var i=0; i<segments.length; i++){%><li><span style=\'background-color:<%=segments[i].fillColor%>\'></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>',
                        // String - A tooltip template
                        tooltipTemplate      : '<%=value %> <%=label%>'
                      };
                      // Create pie or douhnut chart
                      // You can switch between pie and douhnut using the method below.
                      pieChart.Doughnut(PieData, pieOptions);
                      // -----------------
                      // - END PIE CHART -
                      // -----------------
                      
                      });

                      
                          var yesterdayChartData = {
                              labels  : [{!! $Y_A_T !!}],
                              datasets: [
                                  {
                                  label               : 'Sales',
                                  fillColor           : '#dd4b39',
                                  strokeColor         : '#dd4b39',
                                  pointColor          : '#dd4b39',
                                  pointStrokeColor    : '#dd4b39',
                                  pointHighlightFill  : '#fff',
                                  pointHighlightStroke: '#dd4b39',
                                  data                : [{!! $Y_A_C_R !!}]
                                  },
                                  {
                                  label               : 'Achieve',
                                  fillColor           : '#00a65a',
                                  strokeColor         : '#00a65a',
                                  pointColor          : '#00a65a',
                                  pointStrokeColor    : '#00a65a',
                                  pointHighlightFill  : '#fff',
                                  pointHighlightStroke: '#00a65a',
                                  data                : [{!! $Y_A_S_R !!}]
                                  }
                              ]
                          }
                      
                      $(function () {
                          var barChartCanvas                   = $('#comHistoryChart').get(0).getContext('2d')
                          var barChart                         = new Chart(barChartCanvas)
                          var barChartData                     = yesterdayChartData
                          barChartData.datasets[1].fillColor   = '#00a65a'
                          barChartData.datasets[1].strokeColor = '#00a65a'
                          barChartData.datasets[1].pointColor  = '#00a65a'
                          var barChartOptions                  = {
                          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
                          scaleBeginAtZero        : true,
                          //Boolean - Whether grid lines are shown across the chart
                          scaleShowGridLines      : true,
                          //String - Colour of the grid lines
                          scaleGridLineColor      : 'rgba(0,0,0,.05)',
                          //Number - Width of the grid lines
                          scaleGridLineWidth      : 1,
                          //Boolean - Whether to show horizontal lines (except X axis)
                          scaleShowHorizontalLines: true,
                          //Boolean - Whether to show vertical lines (except Y axis)
                          scaleShowVerticalLines  : true,
                          //Boolean - If there is a stroke on each bar
                          barShowStroke           : true,
                          //Number - Pixel width of the bar stroke
                          barStrokeWidth          : 2,
                          //Number - Spacing between each of the X value sets
                          barValueSpacing         : 20,
                          //Number - Spacing between data sets within X values
                          barDatasetSpacing       : 10,
                          //String - A legend template
                          legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
                      
                          //Boolean - whether to make the chart responsive
                          responsive              : true,
                          maintainAspectRatio     : true
                          }
                      
                          barChartOptions.datasetFill = false
                          barChart.Bar(barChartData, barChartOptions);
                      
                      });
                      
                      
                      var uptoDateChartData = {
                          labels  : [{!! $U_T_D_A_T !!}],
                              datasets: [
                                  {
                                  label               : 'Sales',
                                  fillColor           : '#dd4b39',
                                  strokeColor         : '#dd4b39',
                                  pointColor          : '#dd4b39',
                                  pointStrokeColor    : '#dd4b39',
                                  pointHighlightFill  : '#fff',
                                  pointHighlightStroke: '#dd4b39',
                                  data                : [{!! $U_T_D_A_C_R !!}]
                                  },
                                  {
                                  label               : 'Achieve',
                                  fillColor           : '#00a65a',
                                  strokeColor         : '#00a65a',
                                  pointColor          : '#00a65a',
                                  pointStrokeColor    : '#00a65a',
                                  pointHighlightFill  : '#fff',
                                  pointHighlightStroke: '#00a65a',
                                  data                : [{!! $U_T_D_A_S_R !!}]
                                  }
                          ]
                      }
                      
                      $(function () {
                          var barChartCanvas                   = $('#uptoDayChart').get(0).getContext('2d')
                          var barChart                         = new Chart(barChartCanvas)
                          var barChartData                     = uptoDateChartData
                          barChartData.datasets[1].fillColor   = '#00a65a'
                          barChartData.datasets[1].strokeColor = '#00a65a'
                          barChartData.datasets[1].pointColor  = '#00a65a'
                          var barChartOptions                  = {
                          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
                          scaleBeginAtZero        : true,
                          //Boolean - Whether grid lines are shown across the chart
                          scaleShowGridLines      : true,
                          //String - Colour of the grid lines
                          scaleGridLineColor      : 'rgba(0,0,0,.05)',
                          //Number - Width of the grid lines
                          scaleGridLineWidth      : 1,
                          //Boolean - Whether to show horizontal lines (except X axis)
                          scaleShowHorizontalLines: true,
                          //Boolean - Whether to show vertical lines (except Y axis)
                          scaleShowVerticalLines  : true,
                          //Boolean - If there is a stroke on each bar
                          barShowStroke           : true,
                          //Number - Pixel width of the bar stroke
                          barStrokeWidth          : 2,
                          //Number - Spacing between each of the X value sets
                          barValueSpacing         : 20,
                          //Number - Spacing between data sets within X values
                          barDatasetSpacing       : 10,
                          //String - A legend template
                          legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
                      
                          //Boolean - whether to make the chart responsive
                          responsive              : true,
                          maintainAspectRatio     : true
                          }
                      
                          barChartOptions.datasetFill = false
                          barChart.Bar(barChartData, barChartOptions);
                      
                      });
                      
                      var yearlyChartData = {
                          labels  : [{!! $Y_Y_A_T !!}],
                              datasets: [
                                  {
                                  label               : 'Sales',
                                  fillColor           : '#dd4b39',
                                  strokeColor         : '#dd4b39',
                                  pointColor          : '#dd4b39',
                                  pointStrokeColor    : '#dd4b39',
                                  pointHighlightFill  : '#fff',
                                  pointHighlightStroke: '#dd4b39',
                                  data                : [{!! $Y_Y_A_C_R !!}]
                                  },
                                  {
                                  label               : 'Achieve',
                                  fillColor           : '#00a65a',
                                  strokeColor         : '#00a65a',
                                  pointColor          : '#00a65a',
                                  pointStrokeColor    : '#00a65a',
                                  pointHighlightFill  : '#fff',
                                  pointHighlightStroke: '#00a65a',
                                  data                : [{!! $Y_Y_A_S_R !!}]
                                  }
                          ]
                      }
                      
                      $(function () {
                          var barChartCanvas                   = $('#yearlyChart').get(0).getContext('2d')
                          var barChart                         = new Chart(barChartCanvas)
                          var barChartData                     = yearlyChartData
                          barChartData.datasets[1].fillColor   = '#00a65a'
                          barChartData.datasets[1].strokeColor = '#00a65a'
                          barChartData.datasets[1].pointColor  = '#00a65a'
                          var barChartOptions                  = {
                          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
                          scaleBeginAtZero        : true,
                          //Boolean - Whether grid lines are shown across the chart
                          scaleShowGridLines      : true,
                          //String - Colour of the grid lines
                          scaleGridLineColor      : 'rgba(0,0,0,.05)',
                          //Number - Width of the grid lines
                          scaleGridLineWidth      : 1,
                          //Boolean - Whether to show horizontal lines (except X axis)
                          scaleShowHorizontalLines: true,
                          //Boolean - Whether to show vertical lines (except Y axis)
                          scaleShowVerticalLines  : true,
                          //Boolean - If there is a stroke on each bar
                          barShowStroke           : true,
                          //Number - Pixel width of the bar stroke
                          barStrokeWidth          : 2,
                          //Number - Spacing between each of the X value sets
                          barValueSpacing         : 20,
                          //Number - Spacing between data sets within X values
                          barDatasetSpacing       : 10,
                          //String - A legend template
                          legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
                      
                          //Boolean - whether to make the chart responsive
                          responsive              : true,
                          maintainAspectRatio     : true
                          }
                      
                          barChartOptions.datasetFill = false
                          barChart.Bar(barChartData, barChartOptions);
                      
                      });


                       $(function () {
                          var areaChartData = {
                          labels  : [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                          datasets: [
                          {
                            label               : '{!! $cur_year !!}',
                            fillColor           : 'rgba(210, 214, 222, 1)',
                            strokeColor         : '#00a65a',
                            pointColor          : '#00a65a',
                            pointStrokeColor    : '#c1c7d1',
                            pointHighlightFill  : '#fff',
                            pointHighlightStroke: 'rgba(220,220,220,1)',
                            data                : [{!! $Y_G_S_S !!}]
                          },
                          {
                            label               : '{!! $pre_year !!}',
                            fillColor           : 'rgba(60,141,188,0.9)',
                            strokeColor         : '#dd4b39',
                            pointColor          : '#dd4b39',
                            pointStrokeColor    : 'rgba(60,141,188,1)',
                            pointHighlightFill  : '#fff',
                            pointHighlightStroke: 'rgba(60,141,188,1)',
                            data                : [{!! $Y_G_C_S !!}]
                          }
                          ]
                        }
                      
                        var areaChartOptions = {
                          //Boolean - If we should show the scale at all
                          showScale               : true,
                          //Boolean - Whether grid lines are shown across the chart
                          scaleShowGridLines      : false,
                          //String - Colour of the grid lines
                          scaleGridLineColor      : 'rgba(0,0,0,.05)',
                          //Number - Width of the grid lines
                          scaleGridLineWidth      : 1,
                          //Boolean - Whether to show horizontal lines (except X axis)
                          scaleShowHorizontalLines: true,
                          //Boolean - Whether to show vertical lines (except Y axis)
                          scaleShowVerticalLines  : true,
                          //Boolean - Whether the line is curved between points
                          bezierCurve             : true,
                          //Number - Tension of the bezier curve between points
                          bezierCurveTension      : 0.3,
                          //Boolean - Whether to show a dot for each point
                          pointDot                : false,
                          //Number - Radius of each point dot in pixels
                          pointDotRadius          : 4,
                          //Number - Pixel width of point dot stroke
                          pointDotStrokeWidth     : 1,
                          //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
                          pointHitDetectionRadius : 20,
                          //Boolean - Whether to show a stroke for datasets
                          datasetStroke           : true,
                          //Number - Pixel width of dataset stroke
                          datasetStrokeWidth      : 2,
                          //Boolean - Whether to fill the dataset with a color
                          datasetFill             : true,
                          //String - A legend template
                          legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
                          //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                          maintainAspectRatio     : true,
                          //Boolean - whether to make the chart responsive to window resizing
                          responsive              : true
                        }
                      
                        //-------------
                        //- LINE CHART -
                        //--------------
                        var lineChartCanvas          = $('#YearlyGrowth').get(0).getContext('2d')
                        var lineChart                = new Chart(lineChartCanvas)
                        var lineChartOptions         = areaChartOptions
                        lineChartOptions.datasetFill = false
                        lineChart.Line(areaChartData, lineChartOptions);
                      });  

                      
                     
                  
    </script>
    <script>
      $(function () {
    var areaChartData = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: "Orders",
          fillColor: "#dd4b39",
          strokeColor: "#dd4b39",
          pointColor: "#dd4b39",
          pointStrokeColor: "#c1c7d1",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [{!! $monthly_sales !!}]
        },
        {
          label: "Sales",
          fillColor: "rgba(60,141,188,0.9)",
          strokeColor: "rgba(60,141,188,0.8)",
          pointColor: "#3b8bba",
          pointStrokeColor: "rgba(60,141,188,1)",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(60,141,188,1)",
          data: [{!! $monthly_collection !!}]
        }
      ]
    };
    //-------------
    //- BAR CHART -
    //-------------
    var barChartCanvas = $("#barChart").get(0).getContext("2d");
    var barChart = new Chart(barChartCanvas);
    var barChartData = areaChartData;
    barChartData.datasets[1].fillColor = "#00a65a";
    barChartData.datasets[1].strokeColor = "#00a65a";
    barChartData.datasets[1].pointColor = "#00a65a";
    var barChartOptions = {
      //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
      scaleBeginAtZero: true,
      //Boolean - Whether grid lines are shown across the chart
      scaleShowGridLines: true,
      //String - Colour of the grid lines
      scaleGridLineColor: "rgba(0,0,0,.05)",
      //Number - Width of the grid lines
      scaleGridLineWidth: 1,
      //Boolean - Whether to show horizontal lines (except X axis)
      scaleShowHorizontalLines: true,
      //Boolean - Whether to show vertical lines (except Y axis)
      scaleShowVerticalLines: true,
      //Boolean - If there is a stroke on each bar
      barShowStroke: true,
      //Number - Pixel width of the bar stroke
      barStrokeWidth: 2,
      //Number - Spacing between each of the X value sets
      barValueSpacing: 5,
      //Number - Spacing between data sets within X values
      barDatasetSpacing: 1,
      //String - A legend template
      legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
      //Boolean - whether to make the chart responsive
      responsive: true,
      maintainAspectRatio: true
    };

    barChartOptions.datasetFill = false;
    barChart.Bar(barChartData, barChartOptions);
	
  });
</script>           


                  

                  </div>
              </div>
              <!-- /.box-body -->
            </div>
            <!-- /.box -->
            <!-- /.box -->
          </div>
      </section>
      
  </div>
  
@endsection