Dynamic Chart using JSON & Regular Expression- CanvasJS JavaScript Charts

Dynamic Chart using JSON & Regular Expression - 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);
console.log(MyVal);

// converting to valid JSON
var myJson = MyVal.replace(/x/g, '"x"').replace(/y/g, '"y"').replace(/;/g, '');
console.log(myJson);
 
var obj = JSON.parse(myJson);
var chart = new CanvasJS.Chart("chartContainer",
{ 
	title: {
  	text : "Dynamic Chart using JSON & Regular Expression",
    titleWrap: true
  },        
	data: [
	{
		type: "column",
		dataPoints: obj
	}					
	]
});

chart.render();