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>Datum</span>

<input id="date" type="date" placeholder="Datum eingeben"> 
<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: new Date(2010,0,3), y: 180 },
				{ x: new Date(2010,0,5), y: 182 },
				{ x: new Date(2010,0,7), y: 182 },
				{ x: new Date(2010,0,9), y: 185 },
				{ x: new Date(2010,0,11), y: 187 },
				{ x: new Date(2010,0,13), y: 185 },
				{ x: new Date(2010,0,15), y: 190 },
				{ x: new Date(2010,0,17), y: 190 },
				{ x: new Date(2010,0,19), y: 192 },
				{ x: new Date(2010,0,21), y: 192 },
				{ x: new Date(2010,0,23), y: 195 },
				{ x: new Date(2010,0,24), y: 200 }];
	
	var dataPointsB = [{ x: new Date(2010,0,3), y: 105 },
				{ x: new Date(2010,0,5), y: 105 },
				{ x: new Date(2010,0,7), y: 105 },
				{ x: new Date(2010,0,9), y: 107.5 },
				{ x: new Date(2010,0,11), y: 110 },
				{ x: new Date(2010,0,13), y: 110 },
				{ x: new Date(2010,0,15), y: 107.5 },
				{ x: new Date(2010,0,17), y: 110 },
				{ x: new Date(2010,0,19), y: 112.5 },
				{ x: new Date(2010,0,21), y: 115 },
				{ x: new Date(2010,0,23), y: 116 }];
		var chart = new CanvasJS.Chart("chartContainer",
		{

			title:{
				text: "Trainingsfortschritt",
				fontSize: 30
			},
                        animationEnabled: true,
			axisX:{
				title: "Training",
				gridColor: "Black",
				tickColor: "black",
				valueFormatString: "DD/MMM"  
			    

			},                        
                        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",
   ...