@extends('layouts.layout')

@section('content')


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

<!-- Main content -->
    <section class="content">
      <!-- Info boxes -->
      <div class="row">
          
          
{{-- If the User can view booking --}}
          @if(Auth::user()->hasCategoryAccess(10)) 

          {{-- Available vehicles -- all --}}
            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-yellow"><i class="fa fa-car"></i></span>

                <a href="{{ route('vehicle.availability') }}" style="color:black"><div class="info-box-content">
                  <span title="Available Vehicles" class="info-box-text">Total Available Vehicles</span>
                  <span class="info-box-number">{{$available_vehicles}}<small style="vertical-align: text-top;"><i style="color:red; font-size:9px" class="fa fa-arrow-up"></i></span></small></span>
                  <span class="info-box-text"></span>
                </div>
              </a>

                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>

            {{-- Available vehicles by company --}}
            @foreach($hertz_companies as $hertz_company)
            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-red"><i class="fa fa-car"></i></span>

                <a href="{{ route('vehicle.availability.byCompany', ['company_id' => $hertz_company->companies_id]) }}" style="color:black"><div class="info-box-content">
                  <span title="Available Vehicles" class="info-box-text">{{substr($hertz_company->company_name, stripos('rental', $hertz_company->company_name) + 5)}}</span>
                  <span class="info-box-number">{{$hertz_company->vehicle_count}} <small style="vertical-align: text-top;"><i style="color:red; font-size:9px" class="fa fa-arrow-up"></i></span></small></span>
                  <span class="info-box-text" style="font-size: 12px;"></span>
                </div></a>
                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>
            @endforeach

        @endif
          
          
       
      </div>
      <!-- /.row -->
      @if(isset($admin_type) && trim(strtolower($admin_type)) == 'imarine')
      <section class="content-header" style="padding-top: 0px; padding-bottom: 15px; padding-left: 0px;">
       <h1>
        Vessel Data
        <small>Utilization/Income</small>
      </h1>
      </section>
      
      
      
           <!-- Small boxes (vessel boxs) -->
      <div class="row">
          @if($vesseldashdata)
          @foreach($vesseldashdata as $vessel)
        <div class="col-lg-2 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-{{ $color[$vessel->asset_id % 6] }}">
            <div class="inner">
                <h3>{{$vessel->utilization > 0 ? $vessel->utilization : 0}}<sup style="font-size: 20px">%</sup></h3>

              <p>Utilization</p>
            </div>
            <div class="icon">
              <i size="small" class="ion ion-stats-bars"></i>
            </div>
            <a href="#" class="small-box-footer"><b>{{$vessel->vessel_name}} </b><i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->         
         @endforeach
          @endif
      </div>
         @endif
      <!-- /.row -->

      
      
      
            <!-- Main vessel utilization row -->
            @if(trim(strtolower($admin_type)) == 'marine')
            
            
      <div class="row">
        <!-- Left col -->
        
        
              </div>
            <section class="content-header" style="padding-top: 0px; padding-bottom: 15px; padding-left: 0px;">
       <h1>
        Active Vessel Contribution
        <small>By Contract Type</small>
      </h1>
      </section>
           <!-- Small boxes (vessel boxs) -->
      <div class="row">
          @if($vesselgroupdashdata)
          @foreach($vesselgroupdashdata as $vesselgroup)
        <div class="col-lg-2 col-xs-6">
          <!-- small box -->
          <div class="small-box" style="color: #fff;background-color:{{ $vesselgroup->color }}">
              <!-- bg-green style="background-color:{{ $vesselgroup->color }}"-->
            <div class="inner">
                <h3>{{ $vesselgroup->vessel_num }}
                    <sup style="font-size: 20px">   
                        {{ $vesselgroup->num_percent }}%
                        <span style="float: right;margin-top: 15px;clear:both"> 
                        {{ $vesselgroup->rates > 0 && $vesselgroup->total_rates > 0 ? number_format(($vesselgroup->rates/$vesselgroup->total_rates)*100, 2) : 0 }}%</span>
                       
                    </sup>
                </h3>
              <p></p>
            </div>
            <div class="icon">
              <i size="small" class="ion ion-briefcase"></i>
            </div>
            <a href="#" class="small-box-footer">{{$vesselgroup->vessel_contract}} <br/><i class="fa fa-arrow-circle-right"></i> 
            {{ $vesselgroup->utilization > 0 && $vesselgroup->total_utilization > 0 ? number_format(($vesselgroup->utilization/$vesselgroup->total_utilization)*100, 2) : 0 }}%</a>
          </div>
        </div>
        <!-- ./col -->         
         @endforeach
         @endif
      </div>
      <!-- /.row -->
      <div class="row">
        <div class="col-md-12">
          <!-- DONUT CHART -->
          <div class="box box-danger">
            <div class="box-header with-border">
              <h3 class="box-title">Piecharts Showing Utilization/Rates/This Year Income/This Year Losses</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="row">
            <div class="box-body col-md-3">
              <canvas id="pieChart" style="height:200px"></canvas>
            </div>
            <div class="box-body col-md-3">
              <div id="donut-chart" style="height: 170px;"></div>
            </div>
            <div class="box-body col-md-3">
              <div id="donut-chart2" style="height: 170px;"></div>
            </div>
            <div class="box-body col-md-3">
              <div id="donut-chart3" style="height: 170px;"></div>
            </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->

        </div>
  

          <!-- BAR CHART -->
          
          <div class="col-md-12">
          <div class="box box-success">
            <div class="box-header with-border">
              <h3 class="box-title">Average Monthly vessel utilization by Contract Type</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:265px"></canvas>
              </div>
            </div>
            
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
 </div>
      </div>
      <!-- /.row -->
       @endif
      <!-- /.row -->
      
      
        
     
      
      
      

      <!-- Main row -->
      <div class="row">
        <!-- Left col -->
        
        
                
        @if(Auth::user()->company_access == '0')
        <div class="col-md-12">
         <iframe width="1200" height="600" src="https://app.powerbi.com/view?r=eyJrIjoiOWQyOWVkY2EtNmNjMS00NDg2LTljZTktY2ExNzc0MmZhYWYyIiwidCI6ImUwZjc4YjljLTdiNDctNDJiZi1hZjE3LWNmYzcwMzI1ZWM5NiIsImMiOjh9" frameborder="0" allowFullScreen="true"></iframe>
         <!--
         <iframe width="1200" height="600" src="https://app.powerbi.com/view?r=eyJrIjoiZTZiYjBmODYtZTAyOC00NGM4LTg3MzMtNTU5Y2YzZjk4ODNkIiwidCI6ImUwZjc4YjljLTdiNDctNDJiZi1hZjE3LWNmYzcwMzI1ZWM5NiIsImMiOjh9" frameborder="0" allowFullScreen="true"></iframe>
         -->
          <!-- 
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">Recently Added People</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">
              <ul class="products-list product-list-in-box">
                <li class="item">
                  <div class="product-img">
                    <img src="dist/img/default-50x50.gif" alt="Product Image">
                  </div>
                  <div class="product-info">
                    <a href="javascript:void(0)" class="product-title">Samsung TV
                      <span class="label label-warning pull-right">$1800</span></a>
                    <span class="product-description">
                          Samsung 32" 1080p 60Hz LED Smart HDTV.
                        </span>
                  </div>
                </li>
               
               
              </ul>
            </div>
          
            <div class="box-footer text-center">
              <a href="javascript:void(0)" class="uppercase">View All Products</a>
            </div>
          
          </div>
         
        </div>
        -->
      </div>
      @endif
      <!-- /.row -->
      
      
      
    </section>

<!-- FastClick -->
 <script src="{{ URL::asset('bower_components/fastclick/lib/fastclick.js') }}"></script>
  <!-- ChartJS -->
<script src="{{ URL::asset('bower_components/chart.js/Chart.js' ) }}"></script> 
<!-- FLOT CHARTS -->
<script src="{{ URL::asset('bower_components/Flot/jquery.flot.min.js' ) }}"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="{{ URL::asset('bower_components/Flot/jquery.flot.resize.min.js' ) }}"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="{{ URL::asset('bower_components/Flot/jquery.flot.pie.min.js' ) }}"></script>
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<script src="{{ URL::asset('bower_components/Flot/jquery.flot.categories.min.js' ) }}"></script>
<!-- page script -->
<script>
  $(function () {
    /* ChartJS
     * -------
     * Here we will create a few charts using ChartJS
     */

    //-------------
    //- PIE CHART -
    //-------------
    // Get context with jQuery - using jQuery's .get() method.
    var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
    var pieChart       = new Chart(pieChartCanvas)
    var PieData        = {{ preg_replace('/`([^`]+)`\s*:\s*/', '$1:', str_replace('"', '`', json_encode($vesselgroupdashdatajson))) }}
    
 /*
    [
      {
        value    : 700,
        color    : '#f56954',
        highlight: '#f56954',
        label    : 'Chrome'
      },
      {
        value    : 500,
        color    : '#00a65a',
        highlight: '#00a65a',
        label    : 'IE'
      },
      {
        value    : 400,
        color    : '#f39c12',
        highlight: '#f39c12',
        label    : 'FireFox'
      },
      {
        value    : 600,
        color    : '#00c0ef',
        highlight: '#00c0ef',
        label    : 'Safari'
      },
      {
        value    : 300,
        color    : '#3c8dbc',
        highlight: '#3c8dbc',
        label    : 'Opera'
      },
      {
        value    : 100,
        color    : '#d2d6de',
        highlight: '#d2d6de',
        label    : 'Navigator'
      }
    ]
    
    */
    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   : 2,
      //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  : true,
      //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>'
    }
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    pieChart.Doughnut(PieData, pieOptions)

    //-------------
    //- BAR CHART -
    //-------------
    
     var areaChartData = {
      labels  : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label               : 'BARE BOAT CHARTER',
          fillColor           : '#00c0ef',
          strokeColor         : 'rgba(210, 214, 222, 1)',
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : [
              {{ $vesselgroupdashjsonbarchartJan[0]->value != '' ? $vesselgroupdashjsonbarchartJan[0]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartFeb[0]->value != '' ?  $vesselgroupdashjsonbarchartFeb[0]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartMarch[0]->value != '' ? $vesselgroupdashjsonbarchartMarch[0]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartApril[0]->value != '' ? $vesselgroupdashjsonbarchartApril[0]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchart[0]->value != '' ? $vesselgroupdashjsonbarchart[0]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartJun[0]->value != '' ? $vesselgroupdashjsonbarchartJun[0]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartJul[0]->value != '' ? $vesselgroupdashjsonbarchartJul[0]->value : 0 }}
              ]
        },
        {
          label               : 'Owned Vessels',
          fillColor           : 'red',
          strokeColor         : 'rgba(60,141,188,0.8)',
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : [
              {{ $vesselgroupdashjsonbarchartJan[1]->value != '' ? $vesselgroupdashjsonbarchartJan[1]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartFeb[1]->value != '' ?  $vesselgroupdashjsonbarchartFeb[1]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartMarch[1]->value != '' ? $vesselgroupdashjsonbarchartMarch[1]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartApril[1]->value != '' ? $vesselgroupdashjsonbarchartApril[1]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchart[1]->value != '' ? $vesselgroupdashjsonbarchart[1]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartJun[1]->value != '' ? $vesselgroupdashjsonbarchartJun[1]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartJul[1]->value != '' ? $vesselgroupdashjsonbarchartJul[1]->value : 0 }}
              ]
        },
        {
          label               : 'TIME CHARTER',
          fillColor           : '#00a65a',
          strokeColor         : 'rgba(60,141,188,0.8)',
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : [
              {{ $vesselgroupdashjsonbarchartJan[2]->value != '' ? $vesselgroupdashjsonbarchartJan[2]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartFeb[2]->value != '' ?  $vesselgroupdashjsonbarchartFeb[2]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartMarch[2]->value != '' ? $vesselgroupdashjsonbarchartMarch[2]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartApril[2]->value != '' ? $vesselgroupdashjsonbarchartApril[2]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchart[2]->value != '' ? $vesselgroupdashjsonbarchart[2]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartJun[2]->value != '' ? $vesselgroupdashjsonbarchartJun[2]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartJul[2]->value != '' ? $vesselgroupdashjsonbarchartJul[2]->value : 0 }}
              ]
        },
        {
          label               : 'SPOT',
          fillColor           : '#f39c12',
          strokeColor         : 'rgba(60,141,188,0.8)',
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : [
              {{ $vesselgroupdashjsonbarchartJan[3]->value != '' ? $vesselgroupdashjsonbarchartJan[3]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartFeb[3]->value != '' ?  $vesselgroupdashjsonbarchartFeb[3]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartMarch[3]->value != '' ? $vesselgroupdashjsonbarchartMarch[3]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartApril[3]->value != '' ? $vesselgroupdashjsonbarchartApril[3]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchart[3]->value != '' ? $vesselgroupdashjsonbarchart[3]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartJun[3]->value != '' ? $vesselgroupdashjsonbarchartJun[3]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartJul[3]->value != '' ? $vesselgroupdashjsonbarchartJul[3]->value : 0 }}
              ]
        },
        {
          label               : 'Managed',
          fillColor           : '#3c8dbc',
          strokeColor         : 'rgba(60,141,188,0.8)',
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : [
              {{ $vesselgroupdashjsonbarchartJan[4]->value != '' ? $vesselgroupdashjsonbarchartJan[4]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartFeb[4]->value != '' ? $vesselgroupdashjsonbarchartFeb[4]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartMarch[4]->value != '' ? $vesselgroupdashjsonbarchartMarch[4]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchartApril[4]->value != '' ? $vesselgroupdashjsonbarchartApril[4]->value : 0 }}, 
              {{ $vesselgroupdashjsonbarchart[4]->value != '' ? $vesselgroupdashjsonbarchart[4]->value : 0 }}, 
              {{ trim($vesselgroupdashjsonbarchartJun[4]->value) != '' ? trim($vesselgroupdashjsonbarchartJun[4]->value) : '0' }}, 
              {{ $vesselgroupdashjsonbarchartJul[4]->value != '' ? $vesselgroupdashjsonbarchartJul[4]->value : 0 }}
              ]
        }
      ]
    }
    
    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      : 0.5,
      //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>
<script>
  $(function () {
    /*
     * Flot Interactive Chart
     * -----------------------
     */
    // We use an inline data source in the example, usually data would
    // be fetched from a server
    var data = [], totalPoints = 100;

    function getRandomData() {

      if (data.length > 0)
        data = data.slice(1);

      // Do a random walk
      while (data.length < totalPoints) {

        var prev = data.length > 0 ? data[data.length - 1] : 50,
            y = prev + Math.random() * 10 - 5;

        if (y < 0) {
          y = 0;
        } else if (y > 100) {
          y = 100;
        }

        data.push(y);
      }

      // Zip the generated y values with the x values
      var res = [];
      for (var i = 0; i < data.length; ++i) {
        res.push([i, data[i]]);
      }

      return res;
    }

    var interactive_plot = $.plot("#interactive", [getRandomData()], {
      grid: {
        borderColor: "#f3f3f3",
        borderWidth: 1,
        tickColor: "#f3f3f3"
      },
      series: {
        shadowSize: 0, // Drawing is faster without shadows
        color: "#3c8dbc"
      },
      lines: {
        fill: true, //Converts the line chart to area chart
        color: "#3c8dbc"
      },
      yaxis: {
        min: 0,
        max: 100,
        show: true
      },
      xaxis: {
        show: true
      }
    });

    var updateInterval = 500; //Fetch data ever x milliseconds
    var realtime = "on"; //If == to on then fetch data every x seconds. else stop fetching
    function update() {

      interactive_plot.setData([getRandomData()]);

      // Since the axes don't change, we don't need to call plot.setupGrid()
      interactive_plot.draw();
      if (realtime === "on")
        setTimeout(update, updateInterval);
    }

    //INITIALIZE REALTIME DATA FETCHING
    if (realtime === "on") {
      update();
    }
    //REALTIME TOGGLE
    $("#realtime .btn").click(function () {
      if ($(this).data("toggle") === "on") {
        realtime = "on";
      }
      else {
        realtime = "off";
      }
      update();
    });
    /*
     * END INTERACTIVE CHART
     */


    /*
     * LINE CHART
     * ----------
     */
    //LINE randomly generated data

    var sin = [], cos = [];
    for (var i = 0; i < 14; i += 0.5) {
      sin.push([i, Math.sin(i)]);
      cos.push([i, Math.cos(i)]);
    }
    var line_data1 = {
      data: sin,
      color: "#3c8dbc"
    };
    var line_data2 = {
      data: cos,
      color: "#00c0ef"
    };
    $.plot("#line-chart", [line_data1, line_data2], {
      grid: {
        hoverable: true,
        borderColor: "#f3f3f3",
        borderWidth: 1,
        tickColor: "#f3f3f3"
      },
      series: {
        shadowSize: 0,
        lines: {
          show: true
        },
        points: {
          show: true
        }
      },
      lines: {
        fill: false,
        color: ["#3c8dbc", "#f56954"]
      },
      yaxis: {
        show: true,
      },
      xaxis: {
        show: true
      }
    });
    //Initialize tooltip on hover
    $('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({
      position: "absolute",
      display: "none",
      opacity: 0.8
    }).appendTo("body");
    $("#line-chart").bind("plothover", function (event, pos, item) {

      if (item) {
        var x = item.datapoint[0].toFixed(2),
            y = item.datapoint[1].toFixed(2);

        $("#line-chart-tooltip").html(item.series.label + " of " + x + " = " + y)
            .css({top: item.pageY + 5, left: item.pageX + 5})
            .fadeIn(200);
      } else {
        $("#line-chart-tooltip").hide();
      }

    });
    /* END LINE CHART */

    /*
     * FULL WIDTH STATIC AREA CHART
     * -----------------
     */
    var areaData = [[2, 88.0], [3, 93.3], [4, 102.0], [5, 108.5], [6, 115.7], [7, 115.6],
      [8, 124.6], [9, 130.3], [10, 134.3], [11, 141.4], [12, 146.5], [13, 151.7], [14, 159.9],
      [15, 165.4], [16, 167.8], [17, 168.7], [18, 169.5], [19, 168.0]];
    $.plot("#area-chart", [areaData], {
      grid: {
        borderWidth: 0
      },
      series: {
        shadowSize: 0, // Drawing is faster without shadows
        color: "#00c0ef"
      },
      lines: {
        fill: true //Converts the line chart to area chart
      },
      yaxis: {
        show: false
      },
      xaxis: {
        show: false
      }
    });

    /* END AREA CHART */

    /*
     * BAR CHART
     * ---------
     */

    var bar_data = {
      data: [["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9]],
      color: "#3c8dbc"
    };
    $.plot("#bar-chart", [bar_data], {
      grid: {
        borderWidth: 1,
        borderColor: "#f3f3f3",
        tickColor: "#f3f3f3"
      },
      series: {
        bars: {
          show: true,
          barWidth: 0.5,
          align: "center"
        }
      },
      xaxis: {
        mode: "categories",
        tickLength: 0
      }
    });
    /* END BAR CHART */

    /*
     * DONUT CHART
     * -----------
     */

    var donutData = [
      {label: "{{ $vesselgroupdashdata[0]->abv }}", data: {{ $vesselgroupdashdata[0]->rates }}, color: "{{ $vesselgroupdashdata[0]->color }}"},
      {label: "{{ $vesselgroupdashdata[1]->abv }}", data: {{ $vesselgroupdashdata[1]->rates }}, color: "{{ $vesselgroupdashdata[1]->color }}"},
      {label: "{{ $vesselgroupdashdata[2]->abv }}", data: {{ $vesselgroupdashdata[2]->rates }}, color: "{{ $vesselgroupdashdata[2]->color }}"},
      {label: "{{ $vesselgroupdashdata[3]->abv }}", data: {{ $vesselgroupdashdata[3]->rates }}, color: "{{ $vesselgroupdashdata[3]->color }}"},
      {label: "{{ $vesselgroupdashdata[4]->abv }}", data: {{ $vesselgroupdashdata[4]->rates }}, color: "{{ $vesselgroupdashdata[4]->color }}"}
    ];
    $.plot("#donut-chart", donutData, {
      series: {
        pie: {
          show: true,
          radius: 1,
          innerRadius: 0.5,
          label: {
            show: true,
            radius: 2 / 3,
            formatter: labelFormatter,
            threshold: 0.1
          }

        }
      },
      legend: {
        show: true
      }
    });
    /*
     * END DONUT CHART
     */



   /*
     * DONUT CHART 2
     * -----------
     */

    var donutData2 = [
      {label: "{{ $vesselgroupdashdata[0]->abv }}", data: {{ $vesselgroupdashdata[0]->rates_by_utilization }}, color: "{{ $vesselgroupdashdata[0]->color }}"},
      {label: "{{ $vesselgroupdashdata[1]->abv }}", data: {{ $vesselgroupdashdata[1]->rates_by_utilization }}, color: "{{ $vesselgroupdashdata[1]->color }}"},
      {label: "{{ $vesselgroupdashdata[2]->abv }}", data: {{ $vesselgroupdashdata[2]->rates_by_utilization }}, color: "{{ $vesselgroupdashdata[2]->color }}"},
      {label: "{{ $vesselgroupdashdata[3]->abv }}", data: {{ $vesselgroupdashdata[3]->rates_by_utilization }}, color: "{{ $vesselgroupdashdata[3]->color }}"},
      {label: "{{ $vesselgroupdashdata[4]->abv }}", data: {{ $vesselgroupdashdata[4]->rates_by_utilization }}, color: "{{ $vesselgroupdashdata[4]->color }}"}
    ];
    $.plot("#donut-chart2", donutData2, {
      series: {
        pie: {
          show: true,
          radius: 1,
          innerRadius: 0.5,
          label: {
            show: true,
            radius: 2 / 3,
            formatter: labelFormatter,
            threshold: 0.1
          }

        }
      },
      legend: {
        show: false
      }
    });
    /*
     * END DONUT CHART 2
     */
     
     
      /*
     * DONUT CHART 3
     * -----------
     */

    var donutData3 = [
      {label: "{{ $vesselgroupdashdata[0]->abv }}", data: {{ $vesselgroupdashdata[0]->rates_by_losses }}, color: "{{ $vesselgroupdashdata[0]->color }}"},
      {label: "{{ $vesselgroupdashdata[1]->abv }}", data: {{ $vesselgroupdashdata[1]->rates_by_losses }}, color: "{{ $vesselgroupdashdata[1]->color }}"},
      {label: "{{ $vesselgroupdashdata[2]->abv }}", data: {{ $vesselgroupdashdata[2]->rates_by_losses }}, color: "{{ $vesselgroupdashdata[2]->color }}"},
      {label: "{{ $vesselgroupdashdata[3]->abv }}", data: {{ $vesselgroupdashdata[3]->rates_by_losses }}, color: "{{ $vesselgroupdashdata[3]->color }}"},
      {label: "{{ $vesselgroupdashdata[4]->abv }}", data: {{ $vesselgroupdashdata[4]->rates_by_losses }}, color: "{{ $vesselgroupdashdata[4]->color }}"}
    ];
    $.plot("#donut-chart3", donutData3, {
      series: {
        pie: {
          show: true,
          radius: 1,
          innerRadius: 0.5,
          label: {
            show: true,
            radius: 2 / 3,
            formatter: labelFormatter,
            threshold: 0.1
          }

        }
      },
      legend: {
        show: false
      }
    });
    /*
     * END DONUT CHART 3
     */
  });
  

  /*
   * Custom Label formatter
   * ----------------------
   */
  function labelFormatter(label, series) {
    return '<div style="font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;">'
        + label
        + "<br>"
        + Math.round(series.percent) + "%</div>";
  }
</script>
@endsection