<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<script>
$(document).ready(function() {    
    const chart1 = Highcharts.chart('chart-1', { 
        chart: { type: 'column',height:100 },
        title: { text: null },
        credits: false,
        tooltip: {enabled: false},
        xAxis: { enabled:false,showEmpty:true,visible:false },
        yAxis: { enabled:false,showEmpty:true,visible:false},
        series: [
            {color: '<?= $colors['primary']; ?>',data: [1]},
            {color: '<?= $colors['primary']; ?>',data: [4]},
            {color: '<?= $colors['primary']; ?>',data: [0]},
            {color: '<?= $colors['primary']; ?>',data: [2]},
            {color: '<?= $colors['primary']; ?>',data: [1]},
            {color: '<?= $colors['primary']; ?>',data: [3]},
            {color: '<?= $colors['primary']; ?>',data: [5]},
            {color: '<?= $colors['primary']; ?>',data: [1]},
            {color: '<?= $colors['primary']; ?>',data: [2]},
            {color: '<?= $colors['primary']; ?>',data: [0]},
            {color: '<?= $colors['primary']; ?>',data: [2]},
            {color: '<?= $colors['primary']; ?>',data: [2]},
            {color: '<?= $colors['primary']; ?>',data: [1]},
            {color: '<?= $colors['primary']; ?>',data: [0]},
            {color: '<?= $colors['primary']; ?>',data: [3]},
            {color: '<?= $colors['primary']; ?>',data: [0]},
            {color: '<?= $colors['primary']; ?>',data: [0]},
            {color: '<?= $colors['primary']; ?>',data: [4]},
            {color: '<?= $colors['primary']; ?>',data: [2]},
            {color: '<?= $colors['primary']; ?>',data: [0]},
            {color: '<?= $colors['primary']; ?>',data: [1]},
            {color: '<?= $colors['primary']; ?>',data: [1]},
            {color: '<?= $colors['primary']; ?>',data: [5]},
            {color: '<?= $colors['primary']; ?>',data: [1]},
            {color: '<?= $colors['primary']; ?>',data: [2]},
            {color: '<?= $colors['primary']; ?>',data: [1]},
            {color: '<?= $colors['primary']; ?>',data: [0]},
            {color: '<?= $colors['primary']; ?>',data: [3]},
            {color: '<?= $colors['primary']; ?>',data: [0]},
            
        ],
        legend: {enabled:false},
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,
                    crop: false,
                    overflow: 'none'
                }
            },
            series: {
                pointWidth: 10
            }
        },

    });
    
    const chart2 = Highcharts.chart('chart-2',  { 
        chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        height:170,
        pacingTop: 0,
            spacingRight: 0,
            spacingBottom: 0,
            spacingLeft: 0,
            plotBorderWidth: 0,
            margin: [0,0,0,0],
      },
      credits: {                                 
        enabled:  false                          
      },

      title: {
            text: '35%',
            align: 'center',
            verticalAlign: 'top',
            y: 90
        },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          dataLabels: {
            enabled: false
          },
          startAngle: -90,
          endAngle: 90,
          size: 150,
          center: ['50%', '60%']
        }
      },
      series: [{
        type: 'pie',
        innerSize: '80%',
        data: [{
          name: 'Opportunities',
          color: 'rgba(26, 188, 156,1.0)',
          y: 35
        },
        {
          name: 'Leads',
          color: 'rgba(26, 188, 156,0.5)',
          y: 65
        }]
      }]
    });
    const chart3 = Highcharts.chart('chart-3',  { 
        chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        height:140
      },
      credits: {                                 
        enabled:  false                          
      },

      title: {
            text: '22%',
            align: 'center',
            verticalAlign: 'top',
            y: 90
        },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          dataLabels: {
            enabled: false
          },
          startAngle: -90,
          endAngle: 90,
          size: 150,
          center: ['50%', '60%']
        }
      },
      series: [{
        type: 'pie',
        innerSize: '80%',
        data: [{
          name: 'Wins',
          color: 'rgba(26, 188, 156,1.0)',
          y: 22
        },
        {
          name: 'Opportunities',
          color: 'rgba(26, 188, 156,0.5)',
          y: 78
        }]
      }]
    });


});
</script>