<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
  /* STEP 1: LOAD RECORDS - Copy this PHP code block near the TOP of your page */
  
  // load viewer library
  $libraryPath = 'cmsb/lib/viewer_functions.php';
  $dirsToCheck = array('/match/your/directory/','','../','../../','../../../');
  foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
  if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }
    
  // load records from 'name'
  list($nameRecords, $nameMetaData) = getRecords(array(
    'tableName'   => 'name',
    'loadUploads' => true,
    'allowSearch' => false,
  ));

?>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bar Chart</title>

<style type="text/css">
	#myChart {
		margin:0 auto;
		width:90%;
		height:inherit;
	}
</style>

<script src="js/Chart.2.6.0.bundle.js"></script>
<script src="js/utils.js"></script>

</head>

<body>

<canvas id="myChart"></canvas>

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
			<?php
				$pagenames    = array_column($nameRecords, 'first_name');
				$namesToCounts = array_count_values($pagenames);
					foreach ($namesToCounts as $pagename => $count) {
					print ('"'.$pagename.'",');
			} ?>
				],
				
        datasets: [{
            label: 'Most Used Names',
            data: [
				<?php
					$pagenames    = array_column($nameRecords, 'first_name');
					$namesToCounts = array_count_values($pagenames);
						foreach ($namesToCounts as $pagename => $count) {
						print htmlencode($count.',');
				} ?>
				  ],
				
            backgroundColor: [
					<?php foreach ($nameRecords as $record): ?>
						<?php { $r = rand(0,255); $g = rand(0,255); $b = rand(0,255); $opacity = 0.4; } ?>
						'<?php echo "rgba(".$r.",".$g.",".$b.",".$opacity.")"; ?>',
					<?php endforeach ?>
							 ],
					
            borderColor: [
							'rgba(0, 0, 0, 0.4)',
            			],
						
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

</body>
</html>