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:
<input id="txteq" type="text" value="-sin(2*x)" />
<br />
minimum value(x): <input id="txtmin" type="text" value="-3.14" />
<br />
maximum value(x): <input id="txtmax" type="text" value="3.14"/>
<br />
Precision (number of points): <input id="precision" type="text" value="1000"/>
<br />
Point size: <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
No comments:
Post a Comment