allo/resources/views/market/dashboard.blade.php

@extends('market.layout.master')
@section('ptitle', 'Marketing')
@section('page_title', 'Dashboard')
@section('subpage', 'Graph & Summary Report')
@section('img_profile', asset($user->staffDetail->user_pic))
@section('login_name', $user->staffDetail->name )
@section('last_login', $user->last_login_at )

@section('content')
	<div class="fluid">

		<!-- Donut -->
		<div class="widget grid4 chartWrapper">
			<div class="whead"><h6>Form's Statistics Overview</h6></div>
			<div class="body"><canvas id="pieChart1" width="400" height="400"></canvas></div>
		</div>

		<!-- Auto updating chart -->
		<div class="widget grid8 chartWrapper">
			<div class="whead"><h6>Form's Statistics by Month (2019)</h6></div>
			<div class="body"><center><canvas id="chart1" width="700" height="400"></canvas></center></div>
		</div>

	</div>
@endsection

@section('external_js')
<script type="text/javascript">

	var total = <?php echo $total ?>;
	var rec = <?php echo $rec ?>;
	var dealer = <?php echo $dealer ?>;
	var normal = <?php echo $normal ?>;
	var rejected = <?php echo $rejected ?>;

	var ctx = document.getElementById('pieChart1');
	var data = {
		    datasets: [{
		    	fill: true,
	            backgroundColor: [
	                'Yellow',
	                'Green',
	                'Brown',
	                'Red',
	            ],
	            hoverBackgroundColor:[
	                'Yellow',
	                'Green',
	                'Brown',
	                'Red',
	            ],
		        data: [rec, dealer, normal, rejected]
		    }],
		    // These labels appear in the legend and in the tooltips when hovering different arcs
		    labels: [
		        'Total Rectification ('+rec+')',
		        'Total Dealer ('+dealer+')',
		        'Total Non Dealer ('+normal+')',
		        'Total Rejected ('+rejected+')'
		    ]
		};
	var options = {
		responsive: true,
        // title: {
        //         display: true,
        //         text: 'What happens when you lend your favorite t-shirt to a girl ?',
        //         position: 'top'
        //     },
        // rotation: -0.7 * Math.PI
	};
	var myPieChart = new Chart(ctx, {
	    type: 'doughnut',
	    data: data,
	    options: options
	});

	/***************************************/
	var ctx2 = document.getElementById('chart1');
	var data = '';
	var myChart = new Chart(ctx2, {
	    type: 'bar',
	    data: {
	        labels: ['January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
	        datasets: [{
	            label: '# of Forms Submitted (Dealer)',
	            data: <?php echo json_encode($finalD6) ?>,
			    backgroundColor: [
			        'rgba(255, 99, 132, 0.2)',
			        'rgba(255, 99, 132, 0.2)',
			        'rgba(255, 99, 132, 0.2)',
			        'rgba(255, 99, 132, 0.2)',
			        'rgba(255, 99, 132, 0.2)',
			        'rgba(255, 99, 132, 0.2)',
			        'rgba(255, 99, 132, 0.2)',
			        'rgba(255, 99, 132, 0.2)',
			        'rgba(255, 99, 132, 0.2)',
			        'rgba(255, 99, 132, 0.2)',
			        'rgba(255, 99, 132, 0.2)',
			        'rgba(255, 99, 132, 0.2)'
			    ],
	            borderColor: [
		            'rgba(255,99,132,1)',
		            'rgba(255,99,132,1)',
		            'rgba(255,99,132,1)',
		            'rgba(255,99,132,1)',
		            'rgba(255,99,132,1)',
		            'rgba(255,99,132,1)',
		            'rgba(255,99,132,1)',
		            'rgba(255,99,132,1)',
		            'rgba(255,99,132,1)',
		            'rgba(255,99,132,1)',
		            'rgba(255,99,132,1)',
		            'rgba(255,99,132,1)'
	            ],
	            borderWidth: 1
	        },
	        {
	        	label: '# of Forms Submitted (Non Dealer)',
	            data: <?php echo json_encode($finalD5) ?>,
			    backgroundColor: [
			        'rgba(54, 162, 235, 0.2)',
			        'rgba(54, 162, 235, 0.2)',
			        'rgba(54, 162, 235, 0.2)',
			        'rgba(54, 162, 235, 0.2)',
			        'rgba(54, 162, 235, 0.2)',
			        'rgba(54, 162, 235, 0.2)',
			        'rgba(54, 162, 235, 0.2)',
			        'rgba(54, 162, 235, 0.2)',
			        'rgba(54, 162, 235, 0.2)',
			        'rgba(54, 162, 235, 0.2)',
			        'rgba(54, 162, 235, 0.2)',
			        'rgba(54, 162, 235, 0.2)'
			    ],
	            borderColor: [
		            'rgba(54, 162, 235, 1)',
		            'rgba(54, 162, 235, 1)',
		            'rgba(54, 162, 235, 1)',
		            'rgba(54, 162, 235, 1)',
		            'rgba(54, 162, 235, 1)',
		            'rgba(54, 162, 235, 1)',
		            'rgba(54, 162, 235, 1)',
		            'rgba(54, 162, 235, 1)',
		            'rgba(54, 162, 235, 1)',
		            'rgba(54, 162, 235, 1)',
		            'rgba(54, 162, 235, 1)',
		            'rgba(54, 162, 235, 1)'
	            ],
	            borderWidth: 1
	        }]
	    },
	    options: {
	    	responsive: false,
	    	scales: {
	    		xAxes: [{
	    			ticks: {
	    				maxRotation: 90,
	    				minRotation: 80
	    			},
	    		}],
	    		yAxes: [{
	    			ticks: {
	    				beginAtZero: true
	    			},
	    		}]
	    	}
	    }
	});
</script>
@endsection