I am attempting to dynamically send array data to draw a chart. My goal is to receive input values [x and y] from the user using HTML. I have been successful in retrieving the data from HTML, but when I pass it to the chart, the format is not being recognized. I am referencing code from this website, where values are passed statically. However, I need to pass them dynamically. Any assistance would be greatly appreciated.
<html>
<head>
<title>JSChart</title>
<script type="text/javascript" src="jschatrs.js"></script>
</head>
<body>
<tr>
<td>
<input type="text" id="xText" name="xvalue">
</td>
<td>
<input type="text" id="yText" name="yvalue">
</td>
</tr>
<div id="graph">Loading graph...</div>
<button onclick="db()">Try it</button>
<script type="text/javascript">
function db() {
var p = document.getElementById("xText").value;
var q = document.getElementById("yText").value;
var myData = new Array([0, 0]);
myData.push([p, q]);
alert(myData);
var myChart = new JSChart('graph', 'line');
myChart.setDataArray(myData);
myChart.setLineColor('#8D9386');
myChart.setLineWidth(4);
myChart.setTitleColor('#7D7D7D');
myChart.setAxisColor('#9F0505');
myChart.setGridColor('#a4a4a4');
myChart.setAxisValuesColor('#333639');
myChart.setAxisNameColor('#333639');
myChart.setTextPaddingLeft(0);
myChart.draw();
}
</script>
</body>
</html>