Draw Functions

<?xml version="1.0" encoding="utf-8"?>
<ztmstudio>
   <ztml>
     <lang>
       <fr>
         <title><![CDATA[Draw Function]]>
</title>
         <srchlp><![CDATA[<DIV><b>Draw Function</DIV>
]]>
</srchlp>
</fr>
       <en>
         <title><![CDATA[Draw Function]]>
</title>
         <srchlp><![CDATA[<DIV><b>Draw Function</b></DIV>
]]>
</srchlp>
</en>
</lang>
</ztml>
   <html>
     <head><![CDATA[<title>Draw Functions</title>
<meta charset="utf-8" />
<meta name="viewport" id="viewport" content="width=device-width, user-scalable=no" />
<script type="text/javascript" src="https://ztmstudio.com/ZTmStudio.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>]]>
       <style><![CDATA[.z1{
height:30px;
background-color:#cccccc;
}
]]>
</style>
       <script><![CDATA[	call = function (event)	{
	var div=ZTmEvent(event).target;
	if (div.nodeName=='TD'){if(/ztmtitle/.test(div.className)) {ZTmHlp();return;}}
		if (event.type =='click' && div.nodeName=='INPUT' )   
		{
					if (/Draw/.test(div.value))
					{ 
					data = new google.visualization.DataTable();
					chart = new google.visualization.ScatterChart(sfDiv.item(0));
					drawVisualization2();
					}
					if (/Add/.test(div.value))
					{
					data.addColumn('number', 'Y2');						
					var j=0;
					var incr = (eval(sfInp.item(3).value)-eval(sfInp.item(1).value))/100.;
					for (var x = eval(sfInp.item(1).value); x < eval(sfInp.item(3).value); x= x+incr) {
					var y = eval(sfInp.item(2).value);
					data.setValue(j, ncol, y);
					j=j+1;
					}
					ncol=ncol+1;
					var options={titleX: 'X', titleY: 'Y', legend: 'none',
                    width:400, height: 400,lineSize:0,pointSize:2}
					//options = {cht: '-1', chfd:'0,x,0,11,0.1,sin(x)',width:400, height: 400}
					chart.draw(data,options );  
					}				
		}
		if (event.type =='click' && div.nodeName=='IMG')  
		{
		}
		if(div.nodeName=='TD'&&/ztmtitle/.test(div.className)) {ZTmHlp();return;}
}
function drawVisualization2() {
    // Create and populate the data table.
 
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');
	var incr = (eval(sfInp.item(3).value)-eval(sfInp.item(1).value))/100.;
    for (var x = eval(sfInp.item(1).value); x < eval(sfInp.item(3).value); x= x+incr) {
	var y = eval(sfInp.item(2).value);
	if (y >=-1000. && y <=1000.) data.addRow([eval(sfInp.item(0).value), y, null])
}
    // Create and draw the visualization.
	var options={titleX: 'X', titleY: sfInp.item(2).value, legend: 'none',
                      width:400, height: 400,lineSize:0,
					  backgroundColor:'#eeeeee',smoothLine:false,
					  pointSize:2}
	 //options = {cht: '-1', chfd:'0,x,0,11,0.1,sin(x)',width:400, height: 400}
    chart.draw(data,options 
			  );  
}
function drawVisualization() {
    // Create and populate the data table.
 
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y1');
	j=0;
	var incr = (eval(sfInp.item(3).value)-eval(sfInp.item(1).value))/100.;
    for (var x = eval(sfInp.item(1).value); x < eval(sfInp.item(3).value); x= x+incr) {
	var y = eval(sfInp.item(2).value);
	 data.addRows(1);
	 data.setValue(j, 0, x);
	 data.setValue(j, 1, y);
	 j=j+1;
    }
	var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
	var options ={titleX: 'X', titleY: sfInp.item(2).value, legend: 'none',
                      width:400, height: 400,lineSize:0,
					  backgroundColor:'#eeeeee',smoothLine:false,
					  pointSize:2}
 //options = {cht: '-1', chfd:'0,x,0,11,0.1,sin(x)*50%2B50',width:400, height: 400}

// Create and draw the visualization.
    chart.draw(data, options
			  );  
}
function ZTm(){
ZTmlInit();
sfDiv =document.getElementsByTagName('DIV');
sfInp =document.getElementsByTagName('INPUT');
data = null;
chart = null;
ncol=2;
google.charts.load('current', {'packages':['corechart']});
document.onclick=call;
}
]]>
</script>
</head>
     <body onload="ZTm();"><![CDATA[<input value="x" size="8" type="hidden">Xmin <input type="text" value="-10" size="4"><br>
Y = <input type="text" value="x*x" size="8" >Xmax <input type="text" value="+10" size="4"><br>
<div><b>Draw Function</b></div>
<input class="z1" type="button" value="Draw">
<input type="button" class="z1" value="Add">
	]]>
</body>
</html>
</ztmstudio>