<?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"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Alex M's Blog &#187; Graph Scaling</title>
	<atom:link href="http://blog.alexmckenzie.info/tag/graph-scaling/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.alexmckenzie.info</link>
	<description>Somewhat useful things</description>
	<lastBuildDate>Tue, 19 Jul 2011 12:01:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Google Charts API Extended Encode Scaling</title>
		<link>http://blog.alexmckenzie.info/2009/09/17/google-charts-api-extended-encode-scaling/</link>
		<comments>http://blog.alexmckenzie.info/2009/09/17/google-charts-api-extended-encode-scaling/#comments</comments>
		<pubDate>Thu, 17 Sep 2009 04:51:42 +0000</pubDate>
		<dc:creator>Alex M</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Google Charts API]]></category>
		<category><![CDATA[Graph Scaling]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://blog.alexmckenzie.info/?p=36</guid>
		<description><![CDATA[I&#8217;ve recently been playing with the Google Charts API for a project, and ran into a problem with graph scaling when using extended encoding. The problem was that there was no scaling on the graph when using extended encoding, so &#8230; <a href="http://blog.alexmckenzie.info/2009/09/17/google-charts-api-extended-encode-scaling/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve recently been playing with the <a href="http://code.google.com/apis/chart/" target="_blank">Google Charts API</a> for a project, and ran into a problem with graph scaling when using extended encoding.</p>
<p>The problem was that there was no scaling on the graph when using extended encoding, so values of the graph were plotted with the y-axis having a maximum value of 4095.</p>
<p>This meant that smaller values look insignificant on the graph, not to mention all the wasted space. The solution I came up with is to scale the data so it fills the chart appropriately.</p>
<p>The PHP code I came up with is below, and also extends on a function written by <a href="http://bendodson.com/blog/2008/02/28/google-extended-encoding-made-easy/" target="_blank">Ben Dodson</a>.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> ?php
<span style="color: #666666; font-style: italic;">/*
 * Returns a scaled value.
 *
 * @param    value     Int to scale
 * @param    max       Maximum int in array to calculate scale value
 * @param    scale     The int to scale value to
 * @return             Scaled value
 * @author             Alex McKenzie 
 */</span>
<span style="color: #000000; font-weight: bold;">function</span> scale_value<span style="color: #009900;">&#40;</span><span style="color: #000088;">$value</span><span style="color: #339933;">,</span> <span style="color: #000088;">$max</span><span style="color: #339933;">,</span> <span style="color: #000088;">$scale</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">4095</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$value</span><span style="color: #339933;">/</span><span style="color: #000088;">$max</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #000088;">$scale</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009933; font-style: italic;">/**
 * Retunrs an extended encoded string for use with Google Charts API.
 *
 * Modified function - original by Ben Dodson (http://bendodson.com/blog/2008/02/28/google-extended-encoding-made-easy/).
 *
 * @param    array     Array of values to encode
 * @param    scale     Whether to scale the values
 * @return             Extended encoded string
 * @author             Alex McKenzie [alex [at] alexmckenzie [dot] info]
 */</span>
<span style="color: #000000; font-weight: bold;">function</span> array_to_extended_encoding<span style="color: #009900;">&#40;</span><span style="color: #000088;">$array</span><span style="color: #339933;">,</span> <span style="color: #000088;">$scale</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'yes'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000088;">$characters</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.'</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// Scale values before encoding if required.</span>
    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$scale</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">'yes'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000088;">$max</span> <span style="color: #339933;">=</span> <span style="color: #990000;">max</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$array</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000088;">$scaled_array</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$array</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$value</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #990000;">array_push</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$scaled_array</span><span style="color: #339933;">,</span> scale_value<span style="color: #009900;">&#40;</span><span style="color: #000088;">$value</span><span style="color: #339933;">,</span> <span style="color: #000088;">$max</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #000088;">$array</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$scaled_array</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// Encode values in array.</span>
    <span style="color: #000088;">$encoding</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$array</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$value</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000088;">$first</span> <span style="color: #339933;">=</span> <span style="color: #990000;">floor</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$value</span> <span style="color: #339933;">/</span> <span style="color: #cc66cc;">64</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000088;">$second</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$value</span> <span style="color: #339933;">%</span> <span style="color: #cc66cc;">64</span><span style="color: #339933;">;</span>
        <span style="color: #000088;">$encoding</span> <span style="color: #339933;">.=</span> <span style="color: #000088;">$characters</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$first</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$characters</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$second</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #b1b100;">return</span> <span style="color: #000088;">$encoding</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>?<span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span></pre></div></div>

<p>Now using some sample data, we can see the difference scaling makes in the following two examples:</p>
<p><img src="http://chart.apis.google.com/chart?cht=bvs&amp;chs=200x150&amp;chd=e:DIEsDID6FeCWBk" alt="No scaling" /> <img src="http://chart.apis.google.com/chart?cht=bvs&amp;chs=200x150&amp;chd=e:kk22kktt..bbSS" alt="Scaling" /></p>
<p>The graphs above were generated with the following code:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt; ?php
$graph = array(200,300,200,250,350,150,100);
?&gt;
&nbsp;
&lt;img src=&quot;http://chart.apis.google.com/chart?cht=bvs&amp;chs=200x150&amp;chd=e:<span style="color: #000000; font-weight: bold;">&lt;?=</span>array_to_extended_encoding<span style="color: #009900;">&#40;</span><span style="color: #000088;">$graph</span><span style="color: #339933;">,</span> <span style="color: #000088;">$scale</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'no'</span><span style="color: #009900;">&#41;</span>?<span style="color: #339933;">/&gt;</span><span style="color: #0000ff;">&quot; alt=&quot;</span>No scalling<span style="color: #0000ff;">&quot; /&gt;
&lt;img src=&quot;</span>http<span style="color: #339933;">:</span><span style="color: #666666; font-style: italic;">//chart.apis.google.com/chart?cht=bvs&amp;chs=200x150&amp;chd=e:&lt;?=array_to_extended_encoding($graph)?/&gt;&quot; alt=&quot;Scalling&quot; /&gt;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.alexmckenzie.info/2009/09/17/google-charts-api-extended-encode-scaling/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

