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"
      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


posted in:
Previous
Next