<canvas id="weeklySales" width="370" height="100"></canvas> 
{{#extend 'scripts'}}
<script type="text/javascript">
	function hexToRgbA(hex, alpha) {
		var c;
		if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
			c = hex.substring(1).split('');
			if (c.length === 3) {
				c = [c[0], c[0], c[1], c[1], c[2], c[2]];
			}
			c = '0x' + c.join('');
			return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + alpha + ')';
		}
		throw new Error('Bad Hex');
	}
	var bar_ctx = document.getElementById('weeklySales').getContext('2d');

	var gradientFill = bar_ctx.createLinearGradient(0, 280, 0, 0);
	gradientFill.addColorStop(0, hexToRgbA('#FFF', 0.1));
	gradientFill.addColorStop(1, hexToRgbA('#5d92f4', 0.4));

	new Chart(document.getElementById("weeklySales"), {
		type: 'line',
		data: {
			labels: ["A", "B", "C", "D", "E", "F", "J", "K", "L", "M", "N"],
			datasets: [{
				data: [10, 25, 55, 40, 45, 50, 75, 70, 72, 60, 25],
				borderColor: "#5d92f4",
				backgroundColor: gradientFill,
				fill: true
			}, ]
		},
		options: {
			title: {
				display: true
			},
			elements: {
				line: {
					tension: 0.5
				},
				point: {
					radius: 0
				}
			},
			scales: {
				yAxes: [{
					gridLines: {
						display: false,
						drawBorder: false
					},
					ticks: {
						stepSize: 20
					},
					display: false,
				}],
				xAxes: [{
					gridLines: {
						display: false,
						drawBorder: false
					},
					display: false
				}]
			},
			legend: {
				display: false
			}
		}
	});

</script>
{{/extend}}
