month sales

<!DOCTYPE html>
<html>
	<head>
		<title>Line Chart</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

		<style>
			canvas {
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
			}
		</style>
	</head>

	<body>
		<!-- Manual values of my chart data replace
			<span id="dataIndex{index number}" th:utext="{thymleafpoutses}"></span> -->
		<div>
			<span id="dataIndex0">0</span>
			<span id="dataIndex1">1</span>
			<span id="dataIndex2">2</span>
			<span id="dataIndex3">3</span>
			<span id="dataIndex4">4</span>
			<span id="dataIndex5">5</span>
			<span id="dataIndex6">6</span>
			<span id="dataIndex7">7</span>
			<span id="dataIndex8">8</span>
			<span id="dataIndex9">9</span>
			<span id="dataIndex10">10</span>
			<span id="dataIndex11">11</span>
		</div>

		<!-- Start the Chart-->
		<div style="width:100%">
			<canvas id="myChart"></canvas>
		</div>
		<!-- End the chart the Chart-->

		<script>
			function getPreviousMonths() {
				var months = [];

				for (i = 0; i < 12; i++) {
					var month = moment()
						.subtract(i, "months")
						.format("MMMM Y");
					months.push(month);
				}
				return months.reverse();
			}

			var data = [
				chartData0,
				chartData1,
				chartData2,
				chartData3,
				chartData4,
				chartData5,
				chartData6,
				chartData7,
				chartData8,
				chartData9,
				chartData10,
				chartData11
			];

			console.log(data);

			var ctx = document.getElementById("myChart").getContext("2d");
			//ctx.canvas.width = 1000;
			//ctx.canvas.height = 300;
			var cfg = {
				type: "line",
				data: {
					labels: getPreviousMonths(),
					datasets: [
						{
							backgroundColor: "rgba(32, 192, 240, 0.1",

							label: "Month Sales",
							data: data,
							type: "line",
							pointRadius: 2,
							fill: true,
							borderColor: "rgba(32, 192, 240, 1",

							borderWidth: 3
						}
					]
				},
				options: {
					responsive: true,
					tooltips: {
						mode: "index",
						intersect: false
					},
					hover: {
						mode: "nearest",
						intersect: true
					},

					scales: {
						xAxes: [
							{
								type: "time",
								distribution: "linear",
								ticks: {
									source: "labels"
								},
								time: {
									unit: "month",
									unitStepSize: 1,
									displayFormats: {
										month: "MMM Y"
									}
								}
							}
						],
						yAxes: [
							{
								scaleLabel: {
									display: true,
									labelString: "Total Income (Euros)"
								}
							}
						]
					}
				}
			};

			var chartData0;
			var chartData1;
			var chartData2;
			var chartData3;
			var chartData4;
			var chartData5;
			var chartData6;
			var chartData7;
			var chartData8;
			var chartData9;
			var chartData10;
			var chartData11;

			window.onload = function() {
				var ctx = document.getElementById("myChart").getContext("2d");
				window.config = new Chart(ctx, cfg);

				setTimeout(function() {
					chartData0 = document.getElementById("dataIndex0")
						.innerHTML;
					chartData1 = document.getElementById("dataIndex1")
						.innerHTML;
					chartData2 = document.getElementById("dataIndex2")
						.innerHTML;
					chartData3 = document.getElementById("dataIndex3")
						.innerHTML;
					chartData4 = document.getElementById("dataIndex4")
						.innerHTML;
					chartData5 = document.getElementById("dataIndex5")
						.innerHTML;
					chartData6 = document.getElementById("dataIndex6")
						.innerHTML;
					chartData7 = document.getElementById("dataIndex7")
						.innerHTML;
					chartData8 = document.getElementById("dataIndex8")
						.innerHTML;
					chartData9 = document.getElementById("dataIndex9")
						.innerHTML;
					chartData10 = document.getElementById("dataIndex10")
						.innerHTML;
					chartData11 = document.getElementById("dataIndex11")
						.innerHTML;

					cfg.data.datasets[0].data[0] = chartData0;
					cfg.data.datasets[0].data[1] = chartData1;
					cfg.data.datasets[0].data[2] = chartData2;
					cfg.data.datasets[0].data[3] = chartData3;
					cfg.data.datasets[0].data[4] = chartData4;
					cfg.data.datasets[0].data[5] = chartData5;
					cfg.data.datasets[0].data[6] = chartData6;
					cfg.data.datasets[0].data[7] = chartData7;
					cfg.data.datasets[0].data[8] = chartData8;
					cfg.data.datasets[0].data[9] = chartData9;
					cfg.data.datasets[0].data[10] = chartData10;
					cfg.data.datasets[0].data[11] = chartData11;

					window.config.update();

					console.log(
						"Monthly Profit" + "=>" + cfg.data.datasets[0].data
					);
				}, 100);
			};
		</script>
	</body>
</html>