<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	>

<channel>
	<title>Pero Pejovic</title>
	<atom:link href="http://p3ro.zxq.net/feed/" rel="self" type="application/rss+xml" />
	<link>http://p3ro.zxq.net</link>
	<description>Java Developer</description>
	<pubDate>Wed, 16 Sep 2009 15:17:48 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.5.1</generator>
	<language>en</language>
			<item>
		<title>Experiments with 00 JavaScript, Closures and Google Charts</title>
		<link>http://p3ro.zxq.net/2008/08/experiments-with-00-javascript-closures-and-google-charts-again/</link>
		<comments>http://p3ro.zxq.net/2008/08/experiments-with-00-javascript-closures-and-google-charts-again/#comments</comments>
		<pubDate>Thu, 07 Aug 2008 12:27:00 +0000</pubDate>
		<dc:creator>Pero</dc:creator>
		
		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[Software Development]]></category>

		<guid isPermaLink="false">http://p3ro.zxq.net/?p=23</guid>
		<description><![CDATA[The Google Chart API dynamically generates a variety of chart types by returning a PNG-format image in response to a given URL. Within the URL you can specify the various attributes of the chart such as the chart data set, image size, title and axis labels. For example click the below URL which will generate [...]]]></description>
			<content:encoded><![CDATA[<p>The <a href="http://code.google.com/apis/chart/">Google Chart API</a> dynamically generates a variety of chart types by returning a PNG-format image in response to a given URL. Within the URL you can specify the various attributes of the chart such as the chart data set, image size, title and axis labels. For example click the below URL which will generate a pie chart (<code>cht=p3</code>) with a 60% - 40% split (<code>chd=t:60,40</code>):</p>
<p><a href="http://chart.apis.google.com/chart?cht=p3&#038;chd=t:60,40&#038;chs=250x100&#038;chl=Hello|World"><code>http://chart.apis.google.com/chart?<strong>cht=p3</strong>&#038;<strong>chd=t:60,40</strong>&#038;chs=250&#215;100&#038;chl=Hello|World</code></a></p>
<p>Having played with the API a bit further I wanted the capability to dynamically generate a data set for a given function e.g. f(x) = log(x) and construct the corresponding Google Chart API URL to plot the graph. I&#8217;ve achieved this using JavaScript and the below graph demonstrates the code in use. Clicking the links below the graph fires an event that will generate the data set and URL for the given function. The image source is then set to the URL. <a href="#" onClick="document.graph.src=googleIt(wikiFunction());return false;">Wikipedia</a> is a representation of an example function illustrated on the Wikipedia <a href="http://en.wikipedia.org/wiki/Function_%28mathematics%29">Function (mathematics) page</a>.</br></p>
<div align="center"><img name="graph"/></div>
<p></br><script type="text/javascript" src="/wp-includes/js/myjs/graphing.js"></script><script type="text/javascript">var defaultMinX=-3;var defaultMaxX=10;var defaultInterval=0.1;var powFunction = graphDataSetBuilder(defaultMinX, defaultMaxX, defaultInterval, function(x){return Math.pow(2,x)});var logFunction = graphDataSetBuilder(0, defaultMaxX, defaultInterval, function (x) {return Math.log(x)});var sinFunction = graphDataSetBuilder(defaultMinX, defaultMaxX, defaultInterval, function(x){return Math.sin(x)});var cosFunction = graphDataSetBuilder(defaultMinX, defaultMaxX, defaultInterval, function(x){return Math.cos(x)});var tanFunction = graphDataSetBuilder(defaultMinX, defaultMaxX, defaultInterval, function(x){return Math.tan(x)});var wikiFunction = graphDataSetBuilder(-1, 1.5, 0.03, function(x){return (((4*Math.pow(x,3))-(6*Math.pow(x,2))+1)*Math.sqrt(x+1))/(3-x)});document.graph.src=googleIt(powFunction());function generateGraph(txt) {var graphFunction = graphDataSetBuilder(-10, 10, 0.2, function(x){return eval(txt)});document.graph.src=googleIt(graphFunction());}</script>
<p style="text-align: center;"><a href="#" onClick="document.graph.src=googleIt(logFunction());return false;">f(x) = log(x)</a> | <a href="#" onClick="document.graph.src=googleIt(sinFunction());return false;">f(x) = sin(x)</a> | <a href="#" onClick="document.graph.src=googleIt(cosFunction());return false;">f(x) = cos(x)</a> | <a href="#" onClick="document.graph.src=googleIt(powFunction());return false;">f(x) = 2^x</a> | <a href="#" onClick="document.graph.src=googleIt(wikiFunction());return false;">Wikipedia</a></p>
<p><span id="more-23"></span></p>
<p>The JavaScript API is used as below (e.g. for the log graph). I&#8217;ll post comment on the rest of the code soon, but in meantime the full source code can be found here: <a href="/wp-includes/js/myjs/graphing.js">/wp-includes/js/myjs/graphing.js</a>. The <code>graphDataSetBuilder</code> function returns a closure which is only invoked when the corresponding link for the function is hit. This allows you to provide parameters for the function prior to it being executed. The usage here is almost the same as the <a href="http://www.jibbering.com/faq/faq_notes/closures.html#clSto">setTimeout</a> example on jibbering.com</p>
<pre name="code" class="js">
//Prepare a dataset for the given min X value, max X value,
//interval and function
var logDataSet = graphDataSetBuilder(0, 10,
   1,function (x) {return Math.log(x)});

//Generate Google Chart URL using googleIt() function, passing
//in the dataset above. Set the image source to the URL
document.graph.src=googleIt(logDataSet());</pre>
<p></br></p>
]]></content:encoded>
			<wfw:commentRss>http://p3ro.zxq.net/2008/08/experiments-with-00-javascript-closures-and-google-charts-again/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
