public/javascripts/jqplot/examples/kcp_lorenz.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Lorenz Curves</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="../jquery.min.js"></script>
  15
  16
  17 </head>
  18 <body>
  19     <div class="logo">
  20    <div class="nav">
  21    <a class="nav" href="../../../index.php"><span>&gt;</span>Home</a>
  22    <a class="nav"  href="../../../docs/"><span>&gt;</span>Docs</a>
  23    <a class="nav"  href="../../download/"><span>&gt;</span>Download</a>
  24    <a class="nav" href="../../../info.php"><span>&gt;</span>Info</a>
  25    <a class="nav"  href="../../../donate.php"><span>&gt;</span>Donate</a>
  26    </div>
  27 </div>
  28     <div class="example-content">
  29
  30     <div class="example-nav">
  31   <a href="kcp_engel.html">Previous</a> <a href="./">Examples</a> <a href="kcp_pdf.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35
  36
  37   <link class="include" type="text/css" href="jquery-ui/css/smoothness/jquery-ui.min.css" rel="Stylesheet" />
  38
  39   <style type="text/css">
  40
  41     .chart-container {
  42         border: 1px solid darkblue;
  43         padding: 30px;
  44         width: 500px;
  45         height: 400px;
  46
  47     }
  48
  49     #chart1 {
  50         width: 96%;
  51         height: 96%;
  52     }
  53
  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     }
  64
  65     td.controls li {
  66         list-style-type: none;
  67     }
  68
  69     td.controls ul {
  70         margin-top: 0.5em;
  71         padding-left: 0.2em;
  72     }
  73
  74     pre.code {
  75         margin-top: 45px;
  76         clear: both;
  77     }
  78
  79   </style>
  80
  81     <table class="app">
  82         <td class="controls">
  83
  84             <div>
  85                 Data Series:
  86                 <ul>
  87                     <li><input class="dataSeries-checkbox" name="dataSeries_national" value="national" type="checkbox" checked />National</li>
  88                     <li><input class="dataSeries-checkbox" name="dataSeries_urban" value="urban" type="checkbox" />Urban</li>
  89                     <li><input class="dataSeries-checkbox" name="dataSeries_rural" value="rural" type="checkbox" />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                 Cutoff Lines:
 119                 <ul>
 120                     <li><input name="cutoffLines" value="showCutoffLines" type="checkbox" checked />Show</li>
 121                     <li>Low:&nbsp;&nbsp;<input name="userLine1" value="42" type="text" size="6" /></li>
 122                     <li>High:&nbsp;<input name="userLine2" value="75" type="text" size="6" /></li>
 123                 </ul>
 124             </div>
 125         </td>
 126
 127         <td class="chart">
 128             <div class="chart-container">
 129                 <div id="chart1"></div>
 130                 <div class="jqplot-datestamp"></div>
 131             </div>
 132         </td>
 133
 134     </table>
 135
 136     <pre class="code brush:js"></pre>
 137
 138
 139
 140   <script class="code" type="text/javascript">
 141 $(document).ready(function(){
 142     var dataSets = {
 143         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]],
 144
 145         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]],
 146
 147         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]]
 148     }
 149
 150     // Initial values for the user lines.
 151     var userLine1Val = 42;
 152     var userLine2Val = 75;
 153
 154     // find the index of the data point with the closest y value.
 155     // assumes y values are monotonically increasing.
 156     var findXValue = function (y, data) {
 157         var l = data.length;
 158         var temp;
 159         var d;
 160         var idx;
 161         var mid = Math.round(l/2);
 162         var interval = mid;
 163         var prevInterval = mid;
 164         var dist = null;
 165         var absDist = null;
 166         var hold = null;
 167         var ret = null;
 168         var x, x0, x1, y0, y1, lowidx, hiidx;
 169
 170         // check to see if we're in range
 171         if (y > data[l-1][1]) {
 172             return [l-1, data[l-1]];
 173         }
 174         else if (y < data[0][1]) {
 175             return [0, data[0]];
 176         }
 177
 178         for (var i=0; i<l; i++) {
 179             d = data[mid][1];
 180             dist = d - y;
 181             absDist = Math.abs(dist);
 182             interval = Math.round(interval/2);
 183
 184             if (absDist < hold || hold === null) {
 185                 hold = absDist;
 186                 idx = mid;
 187             }
 188
 189             // if we're right on the pont, get out of here
 190             if (dist === 0) {
 191                 ret = [idx, data[idx]];
 192                 break;
 193             }
 194
 195             // if we've narrowed it down to an interval,
 196             // interpolate and get out of here
 197             else if (prevInterval === 1) {
 198                 // to the right, interpolate -1 to here
 199                 if (dist > 0) {
 200                     lowidx = idx - 1;
 201                     hiidx = idx;
 202                 }
 203                 else {
 204                     lowidx = idx;
 205                     hiidx = idx + 1;
 206                 }
 207
 208                 x0 = data[lowidx][0];
 209                 x1 = data[hiidx][0];
 210                 y0 = data[lowidx][1];
 211                 y1 = data[hiidx][1];
 212
 213                 x = x0 + (y - y0) / (y1 - y0) * (x1 - x0);
 214
 215                 ret = [idx, [x, y]];
 216                 break;
 217             }
 218             // to the right, go left and reduce
 219             else if (dist > 0) {
 220                 mid -= interval;
 221             }
 222             // to the left go right and increase
 223             else if (dist < 0) {
 224                 mid += interval;
 225             }
 226
 227             prevInterval = interval;
 228         }
 229         return ret;
 230     }
 231
 232     // determine initial values for horizontal and vertical overlay lines.
 233
 234     var line1x = findXValue(userLine1Val, dataSets.national)[1][0];
 235     var line2x = findXValue(userLine2Val, dataSets.national)[1][0];;
 236     var line3y = userLine1Val;
 237     var line4y = userLine2Val;
 238
 239     // make the plot
 240
 241     plot1 = $.jqplot("chart1", [dataSets.national, dataSets.urban, dataSets.rural], {
 242         title: "Lorenz Curve",
 243         // To control the size of the grid, can set the gridPadding option,
 244
 245         // gridPadding: {top: 40, bottom: 60, left: 70, right: 50},
 246
 247         // but must know size of container ahead of time and figure out what paddings
 248         // you want to get a square grid.
 249         // Alternatively, can use the gridDimensions option.
 250         // gridDimensions doesn't get reapplied on replot() because plots
 251         // _gridPadding attribute is set the first time it is drawn and it
 252         // won't be overwritten.
 253
 254         gridDimensions: {height: 290, width: 290},
 255         seriesColors: ["#4bb2c5", "#c54b62", "#b2c54b"],
 256         cursor: {
 257             show: false
 258         },
 259         highlighter: {
 260             show: true,
 261             showMarker: false,
 262             useAxesFormatters: false,
 263             formatString: '%d, %.1f'
 264         },
 265         axesDefaults: {
 266             labelRenderer: $.jqplot.CanvasAxisLabelRenderer
 267         },
 268         seriesDefaults: {
 269             showMarker: false
 270         },
 271         series: [
 272             {show: true},
 273             {show: false},
 274             {show: false}
 275         ],
 276         axes: {
 277             xaxis: {
 278                 label: '% of Population',
 279                 pad:0
 280             },
 281             yaxis: {
 282                 label: '% of Expenditure',
 283                 pad: 0
 284             }
 285         },
 286         grid: {
 287             drawBorder: false,
 288             shadow: false,
 289             // background: 'rgba(0,0,0,0)'  works.
 290             background: "white"
 291         },
 292         canvasOverlay: {
 293             show: true,
 294             objects: [,
 295                 {line: {
 296                     name: "line5",
 297                     start: [0,0],
 298                     stop: [100,100],
 299                     color: "#666666",
 300                     shadow: false,
 301                     showTooltip: false,
 302                     lineWidth: 3
 303                 }},
 304                 {horizontalLine: {
 305                     name: "line1",
 306                     y: userLine1Val,
 307                     color: "#d4c35D",
 308                     xmin: 0,
 309                     xmax: line1x,
 310                     shadow: false,
 311                     showTooltip: true,
 312                     tooltipFormatString: "%nPS=%'d",
 313                     showTooltipPrecision: 0.5
 314                 }},
 315                 {horizontalLine: {
 316                     name: "line2",
 317                     y: userLine2Val,
 318                     color: "#d4c35D",
 319                     xmin: 0,
 320                     xmax: line2x,
 321                     shadow: false,
 322                     showTooltip: true,
 323                     tooltipFormatString: "%nPS=%'d",
 324                     showTooltipPrecision: 0.5
 325                 }},
 326                 {verticalLine: {
 327                     name: "line3",
 328                     x: line1x,
 329                     color: "#d4c35D",
 330                     ymin: 0,
 331                     ymax: line3y,
 332                     shadow: false,
 333                     showTooltip: true,
 334                     tooltipFormatString: "PCE=%'d",
 335                     showTooltipPrecision: 0.5
 336                 }},
 337                 {verticalLine: {
 338                     name: "line4",
 339                     x: line2x,
 340                     color: "#d4c35D",
 341                     ymin: 0,
 342                     ymax: line4y,
 343                     shadow: false,
 344                     showTooltip: true,
 345                     tooltipFormatString: "PCE=%'d",
 346                     showTooltipPrecision: 0.5
 347                 }}
 348             ]
 349         }
 350     });
 351
 352     // add a date at the bottom.
 353
 354     var d = new $.jsDate();
 355     $("div.jqplot-datestamp").html("Generated on "+d.strftime("%v"));
 356
 357     // initialize form elements
 358     // set these before attaching event handlers.
 359
 360     $("input.dataSeries-checkbox").attr("checked", false);
 361     $("input.dataSeries-checkbox[name=dataSeries_national]").attr("checked", true);
 362
 363     $("input[type=radio][name=backgroundColor]").attr("checked", false);
 364     $("input[type=radio][name=backgroundColor][value=white]").attr("checked", true);
 365
 366     $("input[type=radio][name=lineWidth]").attr("checked", false);
 367     $('input[type=radio][name=lineWidth][value="2.5"]').attr("checked", true);
 368
 369     $("input[type=text][name=userLine1]").val(userLine1Val);
 370     $("input[type=text][name=userLine2]").val(userLine2Val);
 371
 372     $("input[type=checkbox][name=gridsVertical]").attr("checked", true);
 373     $("input[type=checkbox][name=gridsHorizontal]").attr("checked", true);
 374     $("input[type=checkbox][name=cutoffLines]").attr("checked", true);
 375
 376
 377     // attach event handlers to form elements
 378
 379     $("input[type=radio][name=backgroundColor]").change(function(){
 380         plot1.grid.background = $(this).val();
 381         plot1.replot();
 382     });
 383
 384     $("input.dataSeries-checkbox").change(function(){
 385
 386         plot1.series[0].show = false;
 387         plot1.series[1].show = false;
 388         plot1.series[2].show = false;
 389
 390         if ($('input[name=dataSeries_national]').get(0).checked === true) {
 391             plot1.series[0].show = true;
 392         }
 393
 394         if ($('input[name=dataSeries_urban]').get(0).checked === true) {
 395             plot1.series[1].show = true;
 396         }
 397
 398         if ($('input[name=dataSeries_rural]').get(0).checked === true) {
 399             plot1.series[2].show = true;
 400         }
 401
 402         // var co = plot1.plugins.canvasOverlay;
 403         // var x1max = findXValue($("input[type=text][name=userLine1]").val(), dataSets[val])[1][0];
 404         // co.get("line1").options.xmax = co.get("line3").options.x = x1max;
 405         // var x2max = findXValue($("input[type=text][name=userLine2]").val(), dataSets[val])[1][0];
 406         // co.get("line2").options.xmax = co.get("line4").options.x = x2max;
 407
 408         plot1.replot();
 409     });
 410
 411     $("input[type=checkbox][name=gridsVertical]").change(function(){
 412         plot1.axes.xaxis.tickOptions.showGridline = this.checked;
 413         plot1.replot();
 414     });
 415
 416     $("input[type=checkbox][name=gridsHorizontal]").change(function(){
 417         plot1.axes.yaxis.tickOptions.showGridline = this.checked;
 418         plot1.replot();
 419     });
 420
 421     $("input[type=checkbox][name=cutoffLines]").change(function(){
 422         var co = plot1.plugins.canvasOverlay;
 423         if (this.checked) {
 424             co.get('line1').options.show = true;
 425             co.get('line2').options.show = true;
 426             co.get('line3').options.show = true;
 427             co.get('line4').options.show = true;
 428         }
 429         else {
 430             co.get('line1').options.show = false;
 431             co.get('line2').options.show = false;
 432             co.get('line3').options.show = false;
 433             co.get('line4').options.show = false;
 434         }
 435         plot1.replot();
 436     });
 437
 438     $("input[type=text][name=userLine1]").keyup(function(){
 439         var val = parseFloat($(this).val());
 440
 441         var co = plot1.plugins.canvasOverlay;
 442
 443         co.get("line1").options.y = val;
 444         co.get("line3").options.ymax = val;
 445
 446         var xx = findXValue(val, plot1.series[0].data)[1][0];
 447         co.get("line1").options.xmax = co.get("line3").options.x = xx;
 448
 449         plot1.replot();
 450     });
 451
 452     $("input[type=text][name=userLine2]").keyup(function(){
 453         var val = parseFloat($(this).val());
 454
 455         var co = plot1.plugins.canvasOverlay;
 456
 457         co.get("line2").options.y = val;
 458         co.get("line4").options.ymax = val;
 459
 460         var xx = findXValue(val, plot1.series[0].data)[1][0];
 461         co.get("line2").options.xmax = co.get("line4").options.x = xx;
 462
 463         plot1.replot();
 464     });
 465
 466     $("input[type=radio][name=lineWidth]").change(function(){
 467         var val = parseFloat($(this).val()), shadowOffset;
 468         plot1.series[0].renderer.shapeRenderer.lineWidth = val;
 469         plot1.series[0].renderer.shadowRenderer.lineWidth = val;
 470         // for thick lines, scale shadow offset.
 471         if (val > 2.5) {
 472             shadowOffset = 1.25 * (1 + (Math.atan((val/2.5))/0.785398163 - 1)*0.6);
 473             // var shadow_offset = this.shadowOffset;
 474         }
 475         // for skinny lines, don't make such a big shadow.
 476         else {
 477             shadowOffset = 1.25*Math.atan((val/2.5))/0.785398163;
 478         }
 479         plot1.series[0].renderer.shadowRenderer.offset = shadowOffset;
 480         for (var i=0, l=plot1.plugins.canvasOverlay.objects.length; i<l; i++) {
 481             plot1.plugins.canvasOverlay.objects[i].options.lineWidth = val;
 482         }
 483         plot1.replot();
 484     });
 485
 486
 487     $("div.chart-container").resizable({delay:20, aspectRatio: true});
 488
 489     $("div.chart-container").bind("resize", function(event, ui) {
 490         plot1.replot();
 491     });
 492
 493     $(".jqplot-target").mouseleave(function(){ $('.jqplot-canvasOverlay-tooltip, .jqplot-highlighter-tooltip, .jqpot-cursor-tooltip').hide(); });
 494 });
 495
 496 </script>
 497
 498
 499 <!-- End example scripts -->
 500
 501 <!-- Don't touch this! -->
 502
 503
 504     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 505     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 506     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 507     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 508 <!-- End Don't touch this! -->
 509
 510 <!-- Additional plugins go here -->>
 511   <script class="include" type="text/javascript" src="../plugins/jqplot.logAxisRenderer.min.js"></script>
 512   <script class="include" type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
 513   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
 514   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
 515   <script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
 516   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasOverlay.min.js"></script>
 517   <script class="include" type="text/javascript" src="jquery-ui/js/jquery-ui.min.js"></script>
 518
 519 <!-- End additional plugins -->
 520
 521
 522         </div>
 523         <script type="text/javascript" src="example.min.js"></script>
 524
 525 </body>
 526
 527
 528 </html>