PageRenderTime 28ms CodeModel.GetById 16ms RepoModel.GetById 1ms app.codeStats 0ms

/FusionCharts/Contents/PHPClassAPI/CombinationChart.html

https://bitbucket.org/royrutto/climatepal
HTML | 266 lines | 260 code | 6 blank | 0 comment | 0 complexity | b6edd7a933e275230423e39ebbfc22bf MD5 | raw file
    

  1. <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. 

  5. <title>FusionCharts v3 Documentation</title>
    6. 

  6. <link rel="stylesheet" type="text/css" href="../Style.css">
    7. 

  7. </head>
    8. 

  8. 

  9. <body>
    10. 

  10. <table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
    11. 

  11.   <tr> 
    12. 

  12.     <td><h2 class="pageHeader">FusionCharts PHP Class API &gt; Creating Combination Chart </h2></td>
    13. 

  13.   </tr>
    14. 

  14.   
    15. 

  15. 

  16.   <tr>
    17. 

  17.     <td valign="top" class="text"><p>Combination chart has two Y-axis. The Y-axis on the left  hand side is called Primary Y-Axis and that on the right hand side is called  Secondary Y-Axis. Combination charts are used when we intend to compare two  different types of data on the same chart, e.g., if we want to plot Weekly  Sales Revenue of two consecutive months and total units sold on the same chart,  we have to use a Combination Chart. See the image below and note that the two Y-axis are representing different data units. </p>    </td>
    18. 

  18.   </tr>
    19. 

  19.   <tr>
    20. 

  20.     <td valign="top" class="text">&nbsp;</td>
    21. 

  21.   </tr>
    22. 

  22.   <tr>
    23. 

  23.     <td valign="top" class="text"><img src="../Images/ClassImages/ClassCombination.jpg" width="436" height="348" class="imageBorder" /></td>
    24. 

  24.   </tr>
    25. 

  25.   <tr>
    26. 

  26.     <td valign="top" class="text">&nbsp;</td>
    27. 

  27.   </tr>
    28. 

  28.   <tr>
    29. 

  29.     <td valign="top" class="text">Let's add some more data to the existing Table for Multi-series chart. We would add a column that tabulates Total Qunatity Sales. </td>
    30. 

  30.   </tr>
    31. 

  31.   <tr>
    32. 

  32.     <td valign="top" class="text">&nbsp;</td>
    33. 

  33.   </tr>
    34. 

  34.   <tr>
    35. 

  35.     <td valign="top" class="text">
    36. 

  36.       <table width="457" cellspacing="0" cellpadding="5" class="text" style="border:1px solid #cccccc;">
    37. 

  37.         <tr >
    38. 

  38.           <td width="25%" height="24" class="borderBottom"><strong>Week</strong></td>
    39. 

  39.           <td width="35%"  class="borderBottom">
    40. 

  40.             <div align="right"><strong>Current Month </strong></div>
    41. 

  41.           </td>
    42. 

  42.           <td width="40%" class="borderBottom">
    43. 

  43.             <div align="right"><strong>Previous Month </strong></div>
    44. 

  44.           </td>
    45. 

  45.           <td width="40%" align="right" class="borderBottom">&nbsp;</td>
    46. 

  46.         </tr>
    47. 

  47.         <tr>
    48. 

  48.           <td height="22" class="borderBottom">&nbsp;</td>
    49. 

  49.           <td class="borderBottom">
    50. 

  50.             <div align="right"><strong>Sales </strong></div>
    51. 

  51.           </td>
    52. 

  52.           <td class="borderBottom">
    53. 

  53.             <div align="right"><strong>Sales </strong></div>
    54. 

  54.           </td>
    55. 

  55.           <td align="right" class="borderBottom"><strong>Total Quantity </strong></td>
    56. 

  56.         </tr>
    57. 

  57.         <tr>
    58. 

  58.           <td height="25" class="borderBottom">Week 1 </td>
    59. 

  59.           <td class="borderBottom">
    60. 

  60.             <div align="right">$40800</div>
    61. 

  61.           </td>
    62. 

  62.           <td class="borderBottom">
    63. 

  63.             <div align="right">$38300</div>
    64. 

  64.           </td>
    65. 

  65.           <td align="right" class="borderBottom">64</td>
    66. 

  66.         </tr>
    67. 

  67.         <tr>
    68. 

  68.           <td height="25" class="borderBottom">Week 2 </td>
    69. 

  69.           <td class="borderBottom">
    70. 

  70.             <div align="right">$31400</div>
    71. 

  71.           </td>
    72. 

  72.           <td class="borderBottom">
    73. 

  73.             <div align="right">$28400</div>
    74. 

  74.           </td>
    75. 

  75.           <td align="right" class="borderBottom">70</td>
    76. 

  76.         </tr>
    77. 

  77.         <tr>
    78. 

  78.           <td height="25" class="borderBottom">Week 3 </td>
    79. 

  79.           <td class="borderBottom">
    80. 

  80.             <div align="right">$26700</div>
    81. 

  81.           </td>
    82. 

  82.           <td class="borderBottom">
    83. 

  83.             <div align="right">$15700</div>
    84. 

  84.           </td>
    85. 

  85.           <td align="right" class="borderBottom">52</td>
    86. 

  86.         </tr>
    87. 

  87.         <tr>
    88. 

  88.           <td height="25">Week 4 </td>
    89. 

  89.           <td>
    90. 

  90.             <div align="right">$54400</div>
    91. 

  91.           </td>
    92. 

  92.           <td>
    93. 

  93.             <div align="right">$48100</div>
    94. 

  94.           </td>
    95. 

  95.           <td align="right">81</td>
    96. 

  96.         </tr>
    97. 

  97.       </table>
    98. 

  98.     </td>
    99. 

  99.   </tr>
    100. 

  100.   <tr>
    101. 

  101.      <td valign="top" class="text">&nbsp;</td>
    102. 

  102.   </tr>
    103. 

  103.   <tr>
    104. 

  104.      <td valign="top" class="highlightBlock"><strong>Before you go further with this page, we recommend you to please see   the previous pages &quot;Creating First Chart &quot; &amp; &quot;Creating Multi-series chart&quot;  as we start off from concepts explained in   that page. </strong></td>
    105. 

  105.   </tr>
    106. 

  106.   <tr>
    107. 

  107.      <td valign="top" class="text">&nbsp;</td>
    108. 

  108.   </tr>
    109. 

  109.   <tr>
    110. 

  110.     <td valign="top" class="text"><p>Here is the code that builds up this Combination chart:</p></td>
    111. 

  111.   </tr>
    112. 

  112.   <tr>
    113. 

  113.     <td valign="top" class="text">&nbsp;</td>
    114. 

  114.   </tr>
    115. 

  115.   <tr>
    116. 

  116.     <td valign="top" class="codeBlock"><p>&lt;?php</p>
    117. 

  117.       <p> <span class="codeComment">&nbsp;&nbsp; # Include FusionCharts PHP Class</span><br />
    118. 

  118.       &nbsp;&nbsp; include('../Class/FusionCharts_Gen.php');</p>
    119. 

  119.       <p> <span class="codeComment">&nbsp;&nbsp; # Create Column 3D + Line Dual Y-Axis Combination Chart </span><br />
    120. 

  120.         &nbsp;&nbsp; $FC = new FusionCharts(&quot;MSColumn3DLineDY&quot;,&quot;350&quot;,&quot;300&quot;); <br />
    121. 

  121.         <br />
    122. 

  122.         <span class="codeComment">&nbsp;&nbsp; # Set the relative path of the swf file</span><br />
    123. 

  123.         &nbsp;&nbsp; $FC-&gt;setSWFPath(&quot;../FusionCharts/&quot;);<br />
    124. 

  124.   <br />
    125. 

  125.         <span class="codeComment">&nbsp;&nbsp; #  Store chart attributes in a variable </span><br />
    126. 

  126.       &nbsp;&nbsp; $strParam=&quot;caption=Weekly Sales;subcaption=Comparison;xAxisName=Week;<strong>pYAxisName=Revenue;sYAxisName=Total Quantity;</strong>numberPrefix=$;<strong>sNumberSuffix</strong>= U&quot;;</p>
    127. 

  127.       <p> <span class="codeComment">&nbsp;&nbsp; #  Set chart attributes</span><br />
    128. 

  128.         &nbsp;&nbsp; $FC-&gt;setChartParams($strParam);<br />
    129. 

  129.           <br />
    130. 

  130.           <span class="codeComment">&nbsp;&nbsp; # Add  category names</span><br />
    131. 

  131.         &nbsp;&nbsp; $FC-&gt;addCategory(&quot;Week 1&quot;);<br />
    132. 

  132.         &nbsp;&nbsp; $FC-&gt;addCategory(&quot;Week 2&quot;);<br />
    133. 

  133.         &nbsp;&nbsp; $FC-&gt;addCategory(&quot;Week 3&quot;);<br />
    134. 

  134.       &nbsp;&nbsp; $FC-&gt;addCategory(&quot;Week 4&quot;);</p>
    135. 

  135.       <p> <span class="codeComment">&nbsp;&nbsp; # Add a new dataset with dataset parameters </span><br />
    136. 

  136.         &nbsp;&nbsp; $FC-&gt;addDataset(&quot;This Month&quot;,&quot;showValues=0&quot;); <br />
    137. 

  137.         <span class="codeComment">&nbsp;&nbsp; # Add chart data for the above dataset</span><br />
    138. 

  138.         &nbsp;&nbsp; $FC-&gt;addChartData(&quot;40800&quot;);<br />
    139. 

  139.         &nbsp;&nbsp; $FC-&gt;addChartData(&quot;31400&quot;);<br />
    140. 

  140.         &nbsp;&nbsp; $FC-&gt;addChartData(&quot;26700&quot;);<br />
    141. 

  141.       &nbsp;&nbsp; $FC-&gt;addChartData(&quot;54400&quot;);</p>
    142. 

  142.       <p> <span class="codeComment">&nbsp;&nbsp; # Add aother dataset with dataset parameters </span><br />
    143. 

  143.         &nbsp;&nbsp; $FC-&gt;addDataset(&quot;Previous Month&quot;,&quot;showValues=0&quot;); <br />
    144. 

  144.         <span class="codeComment">&nbsp;&nbsp; # Add chart data for the second dataset</span><br />
    145. 

  145.         &nbsp;&nbsp; $FC-&gt;addChartData(&quot;38300&quot;);<br />
    146. 

  146.         &nbsp;&nbsp; $FC-&gt;addChartData(&quot;28400&quot;);<br />
    147. 

  147.         &nbsp;&nbsp; $FC-&gt;addChartData(&quot;15700&quot;);<br />
    148. 

  148.       &nbsp;&nbsp; $FC-&gt;addChartData(&quot;48100&quot;);</p>
    149. 

  149.       <p> <span class="codeComment"><strong>&nbsp;&nbsp; </strong># Add third dataset for the secondary axis</span><br />
    150. 

  150.         &nbsp;&nbsp; $FC-&gt;addDataset(&quot;Total Quantity&quot;,&quot;<strong>parentYAxis=S</strong>&quot;); <br />
    151. 

  151.         <span class="codeComment">&nbsp;&nbsp; # Add  data values</span> <span class="codeComment">for the secondary axis</span> <br />
    152. 

  152.         &nbsp;&nbsp; $FC-&gt;addChartData(&quot;64&quot;);<br />
    153. 

  153.         &nbsp;&nbsp; $FC-&gt;addChartData(&quot;70&quot;);<br />
    154. 

  154.         &nbsp;&nbsp; $FC-&gt;addChartData(&quot;52&quot;);<br />
    155. 

  155.       &nbsp;&nbsp; $FC-&gt;addChartData(&quot;81&quot;);</p>
    156. 

  156.       <p>?&gt;</p>
    157. 

  157.       <p><br />
    158. 

  158.    &lt;html&gt;<br />
    159. 

  159.    &nbsp;&nbsp; &lt;head&gt;<br />
    160. 

  160.    &nbsp;&nbsp; &nbsp;&nbsp; &lt;title&gt;First Chart Using FusionCharts PHP Class&lt;/title&gt;<br />
    161. 

  161.    &nbsp;&nbsp; &nbsp;&nbsp; &lt;script language='javascript' src='../FusionCharts/FusionCharts.js'&gt;&lt;/script&gt;<br />
    162. 

  162.    &nbsp;&nbsp; &lt;/head&gt;<br />
    163. 

  163.    &nbsp;&nbsp; &lt;body&gt;</p>
    164. 

  164.       <p>&nbsp;&nbsp; &nbsp;&nbsp; &lt;?php<br />
    165. 

  165.         <span class="codeComment">&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; # Render Chart</span><br />
    166. 

  166.         &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; $FC-&gt;renderChart();<br />
    167. 

  167.        &nbsp;&nbsp; &nbsp;&nbsp; ?&gt;</p>
    168. 

  168.       <p>&nbsp;&nbsp; &lt;/body&gt;<br />
    169. 

  169.    &lt;/html&gt;<br />
    170. 

  170.       </p></td>
    171. 

  171.   </tr>
    172. 

  172.   
    173. 

  173.   <tr>
    174. 

  174.      <td valign="top" class="text">&nbsp;</td>
    175. 

  175.   </tr>
    176. 

  176.   <tr>
    177. 

  177.     <td valign="top" class="text"><p>As you  find in the above code, creating Combination charts is similar to creating Multi-Series charts. Here too, there are multiple datasets. Some datasets are specified for primary Y-Axis and some conform to the Secondary Y-Axis.&nbsp; We need to specify which dataset belongs to which Y-Axis. Let's see how we did that in the following steps.</p>
    178. 

  178.       <ul type="disc">
    179. 

  179.         <li>We include <span class="codeInline">FusionCharts_Gen.php</span>.<br />
    180. 

  180.            <br />
    181. 

  181.         </li>
    182. 

  182.         <li>We create       Multiseries Column 3D - Line Combination chart object and set relative path to swf file.<br />
    183. 

  183.               <br />
    184. 

  184.                  <span class="codeInline"> $FC = new FusionCharts(&quot;<strong>MSColumn3DLineDY</strong>&quot;,&quot;350&quot;,&quot;300&quot;); <br />
    185. 

  185.                  $FC-&gt;setSWFPath(&quot;../FusionCharts/&quot;);<br />
    186. 

  186.                  </span><br />
    187. 

  187.         </li>
    188. 

  188.         <li>We store       chart attributes in <span class="codeInline">$strParam</span> variable :<br /> 
    189. 

  189.            <br />
    190. 

  190.           <span class="codeInline">$strParam=&quot;caption=Weekly Sales;subcaption=Comparison;xAxisName=Week;pYAxisName=Revenue;<strong>sYAxisName=Total Quantity</strong>;numberPrefix=$;<strong>sNumberSuffix= U</strong>&quot;;</span><br />
    191. 

  191.           <br />
    192. 

  192.           Combination charts have 2 Y-axis -Parent (p) and Secondary (s). So we have specified names for both of them. Moreover, using <span class="codeInline">sNumberSuffix</span>, we set the number suffix for secondary Y Axis.<br />
    193. 

  193.           <br />
    194. 

  194.         </li>
    195. 

  195.         <li>We set these chart attributes calling <span class="codeInline">setChartParams()</span><br />
    196. 

  196.            <br /> 
    197. 

  197.            <span class="codeInline">$FC-&gt;setChartParams($strParam);</span><br />
    198. 

  198.            <br />
    199. 

  199.         </li>
    200. 

  200.         <li>Next, like in Multi-series charts we add categories :<br />
    201. 

  201.            <br />
    202. 

  202.             <span class="codeInline">$FC-&gt;addCategory(&quot;Week 1&quot;);<br />
    203. 

  203.               $FC-&gt;addCategory(&quot;Week 2&quot;);<br />
    204. 

  204.               $FC-&gt;addCategory(&quot;Week 3&quot;);<br />
    205. 

  205.             $FC-&gt;addCategory(&quot;Week 4&quot;);</span><br />
    206. 

  206.             <br />
    207. 

  207.         </li>
    208. 

  208.         <li>We add       the first dataset 'This Month' for primary Y-Axis. If we do not specify the Y-Axis the dataset adheres to, the chart automatically sets it to primary Y-Axis. <br />
    209. 

  209.            <br />
    210. 

  210.             <span class="codeInline">$FC-&gt;addDataset(&quot;This Month&quot;,&quot;showValues=0&quot;); <br />
    211. 

  211.             $FC-&gt;addChartData(&quot;40800&quot;);<br />
    212. 

  212. $FC-&gt;addChartData(&quot;31400&quot;);<br />
    213. 

  213. $FC-&gt;addChartData(&quot;26700&quot;);<br />
    214. 

  214. $FC-&gt;addChartData(&quot;54400&quot;);</span><br />
    215. 

  215.           <br />
    216. 

  216.         </li>
    217. 

  217.         <li>Again, we add another dataset 'Previous Month' for primary Y-Axis and set its attributes and  data values.<br /> 
    218. 

  218.            <br />
    219. 

  219.             <span class="codeInline">$FC-&gt;addDataset(&quot;Previous Month&quot;,&quot;showValues=0&quot;); <br />
    220. 

  220.               $FC-&gt;addChartData(&quot;38300&quot;);<br />
    221. 

  221.               $FC-&gt;addChartData(&quot;28400&quot;);<br />
    222. 

  222.               $FC-&gt;addChartData(&quot;15700&quot;);<br />
    223. 

  223.             $FC-&gt;addChartData(&quot;48100&quot;);</span><br />
    224. 

  224.             <br />
    225. 

  225.         </li>
    226. 

  226.         <li>Now, we add the third dataset, this one  for Secondary Y-axis and its data values. Here, we specify the Y-Axis passing the dataset attribute <span class="codeInline">parentYAxis=S</span>. <br />
    227. 

  227.            <br />
    228. 

  228.           <span class="codeInline">$FC-&gt;addDataset(&quot;Total Quantity&quot;,&quot;<strong>parentYaxis=S</strong>&quot;); <br />
    229. 

  229.           $FC-&gt;addChartData(&quot;64&quot;);<br />
    230. 

  230.           $FC-&gt;addChartData(&quot;70&quot;);<br />
    231. 

  231.           $FC-&gt;addChartData(&quot;52&quot;);<br />
    232. 

  232.         $FC-&gt;addChartData(&quot;81&quot;);</span><br />
    233. 

  233.         <br />
    234. 

  234.         </li>
    235. 

  235.         <li>Finally, we add <span class="codeInline">FusionCharts.js</span> and <br />
    236. 

  236.            <br />
    237. 

  237.         </li>
    238. 

  238.         <li> render the chart : <br />
    239. 

  239.            <br />
    240. 

  240.             <span class="codeInline">$FC-&gt;renderChart();</span></li>
    241. 

  241.     </ul>    
    242. 

  242.     </td>
    243. 

  243.   </tr>
    244. 

  244.   <tr>
    245. 

  245.      <td valign="top">&nbsp;</td>
    246. 

  246.   </tr>
    247. 

  247.   <tr>
    248. 

  248.     <td valign="top" class="highlightBlock">Please go through <a href="Functions.html">FusionCharts PHP Class API Reference</a> section to know more about the functions used in the above code. </td>
    249. 

  249.   </tr>
    250. 

  250.   <tr>
    251. 

  251.     <td valign="top" class="text">&nbsp;</td>
    252. 

  252.   </tr>
    253. 

  253.   <tr>
    254. 

  254.     <td valign="top" class="text">This code renders the Combination Chart that we needed. </td>
    255. 

  255.   </tr>
    256. 

  256.   
    257. 

  257.   <tr>
    258. 

  258.     <td valign="top" class="text"><img src="../Images/ClassImages/ClassCombination.jpg" width="436" height="348" class="imageBorder" /></td>
    259. 

  259.   </tr>
    260. 

  260.   
    261. 

  261.   <tr> 
    262. 

  262.     <td valign="top" class="text">&nbsp;</td>
    263. 

  263.   </tr>
    264. 

  264. </table>
    265. 

  265. </body>
    266. 

  266. </html>
    267. 

  267.