public/javascripts/jqplot/examples/kcp_quintiles.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Quintile Pyramid Charts</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_pyramid_by_age.html">Previous</a> <a href="./">Examples</a> <a href="line-charts.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35
  36   <link class="include" type="text/css" href="jquery-ui/css/smoothness/jquery-ui.min.css" rel="Stylesheet" />
  37
  38     <style type="text/css">
  39
  40         .quintile-outer-container {
  41             width: 900px;
  42             margin-bottom: 25px;
  43         }
  44
  45         .jqplot-chart {
  46             width: 500px;
  47             height: 400px;
  48         }
  49
  50         pre.code {
  51             margin-top: 45px;
  52             clear: both;
  53         }
  54
  55         .quintile-toolbar .ui-icon {
  56             float: right;
  57             margin: 3px 5px;
  58         }
  59
  60         table.stats-table td, table.highlighted-stats-table td {
  61             background-color: rgb(230, 230, 230);
  62             padding: 0.5em;
  63         }
  64
  65         col.label {
  66             width: 14em;
  67         }
  68
  69         col.value {
  70             width: 7em;
  71         }
  72
  73         td.quintile-value {
  74             width: 7em;
  75             text-align: right;
  76         }
  77
  78         table.stats-table td.tooltip-header, table.highlighted-stats-table td.tooltip-header {
  79             background-color: rgb(200, 200, 200);
  80         }
  81
  82         table.stats-table, table.highlighted-stats-table, td.contour-cell {
  83             font-size: 0.7em;
  84         }
  85
  86         td.contour-cell {
  87             height: 1.5em;
  88             padding-left: 20px;
  89             padding-bottom: 1.5em;
  90         }
  91
  92         table.highlighted-stats-table {
  93             margin-top: 15px;
  94         }
  95
  96         td.stats-cell {
  97             padding-left: 20px;
  98             padding-top: 20px;
  99             vertical-align: top;
 100
 101         }
 102
 103         td.stats-cell div.input {
 104             font-size: 0.7em;
 105             margin-top: 1.5em;
 106         }
 107
 108         div.overlay-chart-container {
 109             display: none;
 110             z-index: 11;
 111             position: fixed;
 112             width: 588px;
 113             left: 50%;
 114             margin-left: -294px;
 115             background-color: white;
 116         }
 117
 118         div.overlay-chart-container .ui-icon {
 119             float: right;
 120             margin: 3px 5px;
 121         }
 122
 123         div.overlay-shadow {
 124             display: none;
 125             z-index: 10;
 126             background-color: rgba(0, 0, 0, 0.8);
 127             position: fixed;
 128             top: 0px;
 129             left: 0px;
 130             width: 100%;
 131             height: 100%;
 132         }
 133
 134         @media print {
 135             td.stats-cell {
 136                 vertical-align: top;
 137                 padding-top: 35px;
 138             }
 139
 140             table.stats-table, table.stats-table td {
 141                  color: #aaaaaa;
 142                  border: 1px solid #bbbbbb;
 143                  border-collapse: collapse;
 144             }
 145
 146             table.stats-table tr {
 147                 font-family: Verdana,Arial,sans-serif;
 148                 /*font-size: 0.7em;*/
 149             }
 150         }
 151
 152     </style>
 153
 154     <div class="overlay-shadow"></div>
 155
 156     <div class="overlay-chart-container ui-corner-all">
 157         <div class="overlay-chart-container-header ui-widget-header ui-corner-top">Right click the image to Copy or Save As...<div class="ui-icon ui-icon-closethick"></div></div>
 158         <div class="overlay-chart-container-content ui-corner-bottom"></div>
 159     </div>
 160
 161     <div class="quintile-outer-container ui-widget ui-corner-all">
 162         <div class="quintile-toolbar ui-widget-header  ui-corner-top">
 163             <span class="quintile-title">Income Level:  First Quintile</span>
 164             <div class="quintile-toggle ui-icon ui-icon-arrowthickstop-1-n"></div>
 165             <div class="ui-icon ui-icon-newwin"></div>
 166         </div>
 167         <div class="quintile-content ui-widget-content ui-corner-bottom">
 168             <table class="quintile-display">
 169                 <tr>
 170                     <td class="chart-cell" rowspan="2">
 171                         <div class="jqplot-chart"></div>
 172                     </td>
 173                     <td class="stats-cell">
 174                         <table class="stats-table">
 175                         <colgroup>
 176                             <col class="label">
 177                             <col class="value">
 178                         </colgroup>
 179                         <tbody>
 180                             <tr>
 181                                 <td class="ui-corner-tl">Mean Age:</td>
 182                                 <td class="quintile-value summary-meanAge ui-corner-tr"></td>
 183                             </tr>
 184                             <tr>
 185                                 <td>Sex Ratio:</td>
 186                                 <td class="quintile-value summary-sexRatio"></td>
 187                             </tr>
 188                             <tr>
 189                                 <td>Age Dependency Ratio:</td>
 190                                 <td class="quintile-value summary-ageDependencyRatio"></td>
 191                             </tr>
 192                             <tr>
 193                                 <td>Population, Total:</td>
 194                                 <td class="quintile-value summary-populationTotal"></td>
 195                             </tr>
 196                             <tr>
 197                                 <td>Population, Male:</td>
 198                                 <td class="quintile-value summary-populationMale"></td>
 199                             </tr>
 200                             <tr>
 201                                 <td class="ui-corner-bl">Population, Female:</td>
 202                                 <td class="quintile-value summary-populationFemale ui-corner-br"></td>
 203                             </tr>
 204                         </tbody>
 205                         </table>
 206                         <table class="highlighted-stats-table">
 207                         <colgroup>
 208                             <col class="label">
 209                             <col class="value">
 210                         </colgroup>
 211                         <tbody>
 212                             <tr class="tooltip-header">
 213                                 <td class="tooltip-header ui-corner-top" colspan="2">Highlighted Range: <span class="tooltip-item tooltipAge">&nbsp;</span></td>
 214                             </tr>
 215                             <tr>
 216                                 <td>Population, Male: </td>
 217                                 <td class="quintile-value"><span class="tooltip-item tooltipMale">&nbsp;</span></td>
 218                             </tr>
 219                             <tr>
 220                                 <td>Population, Female: </td>
 221                                 <td class="quintile-value"><span class="tooltip-item tooltipFemale">&nbsp;</span></td>
 222                             </tr>
 223                             <tr>
 224                                 <td class="ui-corner-bl">Sex Ratio: </td>
 225                                 <td class="quintile-value ui-corner-br"><span class="tooltip-item tooltipRatio">&nbsp;</span></td>
 226                             </tr>
 227                         <tbody>
 228                         </table>
 229                     </td>
 230                 </tr>
 231                 <tr>
 232                     <td class="contour-cell">
 233                         <input name="showContour" type="checkbox" /> Use as overlay on other charts?
 234                     </td>
 235                 </tr>
 236             </table>
 237         </div>
 238     </div>
 239
 240
 241
 242     <script class="code" type="text/javascript" language="javascript">
 243     $(document).ready(function(){
 244
 245         // if browser supports canvas, show additional toolbar icons
 246         if (!$.jqplot.use_excanvas) {
 247             $('div.quintile-toolbar').append('<div class="ui-icon ui-icon-image"></div><div class="ui-icon ui-icon-print"></div>');
 248         }
 249
 250         var quintHash = {0: 'First Quintile', 1: 'Second Quintile', 2: 'Third Quintile', 3: 'Fourth Quintile', 4: 'Fifth Quintile'}
 251
 252         // Add the needed containers:
 253         for (var i=1; i<5; i++) {
 254             var el = $('div.quintile-outer-container:last')
 255             var clone = el.clone();
 256             clone.find('span.quintile-title').html('Income Level:  ' + quintHash[i]);
 257             clone.insertAfter(el);
 258         }
 259
 260         var male;
 261         var female;
 262         var summaryTable;
 263         var sexRatios;
 264         var quintiles;
 265
 266         $.ajax({
 267             type: "GET",
 268             dataType: 'json',
 269             async: false,
 270             url: "quintiles.json",
 271             contentType: "application/json",
 272             success: function (retdata) {
 273                 // array of arrays of data for each quintile
 274                 // each quintile array has data for following:
 275                 //  0: summary table
 276                 //  1: male data
 277                 //  2: female data
 278                 //  3: ratios
 279                 quintiles = retdata;
 280             },
 281             error: function (xhr) { console.log(xhr.statusText) }
 282         });
 283
 284         $('td.summary-meanAge').each(function(index) {
 285             $(this).html($.jqplot.sprintf('%5.2f', quintiles[index][0][3]));
 286         });
 287
 288         $('td.summary-sexRatio').each(function(index) {
 289             $(this).html($.jqplot.sprintf('%5.2f', quintiles[index][3][0]));
 290         });
 291
 292         $('td.summary-ageDependencyRatio').each(function(index) {
 293             $(this).html($.jqplot.sprintf('%5.2f', quintiles[index][0][6]));
 294         });
 295
 296         $('td.summary-populationTotal').each(function(index) {
 297             $(this).html($.jqplot.sprintf("%'d", quintiles[index][0][0]));
 298         });
 299
 300         $('td.summary-populationMale').each(function(index) {
 301             $(this).html($.jqplot.sprintf("%'d", quintiles[index][0][1]));
 302         });
 303
 304         $('td.summary-populationFemale').each(function(index) {
 305             $(this).html($.jqplot.sprintf("%'d", quintiles[index][0][2]));
 306         });
 307
 308         // These two variables should be removed outside of the jqplot.com example environment.
 309         $.jqplot._noToImageButton = true;
 310         $.jqplot._noCodeBlock = true;
 311
 312         // the "x" values from the data will go into the ticks array.
 313         // ticks should be strings for this case where we have values like "75+"
 314         var ticks = ["0-4", "5-9", "10-14", "15-19", "20-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", "75-79", "80-84", "85-90", "90-94", "95+"];
 315
 316         // Custom color arrays are set up for each series to get the look that is desired.
 317         // Two color arrays are created for the default and optional color which the user can pick.
 318         var greenColors = ["#526D2C", "#77933C"];
 319
 320         // These options are common to all plots.
 321         var plotOptions = {
 322             // We set up a customized title which acts as labels for the left and right sides of the pyramid.
 323             title: {
 324                 text: '<span style="position:relative;left:25%;">Male</span><span style="position:relative;left:50%;">Female</span>',
 325                 textAlign: 'left'
 326             },
 327             // by default, the series will use the green color scheme.
 328             seriesColors: greenColors,
 329
 330             grid: {
 331                 drawBorder: false,
 332                 shadow: false,
 333                 background: "white",
 334                 rendererOptions: {
 335                     // plotBands is an option of the pyramidGridRenderer.
 336                     // it will put banding at starting at a specified value
 337                     // along the y axis with an adjustable interval.
 338                     plotBands: {
 339                         show: true,
 340                         interval: 2,
 341                         color: 'rgb(250, 240, 225)'
 342                     }
 343                 }
 344             },
 345
 346             // This makes the effective starting value of the axes 0 instead of 1.
 347             // For display, the y axis will use the ticks we supplied.
 348             defaultAxisStart: 0,
 349             seriesDefaults: {
 350                 renderer: $.jqplot.PyramidRenderer,
 351                 rendererOptions: {
 352                     barPadding: 4,
 353                     fill: false
 354                 },
 355                 yaxis: "yaxis",
 356                 shadow: false,
 357                 show: false
 358             },
 359
 360             // We have 10 series, but only 2 will be shown at a time unless an overlay is turned on.
 361             // Set up options for all series now, so when turned on they will look right.
 362             series: [
 363                 // For pyramid plots, the default side is right.
 364                 // We want to override here to put first set of bars
 365                 // on left.
 366                 {
 367                     rendererOptions:{
 368                         side: "left"
 369                     }
 370                 },
 371                 {
 372                     yaxis: "y2axis"
 373                 },
 374                 {
 375                     rendererOptions: {
 376                         side: 'left'
 377                     }
 378                 },
 379                 {
 380                     yaxis: 'y2axis'
 381                 },
 382                 {
 383                     rendererOptions: {
 384                         side: 'left'
 385                     }
 386                 },
 387                 {
 388                     yaxis: 'y2axis'
 389                 },
 390                 {
 391                     rendererOptions: {
 392                         side: 'left'
 393                     }
 394                 },
 395                 {
 396                     yaxis: 'y2axis'
 397                 },
 398                 {
 399                     rendererOptions: {
 400                         side: 'left'
 401                     }
 402                 },
 403                 {
 404                     yaxis: 'y2axis'
 405                 }
 406             ],
 407             axesDefaults: {
 408                 tickOptions: {
 409                     showGridline: false
 410                 },
 411                 pad: 0,
 412                 rendererOptions: {
 413                     baselineWidth: 2
 414                 },
 415                 scaleToHiddenSeries: true
 416             },
 417
 418             // Set up all the y axes, since users are allowed to switch between them.
 419             // The only axis that will show is the one that the series are "attached" to.
 420             // We need the appropriate options for the others for when the user switches.
 421             axes: {
 422                 xaxis: {
 423                     tickOptions: {
 424                         formatter: $.jqplot.PercentTickFormatter,
 425                         formatString: '%d%%'
 426                     }
 427                 },
 428                 yaxis: {
 429                     label: "Age",
 430                     // Use canvas label renderer to get rotated labels.
 431                     labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
 432                     // include empty tick options, they will be used
 433                     // as users set options with plot controls.
 434                     tickOptions: {},
 435                     showMinorTicks: true,
 436                     ticks: ticks,
 437                     rendererOptions: {
 438                         category: true
 439                     }
 440                 },
 441                 y2axis: {
 442                     label: "Age",
 443                     // Use canvas label renderer to get rotated labels.
 444                     labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
 445                     // include empty tick options, they will be used
 446                     // as users set options with plot controls.
 447                     tickOptions: {},
 448                     showMinorTicks: true,
 449                     ticks: ticks,
 450                     rendererOptions: {
 451                         category: true
 452                     }
 453                 }
 454             }
 455         };
 456
 457         // These options are different for each series.
 458         // sopts are common options for the overlay series in each plot.
 459         var sopts = {color: '#C57225'};
 460
 461         // An array of 5 elements, one for each plot.
 462         var plotOptsArr = [];
 463
 464         // Options for each individual plot
 465         plotOptsArr[0] = $.extend(true, {}, plotOptions, {series:[{show: true, rendererOptions:{synchronizeHighlight: 1, fill: true}}, {show: true, rendererOptions: {synchronizeHighlight: 0, fill: true}}, sopts, sopts, sopts, sopts, sopts, sopts, sopts, sopts]});
 466
 467         plotOptsArr[1] = $.extend(true, {}, plotOptions, {series:[sopts, sopts, {show: true, rendererOptions:{synchronizeHighlight: 3, fill: true}}, {show: true, rendererOptions: {synchronizeHighlight: 2, fill: true}}, sopts, sopts, sopts, sopts, sopts, sopts]});
 468
 469         plotOptsArr[2] = $.extend(true, {}, plotOptions, {series:[sopts, sopts, sopts, sopts, {show: true, rendererOptions:{synchronizeHighlight: 5, fill: true}}, {show: true, rendererOptions: {synchronizeHighlight: 4, fill: true}}, sopts, sopts, sopts, sopts]});
 470
 471         plotOptsArr[3] = $.extend(true, {}, plotOptions, {series:[sopts, sopts, sopts, sopts, sopts, sopts, {show: true, rendererOptions:{synchronizeHighlight: 7, fill: true}}, {show: true, rendererOptions: {synchronizeHighlight: 6, fill: true}}, sopts, sopts]});
 472
 473         plotOptsArr[4] = $.extend(true, {}, plotOptions, {series:[sopts, sopts, sopts, sopts, sopts, sopts, sopts, sopts, {show: true, rendererOptions:{synchronizeHighlight: 9, fill: true}}, {show: true, rendererOptions: {synchronizeHighlight: 8, fill: true}}]});
 474
 475
 476         // Create all the plots at one time.
 477         // Use jQuery selecctor syntax to select all the plot targets.  Here, no id's were specified on the targets, so they are auto generated.
 478         // You can get a reference to the individual plot object by:
 479         //     var plot = $('div.jqplot-chart').eq(0).data('jqplot');
 480         //
 481         $('div.jqplot-chart').jqplot([quintiles[0][1], quintiles[0][2], quintiles[1][1], quintiles[1][2], quintiles[2][1], quintiles[2][2], quintiles[3][1], quintiles[3][2], quintiles[4][1], quintiles[4][2]], plotOptsArr[0], plotOptsArr[1], plotOptsArr[2], plotOptsArr[3], plotOptsArr[4]);
 482
 483         //////
 484         // The followng functions use verbose css selectors to make
 485         // it clear exactly which elements they are binging to/operating on
 486         //////
 487
 488         // bind to the data highlighting event to make custom tooltip:
 489         $(".jqplot-target").each(function(index){
 490             $(this).bind("jqplotDataHighlight", function(evt, seriesIndex, pointIndex, data) {
 491                 // Here, assume first series is male poulation and second series is female population.
 492                 // Adjust series indices as appropriate.
 493                 var plot = $(this).data('jqplot');
 494                 var malePopulation = Math.abs(plot.series[0].data[pointIndex][1]) * quintiles[index][0][1];
 495                 var femalePopulation = Math.abs(plot.series[1].data[pointIndex][1]) * quintiles[index][0][2];
 496                 var malePopulation = quintiles[index][1][pointIndex] * quintiles[index][0][1];
 497                 var femalePopulation = quintiles[index][2][pointIndex] * quintiles[index][0][2];
 498                 // var ratio = femalePopulation / malePopulation * 100;
 499                 var ratio = quintiles[index][3][pointIndex+1];
 500
 501                 $(this).closest('table').find('.tooltipMale').stop(true, true).fadeIn(350).html($.jqplot.sprintf("%'d", malePopulation));
 502                 $(this).closest('table').find('.tooltipFemale').stop(true, true).fadeIn(350).html($.jqplot.sprintf("%'d", femalePopulation));
 503                 $(this).closest('table').find('.tooltipRatio').stop(true, true).fadeIn(350).html($.jqplot.sprintf('%5.2f', ratio));
 504
 505                 // Since we don't know which axis is rendererd and acive with out a little extra work,
 506                 // just use the supplied ticks array to get the age label.
 507                 $(this).closest('table').find('.tooltipAge').stop(true, true).fadeIn(350).html(ticks[pointIndex]);
 508             });
 509         });
 510
 511         // bind to the data highlighting event to make custom tooltip:
 512         $(".jqplot-target").each(function() {
 513             $(this).bind("jqplotDataUnhighlight", function(evt, seriesIndex, pointIndex, data) {
 514                 // clear out all the tooltips.
 515                 $(this).closest('table').find(".tooltip-item").fadeOut(250);
 516             });
 517         });
 518
 519         // Open and close the plot container.
 520         $('.quintile-toggle').each(function() {
 521             $(this).click(function(e) {
 522                 if ($(this).hasClass('ui-icon-arrowthickstop-1-n')) {
 523                     $(this).parent().next('.quintile-content').effect('blind', {mode:'hide'}, 600);
 524                     // $('.quintile-content').jqplotEffect('blind', {mode: 'hide'}, 600);
 525                     $(this).removeClass('ui-icon-arrowthickstop-1-n');
 526                     $(this).addClass('ui-icon-arrowthickstop-1-s');
 527                 }
 528                 else if ($(this).hasClass('ui-icon-arrowthickstop-1-s')) {
 529                     $(this).parent().next('.quintile-content').effect('blind', {mode:'show'}, 600, function() {
 530                         $(this).find('div.jqplot-chart').data('jqplot').replot();
 531                     });
 532                     // $('.quintile-content').jqplotEffect('blind', {mode: 'show'}, 150);
 533                     $(this).removeClass('ui-icon-arrowthickstop-1-s');
 534                     $(this).addClass('ui-icon-arrowthickstop-1-n');
 535                 }
 536             });
 537         });
 538
 539         // Handle each of the checkboxes to display overlays.
 540         $('input[type=checkbox][name=showContour]').each(function(index) {
 541             // on load/reload, clear all the check boxes.
 542             $(this).get(0).checked = false;
 543
 544             // bind to change event event on the checkbox.
 545             $(this).change(function(evt){
 546
 547                 // if check box is checked.
 548                 if (this.checked) {
 549                     // uncheck all other check boxes.
 550                     $('input[type=checkbox][name=showContour]').each(function(cidx) {
 551                         if (cidx !== index) {
 552                             this.checked = false;
 553                         }
 554                     });
 555
 556                     // On each chart, show the checked plot's overlay and
 557                     // show the original plot.
 558                     $('div.jqplot-chart').each(function(pidx) {
 559                         var plot = $(this).data('jqplot');
 560
 561                         // Set up options to hide all series.
 562                         var seriesOpts = [{show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}];
 563
 564                         // Show series for this particular plot (pidx) and for the checked plot (index).
 565                         seriesOpts[2 * pidx].show = true;
 566                         seriesOpts[2 * pidx + 1].show = true;
 567                         seriesOpts[2 * index].show = true;
 568                         seriesOpts[2 * index + 1].show = true;
 569
 570                         // replot with the new options.
 571                         plot.replot({series: seriesOpts});
 572
 573                     });
 574                 }
 575
 576                 // if check box is not checked.
 577                 else {
 578                     $('div.jqplot-chart').each(function(pidx) {
 579                         // Set up options to hide all series.
 580                         var seriesOpts = [{show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}];
 581                         var plot = $(this).data('jqplot');
 582
 583                         // Here showing only the series for this particular plot (pidx).
 584                         seriesOpts[2 * pidx].show = true;
 585                         seriesOpts[2 * pidx + 1].show = true;
 586
 587                         // replot with the new options.
 588                         plot.replot({series: seriesOpts});
 589                     });
 590                 }
 591             })
 592         });
 593
 594         $('.ui-icon-print').click(function(){
 595             $(this).parent().next().print();
 596         });
 597
 598
 599         $('.ui-icon-image').each(function() {
 600             $(this).bind('click', function(evt) {
 601                 var chart = $(this).closest('div.quintile-outer-container').find('div.jqplot-target');
 602                 var imgelem = chart.jqplotToImageElem();
 603                 var div = $('div.overlay-chart-container-content');
 604                 div.empty();
 605                 div.append(imgelem);
 606                 $('div.overlay-shadow').fadeIn(600);
 607                 div.parent().fadeIn(1000);
 608                 div = null;
 609             });
 610         });
 611
 612
 613         $('.ui-icon-newwin').each(function(index) {
 614             $(this).bind('click', function(evt) {
 615                 var url = 'kcp_pyramid_by_age.html?qidx='+index;
 616                 window.open(url);
 617             });
 618         });
 619
 620         $('div.overlay-chart-container-header div.ui-icon-closethick').click(function(){
 621             var div = $('div.overlay-chart-container-content');
 622             div.parent().fadeOut(600);
 623             $('div.overlay-shadow').fadeOut(1000);
 624         });
 625
 626     });
 627     </script>
 628
 629 <!-- End example scripts -->
 630
 631 <!-- Don't touch this! -->
 632
 633
 634     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 635     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 636     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 637     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 638 <!-- End Don't touch this! -->
 639
 640 <!-- Additional plugins go here -->
 641
 642     <script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
 643
 644     <!-- load the pyramidAxis and Grid renderers in production.  pyramidRenderer will try to load via ajax if not present, but that is not optimal and depends on paths being set. -->
 645     <script class="include" type="text/javascript" src="../plugins/jqplot.pyramidAxisRenderer.min.js"></script>
 646     <script class="include" type="text/javascript" src="../plugins/jqplot.pyramidGridRenderer.min.js"></script>
 647
 648     <script class="include" type="text/javascript" src="../plugins/jqplot.pyramidRenderer.min.js"></script>
 649     <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
 650     <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
 651     <script class="include" type="text/javascript" src="jquery-ui/js/jquery-ui.js"></script>
 652     <script class="include" type="text/javascript" src="kcp.print.js"></script>
 653
 654 <!-- End additional plugins -->
 655
 656
 657         </div>
 658         <script type="text/javascript" src="example.min.js"></script>
 659
 660 </body>
 661
 662
 663 </html>