<?php 
include "kalkulasi_chart_trans.php";

?>
	<script src="chart/dist/Chart.bundle.js"></script>
	<script src="chart/utils.js"></script>
	<style>
	canvas5 {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	</style>

	<div id="container" style="width: 100%;">
		<canvas class="img-responsive" id="canvas5"></canvas>
		<i style="font-size:9px; font-family:arial color:green">Copyright (c) 2018 Chart.js Contributors</i>
	</div>
	
	<script>
		var chartData = {
			labels: ['<x','Juli','Agt','Sept','Okt','Nop','Des','Jan','Feb','Mar','Apr','Mei','Juni','>x'],
			datasets: [
			{
				type: 'line',
				label: 'SALDO',
				borderColor: window.chartColors.yellow,
				borderWidth: 2,
				fill: false,
				data: [<?php echo $datasetsld;?>]
				},
			{
				type: 'bar',
				label: 'Pendapatan',
				backgroundColor: window.chartColors.green,
				data: [<?php echo $data_pendapatan;?>],
				borderColor: 'red',
				borderWidth: 2
			},
			{
				type: 'bar',
				label: 'Belanja',
				backgroundColor: window.chartColors.red,
				data: [<?php echo $data_belanja;?>],
				borderColor: 'green',
				borderWidth: 2
			},
			
				]
			

		};
		window.onload = function() {
			var ctx = document.getElementById('canvas5').getContext('2d');
			window.myMixedChart = new Chart(ctx, {
				type: 'bar',
				data: chartData,
				options: {
					responsive: true,
					title: {
						display: true,
						text: 'Grafik Transaksi Pendapatan dan Belanja [x 1.000.000]'
					},
					tooltips: {
						mode: 'index',
						intersect: true
					}
				}
			});
		};

		document.getElementById('randomizeData').addEventListener('click', function() {
			chartData.datasets.forEach(function(dataset) {
				dataset.data = dataset.data.map(function() {
					return randomScalingFactor();
				});
			});
			window.myMixedChart.update();
		});
	</script>
	

