| 875 |
lars |
1 |
<!DOCTYPE html>
|
|
|
2 |
|
|
|
3 |
<html>
|
|
|
4 |
<head>
|
|
|
5 |
|
|
|
6 |
<title>Probability Density Function Chart</title>
|
|
|
7 |
|
|
|
8 |
<link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
|
|
|
9 |
<link rel="stylesheet" type="text/css" href="examples.min.css" />
|
|
|
10 |
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
|
|
|
11 |
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
|
|
|
12 |
|
|
|
13 |
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
|
|
|
14 |
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
|
15 |
|
|
|
16 |
|
|
|
17 |
</head>
|
|
|
18 |
<body>
|
|
|
19 |
<div id="header">
|
|
|
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="colmask leftmenu">
|
|
|
29 |
<div class="colleft">
|
|
|
30 |
<div class="col1" id="example-content">
|
|
|
31 |
|
|
|
32 |
|
|
|
33 |
<!-- Example scripts go here -->
|
|
|
34 |
|
|
|
35 |
|
|
|
36 |
<link class="include" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
|
|
|
37 |
|
|
|
38 |
<style type="text/css">
|
|
|
39 |
|
|
|
40 |
.chart-container {
|
|
|
41 |
border: 1px solid darkblue;
|
|
|
42 |
padding: 30px;
|
|
|
43 |
width: 500px;
|
|
|
44 |
height: 400px;
|
|
|
45 |
|
|
|
46 |
}
|
|
|
47 |
|
|
|
48 |
#chart1 {
|
|
|
49 |
width: 96%;
|
|
|
50 |
height: 96%;
|
|
|
51 |
}
|
|
|
52 |
|
|
|
53 |
.jqplot-datestamp {
|
|
|
54 |
font-size: 0.8em;
|
|
|
55 |
color: #777;
|
|
|
56 |
/* margin-top: 1em;
|
|
|
57 |
text-align: right;*/
|
|
|
58 |
font-style: italic;
|
|
|
59 |
position: absolute;
|
|
|
60 |
bottom: 15px;
|
|
|
61 |
right: 15px;
|
|
|
62 |
}
|
|
|
63 |
|
|
|
64 |
td.controls li {
|
|
|
65 |
list-style-type: none;
|
|
|
66 |
}
|
|
|
67 |
|
|
|
68 |
td.controls ul {
|
|
|
69 |
margin-top: 0.5em;
|
|
|
70 |
padding-left: 0.2em;
|
|
|
71 |
}
|
|
|
72 |
|
|
|
73 |
pre.code {
|
|
|
74 |
margin-top: 45px;
|
|
|
75 |
clear: both;
|
|
|
76 |
}
|
|
|
77 |
|
|
|
78 |
|
|
|
79 |
</style>
|
|
|
80 |
|
|
|
81 |
<table class="app">
|
|
|
82 |
<td class="controls">
|
|
|
83 |
|
|
|
84 |
<div>
|
|
|
85 |
Data Series:
|
|
|
86 |
<ul>
|
|
|
87 |
<li><input name="dataSeries" value="national" type="radio" checked />National</li>
|
|
|
88 |
<li><input name="dataSeries" value="urban" type="radio" />Urban</li>
|
|
|
89 |
<li><input name="dataSeries" value="rural" type="radio" />Rural</li>
|
|
|
90 |
</ul>
|
|
|
91 |
</div>
|
|
|
92 |
|
|
|
93 |
<div>
|
|
|
94 |
Background Color:
|
|
|
95 |
<ul>
|
|
|
96 |
<li><input name="backgroundColor" value="white" type="radio" checked />Default</li>
|
|
|
97 |
<li><input name="backgroundColor" value="#efefef" type="radio" />Gray</li>
|
|
|
98 |
</ul>
|
|
|
99 |
</div>
|
|
|
100 |
|
|
|
101 |
<div>
|
|
|
102 |
Line Width:
|
|
|
103 |
<ul>
|
|
|
104 |
<li><input name="lineWidth" value="2.5" type="radio" checked />Thin</li>
|
|
|
105 |
<li><input name="lineWidth" value="5" type="radio" />Thick</li>
|
|
|
106 |
</ul>
|
|
|
107 |
</div>
|
|
|
108 |
|
|
|
109 |
<div>
|
|
|
110 |
Grids:
|
|
|
111 |
<ul>
|
|
|
112 |
<li><input name="gridsVertical" value="vertical" type="checkbox" checked />Vertical</li>
|
|
|
113 |
<li><input name="gridsHorizontal" value="horizontal" type="checkbox" checked />Horizontal</li>
|
|
|
114 |
</ul>
|
|
|
115 |
</div>
|
|
|
116 |
|
|
|
117 |
<div>
|
|
|
118 |
Set lines at:
|
|
|
119 |
<ul>
|
|
|
120 |
<li><input name="userLine1" value="8250" type="text" size="8" /> and </li>
|
|
|
121 |
<li><input name="userLine2" value="60000" type="text" size="8" /></li>
|
|
|
122 |
</ul>
|
|
|
123 |
</div>
|
|
|
124 |
</td>
|
|
|
125 |
|
|
|
126 |
<td class="chart">
|
|
|
127 |
<div class="chart-container">
|
|
|
128 |
<div id="chart1"></div>
|
|
|
129 |
<div class="jqplot-datestamp"></div>
|
|
|
130 |
</div>
|
|
|
131 |
</td>
|
|
|
132 |
|
|
|
133 |
</table>
|
|
|
134 |
|
|
|
135 |
<pre class="code brush:js"></pre>
|
|
|
136 |
|
|
|
137 |
|
|
|
138 |
|
|
|
139 |
<script class="code" type="text/javascript">
|
|
|
140 |
$(document).ready(function(){
|
|
|
141 |
var dataSets = {
|
|
|
142 |
national: [[1521.3938, 0.03708],[1626.3757, 0.042449],[1738.6018, 0.049646],[1858.5719, 0.060338],[1986.8205, 0.071497],
|
|
|
143 |
[2123.9187, 0.087044],[2270.4772, 0.104666],[2427.1488, 0.128184],[2594.6313, 0.159819],[2773.6707, 0.199611],
|
|
|
144 |
[2965.0643, 0.243673],[3169.6651, 0.287224],[3388.384, 0.342159],[3622.1955, 0.415635],[3872.1408, 0.517318],
|
|
|
145 |
[4139.3332, 0.659341],[4424.963, 0.840113],[4730.3023, 1.074108],[5056.7112, 1.442097],[5405.6431, 1.981591],
|
|
|
146 |
[5778.6531, 2.7619],[6177.4022, 3.842131],[6603.6665, 5.373085],[7059.3446, 7.749981],[7546.4664, 11.242774],
|
|
|
147 |
[8067.2013, 15.291262],[8623.869, 19.8475],[9218.9488, 25.015106],[9855.0905, 30.121086],[10535.1293, 35.513309],
|
|
|
148 |
[11262.0934, 41.587183],[12039.2208, 46.321554],[12869.973, 49.223654],[13758.0502, 51.762768],[14707.4081, 54.47173],
|
|
|
149 |
[15722.2754, 56.863937],[16807.1724, 57.920473],[17966.9296, 58.642722],[19206.7162, 59.984755],[20532.0529, 61.048963],
|
|
|
150 |
[21948.8429, 59.669989],[23463.3991, 56.956409],[25082.4581, 54.101304],[26813.238, 53.0051],[28663.448, 51.385158],
|
|
|
151 |
[30641.3597, 50.165756],[32755.7239, 47.205435],[35015.9867, 43.941876],[37432.2159, 40.609332],[40015.1736, 37.393368],
|
|
|
152 |
[42776.4074, 34.753172],[45728.1335, 31.843056],[48883.5393, 29.239575],[52256.6796, 26.946508],[55862.5786, 24.54375],
|
|
|
153 |
[59717.3573, 21.987525],[63838.07, 19.447158],[68243.1267, 16.947396],[72952.1481, 14.562087],[77986.109, 12.487872],
|
|
|
154 |
[83367.4313, 10.610279],[89120.1733, 9.061827],[95269.7861, 7.759485],[101843.7444, 6.5685],[108871.3294, 5.529717],
|
|
|
155 |
[116383.8431, 4.605731],[124414.8718, 3.803268],[132999.9458, 3.106561],[142177.421, 2.580555],[151988.1749, 2.127878],
|
|
|
156 |
[162475.9062, 1.720439],[173687.5023, 1.418638],[185672.5653, 1.173246],[198484.6408, 0.977631],[212180.7957, 0.832246],
|
|
|
157 |
[226822.0345, 0.720185],[242473.814, 0.624252],[259205.3802, 0.54125],[277091.4846, 0.469102],[296211.7947, 0.415329],
|
|
|
158 |
[316651.475, 0.374489],[338501.5668, 0.335609],[361859.7555, 0.297025],[386829.3815, 0.261974],[413522.0015, 0.228367],
|
|
|
159 |
[442056.5084, 0.19707],[472559.9991, 0.17066],[505168.8456, 0.147428],[540027.3147, 0.128476],[577291.1437, 0.112712],
|
|
|
160 |
[617126.311, 0.097754],[659710.2484, 0.083718],[705233.3359, 0.070908],[753896.9752, 0.061016],[805918.5808, 0.053385],
|
|
|
161 |
[861529.8645, 0.047077],[920978.5269, 0.041268],[984529.3611, 0.035943],[1052466.484, 0.031318],[1125090.461, 0.027688]],
|
|
|
162 |
|
|
|
163 |
urban: [[2918.1368, 0.0059], [3099.059, 0.0071], [3291.1983, 0.0086], [3495.2501, 0.0105], [3711.9529, 0.0127],
|
|
|
164 |
[3942.0911, 0.015], [4186.4977, 0.018], [4446.0574, 0.0218], [4721.7095, 0.0262], [5014.4519, 0.0315],
|
|
|
165 |
[5325.3441, 0.03890], [5655.5113, 0.0493], [6006.1487, 0.0633], [6378.5253, 0.0833], [6773.9889, 0.1099],
|
|
|
166 |
[7193.971, 0.1432], [7639.9917, 0.18610], [8113.6654, 0.2476], [8616.7064, 0.3266], [9150.9356, 0.432399],
|
|
|
167 |
[9718.2865, 0.5759], [10320.8128, 0.7497], [10960.6953, 0.9448], [11640.25, 1.1693], [12361.9366, 1.4078],
|
|
|
168 |
[13128.3672, 1.6660], [13942.3158, 1.9247], [14806.7287, 2.10529], [15724.7345, 2.291], [16699.656, 2.4804],
|
|
|
169 |
[17735.0219, 2.6917], [18834.5796, 2.9825], [20002.3091, 3.350899], [21242.4369, 3.7607], [22559.4426, 4.1855],
|
|
|
170 |
[23958.1299, 4.5129], [25443.5105, 4.8198], [27020.9832, 5.254099], [28696.2577, 5.6751], [30475.3976, 6.1493],
|
|
|
171 |
[32364.8747, 6.3607], [34371.4652, 6.4803], [36502.4624, 6.7534], [38765.5793, 6.7358], [41169.0072, 6.4996],
|
|
|
172 |
[43721.489, 5.9422], [46432.1785, 5.7844], [49310.9281, 5.943099], [52368.1573, 5.9219], [55614.9317, 5.635099],
|
|
|
173 |
[59063.062, 5.1036], [62724.914, 4.6486], [66613.7972, 4.2762], [70743.7873, 3.8538], [75129.8328, 3.4799],
|
|
|
174 |
[79787.8886, 3.066], [84734.6595, 2.6792], [89988.1253, 2.312799], [95567.3009, 2.0393], [101492.3799, 1.7922],
|
|
|
175 |
[107784.9158, 1.5635], [114467.4749, 1.3438], [121564.3462, 1.1612], [129101.2165, 0.992799], [137105.3654, 0.818],
|
|
|
176 |
[145605.9093, 0.6722], [154633.333, 0.549], [164220.4481, 0.4517], [174401.955, 0.379299], [185214.7052, 0.3252],
|
|
|
177 |
[196698.0321, 0.2772], [208893.1174, 0.23700], [221844.2859, 0.2049], [235598.4142, 0.1818], [250205.285, 0.1607],
|
|
|
178 |
[265718.0332, 0.1396], [282192.2909, 0.1211], [299687.9363, 0.1047], [318268.2947, 0.0906], [338000.617, 0.0787],
|
|
|
179 |
[358956.683, 0.0681], [381211.6455, 0.0586], [404846.394, 0.0504], [429946.4736, 0.0421], [456602.7336, 0.034],
|
|
|
180 |
[484912.1405, 0.02799], [514976.218, 0.0238], [546904.2389, 0.0206], [580811.7657, 0.0179], [616821.5259, 0.0154],
|
|
|
181 |
[655064.5111, 0.013], [695677.8688, 0.011], [738809.2149, 0.0093], [784614.6621, 0.0081], [833260.0023, 0.0073],
|
|
|
182 |
[884922.1907, 0.0066], [939786.4993, 0.0061], [998052.3412, 0.0056], [1059930.608, 0.0052], [1125645.267, 0.0048]],
|
|
|
183 |
|
|
|
184 |
rural: [[1522.3755, 0.005], [1621.4335, 0.005], [1726.937, 0.006], [1839.3056, 0.00699], [1958.9857, 0.009],
|
|
|
185 |
[2086.4531, 0.01], [2222.2145, 0.012], [2366.8099, 0.015], [2520.8136, 0.018], [2684.8381, 0.023], [2859.5353, 0.029],
|
|
|
186 |
[3045.6, 0.036], [3243.7713, 0.043], [3454.8371, 0.05], [3679.6367, 0.06], [3919.0639, 0.074], [4174.0698, 0.092],
|
|
|
187 |
[4445.6684, 0.117], [4734.9398, 0.148], [5043.0332, 0.189], [5371.1735, 0.258], [5720.6654, 0.356],
|
|
|
188 |
[6092.8986, 0.488], [6489.3516, 0.672], [6911.6011, 0.946], [7361.3256, 1.355], [7840.3135, 1.87399],
|
|
|
189 |
[8350.4675, 2.434], [8893.8162, 3.016], [9472.5195, 3.639], [10088.8789, 4.22], [10745.3427, 4.92399],
|
|
|
190 |
[11444.5212, 5.652], [12189.194, 6.117], [12982.3225, 6.414], [13827.0569, 6.66], [14726.7567, 6.9099],
|
|
|
191 |
[15684.9997, 7.131], [16705.5921, 7.213], [17792.5925, 7.22], [18950.322, 7.263], [20183.3846, 7.2459],
|
|
|
192 |
[21496.6782, 6.973], [22895.4161, 6.457], [24385.1837, 5.9110], [25971.888, 5.513], [27661.8365, 5.162],
|
|
|
193 |
[29461.7179, 4.749], [31378.744, 4.319], [33420.5079, 3.81299], [35595.0905, 3.306], [37911.2052, 2.867],
|
|
|
194 |
[40378.0258, 2.518], [43005.3584, 2.233], [45803.6014, 1.96099], [48783.9674, 1.692], [51958.2609, 1.411],
|
|
|
195 |
[55339.1005, 1.168],[58939.867, 0.9520], [62774.9884, 0.77799], [66859.655, 0.647], [71210.033, 0.538],
|
|
|
196 |
[75843.5542, 0.4349], [80778.5711, 0.348], [86034.7015, 0.2789999], [91632.7482, 0.22300], [97595.1423, 0.177],
|
|
|
197 |
[103945.4998, 0.148], [110709.0646, 0.128], [117912.6058, 0.112999], [125584.9876, 0.099], [133756.5988, 0.086],
|
|
|
198 |
[142459.781, 0.074], [151729.4076, 0.064], [161602.1937, 0.054], [172117.386, 0.046], [183316.6015, 0.038],
|
|
|
199 |
[195244.7151, 0.032], [207948.9717, 0.02799], [221479.8735, 0.025], [235890.9734, 0.021], [251240.0159, 0.019],
|
|
|
200 |
[267587.7958, 0.017], [284999.0141, 0.015], [303543.4372, 0.013999], [323294.5157, 0.013], [344330.7648, 0.011],
|
|
|
201 |
[366735.4418, 0.01], [390598.3214, 0.01], [416013.9199, 0.009], [443083.2701, 0.008], [471913.507, 0.008],
|
|
|
202 |
[502620.1526, 0.00699], [535324.8297, 0.006], [570156.9769, 0.006], [607256.1655, 0.005], [646769.3381, 0.005],
|
|
|
203 |
[688853.5686, 0.005], [733675.418, 0.004], [781414.486, 0.004]]
|
|
|
204 |
}
|
|
|
205 |
|
|
|
206 |
|
|
|
207 |
|
|
|
208 |
plot1 = $.jqplot("chart1", [dataSets.national], {
|
|
|
209 |
title: "Probability Density Function",
|
|
|
210 |
cursor: {
|
|
|
211 |
show: false
|
|
|
212 |
},
|
|
|
213 |
highlighter: {
|
|
|
214 |
show: true,
|
|
|
215 |
showMarker: false,
|
|
|
216 |
useAxesFormatters: false,
|
|
|
217 |
formatString: '%d, %.1f'
|
|
|
218 |
},
|
|
|
219 |
axesDefaults: {
|
|
|
220 |
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
|
|
|
221 |
},
|
|
|
222 |
seriesDefaults: {
|
|
|
223 |
showMarker: false
|
|
|
224 |
},
|
|
|
225 |
axes: {
|
|
|
226 |
xaxis: {
|
|
|
227 |
label: 'Per Capita Expenditure (local currency)',
|
|
|
228 |
renderer: $.jqplot.LogAxisRenderer,
|
|
|
229 |
pad:0,
|
|
|
230 |
ticks: [700, 7000, 70000, 700000, {value:1000000, showLabel:false, showMark:false, showGridline:false}],
|
|
|
231 |
tickOptions: {
|
|
|
232 |
formatString: "%d"
|
|
|
233 |
}
|
|
|
234 |
},
|
|
|
235 |
yaxis: {
|
|
|
236 |
label: 'Population Share (%)',
|
|
|
237 |
forceTickAt0: true,
|
|
|
238 |
pad: 0
|
|
|
239 |
}
|
|
|
240 |
},
|
|
|
241 |
grid: {
|
|
|
242 |
drawBorder: false,
|
|
|
243 |
shadow: false,
|
|
|
244 |
// background: 'rgba(0,0,0,0)' works.
|
|
|
245 |
background: "white"
|
|
|
246 |
},
|
|
|
247 |
canvasOverlay: {
|
|
|
248 |
show: true,
|
|
|
249 |
objects: [
|
|
|
250 |
{verticalLine: {
|
|
|
251 |
name: "line1",
|
|
|
252 |
x: 8250,
|
|
|
253 |
color: "#d4c35D",
|
|
|
254 |
yOffset: 0,
|
|
|
255 |
shadow: false,
|
|
|
256 |
showTooltip: true,
|
|
|
257 |
tooltipFormatString: "PCE=%'d",
|
|
|
258 |
showTooltipPrecision: 0.5
|
|
|
259 |
}},
|
|
|
260 |
{verticalLine: {
|
|
|
261 |
name: "line2",
|
|
|
262 |
x: 60000,
|
|
|
263 |
color: "#d4c35D",
|
|
|
264 |
yOffset: 0,
|
|
|
265 |
shadow: false,
|
|
|
266 |
showTooltip: true,
|
|
|
267 |
tooltipFormatString: "PCE=%'d",
|
|
|
268 |
showTooltipPrecision: 0.5
|
|
|
269 |
}}
|
|
|
270 |
]
|
|
|
271 |
}
|
|
|
272 |
});
|
|
|
273 |
|
|
|
274 |
var d = new $.jsDate();
|
|
|
275 |
$("div.jqplot-datestamp").html("Generated on "+d.strftime("%v"));
|
|
|
276 |
|
|
|
277 |
$("input[type=radio][name=backgroundColor]").change(function(){
|
|
|
278 |
plot1.grid.background = $(this).val();
|
|
|
279 |
plot1.replot();
|
|
|
280 |
});
|
|
|
281 |
|
|
|
282 |
$("input[type=radio][name=dataSeries]").change(function(){
|
|
|
283 |
var val = $(this).val();
|
|
|
284 |
plot1.series[0].data = dataSets[val];
|
|
|
285 |
|
|
|
286 |
switch (val) {
|
|
|
287 |
case "national":
|
|
|
288 |
plot1.series[0].renderer.shapeRenderer.strokeStyle = "#4bb2c5";
|
|
|
289 |
break;
|
|
|
290 |
case "urban":
|
|
|
291 |
plot1.series[0].renderer.shapeRenderer.strokeStyle = "#c54b62";
|
|
|
292 |
break;
|
|
|
293 |
case "rural":
|
|
|
294 |
plot1.series[0].renderer.shapeRenderer.strokeStyle = "#b2c54b";
|
|
|
295 |
break;
|
|
|
296 |
default:
|
|
|
297 |
plot1.series[0].renderer.shapeRenderer.strokeStyle = "#4bb2c5";
|
|
|
298 |
break;
|
|
|
299 |
}
|
|
|
300 |
// hack to make sure plot auto computes a new format string if needed.
|
|
|
301 |
plot1.axes.yaxis.tickOptions.formatString = ''
|
|
|
302 |
plot1.replot({resetAxes:["yaxis"]});
|
|
|
303 |
});
|
|
|
304 |
|
|
|
305 |
$("input[type=checkbox][name=gridsVertical]").change(function(){
|
|
|
306 |
plot1.axes.xaxis.tickOptions.showGridline = this.checked;
|
|
|
307 |
plot1.replot();
|
|
|
308 |
});
|
|
|
309 |
|
|
|
310 |
$("input[type=checkbox][name=gridsHorizontal]").change(function(){
|
|
|
311 |
plot1.axes.yaxis.tickOptions.showGridline = this.checked;
|
|
|
312 |
plot1.replot();
|
|
|
313 |
});
|
|
|
314 |
|
|
|
315 |
$("input[type=text][name=userLine1]").keyup(function(){
|
|
|
316 |
var val = parseFloat($(this).val());
|
|
|
317 |
plot1.plugins.canvasOverlay.get("line1").options.x = val;
|
|
|
318 |
plot1.replot();
|
|
|
319 |
});
|
|
|
320 |
|
|
|
321 |
$("input[type=text][name=userLine2]").keyup(function(){
|
|
|
322 |
var val = parseFloat($(this).val());
|
|
|
323 |
plot1.plugins.canvasOverlay.get("line2").options.x = val;
|
|
|
324 |
plot1.replot();
|
|
|
325 |
});
|
|
|
326 |
|
|
|
327 |
$("input[type=radio][name=lineWidth]").change(function(){
|
|
|
328 |
var val = parseFloat($(this).val()), shadowOffset;
|
|
|
329 |
plot1.series[0].renderer.shapeRenderer.lineWidth = val;
|
|
|
330 |
plot1.series[0].renderer.shadowRenderer.lineWidth = val;
|
|
|
331 |
// for thick lines, scale shadow offset.
|
|
|
332 |
if (val > 2.5) {
|
|
|
333 |
shadowOffset = 1.25 * (1 + (Math.atan((val/2.5))/0.785398163 - 1)*0.6);
|
|
|
334 |
// var shadow_offset = this.shadowOffset;
|
|
|
335 |
}
|
|
|
336 |
// for skinny lines, don't make such a big shadow.
|
|
|
337 |
else {
|
|
|
338 |
shadowOffset = 1.25*Math.atan((val/2.5))/0.785398163;
|
|
|
339 |
}
|
|
|
340 |
plot1.series[0].renderer.shadowRenderer.offset = shadowOffset;
|
|
|
341 |
plot1.plugins.canvasOverlay.get("line1").options.lineWidth = val;
|
|
|
342 |
plot1.plugins.canvasOverlay.get("line2").options.lineWidth = val;
|
|
|
343 |
plot1.replot();
|
|
|
344 |
});
|
|
|
345 |
|
|
|
346 |
|
|
|
347 |
$("div.chart-container").resizable({delay:20});
|
|
|
348 |
|
|
|
349 |
$("div.chart-container").bind("resize", function(event, ui) {
|
|
|
350 |
plot1.replot();
|
|
|
351 |
});
|
|
|
352 |
});
|
|
|
353 |
|
|
|
354 |
</script>
|
|
|
355 |
|
|
|
356 |
|
|
|
357 |
<!-- End example scripts -->
|
|
|
358 |
|
|
|
359 |
<!-- Don't touch this! -->
|
|
|
360 |
|
|
|
361 |
|
|
|
362 |
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
|
|
|
363 |
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
|
|
|
364 |
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
|
|
|
365 |
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
|
|
|
366 |
<!-- End Don't touch this! -->
|
|
|
367 |
|
|
|
368 |
<!-- Additional plugins go here -->>
|
|
|
369 |
<script class="include" type="text/javascript" src="../plugins/jqplot.logAxisRenderer.min.js"></script>
|
|
|
370 |
<script class="include" type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
|
|
|
371 |
<script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
|
|
|
372 |
<script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
|
|
|
373 |
<script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
|
|
|
374 |
<script class="include" type="text/javascript" src="../plugins/jqplot.canvasOverlay.min.js"></script>
|
|
|
375 |
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
|
|
|
376 |
|
|
|
377 |
<!-- End additional plugins -->
|
|
|
378 |
|
|
|
379 |
</div>
|
|
|
380 |
<div class="col2">
|
|
|
381 |
|
|
|
382 |
<div class="example-link"><a class="example-link" href="data-renderers.html">AJAX and JSON Data Loading via Data Renderers</a></div>
|
|
|
383 |
<div class="example-link"><a class="example-link" href="barLineAnimated.html">Animated Charts</a></div>
|
|
|
384 |
<div class="example-link"><a class="example-link" href="dashboardWidget.html">Animated Dashboard Sample - Filled Line with Log Axis</a></div>
|
|
|
385 |
<div class="example-link"><a class="example-link" href="kcp_area.html">Area Chart</a></div>
|
|
|
386 |
<div class="example-link"><a class="example-link" href="kcp_area2.html">Area Chart 2</a></div>
|
|
|
387 |
<div class="example-link"><a class="example-link" href="axisLabelTests.html">Axis Labels</a></div>
|
|
|
388 |
<div class="example-link"><a class="example-link" href="axisLabelsRotatedText.html">Axis Labels and Rotated Text</a></div>
|
|
|
389 |
<div class="example-link"><a class="example-link" href="barTest.html">Bar Charts</a></div>
|
|
|
390 |
<div class="example-link"><a class="example-link" href="multipleBarColors.html">Bar Colors Example</a></div>
|
|
|
391 |
<div class="example-link"><a class="example-link" href="bezierCurve.html">Bezier Curve Plots</a></div>
|
|
|
392 |
<div class="example-link"><a class="example-link" href="blockPlot.html">Block Plots</a></div>
|
|
|
393 |
<div class="example-link"><a class="example-link" href="bubbleChart.html">Bubble Charts</a></div>
|
|
|
394 |
<div class="example-link"><a class="example-link" href="bubble-plots.html">Bubble Plots</a></div>
|
|
|
395 |
<div class="example-link"><a class="example-link" href="candlestick.html">Candlestick and Open Hi Low Close Charts</a></div>
|
|
|
396 |
<div class="example-link"><a class="example-link" href="theming.html">Chart Theming</a></div>
|
|
|
397 |
<div class="example-link"><a class="example-link" href="fillBetweenLines.html">Charts with Fill Between Lines</a></div>
|
|
|
398 |
<div class="example-link"><a class="example-link" href="kcp_cdf.html">Cumulative Density Function Chart</a></div>
|
|
|
399 |
<div class="example-link"><a class="example-link" href="dashedLines.html">Dashed Lines with Smoothing</a></div>
|
|
|
400 |
<div class="example-link"><a class="example-link" href="cursor-highlighter.html">Data Point Highlighting, Tooltips and Cursor Tracking</a></div>
|
|
|
401 |
<div class="example-link"><a class="example-link" href="point-labels.html">Data Point labels</a></div>
|
|
|
402 |
<div class="example-link"><a class="example-link" href="date-axes.html">Date Axes</a></div>
|
|
|
403 |
<div class="example-link"><a class="example-link" href="dateAxisRenderer.html">Date Axes 2</a></div>
|
|
|
404 |
<div class="example-link"><a class="example-link" href="rotatedTickLabelsZoom.html">Date Axes, Rotated Labels and Zooming</a></div>
|
|
|
405 |
<div class="example-link"><a class="example-link" href="canvas-overlay.html">Draw Lines on Plots - Canvas Overlay</a></div>
|
|
|
406 |
<div class="example-link"><a class="example-link" href="draw-rectangles.html">Draw Rectangles on Plots</a></div>
|
|
|
407 |
<div class="example-link"><a class="example-link" href="kcp_engel.html">Engel Curves</a></div>
|
|
|
408 |
<div class="example-link"><a class="example-link" href="bandedLine.html">Error Bands and Confidence Intervals</a></div>
|
|
|
409 |
<div class="example-link"><a class="example-link" href="area.html">Filled (Area) Charts</a></div>
|
|
|
410 |
<div class="example-link"><a class="example-link" href="axisScalingForceTickAt.html">Force Plot to Have Tick at 0 or 100</a></div>
|
|
|
411 |
<div class="example-link"><a class="example-link" href="hiddenPlotsInTabs.html">Hidden Plots</a></div>
|
|
|
412 |
<div class="example-link"><a class="example-link" href="customHighlighterCursorTrendline.html">Highlighting, Dragging Points, Cursor and Trend Lines</a></div>
|
|
|
413 |
<div class="example-link"><a class="example-link" href="line-charts.html">Line Charts and Options</a></div>
|
|
|
414 |
<div class="example-link"><a class="example-link" href="kcp_lorenz.html">Lorenz Curves</a></div>
|
|
|
415 |
<div class="example-link"><a class="example-link" href="mekkoCharts.html">Mekko Charts</a></div>
|
|
|
416 |
<div class="example-link"><a class="example-link" href="meterGauge.html">Meter Gauge</a></div>
|
|
|
417 |
<div class="example-link"><a class="example-link" href="candlestick-charts.html">Open Hi Low Close and Candlestick Charts</a></div>
|
|
|
418 |
<div class="example-link"><a class="example-link" href="pieTest.html">Pie Charts and Options</a></div>
|
|
|
419 |
<div class="example-link"><a class="example-link" href="pieTest4.html">Pie Charts and Options 2</a></div>
|
|
|
420 |
<div class="example-link"><a class="example-link" href="pie-donut-charts.html">Pie and Donut Charts</a></div>
|
|
|
421 |
<div class="example-link"><a class="example-link" href="selectorSyntax.html">Plot Creation with jQuery Selectors</a></div>
|
|
|
422 |
<div class="example-link"><a class="example-link" href="zooming.html">Plot Zooming and Cursor Control</a></div>
|
|
|
423 |
<div class="example-link"><a class="example-link" href="kcp_pdf.html">Probability Density Function Chart</a></div>
|
|
|
424 |
<div class="example-link"><a class="example-link" href="kcp_pyramid_by_age.html">Pyramid Chart By Age</a></div>
|
|
|
425 |
<div class="example-link"><a class="example-link" href="kcp_pyramid.html">Pyramid Charts</a></div>
|
|
|
426 |
<div class="example-link"><a class="example-link" href="kcp_pyramid2.html">Pyramid Charts 2</a></div>
|
|
|
427 |
<div class="example-link"><a class="example-link" href="kcp_quintiles.html">Quintile Pyramid Charts</a></div>
|
|
|
428 |
<div class="example-link"><a class="example-link" href="resizablePlot.html">Resizable Plots</a></div>
|
|
|
429 |
<div class="example-link"><a class="example-link" href="rotated-tick-labels.html">Rotated Labels and Font Styling</a></div>
|
|
|
430 |
<div class="example-link"><a class="example-link" href="smoothedLine.html">Smoothed Lines</a></div>
|
|
|
431 |
<div class="example-link"><a class="example-link" href="bar-charts.html">Vertical and Horizontal Bar Charts</a></div>
|
|
|
432 |
<div class="example-link"><a class="example-link" href="waterfall.html">Waterfall Charts</a></div>
|
|
|
433 |
<div class="example-link"><a class="example-link" href="waterfall2.html">Waterfall Charts 2</a></div>
|
|
|
434 |
<div class="example-link"><a class="example-link" href="zoomOptions.html">Zoom Options</a></div>
|
|
|
435 |
<div class="example-link"><a class="example-link" href="zoomProxy.html">Zoom Proxy - Control one plot from another</a></div>
|
|
|
436 |
<div class="example-link"><a class="example-link" href="zoom1.html">Zooming</a></div>
|
|
|
437 |
<div class="example-link"><a class="example-link" href="dateAxisLogAxisZooming.html">Zooming with Date and Log Axes</a></div>
|
|
|
438 |
|
|
|
439 |
</div>
|
|
|
440 |
</div>
|
|
|
441 |
</div>
|
|
|
442 |
<script type="text/javascript" src="example.min.js"></script>
|
|
|
443 |
|
|
|
444 |
</body>
|
|
|
445 |
|
|
|
446 |
|
|
|
447 |
</html>
|