Line Chart from English Alphabets given by User in Input field - CanvasJS JavaScript Charts

Line Chart from English Alphabets given by User in Input field - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
Name: <input type="text" id="name" value="CanvasJS Charts" placeholder="Enter Name">
<input type="button" id="renderChart" value="Render Chart">
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title: {
  	text: "Line Chart from English Alphabets"
  },
	data: [
	{
		type: "line",
		dataPoints: []
	}					
	]
});

document.getElementById("renderChart").addEventListener("click", function(e) {
	var dps = [];	
	var name = document.getElementById("name").value;
  var label, yValue;
  for(var i = 0; i < name.length; i++){
  		label = name.charAt(i);
  		yValue = label === " " ? null : (name.charCodeAt(i) - (label.match(/[a-z]/) ? 96 : 64));
      dps.push({ label: label, y: yValue})
  }
  chart.options.data[0].dataPoints = dps;
  chart.render();
});