Startsida Utforska Hjälp
Registrera dig Logga in
wilson.silva
/
AdminLte
spegling av https://github.com/almasaeed2010/AdminLTE
1
0
Fork 0
Filer Ärenden 0 Wiki
Träd: f5e01e2d15
Grenar Taggar
AdminLte
/
js
/
jqplot
/
examples
/
kcp_lorenz.html

kcp_lorenz.html 31 KB
Historik Rå

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588 
  1. <!DOCTYPE html>
    2. 

  2. 

  3. <html>
    4. 

  4. <head>
    5. 

  5. 

  6.     <title>Lorenz Curves</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.   <link class="include" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.csss" rel="Stylesheet" /> 
    37. 

  37. 

  38.   <style type="text/css">
    39. 

  39. 

  40.     .chart-container {
    41. 

  41.         border: 1px solid darkblue;
    42. 

  42.         padding: 30px;
    43. 

  43.         width: 500px;
    44. 

  44.         height: 400px;
    45. 

  45.         
    46. 

  46.     }
    47. 

  47. 

  48.     #chart1 {
    49. 

  49.         width: 96%;
    50. 

  50.         height: 96%;
    51. 

  51.     }
    52. 

  52. 

  53.     .jqplot-datestamp {
    54. 

  54.       font-size: 0.8em;
    55. 

  55.       color: #777;
    56. 

  56. /*      margin-top: 1em;
    57. 

  57.       text-align: right;*/
    58. 

  58.       font-style: italic;
    59. 

  59.       position: absolute;
    60. 

  60.       bottom: 15px;
    61. 

  61.       right: 15px;
    62. 

  62.     }
    63. 

  63. 

  64.     td.controls li {
    65. 

  65.         list-style-type: none;
    66. 

  66.     }
    67. 

  67. 

  68.     td.controls ul {
    69. 

  69.         margin-top: 0.5em;
    70. 

  70.         padding-left: 0.2em;
    71. 

  71.     }
    72. 

  72. 

  73.     pre.code {
    74. 

  74.         margin-top: 45px;
    75. 

  75.         clear: both;
    76. 

  76.     }
    77. 

  77. 

  78.   </style>
    79. 

  79. 

  80.     <table class="app">
    81. 

  81.         <td class="controls">
    82. 

  82. 

  83.             <div>
    84. 

  84.                 Data Series:
    85. 

  85.                 <ul>
    86. 

  86.                     <li><input class="dataSeries-checkbox" name="dataSeries_national" value="national" type="checkbox" checked />National</li>
    87. 

  87.                     <li><input class="dataSeries-checkbox" name="dataSeries_urban" value="urban" type="checkbox" />Urban</li>
    88. 

  88.                     <li><input class="dataSeries-checkbox" name="dataSeries_rural" value="rural" type="checkbox" />Rural</li>
    89. 

  89.                 </ul>
    90. 

  90.             </div>
    91. 

  91. 

  92.             <div>
    93. 

  93.                 Background Color:
    94. 

  94.                 <ul>
    95. 

  95.                     <li><input name="backgroundColor" value="white" type="radio" checked />Default</li>
    96. 

  96.                     <li><input name="backgroundColor" value="#efefef" type="radio" />Gray</li>
    97. 

  97.                 </ul>
    98. 

  98.             </div>
    99. 

  99. 

  100.             <div>
    101. 

  101.                 Line Width:
    102. 

  102.                 <ul>
    103. 

  103.                     <li><input name="lineWidth" value="2.5" type="radio" checked />Thin</li>
    104. 

  104.                     <li><input name="lineWidth" value="5" type="radio" />Thick</li>
    105. 

  105.                 </ul>
    106. 

  106.             </div>
    107. 

  107. 

  108.             <div>
    109. 

  109.                 Grids:
    110. 

  110.                 <ul>
    111. 

  111.                     <li><input name="gridsVertical" value="vertical" type="checkbox" checked />Vertical</li>
    112. 

  112.                     <li><input name="gridsHorizontal" value="horizontal" type="checkbox" checked />Horizontal</li>
    113. 

  113.                 </ul>
    114. 

  114.             </div>
    115. 

  115. 

  116.             <div>
    117. 

  117.                 Cutoff Lines:
    118. 

  118.                 <ul>
    119. 

  119.                     <li><input name="cutoffLines" value="showCutoffLines" type="checkbox" checked />Show</li>
    120. 

  120.                     <li>Low:&nbsp;&nbsp;<input name="userLine1" value="42" type="text" size="6" /></li>
    121. 

  121.                     <li>High:&nbsp;<input name="userLine2" value="75" type="text" size="6" /></li>
    122. 

  122.                 </ul>
    123. 

  123.             </div>
    124. 

  124.         </td>
    125. 

  125.         
    126. 

  126.         <td class="chart">
    127. 

  127.             <div class="chart-container">    
    128. 

  128.                 <div id="chart1"></div>
    129. 

  129.                 <div class="jqplot-datestamp"></div>
    130. 

  130.             </div>
    131. 

  131.         </td>
    132. 

  132. 

  133.     </table>
    134. 

  134. 

  135.     <pre class="code brush:js"></pre>
    136. 

  136.   
    137. 

  137. 

  138.   
    139. 

  139.   <script class="code" type="text/javascript">
    140. 

  140. $(document).ready(function(){
    141. 

  141.     var dataSets = {
    142. 

  142.         national: [[0, 0], [0.034259, 0.000122], [0.036908, 0.000271], [0.039957, 0.000457], [0.043623, 0.000699], [0.048008, 0.001005], [0.053278, 0.001404], [0.059665, 0.001916], [0.067405, 0.002587], [0.076951, 0.003482], [0.088909, 0.004676], [0.103706, 0.006234], [0.121406, 0.008198], [0.142376, 0.010698], [0.167456, 0.013945], [0.198392, 0.018266], [0.237371, 0.024152], [0.287096, 0.03217], [0.350664, 0.043128], [0.43322, 0.058856], [0.546538, 0.08196], [0.703419, 0.116382], [0.921534, 0.167573], [1.225405, 0.244101], [1.658248, 0.362099], [2.286919, 0.545089], [3.168531, 0.811148], [4.338121, 1.180312], [5.828025, 1.677699], [7.674282, 2.317937], [9.856185, 3.124879], [12.427952, 4.135038], [15.374906, 5.337835], [18.559853, 6.704187], [21.938501, 8.240167], [25.480211, 9.968066], [29.195872, 11.896316], [33.040813, 13.995922], [36.929108, 16.268393], [40.883239, 18.753271], [44.934876, 21.456742], [48.979949, 24.281483], [52.874709, 27.163823], [56.569122, 30.090586], [60.143349, 33.155912], [63.632698, 36.332609], [67.019887, 39.647977], [70.272329, 42.982924], [73.31569, 46.301522], [76.137996, 49.580067], [78.734309, 52.80729], [81.144203, 56.013671], [83.364771, 59.154237], [85.40072, 62.237023], [87.276365, 65.274088], [88.994984, 68.231226], [90.547773, 71.063226], [91.930153, 73.740825], [93.143588, 76.235257], [94.19365, 78.526502], [95.093093, 80.626967], [95.863261, 82.534767], [96.518119, 84.276606], [97.07861, 85.871008], [97.555507, 87.313822], [97.958887, 88.612275], [98.29631, 89.76839], [98.57645, 90.788966], [98.805892, 91.680096], [98.994988, 92.471419], [99.15183, 93.168954], [99.279882, 93.771844], [99.384116, 94.303287], [99.470272, 94.773123], [99.541871, 95.191639], [99.601871, 95.572501], [99.653556, 95.924822], [99.698334, 96.25129], [99.737113, 96.553878], [99.770733, 96.834228], [99.800151, 97.099569], [99.826487, 97.355328], [99.85018, 97.600349], [99.871291, 97.832168], [99.889939, 98.050737], [99.906286, 98.254414], [99.92045, 98.442305], [99.932702, 98.616245], [99.9433, 98.776877], [99.952485, 98.926517], [99.960528, 99.066855], [99.96755, 99.196967], [99.9736, 99.316087], [99.978742, 99.423943], [99.983126, 99.523155], [99.986929, 99.615949], [99.990275, 99.703425], [99.993221, 99.785398], [99.995794, 99.861721], [99.998031, 99.932812], [100, 100]],
    143. 

  143. 

  144.         urban: [[0, 0], [0.022476, 0.000211], [0.026364, 0.000483], [0.031079, 0.000832], [0.03683, 0.001286], [0.043812, 0.001867], [0.052123, 0.002596], [0.061977, 0.003523], [0.07392, 0.00472], [0.08836, 0.006245], [0.105627, 0.008192], [0.126649, 0.010745], [0.152991, 0.014185], [0.186685, 0.01887], [0.230466, 0.025421], [0.288337, 0.034602], [0.364009, 0.047302], [0.462362, 0.064833], [0.591815, 0.0896], [0.763717, 0.124292], [0.990265, 0.173076], [1.291577, 0.242086], [1.689361, 0.337485], [2.197829, 0.465168], [2.833156, 0.632983], [3.607935, 0.847553], [4.531058, 1.117227], [5.612064, 1.448077], [6.829389, 1.832426], [8.150496, 2.276607], [9.587093, 2.787319], [11.139531, 3.375891], [12.843232, 4.068491], [14.744, 4.894875], [16.882944, 5.879821], [19.274088, 7.043989], [21.898373, 8.377077], [24.70402, 9.889069], [27.725078, 11.639484], [31.02485, 13.647365], [34.577391, 15.957918], [38.361881, 18.496115], [42.220399, 21.242326], [46.204947, 24.281703], [50.279452, 27.501128], [54.284933, 30.800251], [58.020934, 34.003512], [61.527083, 37.314968], [65.059633, 40.928214], [68.631977, 44.751812], [72.134933, 48.615769], [75.35901, 52.332308], [78.289798, 55.927374], [80.980675, 59.439449], [83.426691, 62.80086], [85.63051, 66.024375], [87.600439, 69.040545], [89.324337, 71.839628], [90.82494, 74.405703], [92.132382, 76.808559], [93.28344, 79.051197], [94.291515, 81.128944], [95.165628, 83.025406], [95.917569, 84.765777], [96.566309, 86.346045], [97.111687, 87.728898], [97.557321, 88.935715], [97.923776, 89.98232], [98.224115, 90.896808], [98.472073, 91.712405], [98.683427, 92.454973], [98.864412, 93.127257], [99.018636, 93.73762], [99.150765, 94.298112], [99.266909, 94.826197], [99.369967, 95.321988], [99.460335, 95.779249], [99.538693, 96.200706], [99.60658, 96.587402], [99.665149, 96.942925], [99.716006, 97.27086], [99.76009, 97.572073], [99.798168, 97.847633], [99.830962, 98.099393], [99.858805, 98.322381], [99.881656, 98.513678], [99.900176, 98.68098], [99.91564, 98.83196], [99.928971, 98.970904], [99.940546, 99.098968], [99.950572, 99.216266], [99.959091, 99.321169], [99.966315, 99.415471], [99.97239, 99.500041], [99.97761, 99.578707], [99.982252, 99.653757], [99.986425, 99.725788], [99.990223, 99.796075], [99.993742, 99.865362], [99.996997, 99.933105], [100, 100]],
    145. 

  145. 

  146.         rural: [[0, 0], [0.044856, 0.00021], [0.048153, 0.000449], [0.051764, 0.000737], [0.055907, 0.001092], [0.060801, 0.00155], [0.066762, 0.002138], [0.073899, 0.002894], [0.082612, 0.003876], [0.093168, 0.005148], [0.106164, 0.006835], [0.122508, 0.009095], [0.142886, 0.012069], [0.16758, 0.015833], [0.19669, 0.020566], [0.23118, 0.026579], [0.273098, 0.034447], [0.325019, 0.044958], [0.390807, 0.059161], [0.474177, 0.078318], [0.579565, 0.104359], [0.719638, 0.14226], [0.911325, 0.197784], [1.175054, 0.278915], [1.537895, 0.397967], [2.041596, 0.57646], [2.758826, 0.848809], [3.776691, 1.250019], [5.133703, 1.8048], [6.852621, 2.537016], [8.948744, 3.478047], [11.417648, 4.640509], [14.293846, 6.085098], [17.634387, 7.851123], [21.360828, 9.886831], [25.29956, 12.160142], [29.428878, 14.674388], [33.707138, 17.452533], [38.129755, 20.506174], [42.671778, 23.796002], [47.229102, 27.303349], [51.800588, 31.060857], [56.383771, 35.053496], [60.886558, 39.145526], [65.12792, 43.181575], [69.030354, 47.116849], [72.617033, 51.025646], [75.986887, 54.923636], [79.112304, 58.743632], [81.975561, 62.443223], [84.537139, 65.922443], [86.782817, 69.135506], [88.71901, 72.103335], [90.413815, 74.878966], [91.908817, 77.500639], [93.228911, 79.953304], [94.381653, 82.20716], [95.359352, 84.209133], [96.170082, 85.973719], [96.837248, 87.5051], [97.378991, 88.838761], [97.8273, 90.020506], [98.200135, 91.065991], [98.506646, 91.96714], [98.752685, 92.735267], [98.949784, 93.390185], [99.10766, 93.94721], [99.232528, 94.417506], [99.334335, 94.838423], [99.42121, 95.226477], [99.497035, 95.589049], [99.563629, 95.927413], [99.621726, 96.240868], [99.672192, 96.530566], [99.715746, 96.794464], [99.752893, 97.034788], [99.784601, 97.251679], [99.811139, 97.442528], [99.833203, 97.614678], [99.852181, 97.774104], [99.868723, 97.92227], [99.883153, 98.05955], [99.89576, 98.188276], [99.906951, 98.310902], [99.917064, 98.429897], [99.926265, 98.545001], [99.9346, 98.656238], [99.942191, 98.76409], [99.949086, 98.868769], [99.955426, 98.971691], [99.961279, 99.072938], [99.966677, 99.172455], [99.971673, 99.270765], [99.976302, 99.367541], [99.980575, 99.462525], [99.984496, 99.554946], [99.988063, 99.644199], [99.991314, 99.731953], [99.994366, 99.820708], [99.997264, 99.910225], [100, 100]]
    147. 

  147.     } 
    148. 

  148. 

  149.     // Initial values for the user lines.
    150. 

  150.     var userLine1Val = 42;
    151. 

  151.     var userLine2Val = 75;   
    152. 

  152. 

  153.     // find the index of the data point with the closest y value.
    154. 

  154.     // assumes y values are monotonically increasing.
    155. 

  155.     var findXValue = function (y, data) {
    156. 

  156.         var l = data.length;
    157. 

  157.         var temp;
    158. 

  158.         var d;
    159. 

  159.         var idx;
    160. 

  160.         var mid = Math.round(l/2);
    161. 

  161.         var interval = mid;
    162. 

  162.         var prevInterval = mid;
    163. 

  163.         var dist = null;
    164. 

  164.         var absDist = null;
    165. 

  165.         var hold = null;
    166. 

  166.         var ret = null;
    167. 

  167.         var x, x0, x1, y0, y1, lowidx, hiidx;
    168. 

  168. 

  169.         // check to see if we're in range
    170. 

  170.         if (y > data[l-1][1]) {
    171. 

  171.             return [l-1, data[l-1]];
    172. 

  172.         }
    173. 

  173.         else if (y < data[0][1]) {
    174. 

  174.             return [0, data[0]];
    175. 

  175.         }
    176. 

  176. 

  177.         for (var i=0; i<l; i++) {
    178. 

  178.             d = data[mid][1];
    179. 

  179.             dist = d - y;
    180. 

  180.             absDist = Math.abs(dist);
    181. 

  181.             interval = Math.round(interval/2);
    182. 

  182.             
    183. 

  183.             if (absDist < hold || hold === null) {
    184. 

  184.                 hold = absDist;
    185. 

  185.                 idx = mid;
    186. 

  186.             }
    187. 

  187. 

  188.             // if we're right on the pont, get out of here
    189. 

  189.             if (dist === 0) { 
    190. 

  190.                 ret = [idx, data[idx]];
    191. 

  191.                 break;
    192. 

  192.             }
    193. 

  193. 

  194.             // if we've narrowed it down to an interval, 
    195. 

  195.             // interpolate and get out of here
    196. 

  196.             else if (prevInterval === 1) {
    197. 

  197.                 // to the right, interpolate -1 to here
    198. 

  198.                 if (dist > 0) {
    199. 

  199.                     lowidx = idx - 1;
    200. 

  200.                     hiidx = idx;
    201. 

  201.                 }
    202. 

  202.                 else {
    203. 

  203.                     lowidx = idx;
    204. 

  204.                     hiidx = idx + 1;
    205. 

  205.                 }
    206. 

  206. 

  207.                 x0 = data[lowidx][0];
    208. 

  208.                 x1 = data[hiidx][0];
    209. 

  209.                 y0 = data[lowidx][1];
    210. 

  210.                 y1 = data[hiidx][1];
    211. 

  211. 

  212.                 x = x0 + (y - y0) / (y1 - y0) * (x1 - x0);
    213. 

  213. 

  214.                 ret = [idx, [x, y]];
    215. 

  215.                 break;
    216. 

  216.             }
    217. 

  217.             // to the right, go left and reduce
    218. 

  218.             else if (dist > 0) {
    219. 

  219.                 mid -= interval;
    220. 

  220.             }
    221. 

  221.             // to the left go right and increase
    222. 

  222.             else if (dist < 0) {
    223. 

  223.                 mid += interval;
    224. 

  224.             }
    225. 

  225. 

  226.             prevInterval = interval;
    227. 

  227.         }
    228. 

  228.         return ret;
    229. 

  229.     }
    230. 

  230. 

  231.     // determine initial values for horizontal and vertical overlay lines.
    232. 

  232. 

  233.     var line1x = findXValue(userLine1Val, dataSets.national)[1][0];
    234. 

  234.     var line2x = findXValue(userLine2Val, dataSets.national)[1][0];;
    235. 

  235.     var line3y = userLine1Val;
    236. 

  236.     var line4y = userLine2Val;
    237. 

  237. 

  238.     // make the plot
    239. 

  239.     
    240. 

  240.     plot1 = $.jqplot("chart1", [dataSets.national, dataSets.urban, dataSets.rural], {
    241. 

  241.         title: "Lorenz Curve",
    242. 

  242.         // To control the size of the grid, can set the gridPadding option,
    243. 

  243. 

  244.         // gridPadding: {top: 40, bottom: 60, left: 70, right: 50},
    245. 

  245. 

  246.         // but must know size of container ahead of time and figure out what paddings
    247. 

  247.         // you want to get a square grid.
    248. 

  248.         // Alternatively, can use the gridDimensions option.
    249. 

  249.         // gridDimensions doesn't get reapplied on replot() because plots
    250. 

  250.         // _gridPadding attribute is set the first time it is drawn and it
    251. 

  251.         // won't be overwritten.
    252. 

  252. 

  253.         gridDimensions: {height: 290, width: 290},
    254. 

  254.         seriesColors: ["#4bb2c5", "#c54b62", "#b2c54b"],
    255. 

  255.         cursor: {
    256. 

  256.             show: false
    257. 

  257.         },
    258. 

  258.         highlighter: {
    259. 

  259.             show: true,
    260. 

  260.             showMarker: false,
    261. 

  261.             useAxesFormatters: false,
    262. 

  262.             formatString: '%d, %.1f'
    263. 

  263.         },
    264. 

  264.         axesDefaults: {
    265. 

  265.             labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    266. 

  266.         },
    267. 

  267.         seriesDefaults: {
    268. 

  268.             showMarker: false
    269. 

  269.         },
    270. 

  270.         series: [
    271. 

  271.             {show: true},
    272. 

  272.             {show: false},
    273. 

  273.             {show: false}
    274. 

  274.         ],
    275. 

  275.         axes: {
    276. 

  276.             xaxis: {
    277. 

  277.                 label: '% of Population',
    278. 

  278.                 pad:0
    279. 

  279.             },
    280. 

  280.             yaxis: {
    281. 

  281.                 label: '% of Expenditure',
    282. 

  282.                 pad: 0
    283. 

  283.             }
    284. 

  284.         },
    285. 

  285.         grid: {
    286. 

  286.             drawBorder: false,
    287. 

  287.             shadow: false,
    288. 

  288.             // background: 'rgba(0,0,0,0)'  works.
    289. 

  289.             background: "white"
    290. 

  290.         },
    291. 

  291.         canvasOverlay: {
    292. 

  292.             show: true,
    293. 

  293.             objects: [,
    294. 

  294.                 {line: {
    295. 

  295.                     name: "line5",
    296. 

  296.                     start: [0,0],
    297. 

  297.                     stop: [100,100],
    298. 

  298.                     color: "#666666",
    299. 

  299.                     shadow: false,
    300. 

  300.                     showTooltip: false,
    301. 

  301.                     lineWidth: 3
    302. 

  302.                 }},
    303. 

  303.                 {horizontalLine: {
    304. 

  304.                     name: "line1",
    305. 

  305.                     y: userLine1Val,
    306. 

  306.                     color: "#d4c35D",
    307. 

  307.                     xmin: 0,
    308. 

  308.                     xmax: line1x,
    309. 

  309.                     shadow: false,
    310. 

  310.                     showTooltip: true,
    311. 

  311.                     tooltipFormatString: "%nPS=%'d",
    312. 

  312.                     showTooltipPrecision: 0.5
    313. 

  313.                 }},
    314. 

  314.                 {horizontalLine: {
    315. 

  315.                     name: "line2",
    316. 

  316.                     y: userLine2Val,
    317. 

  317.                     color: "#d4c35D",
    318. 

  318.                     xmin: 0,
    319. 

  319.                     xmax: line2x,
    320. 

  320.                     shadow: false,
    321. 

  321.                     showTooltip: true,
    322. 

  322.                     tooltipFormatString: "%nPS=%'d",
    323. 

  323.                     showTooltipPrecision: 0.5
    324. 

  324.                 }},
    325. 

  325.                 {verticalLine: {
    326. 

  326.                     name: "line3",
    327. 

  327.                     x: line1x,
    328. 

  328.                     color: "#d4c35D",
    329. 

  329.                     ymin: 0,
    330. 

  330.                     ymax: line3y,
    331. 

  331.                     shadow: false,
    332. 

  332.                     showTooltip: true,
    333. 

  333.                     tooltipFormatString: "PCE=%'d",
    334. 

  334.                     showTooltipPrecision: 0.5
    335. 

  335.                 }},
    336. 

  336.                 {verticalLine: {
    337. 

  337.                     name: "line4",
    338. 

  338.                     x: line2x,
    339. 

  339.                     color: "#d4c35D",
    340. 

  340.                     ymin: 0,
    341. 

  341.                     ymax: line4y,
    342. 

  342.                     shadow: false,
    343. 

  343.                     showTooltip: true,
    344. 

  344.                     tooltipFormatString: "PCE=%'d",
    345. 

  345.                     showTooltipPrecision: 0.5
    346. 

  346.                 }}
    347. 

  347.             ]
    348. 

  348.         }
    349. 

  349.     });
    350. 

  350. 

  351.     // add a date at the bottom.
    352. 

  352. 

  353.     var d = new $.jsDate();
    354. 

  354.     $("div.jqplot-datestamp").html("Generated on "+d.strftime("%v"));
    355. 

  355. 

  356.     // initialize form elements
    357. 

  357.     // set these before attaching event handlers.
    358. 

  358. 

  359.     $("input.dataSeries-checkbox").attr("checked", false);
    360. 

  360.     $("input.dataSeries-checkbox[name=dataSeries_national]").attr("checked", true);
    361. 

  361. 

  362.     $("input[type=radio][name=backgroundColor]").attr("checked", false);
    363. 

  363.     $("input[type=radio][name=backgroundColor][value=white]").attr("checked", true);
    364. 

  364. 

  365.     $("input[type=radio][name=lineWidth]").attr("checked", false);
    366. 

  366.     $('input[type=radio][name=lineWidth][value="2.5"]').attr("checked", true);
    367. 

  367. 

  368.     $("input[type=text][name=userLine1]").val(userLine1Val);
    369. 

  369.     $("input[type=text][name=userLine2]").val(userLine2Val);
    370. 

  370. 

  371.     $("input[type=checkbox][name=gridsVertical]").attr("checked", true);
    372. 

  372.     $("input[type=checkbox][name=gridsHorizontal]").attr("checked", true);
    373. 

  373.     $("input[type=checkbox][name=cutoffLines]").attr("checked", true);
    374. 

  374. 

  375. 

  376.     // attach event handlers to form elements
    377. 

  377. 

  378.     $("input[type=radio][name=backgroundColor]").change(function(){ 
    379. 

  379.         plot1.grid.background = $(this).val();
    380. 

  380.         plot1.replot();
    381. 

  381.     });
    382. 

  382. 

  383.     $("input.dataSeries-checkbox").change(function(){ 
    384. 

  384. 

  385.         plot1.series[0].show = false;
    386. 

  386.         plot1.series[1].show = false;
    387. 

  387.         plot1.series[2].show = false;
    388. 

  388. 

  389.         if ($('input[name=dataSeries_national]').get(0).checked === true) {
    390. 

  390.             plot1.series[0].show = true;
    391. 

  391.         }
    392. 

  392. 

  393.         if ($('input[name=dataSeries_urban]').get(0).checked === true) {
    394. 

  394.             plot1.series[1].show = true;
    395. 

  395.         }
    396. 

  396. 

  397.         if ($('input[name=dataSeries_rural]').get(0).checked === true) {
    398. 

  398.             plot1.series[2].show = true;
    399. 

  399.         }
    400. 

  400. 

  401.         // var co = plot1.plugins.canvasOverlay;
    402. 

  402.         // var x1max = findXValue($("input[type=text][name=userLine1]").val(), dataSets[val])[1][0];
    403. 

  403.         // co.get("line1").options.xmax = co.get("line3").options.x = x1max;
    404. 

  404.         // var x2max = findXValue($("input[type=text][name=userLine2]").val(), dataSets[val])[1][0];
    405. 

  405.         // co.get("line2").options.xmax = co.get("line4").options.x = x2max;
    406. 

  406. 

  407.         plot1.replot();
    408. 

  408.     });
    409. 

  409. 

  410.     $("input[type=checkbox][name=gridsVertical]").change(function(){
    411. 

  411.         plot1.axes.xaxis.tickOptions.showGridline = this.checked;
    412. 

  412.         plot1.replot();
    413. 

  413.     });
    414. 

  414. 

  415.     $("input[type=checkbox][name=gridsHorizontal]").change(function(){
    416. 

  416.         plot1.axes.yaxis.tickOptions.showGridline = this.checked;
    417. 

  417.         plot1.replot();
    418. 

  418.     });
    419. 

  419. 

  420.     $("input[type=checkbox][name=cutoffLines]").change(function(){
    421. 

  421.         var co = plot1.plugins.canvasOverlay;
    422. 

  422.         if (this.checked) {
    423. 

  423.             co.get('line1').options.show = true;
    424. 

  424.             co.get('line2').options.show = true;
    425. 

  425.             co.get('line3').options.show = true;
    426. 

  426.             co.get('line4').options.show = true;
    427. 

  427.         }
    428. 

  428.         else {
    429. 

  429.             co.get('line1').options.show = false;
    430. 

  430.             co.get('line2').options.show = false;
    431. 

  431.             co.get('line3').options.show = false;
    432. 

  432.             co.get('line4').options.show = false;
    433. 

  433.         }
    434. 

  434.         plot1.replot();
    435. 

  435.     });
    436. 

  436. 

  437.     $("input[type=text][name=userLine1]").keyup(function(){
    438. 

  438.         var val = parseFloat($(this).val());
    439. 

  439. 

  440.         var co = plot1.plugins.canvasOverlay;
    441. 

  441. 

  442.         co.get("line1").options.y = val;
    443. 

  443.         co.get("line3").options.ymax = val;
    444. 

  444. 

  445.         var xx = findXValue(val, plot1.series[0].data)[1][0];
    446. 

  446.         co.get("line1").options.xmax = co.get("line3").options.x = xx;
    447. 

  447. 

  448.         plot1.replot();
    449. 

  449.     });
    450. 

  450. 

  451.     $("input[type=text][name=userLine2]").keyup(function(){
    452. 

  452.         var val = parseFloat($(this).val());
    453. 

  453. 

  454.         var co = plot1.plugins.canvasOverlay;
    455. 

  455. 

  456.         co.get("line2").options.y = val;
    457. 

  457.         co.get("line4").options.ymax = val;
    458. 

  458.         
    459. 

  459.         var xx = findXValue(val, plot1.series[0].data)[1][0];
    460. 

  460.         co.get("line2").options.xmax = co.get("line4").options.x = xx;
    461. 

  461. 

  462.         plot1.replot();
    463. 

  463.     });
    464. 

  464. 

  465.     $("input[type=radio][name=lineWidth]").change(function(){
    466. 

  466.         var val = parseFloat($(this).val()), shadowOffset; 
    467. 

  467.         plot1.series[0].renderer.shapeRenderer.lineWidth = val;
    468. 

  468.         plot1.series[0].renderer.shadowRenderer.lineWidth = val;
    469. 

  469.         // for thick lines, scale shadow offset.
    470. 

  470.         if (val > 2.5) {
    471. 

  471.             shadowOffset = 1.25 * (1 + (Math.atan((val/2.5))/0.785398163 - 1)*0.6);
    472. 

  472.             // var shadow_offset = this.shadowOffset;
    473. 

  473.         }
    474. 

  474.         // for skinny lines, don't make such a big shadow.
    475. 

  475.         else {
    476. 

  476.             shadowOffset = 1.25*Math.atan((val/2.5))/0.785398163;
    477. 

  477.         }
    478. 

  478.         plot1.series[0].renderer.shadowRenderer.offset = shadowOffset;
    479. 

  479.         for (var i=0, l=plot1.plugins.canvasOverlay.objects.length; i<l; i++) {
    480. 

  480.             plot1.plugins.canvasOverlay.objects[i].options.lineWidth = val;
    481. 

  481.         }
    482. 

  482.         plot1.replot();
    483. 

  483.     });
    484. 

  484.     
    485. 

  485.     
    486. 

  486.     $("div.chart-container").resizable({delay:20, aspectRatio: true});    
    487. 

  487. 

  488.     $("div.chart-container").bind("resize", function(event, ui) {
    489. 

  489.         plot1.replot();
    490. 

  490.     });
    491. 

  491. 

  492.     $(".jqplot-target").mouseleave(function(){ $('.jqplot-canvasOverlay-tooltip, .jqplot-highlighter-tooltip, .jqpot-cursor-tooltip').hide(); });
    493. 

  493. });
    494. 

  494. 

  495. </script>
    496. 

  496. 

  497. 

  498. <!-- End example scripts -->
    499. 

  499. 

  500. <!-- Don't touch this! -->
    501. 

  501. 

  502. 

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

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

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

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

  507. <!-- End Don't touch this! -->
    508. 

  508. 

  509. <!-- Additional plugins go here -->>
    510. 

  510.   <script class="include" type="text/javascript" src="../plugins/jqplot.logAxisRenderer.min.js"></script>
    511. 

  511.   <script class="include" type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
    512. 

  512.   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
    513. 

  513.   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
    514. 

  514.   <script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
    515. 

  515.   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasOverlay.min.js"></script>
    516. 

  516.   <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
    517. 

  517. 

  518. <!-- End additional plugins -->
    519. 

  519. 

  520.         </div>
    521. 

  521.          <div class="col2">
    522. 

  522. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  547.            <div class="example-link"><a class="example-link" href="draw-rectangles.html">Draw Rectangles on Plots</a></div>
    548. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  579. 

  580.          </div>
    581. 

  581.                </div>
    582. 

  582.     </div>
    583. 

  583.     <script type="text/javascript" src="example.min.js"></script>
    584. 

  584. 

  585. </body>
    586. 

  586. 

  587. 

  588. </html>
    589.