<?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>Sat, 05 Dec 2009 10:37:54 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</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 values of the graph were plotted with the y-axis having a maximum value of 4095. [...]]]></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"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</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 &lt;alex [at] alexmckenzie [dot] info&gt;
 */</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 &lt;alex [at] alexmckenzie [dot] info&gt;
 */</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: #000000; font-weight: bold;">?&gt;</span><span style="color: #339933;">&lt;/</span>alex<span style="color: #339933;">&gt;</span></pre></td></tr></table></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&#038;chs=200x150&#038;chd=e:DIEsDID6FeCWBk" alt="No scaling" /> <img src="http://chart.apis.google.com/chart?cht=bvs&#038;chs=200x150&#038;chd=e:kk22kktt..bbSS" alt="Scaling" /></p>
<p>The graphs above were generated with the following code:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td 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></td></tr></table></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>
