pos-gis/resources/views/content/dashboard_pemda_act.blade.php

<script src="{{asset('js/chartjs.js')}}" type="text/javascript"></script>
<script>
    reInitForm();
    var d = new Date();
    var tahunIni = d.getFullYear();

    $('#filter_tahun').val(tahunIni);

    get_dashboard();

	$('#tanggal_filter').datepicker({
            rtl: KTUtil.isRTL(),
            orientation: "bottom left",
            todayHighlight: false,
            format: 'dd-mm-yyyy',
            autoclose: true,
        });

	function getOutlet(id) {
		ref_outlet('outlet_filter',id)
	}

    function get_dashboard() {
      

        var query = {
            // tahun: $('#filter_tahun').val(),
			tanggal_filter: $('#tanggal_filter').val(),
            merchant_filter:$('#merchant_filter').val(),
            outlet_filter:$('#outlet_filter').val()

        }

        var act_url = '/data/dashboard_pemda'+'?'+$.param(query);

        $.ajax({
            url: act_url,
            type: 'GET',
            beforeSend: function () {
                znLoadingPage();
            },
            success: function (res) {

                $('#p_outlet').html(znNumFormat(res.data.p_outlet)+' <small class="font-size-sm">Outlet</small>');
                $('#p_order').html(znNumFormat(res.data.p_order)+' <small class="font-size-sm">Order</small>');
                $('#p_transaction').html(znNumFormat(res.data.p_transaction)+' <small class="font-size-sm">Transaction</small>');
                $('#p_product').html(znNumFormat(res.data.p_product)+' <small class="font-size-sm">Product</small>');
                $('#p_omzet').html(znNumFormat(res.data.p_omzet)+' <small class="font-size-sm">IDR</small>');
                $('#p_tax').html(znNumFormat(res.data.p_tax)+' <small class="font-size-sm">IDR</small>');
               
				// GRAFIK
				var data_graf =[];
				var data_graf_time =[];
				var data_graf_week =[];

				var data_color = ["#00C5DC","#F4516C","#FFB822","#8859E0","#0C5484","#66BB6A","#00838F","#e57373"];
				var data_tanggal = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
				var data_week = ['Minggu','Senin','Selasa',"Rabu",'Kamis',"Jum'at",'Sabtu'];


                var data_jam = [];
                for (let i = 1; i <= 24; i++) {
                    data_jam.push(i+':00')
                }

				var color_i = 0;
				$.each(res.data.grafik, function (k,v) {
					data_graf.push({
						label: k,
						data: v,
						fill: false,
						backgroundColor: data_color[color_i],
						borderColor: data_color[color_i],
					});

					color_i++;
				});

                $.each(res.data.grafik_time, function (k,v) {
					data_graf_time.push({
						label: k,
						data: v,
						fill: false,
						backgroundColor: data_color[color_i],
						borderColor: data_color[color_i],
					});

					color_i++;
				});

				// $.each(res.data.grafik_week, function (k,v) {
				// 	data_graf_week.push({
				// 		label: k,
				// 		data: v,
				// 		fill: false,
				// 		backgroundColor: data_color[color_i],
				// 		borderColor: data_color[color_i],
				// 	});

				// 	color_i++;
				// });

				$('#crt_con').html(``);
				$('#crt_con').html(`<canvas id="crt"></canvas>`);

                $('#crt_con_today').html(``);
				$('#crt_con_today').html(`<canvas id="crt_today"></canvas>`);

				$('#crt_con_week').html(``);
				$('#crt_con_week').html(`<canvas id="crt_week"></canvas>`);
              

				var ctx = document.getElementById("crt");
				var ctx_today = document.getElementById("crt_today");
				var ctx_week = document.getElementById("crt_week");

				ctx.height = 120;

				var myChart = new Chart(ctx, {
					type: 'line',
					data: {
						labels: data_tanggal,
						datasets: data_graf
					},
					options: {
								legend: {
									position: 'bottom',
								},
								responsive: true,
								title: {
									display: false,
									text: 'Grafik'
								},
								tooltips: {
									mode: 'index',
									intersect: false,
								},
								hover: {
									mode: 'nearest',
									intersect: true
								},
								scales: {
									xAxes: [{
										display: true,
										scaleLabel: {
											display: true,
											labelString: 'Month'
										}
									}],
									yAxes: [{
										display: true,
										scaleLabel: {
											display: true,
											labelString: 'Total'
										}
									}]
								}
							}
				});

                ctx_today.height = 120;

				var myChart = new Chart(ctx_today, {
					type: 'line',
					data: {
						labels: data_jam,
						datasets: data_graf_time
					},
					options: {
								legend: {
									position: 'bottom',
								},
								responsive: true,
								title: {
									display: false,
									text: 'Grafik'
								},
								tooltips: {
									mode: 'index',
									intersect: false,
								},
								hover: {
									mode: 'nearest',
									intersect: true
								},
								scales: {
									xAxes: [{
										display: true,
										scaleLabel: {
											display: true,
											labelString: 'Time'
										}
									}],
									yAxes: [{
										display: true,
										scaleLabel: {
											display: true,
											labelString: 'Total'
										}
									}]
								}
							}
				});

				// ctx_week.height = 70;

				// var myChart = new Chart(ctx_week, {
				// 	type: 'line',
				// 	data: {
				// 		labels: data_week,
				// 		datasets: data_graf_week
				// 	},
				// 	options: {
				// 		legend: {
				// 			position: 'bottom',
				// 		},
				// 		responsive: true,
				// 		title: {
				// 			display: false,
				// 			text: 'Grafik'
				// 		},
				// 		tooltips: {
				// 			mode: 'index',
				// 			intersect: false,
				// 		},
				// 		hover: {
				// 			mode: 'nearest',
				// 			intersect: true
				// 		},
				// 		scales: {
				// 			xAxes: [{
				// 				display: true,
				// 				scaleLabel: {
				// 					display: true,
				// 					labelString: 'Day'
				// 				}
				// 			}],
				// 			yAxes: [{
				// 				display: true,
				// 				scaleLabel: {
				// 					display: true,
				// 					labelString: 'Total'
				// 				}
				// 			}]
				// 		}
				// 	}
				// });
				// GRAFIK

				

           
            }
        }).done(function (msg) {
            znLoadingPageEnd();
        });
    }

</script>