PageRenderTime 45ms CodeModel.GetById 24ms RepoModel.GetById 0ms app.codeStats 0ms

/FusionCharts/Contents/PHP_Drill.html

https://bitbucket.org/royrutto/climatepal
HTML | 177 lines | 176 code | 1 blank | 0 comment | 0 complexity | 03db7fd81ccdc197c773d9521c986545 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" href="Style.css" type="text/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">Using FusionCharts with PHP &gt; Creating Drill-down charts </h2></td>
    13. 

  13.   </tr>
    14. 

  14.   <tr> 
    15. 

  15.     <td valign="top" class="text"><p>In our previous example, we had used FusionCharts to plot a chart using data stored in database. We'll now extend that example itself to create a drill-down chart which can show more information.</p>
    16. 

  16.     <p>If you recall from previous example, we were showing the sum of factory output in a pie chart as under: </p></td>
    17. 

  17.   </tr>
    18. 

  18.   <tr>
    19. 

  19.     <td valign="top" class="text"><img src="Images/Code_DBOut.jpg" width="572" height="273" class="imageBorder" /></td>
    20. 

  20.   </tr>
    21. 

  21.   <tr>
    22. 

  22.     <td valign="top" class="text">In this example, we'll extend this example, so that when a user clicks on a pie slice for a factory, he can drill down to see date wise production for that factory. </td>
    23. 

  23.   </tr>
    24. 

  24.   <tr>
    25. 

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

  26.   </tr>
    27. 

  27.   <tr>
    28. 

  28.     <td valign="top" class="header">Setting up the pie chart for Link </td>
    29. 

  29.   </tr>
    30. 

  30.   <tr>
    31. 

  31.     <td valign="top" class="text">To set up the pie chart to enable links for drill-down involves just minor tweaking of our previous <span class="codeInline">BasicDBExample.php</span>. We basically need to add the <span class="codeInline">link</span> attribute for each<span class="codeInline"> &lt;set&gt;</span> element. We create a new page <span class="codeInline">Default.php</span> from the previous page in <span class="codeInline">DBExample</span> folder with the following code changes:</td>
    32. 

  32.   </tr>
    33. 

  33.   <tr>
    34. 

  34.     <td valign="top" class="codeBlock">
    35. 

  35.       <p>&lt;?php<br />
    36. 

  36.       <span class="codeComment">
    37. 

  37.       //We've included ../Includes/FusionCharts.php and ../Includes/DBConn.php, which contains<br />
    38. 

  38.       //functions to help us easily embed the charts and connect to a database.</span><br />
    39. 

  39.       include(&quot;../Includes/FusionCharts.php&quot;);<br />
    40. 

  40.       include(&quot;../Includes/DBConn.php&quot;);<br />
    41. 

  41.       ?&gt;<br />
    42. 

  42.       &lt;HTML&gt;<br />
    43. 

  43.       &lt;HEAD&gt;<br />
    44. 

  44.   &nbsp;&nbsp;&nbsp;&lt;TITLE&gt;	FusionCharts - Database and Drill-Down Example	&lt;/TITLE&gt;<br />
    45. 

  45.   &nbsp;&nbsp;&nbsp;&lt;SCRIPT LANGUAGE=&quot;Javascript&quot; SRC=&quot;../../FusionCharts/FusionCharts.js&quot;&gt;&lt;/SCRIPT&gt;<br />
    46. 

  46.   &lt;/HEAD&gt;<br />
    47. 

  47.   &lt;BODY&gt;<br />
    48. 

  48.   &lt;?php<br />
    49. 

  49.       &nbsp;&nbsp;&nbsp;<span class="codeComment">//In this example, we show how to connect FusionCharts to a database.<br />
    50. 

  50. &nbsp;&nbsp;&nbsp;//For the sake of ease, we've used a MySQL database containing two<br />
    51. 

  51. &nbsp;&nbsp;&nbsp;//tables.<br />
    52. 

  52.   <br />
    53. 

  53. &nbsp;&nbsp;&nbsp;//Connect to database</span><br />
    54. 

  54.       &nbsp;&nbsp;&nbsp;$link = connectToDB();<br />
    55. 

  55.     </p>
    56. 

  56.       &nbsp;&nbsp;&nbsp;<span class="codeComment">'strXML will be used to store the entire XML document generated</span><br />
    57. 

  57.       <p> &nbsp;&nbsp;&nbsp;<span class="codeComment">'Generate the chart element</span><br />
    58. 

  58.         &nbsp;&nbsp;&nbsp;$strXML = &quot;&lt;chart caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30' showBorder='1' formatNumberScale='0' numberSuffix=' Units' &gt;&quot;;<br />
    59. 

  59.   <br />
    60. 

  60.         &nbsp;&nbsp;<span class="codeComment">&nbsp;//Fetch all factory records</span><br />
    61. 

  61.         &nbsp;&nbsp;&nbsp;$strQuery = &quot;select * from Factory_Master&quot;;<br />
    62. 

  62.         &nbsp;&nbsp;&nbsp;$result = mysql_query($strQuery) or die(mysql_error());<br />
    63. 

  63.   <br />
    64. 

  64.         &nbsp;&nbsp;<span class="codeComment">&nbsp;//Iterate through each factory</span><br />
    65. 

  65.         &nbsp;&nbsp;&nbsp;if ($result) {<br />
    66. 

  66.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while($ors = mysql_fetch_array($result)) {<br />
    67. 

  67.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">'Now create second query to get details for this factory</span><br />
    68. 

  68.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$strQuery = &quot;select sum(Quantity) as TotOutput from Factory_Output where FactoryId=&quot; . $ors['FactoryId'];<br />
    69. 

  69.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$result2 = mysql_query($strQuery) or die(mysql_error());<br />
    70. 

  70.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ors2 = mysql_fetch_array($result2);<br />
    71. 

  71.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">&nbsp;&nbsp;//Generate &lt;set label='..' value='..' link='..' /&gt;<br />
    72. 

  72. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Note that we're setting link as Detailed.php?FactoryId=&lt;&lt;FactoryId&gt;&gt; and then URL Encoding it</span><br />
    73. 

  73.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>$strXML .=&quot;&lt;set label='&quot; . $ors['FactoryName'] . &quot;' value='&quot; . $ors2['TotOutput'] . &quot;' link='&quot; . urlencode(&quot;Detailed.php?FactoryId=&quot; . $ors['FactoryId']) . &quot;'/&gt;&quot;;</strong><br />
    74. 

  74.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">&nbsp;//free the resultset</span><br />
    75. 

  75.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mysql_free_result($result2);<br />
    76. 

  76.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
    77. 

  77.         &nbsp;&nbsp;&nbsp;}<br />
    78. 

  78.         &nbsp;&nbsp;&nbsp;mysql_close($link);<br /><br />
    79. 

  79.         &nbsp;&nbsp;&nbsp;<span class="codeComment">//Finally, close &lt;chart&gt; element</span><br />
    80. 

  80.         &nbsp;&nbsp;&nbsp;$strXML .=&quot;&lt;/chart&gt;&quot;;<br />
    81. 

  81.   <br />
    82. 

  82.         &nbsp;&nbsp;&nbsp;<span class="codeComment">//Create the chart - Pie 3D Chart with data from $strXML</span><br />
    83. 

  83.         &nbsp;&nbsp;&nbsp;echo renderChart(&quot;../../FusionCharts/Pie3D.swf&quot;, &quot;&quot;, $strXML, &quot;FactorySum&quot;, 600, 300, false, false);<br />
    84. 

  84.         ?&gt;<br />
    85. 

  85.   &lt;/BODY&gt;<br />
    86. 

  86.   &lt;/HTML&gt;</p></td>
    87. 

  87.   </tr>
    88. 

  88.   <tr>
    89. 

  89.     <td valign="top" class="text"><p>As you can see in the code above, we're doing the following:</p>
    90. 

  90.       <ol>
    91. 

  91.         <li>Include <span class="codeInline">FusionCharts.js</span> JavaScript class and <span class="codeInline">FusionCharts.php</span> , to enable easy embedding of FusionCharts.</li>
    92. 

  92.         <li>We then include <span class="codeInline"> DBConn.php</span>, which contains connection parameters to connect to MySQL database. </li>
    93. 

  93.         <li>Thereafter, we generate the XML data document by iterating through the recordset. We store the XML data in <span class="codeInline">strXML</span> variable. To each <span class="codeInline">&lt;set&gt;</span> element, we add the <span class="codeInline">link</span> attribute, which points to <span class="codeInline">Detailed.php</span> - the page that contains the chart to show details. We pass the factory id of the respective factory by appending it to the link. We finally URL Encode the link, which is a very important step. </li>
    94. 

  94.         <li>Finally, we render the chart using <span class="codeInline">renderChart()</span> method and pass <span class="codeInline">strXML</span> as <span class="codeInline">dataXML</span>. </li>
    95. 

  95.     </ol>      
    96. 

  96.     <p>Let's now shift our attention to <span class="codeInline">Detailed.php</span> page.   </p></td>
    97. 

  97.   </tr>
    98. 

  98.   <tr>
    99. 

  99.     <td valign="top" class="text">&nbsp;</td>
    100. 

  100.   </tr>
    101. 

  101.   <tr>
    102. 

  102.     <td valign="top" class="header">Creating the detailed data chart page </td>
    103. 

  103.   </tr>
    104. 

  104.   <tr>
    105. 

  105.     <td valign="top" class="text">The page <span class="codeInline">Detailed.php</span> contains the following code: </td>
    106. 

  106.   </tr>
    107. 

  107.   <tr>
    108. 

  108.     <td valign="top" class="codeBlock">
    109. 

  109.       <p>&lt;?php<br />
    110. 

  110.       <span class="codeComment">
    111. 

  111.       //We've included ../Includes/FusionCharts.php and ../Includes/DBConn.php, which contains<br />
    112. 

  112.       //functions to help us easily embed the charts and connect to a database.</span><br />
    113. 

  113.       include(&quot;../Includes/FusionCharts.php&quot;);<br />
    114. 

  114.       include(&quot;../Includes/DBConn.php&quot;);<br />
    115. 

  115.       ?&gt;<br />
    116. 

  116.       &lt;HTML&gt;<br />
    117. 

  117.       &lt;HEAD&gt;<br />
    118. 

  118.   &nbsp;&nbsp;&nbsp;&lt;TITLE&gt;	FusionCharts - Database and Drill-Down Example	&lt;/TITLE&gt;<br />
    119. 

  119.   &nbsp;&nbsp;&nbsp;&lt;SCRIPT LANGUAGE=&quot;Javascript&quot; SRC=&quot;../../FusionCharts/FusionCharts.js&quot;&gt;&lt;/SCRIPT&gt;<br />
    120. 

  120.   &lt;/HEAD&gt;<br />
    121. 

  121.   &lt;BODY&gt;
    122. 

  122.   <br />
    123. 

  123.   &lt;?php<br />
    124. 

  124.         &nbsp;&nbsp;<span class="codeComment">&nbsp;//This page is invoked from Default.php. When the user clicks on a pie<br />
    125. 

  125. &nbsp;&nbsp;&nbsp;//slice in Default.php, the factory Id is passed to this page. We need<br />
    126. 

  126. &nbsp;&nbsp;&nbsp;//to get that factory id, get information from database and then show<br />
    127. 

  127. &nbsp;&nbsp;&nbsp;//a detailed chart.<br />
    128. 

  128.   <br />
    129. 

  129. &nbsp;&nbsp;&nbsp;//First, get the factory Id</span><br />
    130. 

  130.         &nbsp;<span class="codeComment">&nbsp;&nbsp;//Request the factory Id from Querystring</span><br />
    131. 

  131.         &nbsp;&nbsp;&nbsp;$FactoryId = $_GET['FactoryId'];<br />
    132. 

  132.   <br />
    133. 

  133.         &nbsp;<span class="codeComment">&nbsp;&nbsp;//Connect to database</span><br />
    134. 

  134.         &nbsp;&nbsp;&nbsp;$link = connectToDB();<br />
    135. 

  135.   <br />
    136. 

  136.         &nbsp;<span class="codeComment">&nbsp;&nbsp;//$strXML will be used to store the entire XML document generated</span><br />
    137. 

  137.         &nbsp;&nbsp;<span class="codeComment">&nbsp;//Generate the chart element string</span><br />
    138. 

  138.         &nbsp;&nbsp;&nbsp;$strXML = &quot;&lt;chart palette='2' caption='Factory &quot; . $FactoryId . &quot; Output ' subcaption='(In Units)' xAxisName='Date' showValues='1' labelStep='2' &gt;&quot;;<br />
    139. 

  139.   <br />
    140. 

  140.         &nbsp;&nbsp;<span class="codeComment">&nbsp;//Now, we get the data for that factory</span><br />
    141. 

  141.         &nbsp;&nbsp;&nbsp;$strQuery = &quot;select * from Factory_Output where FactoryId=&quot; . $FactoryId;<br />
    142. 

  142.         &nbsp;&nbsp;&nbsp;$result = mysql_query($strQuery) or die(mysql_error());<br />
    143. 

  143.   <br />
    144. 

  144.         &nbsp;&nbsp;<span class="codeComment">&nbsp;//Iterate through each factory</span><br />
    145. 

  145.         &nbsp;&nbsp;&nbsp;if ($result) {<br />
    146. 

  146.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while($ors = mysql_fetch_array($result)) {<br />
    147. 

  147.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">&nbsp;//Here, we convert date into a more readable form for set label.</span><br />
    148. 

  148.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$strXML .=&quot;&lt;set label='&quot; . datePart(&quot;d&quot;,$ors['DatePro']) . &quot;/&quot; . datePart(&quot;m&quot;,$ors['DatePro']) . &quot;' value='&quot; . $ors['Quantity'] . &quot;'/&gt;&quot;; <br />
    149. 

  149.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
    150. 

  150.         &nbsp;&nbsp;&nbsp;}<br />
    151. 

  151.         &nbsp;&nbsp;&nbsp;mysql_close($link);<br /><br />
    152. 

  152.         &nbsp;&nbsp;<span class="codeComment">&nbsp;//Close &lt;chart&gt; element</span><br />
    153. 

  153.         &nbsp;&nbsp;&nbsp;$strXML .=&quot;&lt;/chart&gt;&quot;;<br />
    154. 

  154.   <br />
    155. 

  155.         &nbsp;&nbsp;<span class="codeComment">&nbsp;//Create the chart - Column 2D Chart with data from $strXML</span><br />
    156. 

  156.         &nbsp;&nbsp;&nbsp;echo renderChart(&quot;../../FusionCharts/Column2D.swf&quot;, &quot;&quot;, $strXML, &quot;FactoryDetailed&quot;, 600, 300, false, false);<br />
    157. 

  157.         ?&gt;<br />
    158. 

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

  159.   &lt;/BODY&gt;<br />
    160. 

  160.   &lt;/HTML&gt;</p>    </td>
    161. 

  161.   </tr>
    162. 

  162.   <tr>
    163. 

  163.     <td valign="top" class="text"><p>In this page, we're:</p>
    164. 

  164.       <ol>
    165. 

  165.         <li>Including  <span class="codeInline">FusionCharts.js</span> JavaScript class and <span class="codeInline">FusionCharts.php</span> , to enable easy embedding of FusionCharts.</li>
    166. 

  166.         <li>Requesting the factory id for which we've to show detailed data. This data was sent to us as querystring, as a part of pie chart link.</li>
    167. 

  167.         <li>We get the requisite data for this factory from database and then convert it into XML using string concatenation.</li>
    168. 

  168.         <li>Finally, we render a Column 2D chart using <span class="codeInline">renderChart()</span> method to show detailed data.</li>
    169. 

  169.       </ol>
    170. 

  170.     <p>When you now run the app, you'll see the detailed page as under: </p></td>
    171. 

  171.   </tr>
    172. 

  172.   <tr>
    173. 

  173.     <td valign="top" class="text"><img src="Images/Code_Drill.jpg" width="599" height="292" class="imageBorder" />&nbsp;</td>
    174. 

  174.   </tr>
    175. 

  175. </table>
    176. 

  176. </body>
    177. 

  177. </html>
    178. 

  178.