# Simple Graphics Calculator Using the Visualization API and the Scatterchart

September 25, 2008

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" src="http://www.google.com/jsapi"></script>    <script type="text/javascript">      google.load("visualization", "1", {packages:["scatterchart"]});      function drawChart(equation,xmin,xmax, numPoints, pointSize) {        var data = new google.visualization.DataTable();        data.addColumn('number', 'x');        data.addColumn('number', 'y');        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>  </head>  <body>      equation: &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