<?php 
$json_object = ($result);


 ?>
<script type="text/javascript">
    var mydata=(<?php   echo ($result3); ?>);
    console.log(mydata);
    var mydata3=(<?php   echo ($result3); ?>);
    console.log(mydata3);
window.onload = function() {

    var chart1 = new CanvasJS.Chart("chartContainer", {
        theme: "light1", // "light2", "dark1", "dark2"
        animationEnabled: true, // change to true   
        exportEnabled: true,
      
        title: {
            text: "User Signup Trends"
        },
        axisX: {
            title: "Month"
        },
        axisY: {
            title: "Number of Signups",
            includeZero: false
        },

        /*
        data: [{
            // Change type to "bar", "area", "spline", "pie",etc.
            type: "column",
            indexLabelFontSize: 17,
           dataPoints:mydata
            
        }]
        */
        data: [{
            type: "line",
            markerSize: 10,
            xValueFormatString: "MMM",
            yValueFormatString: "#,##0",
            dataPoints: mydata.map(data => ({ label: data.label, y: data.y }))
        }]
      
    });

    // var chart2 = new CanvasJS.Chart("myPieChart", {
    //     theme: "light2", // "light2", "dark1", "dark2"
    //     animationEnabled: true, // change to true   
    //     exportEnabled: true,
    //     title: {
    //         text: "Males & Females"
    //     },

    //     data: [{
    //         // Change type to "bar", "area", "spline", "pie",etc.
    //         type: "pie",
    //         indexLabelFontSize: 17,
    //         dataPoints: [{
    //                 label: "Males",
    //                 color: '#8E5A6A',
    //                 y: 50
    //             },
    //             {
    //                 label: "Females",
    //                 color: '#CC8A9F',
    //                 y: 100
    //             }
    //         ]
    //     }]
    // });
    chart1.render();
    //chart2.render();


}
</script>
<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
        <!-- <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a> -->
    </div>

    <!-- Content Row -->
    <div class="row">

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4 d-none">
            <div class="card border-left-users shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#20435A;">
                                Tattoo Artists</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">50</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-3x" style="color:#20435A;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4 d-none">
            <div class="card border-left-podcasts shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#638DA6;">
                                Studios</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">80</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-podcast fa-3x" style="color:#638DA6;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4 d-none">
            <div class="card border-left-males shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#8E5A6A;">Suppliers</div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">35</div>
                                </div>
                                <!-- <div class="col">
                                    <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-user-md fa-3x" style="color:#8E5A6A;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pending Requests Card Example -->
        <div class="col-xl-3 col-md-6 mb-4 d-none">
            <div class="card border-left-females shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#CC8A9F;">
                                Cosmetics</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">110</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-user-circle fa-3x" style="color:#CC8A9F;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!---dyanmic content load-->

    <?php 

    foreach ($result2 as $key) {?>

        <div class="col-xl-3 col-md-6 mb-4 ">
            <div class="card border-left-females shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#CC8A9F;">
                                <?php echo  $key['label'] ?></div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800"><?php echo  $key['y'] ?></div>
                        </div>
                        <div class="col-auto">
                          
                        </div>
                    </div>
                </div>
            </div>
        </div>
<?php
        }
     ?>

<!---dyanmic content load-->

    </div>

    <!-- Content Row -->

    <div class="row">

        <!-- Area Chart -->
        <div class="col-xl-12 col-lg-12">
            <div class="card shadow mb-4">
                <div class="card-body">
                    <div class="chart-area">
                        <div id="chartContainer" style="width: 100%; height: 100%;"></div>
                        <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                        <div id="myPieChart" style="width: 100%; height: 100%;"></div>
                        <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
                    </div>
                </div>
            </div>
        </div> -->
    </div>



</div>
<!-- /.container-fluid -->