| blob | 6e6bb3ba6c45b8f9c7c0f463990a252f8d539c7f |
5 <?php
7 ?>
16 <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
19 <link class="include" type="text/css" href="jquery-ui/css/smoothness/jquery-ui.min.css" rel="Stylesheet" />
24 html {
27 }
29 body {
33 }
39 }
42 /* width: 400px;
43 height: 400px;*/
44 }
49 }
54 }
58 }
62 }
67 }
71 }
75 }
81 }
85 }
90 }
96 }
101 }
110 }
115 }
122 }
126 }
130 }
135 }
145 }
150 }
161 }
165 }
169 }
173 }
178 }
185 }
191 }
195 /*font-size: 0.7em;*/
196 }
197 }
211 <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>
232 Axes:
245 Colors:
258 Grids:
321 <td class="tooltip-header ui-corner-top" colspan="2">Highlighted Age: <span class="tooltip-item tooltipAge"> </span></td>
333 <td class="quintile-value ui-corner-br"><span class="tooltip-item tooltipRatio"> </span></td>
349 // if browser supports canvas, show additional toolbar icons
351 $('div.quintile-toolbar').append('<div class="ui-icon ui-icon-image"></div><div class="ui-icon ui-icon-print"></div>');
352 }
354 // for this demo, all data is same for each quintile.
355 // could do something like this to get the index of the quintile.
356 // <!-- var quintileIndex = parseInt(< ? php echo $_GET["qidx"]; ? >); -->
362 jsondata = [];
371 // array of arrays of data for each quintile
372 // each quintile array has data for following:
373 // 0: summary table
374 // 1: male data
375 // 2: female data
376 // 3: ratios
378 },
380 });
383 // the "x" values from the data will go into the ticks array.
384 // ticks should be strings for this case where we have values like "75+"
389 });
393 });
397 });
401 });
405 });
409 });
411 // These two variables should be removed outside of the jqplot.com example environment.
415 // Custom color arrays are set up for each series to get the look that is desired.
416 // Two color arrays are created for the default and optional color which the user can pick.
420 // To accomodate changing y axis, need to keep track of plot options.
421 // changing axes will require recreating the plot, so need to keep
422 // track of state changes.
424 // We set up a customized title which acts as labels for the left and right sides of the pyramid.
425 title: {
428 },
429 // by default, the series will use the green color scheme.
432 grid: {
436 rendererOptions: {
437 // plotBands is an option of the pyramidGridRenderer.
438 // it will put banding at starting at a specified value
439 // along the y axis with an adjustable interval.
440 plotBands: {
444 }
445 }
446 },
448 // This makes the effective starting value of the axes 0 instead of 1.
449 // For display, the y axis will use the ticks we supplied.
451 seriesDefaults: {
453 rendererOptions: {
456 },
459 },
461 // We have 4 series, the left and right pyramid bars and
462 // the left and rigt overlay lines.
463 series: [
464 // For pyramid plots, the default side is right.
465 // We want to override here to put first set of bars
466 // on left.
467 {
468 rendererOptions:{
471 }
472 },
473 {
475 rendererOptions: {
477 }
478 },
479 {
480 rendererOptions: {
483 }
484 },
485 {
487 rendererOptions: {
489 }
490 }
491 ],
492 axesDefaults: {
493 tickOptions: {
495 },
497 rendererOptions: {
499 }
500 },
502 // Set up all the y axes, since users are allowed to switch between them.
503 // The only axis that will show is the one that the series are "attached" to.
504 // We need the appropriate options for the others for when the user switches.
505 axes: {
506 xaxis: {
507 tickOptions: {
510 }
511 },
512 yaxis: {
514 // Use canvas label renderer to get rotated labels.
516 // include empty tick options, they will be used
517 // as users set options with plot controls.
518 tickOptions: {},
522 rendererOptions: {
525 }
526 },
527 yMidAxis: {
529 // include empty tick options, they will be used
530 // as users set options with plot controls.
531 tickOptions: {},
535 rendererOptions: {
538 }
539 },
540 y2axis: {
542 // Use canvas label renderer to get rotated labels.
544 // include empty tick options, they will be used
545 // as users set options with plot controls.
546 tickOptions: {},
550 rendererOptions: {
553 }
554 }
555 }
556 };
558 // resize the chart container to fill the space
562 // $('#agesChart').jqplot([jsondata[1], jsondata[2]], plotOptions);
567 // pass in resetAxes: true option to get rid of old ticks and axis properties
568 // which should be recomputed based on new plot size.
572 });
574 // initialize form elements
575 // set these before attaching event handlers.
585 //////
586 // The followng functions use verbose css selectors to make
587 // it clear exactly which elements they are binging to/operating on
588 //////
591 // this refers to the html element we are binding to.
592 // $(this) is jQuery object on that element.
624 }
627 });
629 // bind to the data highlighting event to make custom tooltip:
632 // Here, assume first series is male poulation and second series is female population.
633 // Adjust series indices as appropriate.
639 // var ratio = femalePopulation / malePopulation * 100;
643 $('.tooltipFemale').stop(true, true).fadeIn(350).html($.jqplot.sprintf("%'d", femalePopulation));
646 // Since we don't know which axis is rendererd and acive with out a little extra work,
647 // just use the supplied ticks array to get the age label.
649 });
650 });
652 // bind to the data highlighting event to make custom tooltip:
655 // clear out all the tooltips.
657 });
658 });
662 });
666 // this refers to the html element we are binding to.
667 // $(this) is jQuery object on that element.
670 });
674 // this refers to the html element we are binding to.
675 // $(this) is jQuery object on that element.
677 axes: {
678 yaxis: {
680 },
681 y2axis: {
683 },
684 yMidAxis: {
686 }
687 }
688 };
690 });
693 // this refers to the html element we are binding to.
694 // $(this) is jQuery object on that element.
697 });
699 ////
700 // To-Do
701 //
702 // initialize form elements on reload.
703 // figure out what overlay line would be.
704 // have to adjust ticks to do show minor.
705 // make like kcp_pyramid.php
706 ////
708 // this refers to the html element we are binding to.
709 // $(this) is jQuery object on that element.
711 axes: {
712 yaxis: {
714 },
715 y2axis: {
717 },
718 yMidAxis: {
720 }
721 }
722 };
724 });
727 // this refers to the html element we are binding to.
728 // $(this) is jQuery object on that element.
732 seriesDefaults: {
733 rendererOptions: {
734 barPadding: val
735 }
736 }
737 };
738 }
741 seriesDefaults: {
742 rendererOptions: {
744 }
745 }
746 };
747 }
749 });
762 });
763 });
769 });
776 opts.grid.rendererOptions.plotBands.color = $('#colorPlotBands').data('colorpicker').color.toCSS();
780 };
782 // $('#colorMale').val(plot1.series[0].color);
792 onClose: applyColors
794 });
804 onClose: applyColors
806 });
816 onClose: applyColors
818 });
828 onClose: applyColors
830 });
832 });
842 <script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.js"></script>
844 <!-- 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. -->
845 <script class="include" type="text/javascript" src="../plugins/jqplot.pyramidAxisRenderer.js"></script>
846 <script class="include" type="text/javascript" src="../plugins/jqplot.pyramidGridRenderer.js"></script>
848 <script class="include" type="text/javascript" src="../plugins/jqplot.pyramidRenderer.js"></script>
849 <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.js"></script>
850 <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.js"></script>