Dynamic Chart from Input Field using JSON - CanvasJS JavaScript Charts

Dynamic Chart from Input Field using JSON - 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 -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<input type="text" id= "txtGrpValue" value = '[{"x": 1, "y": 10}, {"x": 2, "y": 13}, {"x": 3, "y": 18}, {"x": 4, "y": 20}, {"x": 5, "y": 17},{"x": 6, "y": 10}, {"x": 7, "y": 13}, {"x": 8, "y": 18}, {"x": 9, "y": 20}, {"x": 10, "y": 17}]'>

CSS

input {
  width: 100%
}

JavaScript

var MyVal = (document.getElementById('txtGrpValue').value);
var obj = JSON.parse(MyVal);

var chart = new CanvasJS.Chart("chartContainer",
{
	title: {
  	text : "Dynamic Chart from Input Field using JSON",
    titleWrap: true
  }, 
	data: [
	{
		type: "column",
		dataPoints: obj
	}					
	]
});

chart.render();