| blob | 161ae911acc87b467c1ad7db1cc620e0c4b9681f |
3 <html>
4 <head>
13 <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
14 <script class="include" type="text/javascript" src="../jquery.min.js"></script>
17 </head>
18 <body>
19 <div class="logo">
20 <div class="nav">
21 <a class="nav" href="../../../index.php"><span>></span>Home</a>
22 <a class="nav" href="../../../docs/"><span>></span>Docs</a>
23 <a class="nav" href="../../download/"><span>></span>Download</a>
24 <a class="nav" href="../../../info.php"><span>></span>Info</a>
25 <a class="nav" href="../../../donate.php"><span>></span>Donate</a>
26 </div>
27 </div>
28 <div class="example-content">
30 <div class="example-nav">
31 <a href="kcp_lorenz.html">Previous</a> <a href="./">Examples</a> <a href="kcp_pyramid.html">Next</a></div>
34 <!-- Example scripts go here -->
37 <link class="include" type="text/css" href="jquery-ui/css/smoothness/jquery-ui.min.css" rel="Stylesheet" />
39 <style type="text/css">
41 .chart-container {
42 border: 1px solid darkblue;
43 padding: 30px;
44 width: 500px;
45 height: 400px;
47 }
49 #chart1 {
50 width: 96%;
51 height: 96%;
52 }
54 .jqplot-datestamp {
55 font-size: 0.8em;
56 color: #777;
57 /* margin-top: 1em;
58 text-align: right;*/
59 font-style: italic;
60 position: absolute;
61 bottom: 15px;
62 right: 15px;
63 }
65 td.controls li {
66 list-style-type: none;
67 }
69 td.controls ul {
70 margin-top: 0.5em;
71 padding-left: 0.2em;
72 }
74 pre.code {
75 margin-top: 45px;
76 clear: both;
77 }
80 </style>
82 <table class="app">
83 <td class="controls">
85 <div>
86 Data Series:
87 <ul>
88 <li><input name="dataSeries" value="national" type="radio" checked />National</li>
89 <li><input name="dataSeries" value="urban" type="radio" />Urban</li>
90 <li><input name="dataSeries" value="rural" type="radio" />Rural</li>
91 </ul>
92 </div>
94 <div>
95 Background Color:
96 <ul>
97 <li><input name="backgroundColor" value="white" type="radio" checked />Default</li>
98 <li><input name="backgroundColor" value="#efefef" type="radio" />Gray</li>
99 </ul>
100 </div>
102 <div>
103 Line Width:
104 <ul>
105 <li><input name="lineWidth" value="2.5" type="radio" checked />Thin</li>
106 <li><input name="lineWidth" value="5" type="radio" />Thick</li>
107 </ul>
108 </div>
110 <div>
111 Grids:
112 <ul>
113 <li><input name="gridsVertical" value="vertical" type="checkbox" checked />Vertical</li>
114 <li><input name="gridsHorizontal" value="horizontal" type="checkbox" checked />Horizontal</li>
115 </ul>
116 </div>
118 <div>
119 Set lines at:
120 <ul>
121 <li><input name="userLine1" value="8250" type="text" size="8" /> and </li>
122 <li><input name="userLine2" value="60000" type="text" size="8" /></li>
123 </ul>
124 </div>
125 </td>
127 <td class="chart">
128 <div class="chart-container">
129 <div id="chart1"></div>
130 <div class="jqplot-datestamp"></div>
131 </div>
132 </td>
134 </table>
136 <pre class="code brush:js"></pre>
140 <script class="code" type="text/javascript">
141 $(document).ready(function(){
142 var dataSets = {
143 national: [[1521.3938, 0.03708],[1626.3757, 0.042449],[1738.6018, 0.049646],[1858.5719, 0.060338],[1986.8205, 0.071497],
144 [2123.9187, 0.087044],[2270.4772, 0.104666],[2427.1488, 0.128184],[2594.6313, 0.159819],[2773.6707, 0.199611],
145 [2965.0643, 0.243673],[3169.6651, 0.287224],[3388.384, 0.342159],[3622.1955, 0.415635],[3872.1408, 0.517318],
146 [4139.3332, 0.659341],[4424.963, 0.840113],[4730.3023, 1.074108],[5056.7112, 1.442097],[5405.6431, 1.981591],
147 [5778.6531, 2.7619],[6177.4022, 3.842131],[6603.6665, 5.373085],[7059.3446, 7.749981],[7546.4664, 11.242774],
148 [8067.2013, 15.291262],[8623.869, 19.8475],[9218.9488, 25.015106],[9855.0905, 30.121086],[10535.1293, 35.513309],
149 [11262.0934, 41.587183],[12039.2208, 46.321554],[12869.973, 49.223654],[13758.0502, 51.762768],[14707.4081, 54.47173],
150 [15722.2754, 56.863937],[16807.1724, 57.920473],[17966.9296, 58.642722],[19206.7162, 59.984755],[20532.0529, 61.048963],
151 [21948.8429, 59.669989],[23463.3991, 56.956409],[25082.4581, 54.101304],[26813.238, 53.0051],[28663.448, 51.385158],
152 [30641.3597, 50.165756],[32755.7239, 47.205435],[35015.9867, 43.941876],[37432.2159, 40.609332],[40015.1736, 37.393368],
153 [42776.4074, 34.753172],[45728.1335, 31.843056],[48883.5393, 29.239575],[52256.6796, 26.946508],[55862.5786, 24.54375],
154 [59717.3573, 21.987525],[63838.07, 19.447158],[68243.1267, 16.947396],[72952.1481, 14.562087],[77986.109, 12.487872],
155 [83367.4313, 10.610279],[89120.1733, 9.061827],[95269.7861, 7.759485],[101843.7444, 6.5685],[108871.3294, 5.529717],
156 [116383.8431, 4.605731],[124414.8718, 3.803268],[132999.9458, 3.106561],[142177.421, 2.580555],[151988.1749, 2.127878],
157 [162475.9062, 1.720439],[173687.5023, 1.418638],[185672.5653, 1.173246],[198484.6408, 0.977631],[212180.7957, 0.832246],
158 [226822.0345, 0.720185],[242473.814, 0.624252],[259205.3802, 0.54125],[277091.4846, 0.469102],[296211.7947, 0.415329],
159 [316651.475, 0.374489],[338501.5668, 0.335609],[361859.7555, 0.297025],[386829.3815, 0.261974],[413522.0015, 0.228367],
160 [442056.5084, 0.19707],[472559.9991, 0.17066],[505168.8456, 0.147428],[540027.3147, 0.128476],[577291.1437, 0.112712],
161 [617126.311, 0.097754],[659710.2484, 0.083718],[705233.3359, 0.070908],[753896.9752, 0.061016],[805918.5808, 0.053385],
162 [861529.8645, 0.047077],[920978.5269, 0.041268],[984529.3611, 0.035943],[1052466.484, 0.031318],[1125090.461, 0.027688]],
164 urban: [[2918.1368, 0.0059], [3099.059, 0.0071], [3291.1983, 0.0086], [3495.2501, 0.0105], [3711.9529, 0.0127],
165 [3942.0911, 0.015], [4186.4977, 0.018], [4446.0574, 0.0218], [4721.7095, 0.0262], [5014.4519, 0.0315],
166 [5325.3441, 0.03890], [5655.5113, 0.0493], [6006.1487, 0.0633], [6378.5253, 0.0833], [6773.9889, 0.1099],
167 [7193.971, 0.1432], [7639.9917, 0.18610], [8113.6654, 0.2476], [8616.7064, 0.3266], [9150.9356, 0.432399],
168 [9718.2865, 0.5759], [10320.8128, 0.7497], [10960.6953, 0.9448], [11640.25, 1.1693], [12361.9366, 1.4078],
169 [13128.3672, 1.6660], [13942.3158, 1.9247], [14806.7287, 2.10529], [15724.7345, 2.291], [16699.656, 2.4804],
170 [17735.0219, 2.6917], [18834.5796, 2.9825], [20002.3091, 3.350899], [21242.4369, 3.7607], [22559.4426, 4.1855],
171 [23958.1299, 4.5129], [25443.5105, 4.8198], [27020.9832, 5.254099], [28696.2577, 5.6751], [30475.3976, 6.1493],
172 [32364.8747, 6.3607], [34371.4652, 6.4803], [36502.4624, 6.7534], [38765.5793, 6.7358], [41169.0072, 6.4996],
173 [43721.489, 5.9422], [46432.1785, 5.7844], [49310.9281, 5.943099], [52368.1573, 5.9219], [55614.9317, 5.635099],
174 [59063.062, 5.1036], [62724.914, 4.6486], [66613.7972, 4.2762], [70743.7873, 3.8538], [75129.8328, 3.4799],
175 [79787.8886, 3.066], [84734.6595, 2.6792], [89988.1253, 2.312799], [95567.3009, 2.0393], [101492.3799, 1.7922],
176 [107784.9158, 1.5635], [114467.4749, 1.3438], [121564.3462, 1.1612], [129101.2165, 0.992799], [137105.3654, 0.818],
177 [145605.9093, 0.6722], [154633.333, 0.549], [164220.4481, 0.4517], [174401.955, 0.379299], [185214.7052, 0.3252],
178 [196698.0321, 0.2772], [208893.1174, 0.23700], [221844.2859, 0.2049], [235598.4142, 0.1818], [250205.285, 0.1607],
179 [265718.0332, 0.1396], [282192.2909, 0.1211], [299687.9363, 0.1047], [318268.2947, 0.0906], [338000.617, 0.0787],
180 [358956.683, 0.0681], [381211.6455, 0.0586], [404846.394, 0.0504], [429946.4736, 0.0421], [456602.7336, 0.034],
181 [484912.1405, 0.02799], [514976.218, 0.0238], [546904.2389, 0.0206], [580811.7657, 0.0179], [616821.5259, 0.0154],
182 [655064.5111, 0.013], [695677.8688, 0.011], [738809.2149, 0.0093], [784614.6621, 0.0081], [833260.0023, 0.0073],
183 [884922.1907, 0.0066], [939786.4993, 0.0061], [998052.3412, 0.0056], [1059930.608, 0.0052], [1125645.267, 0.0048]],
185 rural: [[1522.3755, 0.005], [1621.4335, 0.005], [1726.937, 0.006], [1839.3056, 0.00699], [1958.9857, 0.009],
186 [2086.4531, 0.01], [2222.2145, 0.012], [2366.8099, 0.015], [2520.8136, 0.018], [2684.8381, 0.023], [2859.5353, 0.029],
187 [3045.6, 0.036], [3243.7713, 0.043], [3454.8371, 0.05], [3679.6367, 0.06], [3919.0639, 0.074], [4174.0698, 0.092],
188 [4445.6684, 0.117], [4734.9398, 0.148], [5043.0332, 0.189], [5371.1735, 0.258], [5720.6654, 0.356],
189 [6092.8986, 0.488], [6489.3516, 0.672], [6911.6011, 0.946], [7361.3256, 1.355], [7840.3135, 1.87399],
190 [8350.4675, 2.434], [8893.8162, 3.016], [9472.5195, 3.639], [10088.8789, 4.22], [10745.3427, 4.92399],
191 [11444.5212, 5.652], [12189.194, 6.117], [12982.3225, 6.414], [13827.0569, 6.66], [14726.7567, 6.9099],
192 [15684.9997, 7.131], [16705.5921, 7.213], [17792.5925, 7.22], [18950.322, 7.263], [20183.3846, 7.2459],
193 [21496.6782, 6.973], [22895.4161, 6.457], [24385.1837, 5.9110], [25971.888, 5.513], [27661.8365, 5.162],
194 [29461.7179, 4.749], [31378.744, 4.319], [33420.5079, 3.81299], [35595.0905, 3.306], [37911.2052, 2.867],
195 [40378.0258, 2.518], [43005.3584, 2.233], [45803.6014, 1.96099], [48783.9674, 1.692], [51958.2609, 1.411],
196 [55339.1005, 1.168],[58939.867, 0.9520], [62774.9884, 0.77799], [66859.655, 0.647], [71210.033, 0.538],
197 [75843.5542, 0.4349], [80778.5711, 0.348], [86034.7015, 0.2789999], [91632.7482, 0.22300], [97595.1423, 0.177],
198 [103945.4998, 0.148], [110709.0646, 0.128], [117912.6058, 0.112999], [125584.9876, 0.099], [133756.5988, 0.086],
199 [142459.781, 0.074], [151729.4076, 0.064], [161602.1937, 0.054], [172117.386, 0.046], [183316.6015, 0.038],
200 [195244.7151, 0.032], [207948.9717, 0.02799], [221479.8735, 0.025], [235890.9734, 0.021], [251240.0159, 0.019],
201 [267587.7958, 0.017], [284999.0141, 0.015], [303543.4372, 0.013999], [323294.5157, 0.013], [344330.7648, 0.011],
202 [366735.4418, 0.01], [390598.3214, 0.01], [416013.9199, 0.009], [443083.2701, 0.008], [471913.507, 0.008],
203 [502620.1526, 0.00699], [535324.8297, 0.006], [570156.9769, 0.006], [607256.1655, 0.005], [646769.3381, 0.005],
204 [688853.5686, 0.005], [733675.418, 0.004], [781414.486, 0.004]]
205 }
209 plot1 = $.jqplot("chart1", [dataSets.national], {
210 title: "Probability Density Function",
211 cursor: {
212 show: false
213 },
214 highlighter: {
215 show: true,
216 showMarker: false,
217 useAxesFormatters: false,
218 formatString: '%d, %.1f'
219 },
220 axesDefaults: {
221 labelRenderer: $.jqplot.CanvasAxisLabelRenderer
222 },
223 seriesDefaults: {
224 showMarker: false
225 },
226 axes: {
227 xaxis: {
228 label: 'Per Capita Expenditure (local currency)',
229 renderer: $.jqplot.LogAxisRenderer,
230 pad:0,
231 ticks: [700, 7000, 70000, 700000, {value:1000000, showLabel:false, showMark:false, showGridline:false}],
232 tickOptions: {
233 formatString: "%d"
234 }
235 },
236 yaxis: {
237 label: 'Population Share (%)',
238 forceTickAt0: true,
239 pad: 0
240 }
241 },
242 grid: {
243 drawBorder: false,
244 shadow: false,
245 // background: 'rgba(0,0,0,0)' works.
246 background: "white"
247 },
248 canvasOverlay: {
249 show: true,
250 objects: [
251 {verticalLine: {
252 name: "line1",
253 x: 8250,
254 color: "#d4c35D",
255 yOffset: 0,
256 shadow: false,
257 showTooltip: true,
258 tooltipFormatString: "PCE=%'d",
259 showTooltipPrecision: 0.5
260 }},
261 {verticalLine: {
262 name: "line2",
263 x: 60000,
264 color: "#d4c35D",
265 yOffset: 0,
266 shadow: false,
267 showTooltip: true,
268 tooltipFormatString: "PCE=%'d",
269 showTooltipPrecision: 0.5
270 }}
271 ]
272 }
273 });
275 var d = new $.jsDate();
276 $("div.jqplot-datestamp").html("Generated on "+d.strftime("%v"));
278 $("input[type=radio][name=backgroundColor]").change(function(){
279 plot1.grid.background = $(this).val();
280 plot1.replot();
281 });
283 $("input[type=radio][name=dataSeries]").change(function(){
284 var val = $(this).val();
285 plot1.series[0].data = dataSets[val];
287 switch (val) {
288 case "national":
289 plot1.series[0].renderer.shapeRenderer.strokeStyle = "#4bb2c5";
290 break;
291 case "urban":
292 plot1.series[0].renderer.shapeRenderer.strokeStyle = "#c54b62";
293 break;
294 case "rural":
295 plot1.series[0].renderer.shapeRenderer.strokeStyle = "#b2c54b";
296 break;
297 default:
298 plot1.series[0].renderer.shapeRenderer.strokeStyle = "#4bb2c5";
299 break;
300 }
301 // hack to make sure plot auto computes a new format string if needed.
302 plot1.axes.yaxis.tickOptions.formatString = ''
303 plot1.replot({resetAxes:["yaxis"]});
304 });
306 $("input[type=checkbox][name=gridsVertical]").change(function(){
307 plot1.axes.xaxis.tickOptions.showGridline = this.checked;
308 plot1.replot();
309 });
311 $("input[type=checkbox][name=gridsHorizontal]").change(function(){
312 plot1.axes.yaxis.tickOptions.showGridline = this.checked;
313 plot1.replot();
314 });
316 $("input[type=text][name=userLine1]").keyup(function(){
317 var val = parseFloat($(this).val());
318 plot1.plugins.canvasOverlay.get("line1").options.x = val;
319 plot1.replot();
320 });
322 $("input[type=text][name=userLine2]").keyup(function(){
323 var val = parseFloat($(this).val());
324 plot1.plugins.canvasOverlay.get("line2").options.x = val;
325 plot1.replot();
326 });
328 $("input[type=radio][name=lineWidth]").change(function(){
329 var val = parseFloat($(this).val()), shadowOffset;
330 plot1.series[0].renderer.shapeRenderer.lineWidth = val;
331 plot1.series[0].renderer.shadowRenderer.lineWidth = val;
332 // for thick lines, scale shadow offset.
333 if (val > 2.5) {
334 shadowOffset = 1.25 * (1 + (Math.atan((val/2.5))/0.785398163 - 1)*0.6);
335 // var shadow_offset = this.shadowOffset;
336 }
337 // for skinny lines, don't make such a big shadow.
338 else {
339 shadowOffset = 1.25*Math.atan((val/2.5))/0.785398163;
340 }
341 plot1.series[0].renderer.shadowRenderer.offset = shadowOffset;
342 plot1.plugins.canvasOverlay.get("line1").options.lineWidth = val;
343 plot1.plugins.canvasOverlay.get("line2").options.lineWidth = val;
344 plot1.replot();
345 });
348 $("div.chart-container").resizable({delay:20});
350 $("div.chart-container").bind("resize", function(event, ui) {
351 plot1.replot();
352 });
353 });
355 </script>
358 <!-- End example scripts -->
360 <!-- Don't touch this! -->
363 <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
364 <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
365 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
366 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
367 <!-- End Don't touch this! -->
369 <!-- Additional plugins go here -->>
370 <script class="include" type="text/javascript" src="../plugins/jqplot.logAxisRenderer.min.js"></script>
371 <script class="include" type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
372 <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
373 <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
374 <script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
375 <script class="include" type="text/javascript" src="../plugins/jqplot.canvasOverlay.min.js"></script>
376 <script class="include" type="text/javascript" src="jquery-ui/js/jquery-ui.min.js"></script>
378 <!-- End additional plugins -->
381 </div>
382 <script type="text/javascript" src="example.min.js"></script>
384 </body>
387 </html>