<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link href="assets/css/main.d810cf0ae7f39f28f336.css" rel="stylesheet">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/fontawesome.min.css" integrity="sha512-d0olNN35C6VLiulAobxYHZiXJmq+vl+BGIgAxQtD5+kqudro/xNMvv2yIHAciGHpExsIbKX3iLg+0B6d0k4+ZA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
    <link rel="stylesheet" href="assets/select2/select2.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css" />
    <script type="text/javascript" src="assets/scripts/jquery.min.js"></script>
    <link rel="stylesheet" href="assets/css/styleX.css">
</head>
<body>
    <div class="row">
        <div class="col-lg-10">
            <div id="container"></div>
        </div>
    </div>
    

    <script type="text/javascript" src="assets/scripts/main.d810cf0ae7f39f28f336.js"></script>
    <script type="text/javascript" src="assets/select2/select2.min.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    <script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
    <script src="assets/wizard/js/jquery.steps.js"></script>
    <script src="assets/wizard/js/main.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js.map"></script> -->
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/variable-pie.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/offline-exporting.js"></script>
    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script> -->
    <script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
    <script type="text/javascript" src="https://keresearch.in/demoDash/assets/code/modules/heatmap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.3.1/dist/pptxgen.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pptxgenjs/3.8.0/pptxgen.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/maps/modules/map.js"></script>
    <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.3.1/dist/pptxgen.bundle.js"></script>

    <script>
        var countryL = ["Brazil","Mexico","Italy","Spain","India","Malaysia"];
        var shapeL = ["Shape 1","Shape 2","Shape 3","Shape 4","Shape 5","Shape 6"];
        $(document).ready(function() {
            var heatData1 = [
                [0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [0, 5, 19],
                [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 33], [1, 4, 48], [1, 5, 19],
                [2, 0, 35], [2, 1, 15], [2, 2, 23], [2, 3, 64], [2, 4, 52], [2, 5, 19],
                [3, 0, 72], [3, 1, 32], [3, 2, 34], [3, 3, 19], [3, 4, 16], [3, 5, 19],
                [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 44], [4, 4, 22], [4, 5, 19],
                [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 46], [5, 5, 19],
            ];

            heatChart(heatData1,"container",shapeL);
        });

        function heatChart(lucifer,id,cat2)
            {
                Highcharts.chart(id, {
                    chart: {
                        type: 'heatmap',
                        plotBorderWidth: 1
                    },
                    title: {
                        text: '',
                    },
                    navigation: {
                        buttonOptions: {
                            enabled: false
                        }
                    },
                    credits: {
                        enabled: false
                    },

                    xAxis: {
                       categories: countryL,
                        labels: {
                            enabled: true,
                            style: {
                                fontSize: '10px',
                                color: '#000000'
                            },
                        }
                    },
                    // #70db70 - Green
                    yAxis: {
                        categories: cat2,
                        title: null,
                        reversed: true,
                        labels: {
                            enabled: true,
                            style: {
                                fontSize: '10px',
                                color: '#000000',
                            },
                        }
                    },

                    colorAxis: {
                        min: 0,
                        minColor: '#FFFFFF',
                        maxColor: '#6BC4FF'
                    },

                    legend: {
                        align: 'right',
                        layout: 'vertical',
                        margin: 0,
                        verticalAlign: 'top',
                        y: 25,
                        symbolHeight: 280,
                        enabled:false
                    },

                    tooltip: {
                        format: '<b>{series.xAxis.categories.(point.x)}</b><br>' +
                            '<b>{series.yAxis.categories.(point.y)} : {point.value}%</b>'
                    },

                    series: [{
                        name: 'Sales per employee',
                        borderColor: '#000000',
                        borderWidth: 1,
                        data: lucifer,
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            style: {
                                textOutline: false,
                                fontSize : "0.85rem"
                            },
                            formatter: function () {
                                return this.point.value + '%';
                            }
                        }
                    }],

                    responsive: {
                        rules: [{
                            condition: {
                                maxWidth: 500
                            },
                            chartOptions: {
                                yAxis: {
                                    labels: {
                                        format: '{substr value 0 1}'
                                    }
                                }
                            }
                        }]
                    }

                });
            }
    </script>
    
</body>
</html>