<script src="chart/charts.js"></script>
<script src="chart/threed.js"></script>
<script src="chart/exporting.js"></script>
<script src="chart/export-data.js"></script>
<script src="chart/accessbility.js"></script>
<script src="chart/cylinder.js"></script>
<style>
    #monthlysales {
  height: 400px; 
}

.highcharts-figure, .highcharts-data-table table {
  min-width: 310px; 
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #EBEBEB;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

</style>

  
<figure class="highcharts-figure">
    <div id="customerProduct"></div>
   
</figure>

<script>
    var monthName=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
   // var dateNumber =new Date().getMonth();
    var dateNumber =new Date().getMonth();
    let  customerArr=[];
    let chartDataArr=[];
   $.ajax({
      dataType: "json",
        url:'ajaxpath1/fetch_cuspro_chart.php',
        success:function(data){
             console.log(data);
              data.map((list,index)=>{
                customerArr.push(list.productname);
               chartDataArr.push({name:list.customer,data:list.unit});
             });
             console.log(chartDataArr);
             console.log(customerArr);
   Highcharts.chart('customerProduct', {
      colors: ['#C6D57E',"#D57E7E","#A2CDCD","#FFE1AF","#EF6D6D"],
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 10,
            beta: 25,
            depth: 70
        }
    },
    title: {
        text: monthName[dateNumber]+' '+'Month Top 5 Customer'
    },
    subtitle: {
text: 'Of'+' '+customerArr[0]+' '+'In Tonn'
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    xAxis: {
        categories: ['Customer'],
        labels: {
            skew3d: true,
            style: {
                fontSize: '16px'
            }
        }
    },
    yAxis: {
        title: {
            text: null
        }
    },
    series: chartDataArr
});
        },error:function(error){
                   console.log("error"+error.responseText);
            }
      });
</script>