FloatBackOfffice/application/views/admin/view_start.php

<!-- Dashboard content -->
<div class="row">
    <div class="col-lg-3">
        <!-- Recent Members -->
        <div class="panel panel-flat" style="background-color: #ffffff; height: 380px;">
                  <canvas id="myChart" style="width:100%; height:400px"></canvas>
        </div>
        <!-- /Recent Members -->
    </div>    
    
    <div class="col-lg-6">
        <!-- Recent Members -->
        <div class="panel panel-flat" style="background-color: #ffffff; height: 380px;">
        <canvas id="myChart1" style="width:100%; height:400px"></canvas>

        </div>
        <!-- /Recent Members -->
    </div>   
    <div class="col-lg-3">
        <!-- Recent Members -->
        <div class="panel panel-flat" style="background-color: #ffffff; height: 380px;">
                  <canvas id="myChart" style="width:100%; height:400px"></canvas>
        </div>
        <!-- /Recent Members -->
    </div>
</div>
<!-- /dashboard content -->

<!-- Dashboard content -->
<div class="row">
    <div class="col-lg-3">
        <!-- Recent Members -->
        <div class="panel panel-flat" style="background-color: #ffffff; height: 380px;">
            <canvas id="myChart" style="width:100%; height:400px"></canvas>
        </div>
        <!-- /Recent Members -->
    </div>  
    <div class="col-lg-3">
        <!-- Recent Members -->
        <div class="panel panel-flat" style="background-color: #ffffff; height: 380px;">
            <canvas id="myChart" style="width:100%; height:400px"></canvas>
        </div>
        <!-- /Recent Members -->
    </div>
</div>
<!-- /dashboard content -->

<!-- /dashboard content -->
<?php

$c=0;
$plot_transpotercount = array();
$labelArray = '';
$valueArray = '';
foreach ($plot_signup as $rr) {
   // echo "{$key} => {$value} ";
   // print_r($rr);
    if ( $c >  0 )
    {
        $labelArray .= ',';
        $valueArray .= ',';
    }
    $labelArray .= "'".$rr['dt']."'";
    $valueArray .= $rr['dcount'];
    $c++;
}


$c=0;
$labelArray1 = '';
$valueArray1 = '';
foreach ($plot_emaildownload as $rr) {
   // echo "{$key} => {$value} ";
   // print_r($rr);
    if ( $c >  0 )
    {
        $labelArray1 .= ',';
        $valueArray1 .= ',';
    }
    $labelArray1 .= "'".$rr['created']."'";
    $valueArray1 .= $rr['count'];
    $c++;
}

?>

<script type="text/javascript">
<!--

    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 3.397, lng: 10.644},
            zoom: 3
        });
    }

    var loaded_data = new Array();
    function showTranspModal(service_request_id) {
        if (typeof event !== 'undefined') {
            event.preventDefault();
        }
        //  alert(service_request_id);
        // collect data - either from forms or from data variables
        var id = $(this).data('id');

        // load the modal content with a loader gif and message
        $('#modal-content').html('Loading...');

        // show modal window
        $('#modal_theme_primary').modal('show');
//alert(5);
        // do the ajax bit
        var post_data = {
            'interest_id': service_request_id,
        };
//alert(6);
        $.ajax({
            url: "/transp/transp_modal?service_request_id=" + service_request_id
        }).done(function (data) {
//alert(data);
//alert(7);
            $('#modal-content').html(data);
            //initialize_map();
            var myLatlng = new google.maps.LatLng(33.7489954, -84.3879824);
            var myOptions = {
                zoom: 13,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP};
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("directionsDiv"));

            fitMapToBounds_map();

            calcRoute(loaded_data[0], loaded_data[1]);
            //alert(loaded_data[0]);
        });
    }

    function viewMember(member_id) {

        $('#transp_detail').html('Processing...');
        $('#acc' + member_id).prop('disabled', true);
        $.ajax({
            url: "/member/viewmedberdetail?proc=PROCESS&member_id=" + member_id
        }).done(function (data) {
            $('#transp_detail').html(data);
            $('#acc' + member_id).prop('disabled', false);
        });
        return false;
    }

    function blockMember(member_id) {
        bootbox.confirm(`The member with ID: '${member_id}' will be blocked`, function(result) {
            if (result === true) {
                memberAction('block', {member_id: member_id});
            }
        });
    }

    function unblockMember(member_id) {
        bootbox.confirm(`The member with ID: '${member_id}' will be unblocked`, function(result) {
            if (result === true) {
                memberAction('unblock', {member_id: member_id});
            }
        });

    }

    function memberAction(action, data) {
        var url = `/security/${action}member`;
        $.ajax({
            url: url,
            type: 'POST',
            dataType:'JSON',
            data: data,
            success: function(data) {
                location.reload();
            },
            error: function(err) {
                console.log(err);
            }
        });
        return false;
	};



var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [<?=$labelArray?>],
        datasets: [{
            label: 'Sign up last 7 days',
            data: [<?=$valueArray?>],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

/* LINE NOW */ 
var ctx1 = document.getElementById("myChart1");
var myChart1 = new Chart(ctx1, {
    type: 'line',
    data: {
        labels: [<?=$labelArray1?>],
        datasets: [{
            label: 'Email Downlad last 30 days',
            data: [<?=$valueArray1?>],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});



//initMap();
// -->
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=<?=$google_api_key?>&callback=initMap"   async defer></script>