site/jpgraph/docs/chunkhtml/ch32.html

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Chapter 32. Synchronized Y-axis</title><link rel="stylesheet" type="text/css" href="manual.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.0"><link rel="home" href="index.html" title="JpGraph Manual"><link rel="up" href="pt08.html" title="Part VIII. Case studies"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Chapter 32. Synchronized Y-axis</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Part VIII. Case studies</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="chapter" title="Chapter 32. Synchronized Y-axis"><div class="titlepage"><div><div><h2 class="title"><a name="id2619882"></a>Chapter 32. Synchronized Y-axis</h2></div></div></div><div class="toc"><p><b>Table of Contents</b></p><dl><dt><span class="sect1"><a href="ch32.html#id2619942">32.1. Creating two scales</a></span></dt></dl></div>
        
        <p>The purpose of this chapter is to show how one can have one set of data displayed with
            two different scales that are still synchronized meaning that the tick marks are at
            identical positions.</p>
        <p> One classic example of when this can be useful is to show temperature in both Celsius
            and Fahrenheit. <a class="xref" href="ch32.html#fig.y2synch" title="Figure 32.1. Synchronized y and y2 scales (y2synch.php)">Figure 32.1. Synchronized y and y2 scales <code class="uri"><a class="uri" href="example_src/y2synch.html" target="_top">(<code class="filename">y2synch.php</code>)</a></code> </a> below illustrates what we would like
            to accomplish. </p>
        <p>
            </p><div class="figure"><a name="fig.y2synch"></a><p class="title"><b>Figure 32.1. Synchronized y and y2 scales <code class="uri"><a class="uri" href="example_src/y2synch.html" target="_top">(<code class="filename">y2synch.php</code>)</a></code> </b></p><div class="figure-contents">  <span class="inlinemediaobject"><img src="images/y2synch.png" alt="Synchronized y and y2 scales (y2synch.php)"></span> </div></div><p><br class="figure-break">
        </p>
        <div class="sect1" title="Creating two scales"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2619942"></a>Creating two scales</h2></div></div></div>
            
            <p>Normally the auto scaling puts tick marks at "nice" positions that for example are
                multiples of 5,2,10 and so on. This would mean that it seems like the graph in <a class="xref" href="ch32.html#fig.y2synch" title="Figure 32.1. Synchronized y and y2 scales (y2synch.php)">Figure 32.1. Synchronized y and y2 scales <code class="uri"><a class="uri" href="example_src/y2synch.html" target="_top">(<code class="filename">y2synch.php</code>)</a></code> </a> with tick positions at 59 F and 68 F can not be auto
                scaled. </p>
            <p>The simplest method of creating two scales as in the example above is to add a
                secondary Y-axis, add the same plot to that axis. This would then mean that the two
                axes would be identical. The magic now happens in the last step when we add a format
                callback method to the second Y-axis. This format callback will be applied to each
                label. All we have to do now is create a callback function that does the proper
                scale conversion.</p>
            <p>This way also means that we have too chose one of the scales as the "master" which
                will be auto scaled with tick positions at "nice" intervals. </p>
            <p>
                </p><div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
                    <p>For the second scale one can add the same plot or one could create a new
                        plot from the same data set. If the data set to be plotted is very large it
                        can be advantageous to create a new plot and set the line weight to 0
                        (zero). This way the line will not actually be plotted and that plot time is
                        eliminated. </p>
                </div><p>
            </p>
            <p>The script to create the graph in <a class="xref" href="ch32.html#fig.y2synch" title="Figure 32.1. Synchronized y and y2 scales (y2synch.php)">Figure 32.1. Synchronized y and y2 scales <code class="uri"><a class="uri" href="example_src/y2synch.html" target="_top">(<code class="filename">y2synch.php</code>)</a></code> </a> is given
                below. </p>
            <p>
                </p><div class="example"><a name="example.y2synch"></a><p class="title"><b>Example 32.1.  (<code class="filename">y2synch.php</code>) </b></p><div class="example-contents">  <div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code"> </span><span class="hl-comment">//</span><span class="hl-comment"> content=&quot;text/plain; charset=utf-8&quot;</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">require_once</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">jpgraph/jpgraph.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">require_once</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">jpgraph/jpgraph_line.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">require_once</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">jpgraph/jpgraph_bar.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
 
 
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">toFahrenheit</span><span class="hl-brackets">(</span><span class="hl-var">$aVal</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
    </span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-identifier">round</span><span class="hl-brackets">(</span><span class="hl-brackets">(</span><span class="hl-var">$aVal</span><span class="hl-code">*</span><span class="hl-number">9</span><span class="hl-code">/</span><span class="hl-number">5</span><span class="hl-brackets">)</span><span class="hl-code">+</span><span class="hl-number">32</span><span class="hl-code">,</span><span class="hl-number">2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
 
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">toCelcius</span><span class="hl-brackets">(</span><span class="hl-var">$aVal</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
    </span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-identifier">round</span><span class="hl-brackets">(</span><span class="hl-brackets">(</span><span class="hl-var">$aVal</span><span class="hl-code">-</span><span class="hl-number">32</span><span class="hl-brackets">)</span><span class="hl-code">*</span><span class="hl-number">5</span><span class="hl-code">/</span><span class="hl-number">9</span><span class="hl-code">,</span><span class="hl-number">2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
 
 
</span><span class="hl-var">$datay</span><span class="hl-code"> =</span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-number">2</span><span class="hl-code">,</span><span class="hl-number">3</span><span class="hl-code">,</span><span class="hl-number">8</span><span class="hl-code">,</span><span class="hl-number">19</span><span class="hl-code">,</span><span class="hl-number">7</span><span class="hl-code">,</span><span class="hl-number">17</span><span class="hl-code">,</span><span class="hl-number">6</span><span class="hl-code">,</span><span class="hl-number">22</span><span class="hl-brackets">)</span><span class="hl-code">;
 
</span><span class="hl-comment">//</span><span class="hl-comment"> Create the graph. </span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Graph</span><span class="hl-brackets">(</span><span class="hl-number">400</span><span class="hl-code">,</span><span class="hl-number">280</span><span class="hl-brackets">)</span><span class="hl-code">;
 
</span><span class="hl-comment">//</span><span class="hl-comment"> Slightly bigger margins than default to make room for titles</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMargin</span><span class="hl-brackets">(</span><span class="hl-number">50</span><span class="hl-code">,</span><span class="hl-number">60</span><span class="hl-code">,</span><span class="hl-number">40</span><span class="hl-code">,</span><span class="hl-number">45</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMarginColor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">white</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
 
 
</span><span class="hl-comment">//</span><span class="hl-comment"> Setup the scales for X,Y and Y2 axis</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetScale</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">intlin</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-comment">//</span><span class="hl-comment"> X and Y axis</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetY2Scale</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">lin</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-comment">//</span><span class="hl-comment"> Y2 axis</span><span class="hl-comment"></span><span class="hl-code">
 
</span><span class="hl-comment">//</span><span class="hl-comment"> Overall graph title</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">Synchronized Y &amp; Y2 scales</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_BOLD</span><span class="hl-code">,</span><span class="hl-number">12</span><span class="hl-brackets">)</span><span class="hl-code">;
 
</span><span class="hl-comment">//</span><span class="hl-comment"> Title for X-axis</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">xaxis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">Measurement</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">xaxis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMargin</span><span class="hl-brackets">(</span><span class="hl-number">5</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">xaxis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_NORMAL</span><span class="hl-code">,</span><span class="hl-number">11</span><span class="hl-brackets">)</span><span class="hl-code">;
 
</span><span class="hl-comment">//</span><span class="hl-comment"> Create Y data set </span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$lplot</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">LinePlot</span><span class="hl-brackets">(</span><span class="hl-var">$datay</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">yaxis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">Celcius (C)</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">yaxis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMargin</span><span class="hl-brackets">(</span><span class="hl-number">5</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">yaxis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_NORMAL</span><span class="hl-code">,</span><span class="hl-number">11</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> ... and add the plot to the Y-axis</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$lplot</span><span class="hl-brackets">)</span><span class="hl-code">;
 
</span><span class="hl-comment">//</span><span class="hl-comment"> Create Y2 scale data set </span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$l2plot</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">LinePlot</span><span class="hl-brackets">(</span><span class="hl-var">$datay</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$l2plot</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetWeight</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">y2axis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">Fahrenheit (F)</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">y2axis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMargin</span><span class="hl-brackets">(</span><span class="hl-number">5</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-comment">//</span><span class="hl-comment"> Some extra margin to clear labels</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">y2axis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_NORMAL</span><span class="hl-code">,</span><span class="hl-number">11</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">y2axis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetLabelFormatCallback</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">toFahrenheit</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">y2axis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">navy</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
 
</span><span class="hl-comment">//</span><span class="hl-comment"> ... and add the plot to the Y2-axis</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">AddY2</span><span class="hl-brackets">(</span><span class="hl-var">$l2plot</span><span class="hl-brackets">)</span><span class="hl-code">;
 
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div></div></div><p><br class="example-break"> 
            </p>
            <p>The same principle will also work with othrr plot variants, for example bar plots.
                By making the first plot an instance of <code class="code">class BarPlot</code> the graph in
                    <a class="xref" href="ch32.html#fig.y2synch2" title="Figure 32.2. Using a barplot with two different scales (y2synch2.php)">Figure 32.2. Using a barplot with two different scales <code class="uri"><a class="uri" href="example_src/y2synch2.html" target="_top">(<code class="filename">y2synch2.php</code>)</a></code> </a> can be created. </p>
            <p>
                </p><div class="figure"><a name="fig.y2synch2"></a><p class="title"><b>Figure 32.2. Using a barplot with two different scales <code class="uri"><a class="uri" href="example_src/y2synch2.html" target="_top">(<code class="filename">y2synch2.php</code>)</a></code> </b></p><div class="figure-contents">  <span class="inlinemediaobject"><img src="images/y2synch2.png" alt="Using a barplot with two different scales (y2synch2.php)"></span> </div></div><p><br class="figure-break">
            </p>
        </div>
    </div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"><a accesskey="u" href="pt08.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>