Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<span>Bankdrücken</span>

<input id="benchpress" type="number" min="1" placeholder="Bankdrücken in KG">
<span>Kreuzheben</span>

<input id="deadlift" type="number" min="1" placeholder="Kreuzheben in KG">
<div>
    <button id="AddDate" type="button"> Training Hinzufügen</button>
</div>
<center>
<div id="chartContainer" style="height: 800px; width: 90%;"></div>

JavaScript

var TrainingNr = 13;
	var dataPointsK = [{ x: 1, y: 180 },
				{ x: 2, y: 182 },
				{ x: 3, y: 182 },
				{ x: 4, y: 185 },
				{ x: 5, y: 187 },
				{ x: 6, y: 185 },
				{ x: 7, y: 190 },
				{ x: 8, y: 190 },
				{ x: 9, y: 192 },
				{ x: 10, y: 192 },
				{ x: 11, y: 195 },
				{ x: 12, y: 200 }];
	
	var dataPointsB = [{ x: 1, y: 105 },
				{ x: 2, y: 105 },
				{ x: 3, y: 105 },
				{ x: 4, y: 107.5 },
				{ x: 5, y: 110 },
				{ x: 6, y: 110 },
				{ x: 7, y: 107.5 },
				{ x: 8, y: 110 },
				{ x: 9, y: 112.5 },
				{ x: 10, y: 115 },
				{ x: 12, y: 116 }];
		var chart = new CanvasJS.Chart("chartContainer",
		{

			title:{
				text: "Trainingsfortschritt",
				fontSize: 30
			},
                        animationEnabled: true,
			axisX:{
				title: "Training",
				gridColor: "Black",
				tickColor: "black",
				valueFormatString: "##."  
			    

			},                        
                        toolTip:{
                          shared:true
                        },
			theme: "theme2",
			axisY: {
				title: "Gewicht",
				gridColor: "Black",
				tickColor: "black"
			},
			legend:{
				verticalAlign: "center",
				horizontalAlign: "right"
			},
			data: [
			{	type: "line",
				showInLegend: true,
				lineThickness: 2,
				name: "Kreuzheben",
				markerType: "square",
				color: "#c8ebff",
				dataPoints: dataPointsK
			},
			{        
				type: "line",
				showInLegend: true,
				name: "Bankdrücken",
				color: "#bcddf0",
				lineThickness: 2,

				dataPoints: dataPointsB
				
				
			}

			
			],
          legend:{
            cursor:"pointer",
            itemclick:function(e){
              if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
              	e.dataSeries.visible = false;
              }
              else{
                e.dataSeries.visible = true;
              }
              chart.render();
            }
          }
		});

chart.render();


$("#AddDate").click(function () {
dataPointsK.push({ x:...