# Simple Graphics Calculator Using the Visualization API and the Scatterchart

SEP 25, 2008
By Nir Bar-Lev, Google Visualization Team

We recently came across a great use of the Visualization Platform. In fact, this is something that we never thought the platform would be used for.

Steve Aitken, a developer contributing to the Visualization Developer Group, created a simple graphics calculator for Javascript-supported math functions that plots functions using the Google Visualization Scatter Chart. Here is a screenshot of a simple calculation of -sin(2x):

Steve has been kind enough to share the code with us (even though it was originally written for his girlfriend). A slightly modified version is pasted below:
``````<html> <head>
<script type="text/javascript"
{packages:["scatterchart"]}); function drawChart(equation,xmin,xmax, numPoints,
pointSize) { var data = new google.visualization.DataTable();
data.addRows(numPoints); var step = (xmax-xmin) / (numPoints-1);
for(var i = 0; i < numPoints; i++) { var x = xmin + step *
i; data.setValue(i,0,x); with(Math) { var y =
eval(equation); } data.setValue(i,1,y); }
document.getElementById("chart_div").innerHTML = ""; var chart = new
google.visualization.ScatterChart( document.getElementById('chart_div')); chart.draw(data, {width: 600, height: 400, titleX: 'X', titleY: 'Y', legend:
'none', pointSize: pointSize}); } </script>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; <input id="txteq" type="text" value="-sin(2*x)" /> <br /> minimum value(x): &nbsp;<input id="txtmin"
type="text" value="-3.14" /> <br /> maximum value(x):
&nbsp;<input id="txtmax" type="text" value="3.14"/> <br
/> Precision (number of points): &nbsp;<input id="precision"
type="text" value="1000"/> <br /> Point size:
&nbsp; <input id="pointSize" type="text" value="2"/> <br
/> <input id="Button1" type="button" value="Draw Graph"
onclick="javascript:drawChart( document.getElementById('txteq').value,
parseFloat(document.getElementById('txtmin').value, 10),
parseFloat(document.getElementById('txtmax').value, 10),
parseInt(document.getElementById('precision').value, 10),
parseInt(document.getElementById('pointSize').value, 10))" />
<div id="chart_div"></div> </body></html>``````

We thank Steve for the inspiration and would love to see more creative uses of the platform from you.

The Visualization Team