PageRenderTime 43ms CodeModel.GetById 18ms RepoModel.GetById 0ms app.codeStats 0ms

/Focus/ClientPortal/static/jqplot/examples/pieTest.html

https://gitlab.com/mmkiff/clientportalcodeathon
HTML | 246 lines | 196 code | 43 blank | 7 comment | 0 complexity | 0fd4e12f08ecbaf39abe7027470acaab MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. 

  3. <html>
    4. 

  4. <head>
    5. 

  5. 

  6.     <title>Pie Charts and Options</title>
    7. 

  7. 

  8.     <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
    9. 

  9.     <link rel="stylesheet" type="text/css" href="examples.min.css" />
    10. 

  10.     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
    11. 

  11.     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
    12. 

  12.   
    13. 

  13.     <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
    14. 

  14.     <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    15. 

  15.     
    16. 

  16.    
    17. 

  17. </head>
    18. 

  18. <body>
    19. 

  19.     <div id="header">
    20. 

  20.         <div class="nav">
    21. 

  21.             <a class="nav" href="../../../index.php"><span>&gt;</span>Home</a>
    22. 

  22.             <a class="nav"  href="../../../docs/"><span>&gt;</span>Docs</a>
    23. 

  23.             <a class="nav"  href="../../download/"><span>&gt;</span>Download</a>
    24. 

  24.             <a class="nav" href="../../../info.php"><span>&gt;</span>Info</a>
    25. 

  25.             <a class="nav"  href="../../../donate.php"><span>&gt;</span>Donate</a>
    26. 

  26.         </div>
    27. 

  27.     </div>
    28. 

  28.     <div class="colmask leftmenu">
    29. 

  29.       <div class="colleft">
    30. 

  30.         <div class="col1" id="example-content">
    31. 

  31. 

  32.   
    33. 

  33. <!-- Example scripts go here -->
    34. 

  34. 

  35. 

  36.     <div id="pie1" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
    37. 

  37. 

  38.     <div id="pie2" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
    39. 

  39. 

  40.     <div id="pie3" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
    41. 

  41. 

  42.     <div id="pie4" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
    43. 

  43. 

  44.     <div id="pie5" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></div>
    45. 

  45. 

  46.     <div id="pie6" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></div>
    47. 

  47. 

  48.     <div id="pie7" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></div>
    49. 

  49. 

  50.     <div id="pie8" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
    51. 

  51. 

  52. 

  53.   
    54. 

  54. <script class="code" type="text/javascript">$(document).ready(function(){
    55. 

  55.     var plot1 = $.jqplot('pie1', [[['a',25],['b',14],['c',7]]], {
    56. 

  56.         gridPadding: {top:0, bottom:38, left:0, right:0},
    57. 

  57.         seriesDefaults:{
    58. 

  58.             renderer:$.jqplot.PieRenderer, 
    59. 

  59.             trendline:{ show:false }, 
    60. 

  60.             rendererOptions: { padding: 8, showDataLabels: true }
    61. 

  61.         },
    62. 

  62.         legend:{
    63. 

  63.             show:true, 
    64. 

  64.             placement: 'outside', 
    65. 

  65.             rendererOptions: {
    66. 

  66.                 numberRows: 1
    67. 

  67.             }, 
    68. 

  68.             location:'s',
    69. 

  69.             marginTop: '15px'
    70. 

  70.         }       
    71. 

  71.     });
    72. 

  72. });</script>
    73. 

  73. 

  74. <script class="code" type="text/javascript">$(document).ready(function(){
    75. 

  75.     var plot2 = $.jqplot('pie2', [[['a',25],['b',14],['c',7]]], {
    76. 

  76.         seriesDefaults:{ renderer:$.jqplot.PieRenderer, trendline:{ show: true } },
    77. 

  77.         legend:{ show: true }    
    78. 

  78.     });
    79. 

  79. });</script>
    80. 

  80. 

  81. <script class="code" type="text/javascript">$(document).ready(function(){    
    82. 

  82.     var plot3 = $.jqplot('pie3', [[['a',1],['b',9],['c',1]]], {
    83. 

  83.         seriesDefaults:{
    84. 

  84.             shadow: false, 
    85. 

  85.             renderer:$.jqplot.PieRenderer, 
    86. 

  86.             rendererOptions:{
    87. 

  87.                 sliceMargin: 4, 
    88. 

  88.                 // rotate the starting position of the pie around to 12 o'clock.
    89. 

  89.                 startAngle: -90
    90. 

  90.             }
    91. 

  91.         },
    92. 

  92.         legend:{ show: true }      
    93. 

  93.     });
    94. 

  94. });</script>
    95. 

  95.  
    96. 

  96. <script class="code" type="text/javascript">$(document).ready(function(){   
    97. 

  97.     var plot4 = $.jqplot('pie4', [[["a",0],["b",1],["c",.01]]], {
    98. 

  98.         seriesDefaults:{
    99. 

  99.             renderer:$.jqplot.PieRenderer, 
    100. 

  100.             rendererOptions:{ sliceMargin: 0 }
    101. 

  101.         },
    102. 

  102.         legend:{ show: true }      
    103. 

  103.     });
    104. 

  104. });</script> 
    105. 

  105.   
    106. 

  106. <script class="code" type="text/javascript">$(document).ready(function(){  
    107. 

  107.     var plot5 = $.jqplot('pie5', [[["none",23],["error",0],["click",5],["impression",25]]], {
    108. 

  108.         seriesDefaults:{ renderer: $.jqplot.PieRenderer },
    109. 

  109.         legend:{ show:true }      
    110. 

  110.     });   
    111. 

  111. });</script>
    112. 

  112.   
    113. 

  113. <script class="code" type="text/javascript">$(document).ready(function(){  
    114. 

  114.     var plot6 = $.jqplot('pie6', [[["none",0],["error",0],["click",0],["impression",0]]], {
    115. 

  115.         seriesDefaults:{ renderer: $.jqplot.PieRenderer },
    116. 

  116.         legend:{ show:true }     
    117. 

  117.     });   
    118. 

  118. });</script>
    119. 

  119.   
    120. 

  120. <script class="code" type="text/javascript">$(document).ready(function(){  
    121. 

  121.     var plot7 = $.jqplot('pie7', [[["all", 10]]], {
    122. 

  122.         seriesDefaults:{
    123. 

  123.             renderer:$.jqplot.PieRenderer,
    124. 

  124.             rendererOptions: {
    125. 

  125.                 showDataLabels: true
    126. 

  126.             }
    127. 

  127.         },
    128. 

  128.         legend:{show:true}      
    129. 

  129.     });   
    130. 

  130. });</script>
    131. 

  131.   
    132. 

  132. <script class="code" type="text/javascript">$(document).ready(function(){ 
    133. 

  133.     var s1 = [['Sony',7], ['Samsumg',13.3], ['LG',14.7], ['Vizio',5.2], ['Insignia', 1.2]];
    134. 

  134.         
    135. 

  135.     var plot8 = $.jqplot('pie8', [s1], {
    136. 

  136.         grid: {
    137. 

  137.             drawBorder: false, 
    138. 

  138.             drawGridlines: false,
    139. 

  139.             background: '#ffffff',
    140. 

  140.             shadow:false
    141. 

  141.         },
    142. 

  142.         axesDefaults: {
    143. 

  143.             
    144. 

  144.         },
    145. 

  145.         seriesDefaults:{
    146. 

  146.             renderer:$.jqplot.PieRenderer,
    147. 

  147.             rendererOptions: {
    148. 

  148.                 showDataLabels: true
    149. 

  149.             }
    150. 

  150.         },
    151. 

  151.         legend: {
    152. 

  152.             show: true,
    153. 

  153.             rendererOptions: {
    154. 

  154.                 numberRows: 1
    155. 

  155.             },
    156. 

  156.             location: 's'
    157. 

  157.         }
    158. 

  158.     }); 
    159. 

  159. });</script>
    160. 

  160. 

  161. 

  162. <!-- End example scripts -->
    163. 

  163. 

  164. <!-- Don't touch this! -->
    165. 

    166. 

  166. 

  167.     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
    168. 

  168.     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
    169. 

  169.     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
    170. 

  170.     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
    171. 

  171. <!-- End Don't touch this! -->
    172. 

    173. 

  173. <!-- Additional plugins go here -->
    174. 

  174. 

  175.   <script class="include" type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
    176. 

  176. 

  177. <!-- End additional plugins -->
    178. 

  178. 

  179.         </div>
    180. 

  180.          <div class="col2">
    181. 

  181. 

  182.            <div class="example-link"><a class="example-link" href="data-renderers.html">AJAX and JSON Data Loading via Data Renderers</a></div>
    183. 

  183.            <div class="example-link"><a class="example-link" href="barLineAnimated.html">Animated Charts</a></div>
    184. 

  184.            <div class="example-link"><a class="example-link" href="dashboardWidget.html">Animated Dashboard Sample - Filled Line with Log Axis</a></div>
    185. 

  185.            <div class="example-link"><a class="example-link" href="kcp_area.html">Area Chart</a></div>
    186. 

  186.            <div class="example-link"><a class="example-link" href="kcp_area2.html">Area Chart 2</a></div>
    187. 

  187.            <div class="example-link"><a class="example-link" href="axisLabelTests.html">Axis Labels</a></div>
    188. 

  188.            <div class="example-link"><a class="example-link" href="axisLabelsRotatedText.html">Axis Labels and Rotated Text</a></div>
    189. 

  189.            <div class="example-link"><a class="example-link" href="barTest.html">Bar Charts</a></div>
    190. 

  190.            <div class="example-link"><a class="example-link" href="multipleBarColors.html">Bar Colors Example</a></div>
    191. 

  191.            <div class="example-link"><a class="example-link" href="bezierCurve.html">Bezier Curve Plots</a></div>
    192. 

  192.            <div class="example-link"><a class="example-link" href="blockPlot.html">Block Plots</a></div>
    193. 

  193.            <div class="example-link"><a class="example-link" href="bubbleChart.html">Bubble Charts</a></div>
    194. 

  194.            <div class="example-link"><a class="example-link" href="bubble-plots.html">Bubble Plots</a></div>
    195. 

  195.            <div class="example-link"><a class="example-link" href="candlestick.html">Candlestick and Open Hi Low Close Charts</a></div>
    196. 

  196.            <div class="example-link"><a class="example-link" href="theming.html">Chart Theming</a></div>
    197. 

  197.            <div class="example-link"><a class="example-link" href="fillBetweenLines.html">Charts with Fill Between Lines</a></div>
    198. 

  198.            <div class="example-link"><a class="example-link" href="kcp_cdf.html">Cumulative Density Function Chart</a></div>
    199. 

  199.            <div class="example-link"><a class="example-link" href="dashedLines.html">Dashed Lines with Smoothing</a></div>
    200. 

  200.            <div class="example-link"><a class="example-link" href="cursor-highlighter.html">Data Point Highlighting, Tooltips and Cursor Tracking</a></div>
    201. 

  201.            <div class="example-link"><a class="example-link" href="point-labels.html">Data Point labels</a></div>
    202. 

  202.            <div class="example-link"><a class="example-link" href="date-axes.html">Date Axes</a></div>
    203. 

  203.            <div class="example-link"><a class="example-link" href="dateAxisRenderer.html">Date Axes 2</a></div>
    204. 

  204.            <div class="example-link"><a class="example-link" href="rotatedTickLabelsZoom.html">Date Axes, Rotated Labels and Zooming</a></div>
    205. 

  205.            <div class="example-link"><a class="example-link" href="canvas-overlay.html">Draw Lines on Plots - Canvas Overlay</a></div>
    206. 

  206.            <div class="example-link"><a class="example-link" href="kcp_engel.html">Engel Curves</a></div>
    207. 

  207.            <div class="example-link"><a class="example-link" href="bandedLine.html">Error Bands and Confidence Intervals</a></div>
    208. 

  208.            <div class="example-link"><a class="example-link" href="area.html">Filled (Area) Charts</a></div>
    209. 

  209.            <div class="example-link"><a class="example-link" href="axisScalingForceTickAt.html">Force Plot to Have Tick at 0 or 100</a></div>
    210. 

  210.            <div class="example-link"><a class="example-link" href="hiddenPlotsInTabs.html">Hidden Plots</a></div>
    211. 

  211.            <div class="example-link"><a class="example-link" href="customHighlighterCursorTrendline.html">Highlighting, Dragging Points, Cursor and Trend Lines</a></div>
    212. 

  212.            <div class="example-link"><a class="example-link" href="line-charts.html">Line Charts and Options</a></div>
    213. 

  213.            <div class="example-link"><a class="example-link" href="kcp_lorenz.html">Lorenz Curves</a></div>
    214. 

  214.            <div class="example-link"><a class="example-link" href="mekkoCharts.html">Mekko Charts</a></div>
    215. 

  215.            <div class="example-link"><a class="example-link" href="meterGauge.html">Meter Gauge</a></div>
    216. 

  216.            <div class="example-link"><a class="example-link" href="candlestick-charts.html">Open Hi Low Close and Candlestick Charts</a></div>
    217. 

  217.            <div class="example-link"><a class="example-link" href="pieTest.html">Pie Charts and Options</a></div>
    218. 

  218.            <div class="example-link"><a class="example-link" href="pieTest4.html">Pie Charts and Options 2</a></div>
    219. 

  219.            <div class="example-link"><a class="example-link" href="pie-donut-charts.html">Pie and Donut Charts</a></div>
    220. 

  220.            <div class="example-link"><a class="example-link" href="selectorSyntax.html">Plot Creation with jQuery Selectors</a></div>
    221. 

  221.            <div class="example-link"><a class="example-link" href="zooming.html">Plot Zooming and Cursor Control</a></div>
    222. 

  222.            <div class="example-link"><a class="example-link" href="kcp_pdf.html">Probability Density Function Chart</a></div>
    223. 

  223.            <div class="example-link"><a class="example-link" href="kcp_pyramid_by_age.html">Pyramid Chart By Age</a></div>
    224. 

  224.            <div class="example-link"><a class="example-link" href="kcp_pyramid.html">Pyramid Charts</a></div>
    225. 

  225.            <div class="example-link"><a class="example-link" href="kcp_pyramid2.html">Pyramid Charts 2</a></div>
    226. 

  226.            <div class="example-link"><a class="example-link" href="kcp_quintiles.html">Quintile Pyramid Charts</a></div>
    227. 

  227.            <div class="example-link"><a class="example-link" href="resizablePlot.html">Resizable Plots</a></div>
    228. 

  228.            <div class="example-link"><a class="example-link" href="rotated-tick-labels.html">Rotated Labels and Font Styling</a></div>
    229. 

  229.            <div class="example-link"><a class="example-link" href="smoothedLine.html">Smoothed Lines</a></div>
    230. 

  230.            <div class="example-link"><a class="example-link" href="bar-charts.html">Vertical and Horizontal Bar Charts</a></div>
    231. 

  231.            <div class="example-link"><a class="example-link" href="waterfall.html">Waterfall Charts</a></div>
    232. 

  232.            <div class="example-link"><a class="example-link" href="waterfall2.html">Waterfall Charts 2</a></div>
    233. 

  233.            <div class="example-link"><a class="example-link" href="zoomOptions.html">Zoom Options</a></div>
    234. 

  234.            <div class="example-link"><a class="example-link" href="zoomProxy.html">Zoom Proxy - Control one plot from another</a></div>
    235. 

  235.            <div class="example-link"><a class="example-link" href="zoom1.html">Zooming</a></div>
    236. 

  236.            <div class="example-link"><a class="example-link" href="dateAxisLogAxisZooming.html">Zooming with Date and Log Axes</a></div>
    237. 

  237. 

  238.          </div>
    239. 

  239.                </div>
    240. 

  240.     </div>
    241. 

  241.     <script type="text/javascript" src="example.min.js"></script>
    242. 

  242. 

  243. </body>
    244. 

  244. 

  245. 

  246. </html>
    247. 

  247.