Commits

Chris Leonello  committed 2996e24

Example updates and additions for pyramid charting.

  • Participants
  • Parent commits ef5a05f

Comments (0)

Files changed (5)

File examples/ages.json

+[[[27777522,13657657,14119865,22.9618524272778,22.9234010487667,22.9984003916577,95.1543545247194],[0.0635441,0.1066868,0.0889602,0.0816883,0.10164580000000001,0.0916705,0.079569,0.0970443,0.1046451,0.13356859999999998,0.09269619999999999,0.0936646,0.09194050000000001,0.0722027,0.0896342,0.0993397,0.061379399999999994,0.0916921,0.0828748,0.043487,0.0391652,0.05173029999999999,0.0507104,0.0336168,0.0554176,0.06918260000000001,0.066553,0.0686232,0.07097,0.0356915,0.0756028,0.0430155,0.0420597,0.06085890000000001,0.0609348,0.083607,0.079871,0.063388,0.0866719,0.07110419999999999,0.11604289999999999,0.0439268,0.0659694,0.046840599999999996,0.0340002,0.09966620000000001,0.037104700000000004,0.0638918,0.0462334,0.0467053,0.054563799999999996,0.0463275,0.048099199999999995,0.051574699999999994,0.0499415,0.0287639,0.0520332,0.0443779,0.0334986,0.043161,0.047440500000000003,0.0179186,0.0620127,0.0219074,0.0411669,0.0495684,0.0315231,0.0275056,0.0157341,0.0113926,0.024991,0.012811300000000001,0.017529700000000002,0.0103093,0.025329200000000003,0.0988836],[0.0767078,0.0679554,0.1064493,0.0915063,0.0860792,0.0785728,0.0892471,0.0687886,0.1055313,0.0921839,0.0659624,0.11451599999999999,0.0910735,0.1279864,0.0714669,0.0873929,0.09284529999999999,0.059575199999999995,0.1093534,0.0501142,0.052829,0.041160600000000006,0.0633309,0.0616121,0.0621781,0.0621598,0.0638378,0.0703724,0.0742589,0.048523,0.0735727,0.08988159999999999,0.0740614,0.0991105,0.148909,0.12269959999999999,0.1020624,0.0737742,0.09468170000000001,0.069129,0.0933744,0.0957472,0.0793112,0.0581121,0.0767528,0.1031739,0.1202133,0.0626926,0.0959522,0.059430300000000005,0.1202145,0.0611707,0.0480779,0.0383338,0.053287600000000004,0.0849878,0.05245300000000001,0.0660183,0.025419000000000004,0.0137567,0.0762322,0.0490294,0.0463194,0.0566921,0.0353006,0.0730591,0.034669,0.0271638,0.0309785,0.0152756,0.0478111,0.0177234,0.026930199999999998,0.0396318,0.0194934,0.1683044],[0.08012745758,0.15185614577,0.08083484276,0.08634844480000001,0.11421861070999999,0.11285038043,0.08623735826,0.13645806801,0.09591427898,0.14015059741,0.13592869247,0.07911429639999999,0.09764735666999999,0.05456765264,0.121314988,0.10994927001000002,0.06394526214,0.14887167252,0.07330538177,0.08393523364,0.07170899168,0.12156511277,0.07745100072,0.05277594468,0.08620965831,0.10765468343,0.10084059099,0.09432227357,0.0924425572,0.07114801921,0.09939552755,0.04629134908,0.05493130422,0.059395027600000004,0.0395813042,0.06590906497,0.07569531533,0.08310902697,0.08854375327,0.09949027633,0.12020884008999999,0.04437610101,0.08045511693,0.07796533275,0.04284823143,0.09343803786,0.02985534283,0.09857675082,0.04660650676,0.07601580528,0.04390292048,0.07325564077999999,0.0967693938,0.13013691132,0.09065276996,0.03273684636,0.09595240406,0.06502016503,0.12747172211,0.30347497827000003,0.0601944515,0.03535030403,0.12949809292,0.037377818480000005,0.11280068435999999,0.0656260462,0.08794947713,0.09794364354,0.049127784359999996,0.07213901846000001,0.0505592422,0.06991845436,0.06296229678000001,0.025161181890000002,0.12568386739999998,0.0568295813]],[[27749565,13838477,13911088,24.5976082172601,24.9314069236505,24.2580664163534,77.8912115153135],[0.0635441,0.1066868,0.0889602,0.0816883,0.10164580000000001,0.0916705,0.079569,0.0970443,0.1046451,0.13356859999999998,0.09269619999999999,0.0936646,0.09194050000000001,0.0722027,0.0896342,0.0993397,0.061379399999999994,0.0916921,0.0828748,0.043487,0.0391652,0.05173029999999999,0.0507104,0.0336168,0.0554176,0.06918260000000001,0.066553,0.0686232,0.07097,0.0356915,0.0756028,0.0430155,0.0420597,0.06085890000000001,0.0609348,0.083607,0.079871,0.063388,0.0866719,0.07110419999999999,0.11604289999999999,0.0439268,0.0659694,0.046840599999999996,0.0340002,0.09966620000000001,0.037104700000000004,0.0638918,0.0462334,0.0467053,0.054563799999999996,0.0463275,0.048099199999999995,0.051574699999999994,0.0499415,0.0287639,0.0520332,0.0443779,0.0334986,0.043161,0.047440500000000003,0.0179186,0.0620127,0.0219074,0.0411669,0.0495684,0.0315231,0.0275056,0.0157341,0.0113926,0.024991,0.012811300000000001,0.017529700000000002,0.0103093,0.025329200000000003,0.0988836],[0.0767078,0.0679554,0.1064493,0.0915063,0.0860792,0.0785728,0.0892471,0.0687886,0.1055313,0.0921839,0.0659624,0.11451599999999999,0.0910735,0.1279864,0.0714669,0.0873929,0.09284529999999999,0.059575199999999995,0.1093534,0.0501142,0.052829,0.041160600000000006,0.0633309,0.0616121,0.0621781,0.0621598,0.0638378,0.0703724,0.0742589,0.048523,0.0735727,0.08988159999999999,0.0740614,0.0991105,0.148909,0.12269959999999999,0.1020624,0.0737742,0.09468170000000001,0.069129,0.0933744,0.0957472,0.0793112,0.0581121,0.0767528,0.1031739,0.1202133,0.0626926,0.0959522,0.059430300000000005,0.1202145,0.0611707,0.0480779,0.0383338,0.053287600000000004,0.0849878,0.05245300000000001,0.0660183,0.025419000000000004,0.0137567,0.0762322,0.0490294,0.0463194,0.0566921,0.0353006,0.0730591,0.034669,0.0271638,0.0309785,0.0152756,0.0478111,0.0177234,0.026930199999999998,0.0396318,0.0194934,0.1683044],[0.08240677231,0.15617586288000002,0.08313427985,0.08880472244,0.11746768624,0.11606053513,0.08869047591,0.14033976966,0.09864266742,0.14413733717,0.13979533545,0.08136479062999999,0.10042504443,0.056119890260000006,0.12476592788,0.11307689939000001,0.06576425631,0.15310649297,0.07539063496000001,0.0863228648,0.07374883377,0.12502316773,0.07965418065999999,0.054277215180000005,0.08866198801,0.11071704075,0.10370911384999999,0.09700537564,0.09507218864,0.07317190382,0.10222294398000001,0.04760815804,0.05649388631,0.061084585270000005,0.04070723846,0.0677839217,0.07784855284,0.08547315576,0.0910624789,0.10232038799000001,0.12362831435999999,0.045638428599999996,0.0827437523,0.08018314344000001,0.04406709707,0.09609598687000001,0.03070461129,0.10138087623,0.04793228073,0.07817815948,0.04515178793,0.07533947903,0.09952210692999999,0.13383880063,0.09323148892000001,0.0336680824,0.09868187701,0.06686973601,0.13109779715,0.31210766186,0.06190674968,0.03635588278,0.13318181034,0.03844107214,0.1160094254,0.06749285214,0.09045129791999999,0.10072975952,0.05052527888,0.07419109314,0.051997456129999994,0.07190736263,0.0647533294,0.025876919720000002,0.12925908492,0.058446162010000004]],[[27773083,14068521,13704562,26.031249743982,26.4622397434507,25.5923334000026,66.9928635958906],[0.0635441,0.1066868,0.0889602,0.0816883,0.10164580000000001,0.0916705,0.079569,0.0970443,0.1046451,0.13356859999999998,0.09269619999999999,0.0936646,0.09194050000000001,0.0722027,0.0896342,0.0993397,0.061379399999999994,0.0916921,0.0828748,0.043487,0.0391652,0.05173029999999999,0.0507104,0.0336168,0.0554176,0.06918260000000001,0.066553,0.0686232,0.07097,0.0356915,0.0756028,0.0430155,0.0420597,0.06085890000000001,0.0609348,0.083607,0.079871,0.063388,0.0866719,0.07110419999999999,0.11604289999999999,0.0439268,0.0659694,0.046840599999999996,0.0340002,0.09966620000000001,0.037104700000000004,0.0638918,0.0462334,0.0467053,0.054563799999999996,0.0463275,0.048099199999999995,0.051574699999999994,0.0499415,0.0287639,0.0520332,0.0443779,0.0334986,0.043161,0.047440500000000003,0.0179186,0.0620127,0.0219074,0.0411669,0.0495684,0.0315231,0.0275056,0.0157341,0.0113926,0.024991,0.012811300000000001,0.017529700000000002,0.0103093,0.025329200000000003,0.0988836],[0.0767078,0.0679554,0.1064493,0.0915063,0.0860792,0.0785728,0.0892471,0.0687886,0.1055313,0.0921839,0.0659624,0.11451599999999999,0.0910735,0.1279864,0.0714669,0.0873929,0.09284529999999999,0.059575199999999995,0.1093534,0.0501142,0.052829,0.041160600000000006,0.0633309,0.0616121,0.0621781,0.0621598,0.0638378,0.0703724,0.0742589,0.048523,0.0735727,0.08988159999999999,0.0740614,0.0991105,0.148909,0.12269959999999999,0.1020624,0.0737742,0.09468170000000001,0.069129,0.0933744,0.0957472,0.0793112,0.0581121,0.0767528,0.1031739,0.1202133,0.0626926,0.0959522,0.059430300000000005,0.1202145,0.0611707,0.0480779,0.0383338,0.053287600000000004,0.0849878,0.05245300000000001,0.0660183,0.025419000000000004,0.0137567,0.0762322,0.0490294,0.0463194,0.0566921,0.0353006,0.0730591,0.034669,0.0271638,0.0309785,0.0152756,0.0478111,0.0177234,0.026930199999999998,0.0396318,0.0194934,0.1683044],[0.08503916535,0.16116472779,0.08578991231000001,0.0916414909,0.12122006133,0.11976796032999999,0.0915235949,0.14482276812,0.10179369814000001,0.14874164471,0.14426094256,0.08396389872,0.10363301120999999,0.057912577980000005,0.12875143722,0.11668901566,0.06786502261,0.15799731026,0.07779890527,0.08908035308,0.07610465856000001,0.12901689431000002,0.08219864521,0.05601104069,0.09149419698,0.11425377395,0.10702198658999999,0.10010410488999999,0.09810916438,0.07550929921,0.10548834266,0.0491289479,0.05829852092,0.06303586467,0.04200758609,0.06994920397,0.08033533861,0.08820350101999999,0.09397136889999999,0.10558889942000001,0.12757748389,0.04709629764,0.08538690978999999,0.08274450512,0.04547477166,0.0991656667,0.031685436080000004,0.104619376,0.04946342433,0.08067547417000001,0.04659411177,0.07774611522,0.10270123037000001,0.13811413283,0.09620966553,0.03474357199,0.10183416024,0.06900581564,0.13528557103,0.32207759532,0.06388429221,0.03751723118,0.13743615571,0.03966902959,0.11971521796,0.06964883652000001,0.09334066442,0.10394746008,0.052139252930000005,0.07656104541,0.05365845725,0.07420436366,0.06682180277000001,0.026703529250000003,0.13338812317999998,0.0603131599]],[[27763227,14197178,13566049,27.1801825364803,27.2072646746751,27.152230557176,58.6206806491801],[0.0635441,0.1066868,0.0889602,0.0816883,0.10164580000000001,0.0916705,0.079569,0.0970443,0.1046451,0.13356859999999998,0.09269619999999999,0.0936646,0.09194050000000001,0.0722027,0.0896342,0.0993397,0.061379399999999994,0.0916921,0.0828748,0.043487,0.0391652,0.05173029999999999,0.0507104,0.0336168,0.0554176,0.06918260000000001,0.066553,0.0686232,0.07097,0.0356915,0.0756028,0.0430155,0.0420597,0.06085890000000001,0.0609348,0.083607,0.079871,0.063388,0.0866719,0.07110419999999999,0.11604289999999999,0.0439268,0.0659694,0.046840599999999996,0.0340002,0.09966620000000001,0.037104700000000004,0.0638918,0.0462334,0.0467053,0.054563799999999996,0.0463275,0.048099199999999995,0.051574699999999994,0.0499415,0.0287639,0.0520332,0.0443779,0.0334986,0.043161,0.047440500000000003,0.0179186,0.0620127,0.0219074,0.0411669,0.0495684,0.0315231,0.0275056,0.0157341,0.0113926,0.024991,0.012811300000000001,0.017529700000000002,0.0103093,0.025329200000000003,0.0988836],[0.0767078,0.0679554,0.1064493,0.0915063,0.0860792,0.0785728,0.0892471,0.0687886,0.1055313,0.0921839,0.0659624,0.11451599999999999,0.0910735,0.1279864,0.0714669,0.0873929,0.09284529999999999,0.059575199999999995,0.1093534,0.0501142,0.052829,0.041160600000000006,0.0633309,0.0616121,0.0621781,0.0621598,0.0638378,0.0703724,0.0742589,0.048523,0.0735727,0.08988159999999999,0.0740614,0.0991105,0.148909,0.12269959999999999,0.1020624,0.0737742,0.09468170000000001,0.069129,0.0933744,0.0957472,0.0793112,0.0581121,0.0767528,0.1031739,0.1202133,0.0626926,0.0959522,0.059430300000000005,0.1202145,0.0611707,0.0480779,0.0383338,0.053287600000000004,0.0849878,0.05245300000000001,0.0660183,0.025419000000000004,0.0137567,0.0762322,0.0490294,0.0463194,0.0566921,0.0353006,0.0730591,0.034669,0.0271638,0.0309785,0.0152756,0.0478111,0.0177234,0.026930199999999998,0.0396318,0.0194934,0.1683044],[0.08669306385,0.1642991671,0.08745841185,0.09342379585,0.12357763008,0.12209728765000001,0.09330360693,0.14763937807,0.10377345,0.15163447160000001,0.14706662576,0.08559688473,0.10564853525,0.059038900490000004,0.1312554812,0.11895846161000001,0.06918490692,0.16107014750999998,0.07931199036,0.09081284731,0.07758479281,0.13152610108,0.08379729938,0.05710038083,0.09327363726,0.11647585767999999,0.10910342170000001,0.10205099641,0.10001725696,0.07697785452,0.10753995044,0.050084440509999995,0.05943234951,0.06426182829,0.04282457769,0.07130962283,0.08189775395,0.08991894164,0.09579898687,0.10764246288999998,0.13005869604,0.0480122579,0.08704757146,0.08435377554,0.04635919541,0.10109430684000001,0.032301675610000004,0.10665408353000001,0.05042542206,0.0822445047,0.047500305189999995,0.07925817361000001,0.10469863252,0.14080026877000001,0.09808081538999999,0.035419288189999995,0.10381469903,0.07034788685,0.13791669521,0.3283415756,0.06512675661,0.03824689136,0.1401091059,0.04044053939,0.12204351951,0.07100341363,0.09515601602,0.10596909973999999,0.05315329196,0.07805005578,0.05470204278,0.0756475397,0.06812139784,0.02722287733,0.13598234452,0.061486170529999995]],[[27754352,14075999,13678353,29.1168227998273,29.25251358929,28.974780426636,50.90167162031],[0.0635441,0.1066868,0.0889602,0.0816883,0.10164580000000001,0.0916705,0.079569,0.0970443,0.1046451,0.13356859999999998,0.09269619999999999,0.0936646,0.09194050000000001,0.0722027,0.0896342,0.0993397,0.061379399999999994,0.0916921,0.0828748,0.043487,0.0391652,0.05173029999999999,0.0507104,0.0336168,0.0554176,0.06918260000000001,0.066553,0.0686232,0.07097,0.0356915,0.0756028,0.0430155,0.0420597,0.06085890000000001,0.0609348,0.083607,0.079871,0.063388,0.0866719,0.07110419999999999,0.11604289999999999,0.0439268,0.0659694,0.046840599999999996,0.0340002,0.09966620000000001,0.037104700000000004,0.0638918,0.0462334,0.0467053,0.054563799999999996,0.0463275,0.048099199999999995,0.051574699999999994,0.0499415,0.0287639,0.0520332,0.0443779,0.0334986,0.043161,0.047440500000000003,0.0179186,0.0620127,0.0219074,0.0411669,0.0495684,0.0315231,0.0275056,0.0157341,0.0113926,0.024991,0.012811300000000001,0.017529700000000002,0.0103093,0.025329200000000003,0.0988836],[0.0767078,0.0679554,0.1064493,0.0915063,0.0860792,0.0785728,0.0892471,0.0687886,0.1055313,0.0921839,0.0659624,0.11451599999999999,0.0910735,0.1279864,0.0714669,0.0873929,0.09284529999999999,0.059575199999999995,0.1093534,0.0501142,0.052829,0.041160600000000006,0.0633309,0.0616121,0.0621781,0.0621598,0.0638378,0.0703724,0.0742589,0.048523,0.0735727,0.08988159999999999,0.0740614,0.0991105,0.148909,0.12269959999999999,0.1020624,0.0737742,0.09468170000000001,0.069129,0.0933744,0.0957472,0.0793112,0.0581121,0.0767528,0.1031739,0.1202133,0.0626926,0.0959522,0.059430300000000005,0.1202145,0.0611707,0.0480779,0.0383338,0.053287600000000004,0.0849878,0.05245300000000001,0.0660183,0.025419000000000004,0.0137567,0.0762322,0.0490294,0.0463194,0.0566921,0.0353006,0.0730591,0.034669,0.0271638,0.0309785,0.0152756,0.0478111,0.0177234,0.026930199999999998,0.0396318,0.0194934,0.1683044],[0.08524739676000001,0.16155936429,0.08599998204,0.09186588912,0.12151688721000001,0.12006123050999999,0.09174770443,0.14517738883,0.10204295559000001,0.14910586138999998,0.14461418755,0.08416949718,0.1038867725,0.058054385789999996,0.12906670482,0.11697474658,0.06803120051,0.15838419085,0.07798940778999999,0.08929847996,0.07629101246,0.12933281191999998,0.08239992117,0.056148192289999996,0.09171823453,0.1145335418,0.10728404630999999,0.10034922511,0.09834939968,0.07569419529,0.10574664702,0.04924924765,0.05844127377,0.06319021764,0.04211044809,0.07012048531000001,0.08053205197999999,0.08841948079,0.09420147217,0.10584745,0.12788987689,0.04721162013,0.08559599271,0.08294711769999999,0.0455861236,0.09940848901,0.03176302272,0.10487555256,0.04958454309,0.08087302042,0.04670820459,0.07793648848,0.10295271005,0.13845232642,0.09644524963,0.03482864694,0.10208351676,0.06917478694,0.13561683846,0.32286625161,0.06404072268,0.03760909786,0.13777268917000002,0.03976616528,0.12000835899,0.06981938236,0.09356922331999999,0.10420199135,0.05226692387,0.07674851685,0.053789848200000004,0.0743860644,0.06698542618,0.026768916929999997,0.13371474441,0.060460845900000004]]]

File examples/kcp.print.js

+// <--- --------------------------------------------------------------------------------------- ----
+	
+// 	Blog Entry:
+// 	Ask Ben: Print Part Of A Web Page With jQuery
+	
+// 	Author:
+// 	Ben Nadel / Kinky Solutions
+	
+// 	Link:
+// 	http://www.bennadel.com/index.cfm?event=blog.view&id=1591
+	
+// 	Date Posted:
+// 	May 21, 2009 at 9:10 PM
+	
+// ---- --------------------------------------------------------------------------------------- --->
+
+
+// Create a jquery plugin that prints the given element.
+jQuery.fn.print = function(){
+	// NOTE: We are trimming the jQuery collection down to the
+	// first element in the collection.
+	if (this.size() > 1){
+		this.eq( 0 ).print();
+		return;
+	} else if (!this.size()){
+		return;
+	}
+
+    var chart = $(this).closest('div.quintile-outer-container').find('div.jqplot-target');
+    // var imgelem = chart.jqplotToImageElem();
+    var imageElemStr = chart.jqplotToImageElemStr();
+    // var statsrows = $(this).closest('div.quintile-outer-container').find('table.stats-table tr');
+    var statsTable = $('<div></div>').append($(this).closest('div.quintile-outer-container').find('table.stats-table').clone());
+    // var rowstyles = window.getComputedStyle(statsrows.get(0), '');
+ 
+	// ASSERT: At this point, we know that the current jQuery
+	// collection (as defined by THIS), contains only one
+	// printable element.
+ 
+	// Create a random name for the print frame.
+	var strFrameName = ("printer-" + (new Date()).getTime());
+ 
+	// Create an iFrame with the new name.
+	var jFrame = $( "<iframe name='" + strFrameName + "'>" );
+ 
+	// Hide the frame (sort of) and attach to the body.
+	jFrame
+		.css( "width", "1px" )
+		.css( "height", "1px" )
+		.css( "position", "absolute" )
+		.css( "left", "-9999px" )
+		.appendTo( $( "body:first" ) )
+	;
+ 
+	// Get a FRAMES reference to the new frame.
+	var objFrame = window.frames[ strFrameName ];
+ 
+	// Get a reference to the DOM in the new frame.
+	var objDoc = objFrame.document;
+ 
+	// Grab all the style tags and copy to the new
+	// document so that we capture look and feel of
+	// the current document.
+ 
+	// Create a temp document DIV to hold the style tags.
+	// This is the only way I could find to get the style
+	// tags into IE.
+	var jStyleDiv = $( "<div>" ).append(
+		$( "style" ).clone()
+		);
+ 
+	// Write the HTML for the document. In this, we will
+	// write out the HTML of the current element.
+	objDoc.open();
+	objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
+	objDoc.write( "<html>" );
+	objDoc.write( "<body>" );
+	objDoc.write( "<head>" );
+	objDoc.write( "<title>" );
+	objDoc.write( document.title );
+	objDoc.write( "</title>" );
+	objDoc.write( jStyleDiv.html() );
+	objDoc.write( "</head>" );
+
+	// Typically, would just write out the html.	
+	// objDoc.write( this.html() );
+
+	// We need to do specific manipulation for kcp quintiles.
+	objDoc.write( '<div class="quintile-outer-container ui-widget ui-corner-all"> \
+    <div class="quintile-content ui-widget-content ui-corner-bottom"> \
+		<table class="quintile-display"> \
+            <tr> \
+                <td class="chart-cell">');
+
+    objDoc.write(imageElemStr);
+    
+    objDoc.write('</td> <td class="stats-cell">');
+
+    objDoc.write(statsTable.html());
+
+    objDoc.write('</td></tr></table></div></div>');
+
+	objDoc.write( "</body>" );
+	objDoc.write( "</html>" );
+	objDoc.close();
+ 
+ 	// 
+	// When the iframe is completely loaded, print it.
+	// This seemed worked in IE 9, but caused problems in FF.
+	//
+	// $(objFrame).load(function() {
+	// 	objFrame.focus();
+	// 	objFrame.print();
+	// });
+
+	//
+	// This works in all supported browsers.
+	// Note, might have to adjust time.
+	//
+	setTimeout(
+		function() {
+			objFrame.focus();
+			objFrame.print();
+		}, 750);
+ 
+
+	// Have the frame remove itself in about a minute so that
+	// we don't build up too many of these frames.
+	setTimeout(
+		function(){
+			jFrame.empty();
+			jFrame.remove();
+		},
+		(60 * 1000)
+		);
+}

File examples/kcp_pyramid_by_age.php

+<!DOCTYPE html>
+
+<html>
+<head>
+    
+    <title>Quintile Chart</title>
+
+    <link class="include" rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
+    <link rel="stylesheet" type="text/css" href="examples.css" />
+    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
+    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
+  
+  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
+    <script class="include" type="text/javascript" src="../src/jquery.js"></script>
+    
+   
+</head>
+<body>
+
+<!-- Example scripts go here -->
+
+  <link class="include" type="text/css" href="jquery-ui/css/smoothness/jquery-ui.min.css" rel="Stylesheet" /> 
+
+    <style type="text/css">
+        
+        body {
+            width: 98%;
+            height: 98%;
+            padding: 12px;
+        }
+
+        .quintile-outer-container {
+            width: 96%;
+            height: 96%;
+            margin: auto;
+        }
+
+        .jqplot-chart {
+            width: 800px;
+            height: 800px;
+        }
+
+        .quintile-toolbar .ui-icon {
+            float: right;
+            margin: 3px 5px;
+        }
+
+        table.stats-table td, table.highlighted-stats-table td {
+            background-color: rgb(230, 230, 230);
+            padding: 0.5em;
+        }
+
+        col.label {
+            width: 14em;
+        }
+
+        col.value {
+            width: 7em;
+        }
+
+        td.quintile-value {
+            width: 7em;
+            text-align: right;
+        }
+
+        table.stats-table td.tooltip-header, table.highlighted-stats-table td.tooltip-header {
+            background-color: rgb(200, 200, 200);
+        }
+
+        table.stats-table, table.highlighted-stats-table, td.contour-cell {
+            font-size: 0.7em;
+        }
+
+        td.contour-cell {
+            height: 1.5em;
+            padding-left: 20px;
+            padding-bottom: 1.5em;
+        }
+
+        table.highlighted-stats-table {
+            margin-top: 15px;
+        }
+
+        td.stats-cell {
+            padding-left: 20px;
+            padding-top: 40px;
+            vertical-align: top;
+
+        }
+
+        td.stats-cell div.input {
+            font-size: 0.7em;
+            margin-top: 1.5em;
+        }
+
+        div.overlay-chart-container {
+            display: none;
+            z-index: 11;
+            position: fixed;
+            width: 800px;
+            left: 50%;
+            margin-left: -400px;
+            background-color: white;
+        }
+
+        div.overlay-chart-container div.ui-icon {
+            float: right;
+            margin: 3px 5px;
+        }
+
+        div.overlay-shadow {
+            display: none;
+            z-index: 10;
+            background-color: rgba(0, 0, 0, 0.8);
+            position: fixed;
+            top: 0px;
+            left: 0px;
+            width: 100%;
+            height: 100%;
+        }
+
+        @media print {
+            td.stats-cell {
+                vertical-align: top;
+                padding-top: 35px;
+            }
+
+            table.stats-table, table.stats-table td {
+                 color: #aaaaaa;
+                 border: 1px solid #bbbbbb;
+                 border-collapse: collapse;
+            }
+
+            table.stats-table tr {
+                font-family: Verdana,Arial,sans-serif;
+                /*font-size: 0.7em;*/
+            }
+        }
+
+    </style>
+
+    <div class="overlay-shadow"></div>
+
+    <div class="overlay-chart-container ui-corner-all">
+        <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>
+        <div class="overlay-chart-container-content ui-corner-bottom"></div>
+    </div>
+
+    <div class="quintile-outer-container ui-widget ui-corner-all">
+        <div class="quintile-toolbar ui-widget-header  ui-corner-top">
+            <span class="quintile-title">Income Level:</span>
+        </div>
+        <div class="quintile-content ui-widget-content ui-corner-bottom">
+            <table class="quintile-display">
+                <tr>
+                    <td class="chart-cell">
+                        <div class="jqplot-chart"></div>
+                    </td>
+                    <td class="stats-cell">
+                        <table class="stats-table">
+                        <colgroup>
+                            <col class="label">
+                            <col class="value">
+                        </colgroup>
+                        <tbody>
+                            <tr>
+                                <td class="ui-corner-tl">Mean Age:</td>
+                                <td class="quintile-value summary-meanAge ui-corner-tr"></td>
+                            </tr>
+                            <tr>
+                                <td>Sex Ratio:</td>
+                                <td class="quintile-value summary-sexRatio"></td>
+                            </tr>
+                            <tr>
+                                <td>Age Dependency Ratio:</td>
+                                <td class="quintile-value summary-ageDependencyRatio"></td>
+                            </tr>
+                            <tr>
+                                <td>Population, Total:</td>
+                                <td class="quintile-value summary-populationTotal"></td>
+                            </tr>
+                            <tr>
+                                <td>Population, Male:</td>
+                                <td class="quintile-value summary-populationMale"></td>
+                            </tr>
+                            <tr>
+                                <td class="ui-corner-bl">Population, Female:</td>
+                                <td class="quintile-value summary-populationFemale ui-corner-br"></td>
+                            </tr>
+                        </tbody>
+                        </table>
+                        <table class="highlighted-stats-table">
+                        <colgroup>
+                            <col class="label">
+                            <col class="value">
+                        </colgroup>
+                        <tbody>
+                            <tr class="tooltip-header">
+                                <td class="tooltip-header ui-corner-top" colspan="2">Highlighted Age: <span class="tooltip-item tooltipAge">&nbsp;</span></td>
+                            </tr>
+                            <tr>
+                                <td>Population, Male: </td>
+                                <td class="quintile-value"><span class="tooltip-item tooltipMale">&nbsp;</span></td>
+                            </tr>
+                            <tr>
+                                <td>Population, Female: </td>
+                                <td class="quintile-value"><span class="tooltip-item tooltipFemale">&nbsp;</span></td>
+                            </tr>
+                            <tr>
+                                <td class="ui-corner-bl">Sex Ratio: </td>
+                                <td class="quintile-value ui-corner-br"><span class="tooltip-item tooltipRatio">&nbsp;</span></td>
+                            </tr>
+                        <tbody>
+                        </table>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div> 
+  
+
+
+    <script class="code" type="text/javascript" language="javascript">
+    $(document).ready(function(){
+
+        // if browser supports canvas, show additional toolbar icons
+        if (!$.jqplot.use_excanvas) {
+            $('div.quintile-toolbar').append('<div class="ui-icon ui-icon-image"></div><div class="ui-icon ui-icon-print"></div>');
+        }
+
+        var quintileIndex = parseInt(<?php echo $_GET["qidx"]; ?>);
+
+        var male;
+        var female;
+        var summaryTable;
+        var sexRatios;
+        quintiles = [];
+
+
+        // the "x" values from the data will go into the ticks array.  
+        // ticks should be strings for this case where we have values like "75+"
+        var ticks = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "70", "71", "72", "73", "74", "75+", ""];
+
+
+        $.ajax({
+            type: "GET",
+            dataType: 'json',
+            async: false,
+            url: "ages.json",
+            contentType: "application/json",
+            success: function (retdata) {
+                // array of arrays of data for each quintile
+                // each quintile array has data for following:
+                //  0: summary table
+                //  1: male data
+                //  2: female data
+                //  3: ratios
+                quintiles = retdata;
+            },
+            error: function (xhr) { console.log("ERROR: ", xhr.statusText) }
+        });
+
+        $('td.summary-meanAge').each(function(index) {
+            $(this).html($.jqplot.sprintf('%5.2f', quintiles[quintileIndex][0][3]));
+        });
+
+        $('td.summary-sexRatio').each(function(index) {
+            $(this).html($.jqplot.sprintf('%5.2f', quintiles[quintileIndex][3][0]));
+        });
+
+        $('td.summary-ageDependencyRatio').each(function(index) {
+            $(this).html($.jqplot.sprintf('%5.2f', quintiles[quintileIndex][0][6]));
+        });
+
+        $('td.summary-populationTotal').each(function(index) {
+            $(this).html($.jqplot.sprintf("%'d", quintiles[quintileIndex][0][0]));
+        });
+
+        $('td.summary-populationMale').each(function(index) {
+            $(this).html($.jqplot.sprintf("%'d", quintiles[quintileIndex][0][1]));
+        });
+
+        $('td.summary-populationFemale').each(function(index) {
+            $(this).html($.jqplot.sprintf("%'d", quintiles[quintileIndex][0][2]));
+        });
+        
+        // These two variables should be removed outside of the jqplot.com example environment.
+        $.jqplot._noToImageButton = true;
+        $.jqplot._noCodeBlock = true;
+
+        // Custom color arrays are set up for each series to get the look that is desired.
+        // Two color arrays are created for the default and optional color which the user can pick.
+        var greenColors = ["#526D2C", "#77933C", "#C57225", "#C57225"];
+        var blueColors = ["#3F7492", "#4F9AB8", "#C57225", "#C57225"];
+
+        // To accomodate changing y axis, need to keep track of plot options.
+        // changing axes will require recreating the plot, so need to keep 
+        // track of state changes.
+        var plotOptions = {
+            // We set up a customized title which acts as labels for the left and right sides of the pyramid.
+            title: {
+                text: '<span style="position:relative;left:25%;">Male</span><span style="position:relative;left:50%;">Female</span>',
+                textAlign: 'left'
+            },
+            // by default, the series will use the green color scheme.
+            seriesColors: greenColors,
+
+            grid: {
+                drawBorder: false,
+                shadow: false,
+                background: "white",
+                rendererOptions: {
+                    // plotBands is an option of the pyramidGridRenderer.
+                    // it will put banding at starting at a specified value
+                    // along the y axis with an adjustable interval.
+                    plotBands: {
+                        show: true,
+                        interval: 10,
+                        color: 'rgb(245, 235, 215)'
+                    }
+                },
+            },
+
+            // This makes the effective starting value of the axes 0 instead of 1.
+            // For display, the y axis will use the ticks we supplied.
+            defaultAxisStart: 0,
+            seriesDefaults: {
+                renderer: $.jqplot.PyramidRenderer,
+                rendererOptions: {
+                    barPadding: 2,
+                    offsetBars: true
+                },
+                yaxis: "yaxis",
+                shadow: false
+            },
+
+            // We have 4 series, the left and right pyramid bars and
+            // the left and rigt overlay lines.
+            series: [
+                // For pyramid plots, the default side is right.
+                // We want to override here to put first set of bars
+                // on left.
+                {
+                    rendererOptions:{
+                        side: "left",
+                        syncronizeHighlight: 1
+                    }
+                },
+                {
+                    yaxis: "y2axis",
+                    rendererOptions: {
+                        syncronizeHighlight: 0
+                    }
+                },
+                {
+                    rendererOptions: {
+                        fill: false,
+                        side: 'left'
+                    }
+                },
+                {
+                    yaxis: 'y2axis',
+                    rendererOptions: {
+                        fill: false
+                    }
+                }
+            ],
+            axesDefaults: {
+                tickOptions: {
+                    showGridline: false
+                },
+                pad: 0,
+                rendererOptions: {
+                    baselineWidth: 2
+                }
+            },
+
+            // Set up all the y axes, since users are allowed to switch between them.
+            // The only axis that will show is the one that the series are "attached" to.
+            // We need the appropriate options for the others for when the user switches.
+            axes: {
+                xaxis: {
+                    tickOptions: {
+                        formatter: $.jqplot.PercentTickFormatter,
+                        formatString: '%d%%'
+                    }
+                },
+                yaxis: {
+                    label: "Age",
+                    // Use canvas label renderer to get rotated labels.
+                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                    // include empty tick options, they will be used
+                    // as users set options with plot controls.
+                    tickOptions: {},
+                    showMinorTicks: true,
+                    ticks: ticks,
+                    rendererOptions: {
+                        tickSpacingFactor: 15
+                    }
+                },
+                y2axis: {
+                    label: "Age",
+                    // Use canvas label renderer to get rotated labels.
+                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                    // include empty tick options, they will be used
+                    // as users set options with plot controls.
+                    tickOptions: {},
+                    showMinorTicks: true,
+                    ticks: ticks,
+                    rendererOptions: {
+                        tickSpacingFactor: 15
+                    }
+                }
+            }
+        };
+
+        $('div.jqplot-chart').jqplot([quintiles[quintileIndex][1], quintiles[quintileIndex][2]], plotOptions);
+
+        // Clear all the check boxes
+
+        $()
+
+        //////
+        // The followng functions use verbose css selectors to make
+        // it clear exactly which elements they are binging to/operating on
+        //////
+
+        // bind to the data highlighting event to make custom tooltip:
+        $(".jqplot-target").each(function(index){
+            $(this).bind("jqplotDataHighlight", function(evt, seriesIndex, pointIndex, data) {
+                // Here, assume first series is male poulation and second series is female population.
+                // Adjust series indices as appropriate.
+                var plot = $(this).data('jqplot');
+                var malePopulation = Math.abs(plot.series[0].data[pointIndex][1]) * quintiles[quintileIndex][0][1];
+                var femalePopulation = Math.abs(plot.series[1].data[pointIndex][1]) * quintiles[quintileIndex][0][2];
+                var malePopulation = quintiles[quintileIndex][1][pointIndex] * quintiles[quintileIndex][0][1];
+                var femalePopulation = quintiles[quintileIndex][2][pointIndex] * quintiles[quintileIndex][0][2];
+                // var ratio = femalePopulation / malePopulation * 100;
+                var ratio = quintiles[quintileIndex][3][pointIndex+1];
+
+                $(this).closest('table').find('.tooltipMale').stop(true, true).fadeIn(350).html($.jqplot.sprintf("%'d", malePopulation));
+                $(this).closest('table').find('.tooltipFemale').stop(true, true).fadeIn(350).html($.jqplot.sprintf("%'d", femalePopulation));
+                $(this).closest('table').find('.tooltipRatio').stop(true, true).fadeIn(350).html($.jqplot.sprintf('%5.2f', ratio));
+
+                // Since we don't know which axis is rendererd and acive with out a little extra work,
+                // just use the supplied ticks array to get the age label.
+                $(this).closest('table').find('.tooltipAge').stop(true, true).fadeIn(350).html(ticks[pointIndex]);
+            });
+        });
+
+        // bind to the data highlighting event to make custom tooltip:
+        $(".jqplot-target").each(function() {
+            $(this).bind("jqplotDataUnhighlight", function(evt, seriesIndex, pointIndex, data) {
+                // clear out all the tooltips.
+                $(this).closest('table').find(".tooltip-item").fadeOut(250);
+            });
+        });
+
+        $('.ui-icon-print').click(function(){
+            $(this).parent().next().print();
+        });
+
+
+        $('.ui-icon-image').each(function() {
+            $(this).bind('click', function(evt) {
+                var chart = $(this).closest('div.quintile-outer-container').find('div.jqplot-target');
+                var imgelem = chart.jqplotToImageElem();
+                var div = $('div.overlay-chart-container-content');
+                div.empty();
+                div.append(imgelem);
+                $('div.overlay-shadow').fadeIn(600);
+                div.parent().fadeIn(1000);
+                div = null;
+            });
+        });
+
+        $('div.overlay-chart-container-header div.ui-icon-closethick').click(function(){
+            var div = $('div.overlay-chart-container-content');
+            div.parent().fadeOut(600);
+            $('div.overlay-shadow').fadeOut(1000);
+        });
+
+    });
+    </script>
+
+<!-- End example scripts -->
+
+<!-- Don't touch this! -->
+
+<?php include "commonScripts.html" ?>
+
+<!-- End Don't touch this! -->
+
+<!-- Additional plugins go here -->
+
+    <script class="include" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
+
+    <!-- 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. -->
+    <script class="include" type="text/javascript" src="../src/plugins/jqplot.pyramidAxisRenderer.js"></script>
+    <script class="include" type="text/javascript" src="../src/plugins/jqplot.pyramidGridRenderer.js"></script> 
+
+    <script class="include" type="text/javascript" src="../src/plugins/jqplot.pyramidRenderer.js"></script>
+    <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
+    <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
+    <script class="include" type="text/javascript" src="../src/plugins/jqplot.json2.js"></script>
+    <script class="include" type="text/javascript" src="jquery-ui/js/jquery-ui.min.js"></script>
+    <script class="include" type="text/javascript" src="kcp.print.js"></script>
+
+<!-- End additional plugins -->
+
+<?php include "closer.html"; ?>

File examples/kcp_quintiles.php

 
 <!-- Example scripts go here -->
 
-  <link class="include" type="text/css" href="jquery-ui/css/ui-lightness/jquery-ui.min.css" rel="Stylesheet" /> 
+  <link class="include" type="text/css" href="jquery-ui/css/smoothness/jquery-ui.min.css" rel="Stylesheet" /> 
 
     <style type="text/css">
 
             margin: 3px 5px;
         }
 
-        table.stats-table td {
+        table.stats-table td, table.highlighted-stats-table td {
             background-color: rgb(230, 230, 230);
             padding: 0.5em;
         }
 
+        col.label {
+            width: 14em;
+        }
+
+        col.value {
+            width: 7em;
+        }
+
         td.quintile-value {
             width: 7em;
             text-align: right;
         }
 
-        table.stats-table td.tooltip-header {
+        table.stats-table td.tooltip-header, table.highlighted-stats-table td.tooltip-header {
             background-color: rgb(200, 200, 200);
         }
 
-        table.stats-table {
+        table.stats-table, table.highlighted-stats-table, td.contour-cell {
             font-size: 0.7em;
         }
 
-        tr.tooltip-spacer {
-            height: 3em;
+        td.contour-cell {
+            height: 1.5em;
+            padding-left: 20px;
+            padding-bottom: 1.5em;
         }
 
-        table.stats-table tr.tooltip-spacer td {
-            background-color: transparent;
+        table.highlighted-stats-table {
+            margin-top: 15px;
         }
 
         td.stats-cell {
             padding-left: 20px;
+            padding-top: 20px;
+            vertical-align: top;
 
         }
 
             margin: 3px 5px;
         }
 
-        div.overlay-print-container {
-            display: none;
-            z-index: 11;
-            position: fixed;
-            width: 900px;
-            height: 460px;
-            left: 50%;
-            margin-left: -450px;
-        }
-
         div.overlay-shadow {
             display: none;
             z-index: 10;
             height: 100%;
         }
 
+        @media print {
+            td.stats-cell {
+                vertical-align: top;
+                padding-top: 35px;
+            }
+
+            table.stats-table, table.stats-table td {
+                 color: #aaaaaa;
+                 border: 1px solid #bbbbbb;
+                 border-collapse: collapse;
+            }
+
+            table.stats-table tr {
+                font-family: Verdana,Arial,sans-serif;
+                /*font-size: 0.7em;*/
+            }
+        }
+
     </style>
 
     <div class="overlay-shadow"></div>
 
-    <div class="overlay-print-container"></div>
-
     <div class="overlay-chart-container ui-corner-all">
         <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>
         <div class="overlay-chart-container-content ui-corner-bottom"></div>
     </div>
 
-    <script type="text/javascript">
-        var tpl = '<div class="quintile-outer-container ui-widget ui-corner-all"> \
-        <div class="quintile-toolbar ui-widget-header  ui-corner-top"> \
-            <span class="quintile-title">Occurrence Level Per Day:</span> \
-            <div class="quintile-toggle ui-icon ui-icon-arrowthickstop-1-n"></div> \
-            <div class="ui-icon ui-icon-clipboard"></div> \
-            <div class="ui-icon ui-icon-newwin"></div> \
-            <div class="ui-icon ui-icon-disk"></div> \
-            <div class="ui-icon ui-icon-print"></div> \
-        </div> \
-        <div class="quintile-content ui-widget-content ui-corner-bottom"> \
-            <table class="quintile-display"> \
-                <tr> \
-                    <td class="chart-cell"> \
-                        <div class="jqplot-chart"></div> \
-                    </td> \
-                    <td class="stats-cell"> \
-                        <table class="stats-table"> \
-                        <tbody> \
-                            <tr> \
-                                <td class="ui-corner-tl">Mean Age:</td> \
-                                <td class="quintile-value summary-meanAge ui-corner-tr"></td> \
-                            </tr> \
-                            <tr> \
-                                <td> Ratio:</td> \
-                                <td class="quintile-value summary-sexRatio"></td> \
-                            </tr> \
-                            <tr> \
-                                <td>Age dependency ratio:</td> \
-                                <td class="quintile-value summary-ageDependencyRatio"></td> \
-                            </tr> \
-                            <tr> \
-                                <td>Population, total:</td> \
-                                <td class="quintile-value summary-populationTotal"></td> \
-                            </tr> \
-                            <tr> \
-                                <td>Motors:</td> \
-                                <td class="quintile-value summary-populationMale"></td> \
-                            </tr> \
-                            <tr> \
-                                <td class="ui-corner-bl">Ferrules:</td> \
-                                <td class="quintile-value summary-populationFemale ui-corner-br"></td> \
-                            </tr> \
-                            <tr class="tooltip-spacer"> \
-                                <td></td> \
-                                <td></td> \
-                            </tr> \
-                            <tr class="tooltip-header"> \
-                                <td class="tooltip-header ui-corner-top" colspan="2">Selected Range: <span class="tooltip-item tooltipAge">&nbsp;</span></td> \
-                            </tr> \
-                            <tr> \
-                                <td>Motor: </td> \
-                                <td class="quintile-value"><span class="tooltip-item tooltipMale">&nbsp;</span></td> \
-                            </tr> \
-                            <tr> \
-                                <td>Ferrule: </td> \
-                                <td class="quintile-value"><span class="tooltip-item tooltipFemale">&nbsp;</span></td> \
-                            </tr> \
-                            <tr> \
-                                <td class="ui-corner-bl">Ratio: </td> \
-                                <td class="quintile-value ui-corner-br"><span class="tooltip-item tooltipRatio">&nbsp;</span></td> \
-                            </tr> \
-                        </tbody> \
-                        </table> \
-                        <div class="input"><input name="showContour" type="checkbox" /> Use as overlay on other charts?</div> \
-                    </td> \
-                </tr> \
-            </table> \
-        </div> \
-    </div> ';
-
-        for (var i=0; i<5; i++) {
-            document.write(tpl);
-        }
-    </script>
-
-<!--     <div class="quintile-outer-container ui-widget ui-corner-all">
-
+    <div class="quintile-outer-container ui-widget ui-corner-all">
         <div class="quintile-toolbar ui-widget-header  ui-corner-top">
             <span class="quintile-title">Income Level:</span>
             <div class="quintile-toggle ui-icon ui-icon-arrowthickstop-1-n"></div>
-            <div class="ui-icon ui-icon-clipboard"></div>
             <div class="ui-icon ui-icon-newwin"></div>
-            <div class="ui-icon ui-icon-disk"></div>
-            <div class="ui-icon ui-icon-print"></div>
         </div>
         <div class="quintile-content ui-widget-content ui-corner-bottom">
             <table class="quintile-display">
                 <tr>
-                    <td class="chart-cell">
+                    <td class="chart-cell" rowspan="2">
                         <div class="jqplot-chart"></div>
                     </td>
-
                     <td class="stats-cell">
                         <table class="stats-table">
+                        <colgroup>
+                            <col class="label">
+                            <col class="value">
+                        </colgroup>
                         <tbody>
                             <tr>
                                 <td class="ui-corner-tl">Mean Age:</td>
                                 <td class="quintile-value summary-sexRatio"></td>
                             </tr>
                             <tr>
-                                <td>Age dependency ratio:</td>
+                                <td>Age Dependency Ratio:</td>
                                 <td class="quintile-value summary-ageDependencyRatio"></td>
                             </tr>
                             <tr>
-                                <td>Population, total:</td>
+                                <td>Population, Total:</td>
                                 <td class="quintile-value summary-populationTotal"></td>
                             </tr>
                             <tr>
-                                <td>Population, male:</td>
+                                <td>Population, Male:</td>
                                 <td class="quintile-value summary-populationMale"></td>
                             </tr>
                             <tr>
-                                <td class="ui-corner-bl">Population, female:</td>
+                                <td class="ui-corner-bl">Population, Female:</td>
                                 <td class="quintile-value summary-populationFemale ui-corner-br"></td>
                             </tr>
-                            <tr class="tooltip-spacer">
-                                <td></td>
-                                <td></td>
-                            </tr>
-
+                        </tbody>
+                        </table>
+                        <table class="highlighted-stats-table">
+                        <colgroup>
+                            <col class="label">
+                            <col class="value">
+                        </colgroup>
+                        <tbody>
                             <tr class="tooltip-header">
-                                <td class="tooltip-header ui-corner-top" colspan="2">Selected Range: <span class="tooltip-item tooltipAge">&nbsp;</span></td>
+                                <td class="tooltip-header ui-corner-top" colspan="2">Highlighted Range: <span class="tooltip-item tooltipAge">&nbsp;</span></td>
                             </tr>
                             <tr>
-                                <td>Male: </td>
+                                <td>Population, Male: </td>
                                 <td class="quintile-value"><span class="tooltip-item tooltipMale">&nbsp;</span></td>
                             </tr>
                             <tr>
-                                <td>Female: </td>
+                                <td>Population, Female: </td>
                                 <td class="quintile-value"><span class="tooltip-item tooltipFemale">&nbsp;</span></td>
                             </tr>
                             <tr>
                                 <td class="ui-corner-bl">Sex Ratio: </td>
                                 <td class="quintile-value ui-corner-br"><span class="tooltip-item tooltipRatio">&nbsp;</span></td>
                             </tr>
-                        </tbody>
+                        <tbody>
                         </table>
                     </td>
                 </tr>
+                <tr>
+                    <td class="contour-cell">
+                        <input name="showContour" type="checkbox" /> Use as overlay on other charts?
+                    </td>
+                </tr>
             </table>
         </div>
-    </div> -->
+    </div> 
   
 
 
     <script class="code" type="text/javascript" language="javascript">
     $(document).ready(function(){
 
+        // if browser supports canvas, show additional toolbar icons
+        if (!$.jqplot.use_excanvas) {
+            $('div.quintile-toolbar').append('<div class="ui-icon ui-icon-image"></div><div class="ui-icon ui-icon-print"></div>');
+        }
+
+        // Add the needed containers:
+        for (var i=0; i<4; i++) {
+            var el = $('div.quintile-outer-container:last')
+            var clone = el.clone();
+            clone.insertAfter(el);
+        }
+
         var male;
         var female;
         var summaryTable;
         var sexRatios;
-        var quintiles = {};
+        var quintiles;
 
         $.ajax({
             type: "GET",
             dataType: 'json',
             async: false,
-            url: "../../../kcp/scripts/quintiles.json",
+            url: "quintiles.json",
             contentType: "application/json",
             success: function (retdata) {
+                // array of arrays of data for each quintile
+                // each quintile array has data for following:
+                //  0: summary table
+                //  1: male data
+                //  2: female data
+                //  3: ratios
                 quintiles = retdata;
-                // d = retdata["Q1"];
-                // summaryTable = d[0];
-                // male = d[1];
-                // female = d[2];
-                // sexRatios = d[3];
             },
             error: function (xhr) { console.log(xhr.statusText) }
         });
         var plotOptions = {
             // We set up a customized title which acts as labels for the left and right sides of the pyramid.
             title: {
-                text: '<span style="position:relative;left:25%;">Motor</span><span style="position:relative;left:50%;">Ferrule</span>',
+                text: '<span style="position:relative;left:25%;">Male</span><span style="position:relative;left:50%;">Female</span>',
                 textAlign: 'left'
             },
             // by default, the series will use the green color scheme.
                     // it will put banding at starting at a specified value
                     // along the y axis with an adjustable interval.
                     plotBands: {
-                        show: false,
-                        interval: 2
+                        show: true,
+                        interval: 2,
+                        color: 'rgb(250, 240, 225)'
                     }
                 },
             },
                     rendererOptions: {
                         syncronizeHighlight: 0
                     }
+                },
+                {
+                    rendererOptions: {
+                        fill: false,
+                        side: 'left'
+                    }
+                },
+                {
+                    yaxis: 'y2axis',
+                    rendererOptions: {
+                        fill: false
+                    }
                 }
             ],
             axesDefaults: {
 
         $('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]],plotOptions);
 
-        // After plot creation, check to see if contours should be displayed
-        checkContour();
+        // Clear all the check boxes
+
+        $()
 
         //////
         // The followng functions use verbose css selectors to make
         // it clear exactly which elements they are binging to/operating on
         //////
-        
-        //////
-        // Function which checkes if the countour lines checkbox is checked.
-        // If not, hide the contour lines by hiding the canvases they are
-        // drawn on.
-        //////
-        function checkContour() {
-            if (!$('input[type=checkbox][name=showContour]').get(0).checked) {
-            }
-        }
 
         // bind to the data highlighting event to make custom tooltip:
         $(".jqplot-target").each(function(index){
                     $(this).addClass('ui-icon-arrowthickstop-1-s');
                 }
                 else if ($(this).hasClass('ui-icon-arrowthickstop-1-s')) {
-                    $(this).parent().next('.quintile-content').effect('blind', {mode:'show'}, 150);
+                    $(this).parent().next('.quintile-content').effect('blind', {mode:'show'}, 600, function() {
+                        $(this).find('div.jqplot-chart').data('jqplot').replot();
+                    });
                     // $('.quintile-content').jqplotEffect('blind', {mode: 'show'}, 150);
                     $(this).removeClass('ui-icon-arrowthickstop-1-s');
                     $(this).addClass('ui-icon-arrowthickstop-1-n');
         });
 
         $('input[type=checkbox][name=showContour]').each(function(index) {
+            // on load/reload, clear all the check boxes.
+            $(this).get(0).checked = false;
+
             $(this).change(function(evt){
-                
+                var copydata = [quintiles[index][1], quintiles[index][2]];
+                var checkBox = this;
+
+                if (this.checked) {
+                    // uncheck all other check boxes.
+                    $('input[type=checkbox][name=showContour]').each(function(cidx) {
+                        if (cidx !== index) {
+                            this.checked = false;
+                        }
+                    });
+
+                    // add data to other plots.
+                    // remove data from this plot.
+                    $('div.jqplot-chart').each(function(pidx) {
+                        var plot = $(this).data('jqplot');
+                        var data = plot.data.slice(0,2);
+
+                        if (pidx !== index) {
+                            data = data.concat(copydata);
+                        }
+
+                        plot.replot({data: data});
+                    });
+                }
+
+                else {
+                    // remove extra data from plots.
+                    $('div.jqplot-chart').each(function(pidx) {
+                        var plot = $(this).data('jqplot');
+                        var data = plot.data.slice(0,2);
+                        plot.replot({data: data});
+                    });
+                }
             })
-        })
+        });
 
         $('.ui-icon-print').click(function(){
-            console.log('helrwo');
-            
+            $(this).parent().next().print();
         });
 
 
-        $('.ui-icon-disk, .ui-icon-clipboard').each(function() {
+        $('.ui-icon-image').each(function() {
             $(this).bind('click', function(evt) {
                 var chart = $(this).closest('div.quintile-outer-container').find('div.jqplot-target');
                 var imgelem = chart.jqplotToImageElem();
             });
         });
 
+
+        $('.ui-icon-newwin').each(function(index) {
+            $(this).bind('click', function(evt) {
+                var url = '_kcp_pyramid_by_age.php?qidx='+index;
+                window.open(url);
+            });
+        });
+
         $('div.overlay-chart-container-header div.ui-icon-closethick').click(function(){
             var div = $('div.overlay-chart-container-content');
             div.parent().fadeOut(600);
     <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
     <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
     <script class="include" type="text/javascript" src="jquery-ui/js/jquery-ui.min.js"></script>
-    <script class="include" type="text/javascript" src="jquery.print.js"></script>
+    <script class="include" type="text/javascript" src="kcp.print.js"></script>
 
 <!-- End additional plugins -->
 

File examples/quintiles.json

+[
+	[
+		[27777522,
+		13657657,
+		14119865,
+		22.96185242727780,
+		22.92340104876670,
+		22.99840039165770,
+		95.15435452471940],
+		[0.16814981778556500,
+		0.16938884829023600,
+		0.13029899959403300,
+		0.08445061806046640,
+		0.05811840452702920,
+		0.05631028061504850,
+		0.06512242137179920,
+		0.06861163659177230,
+		0.06020567860988050,
+		0.04355880225459750,
+		0.02803499342457000,
+		0.01912758869230340,
+		0.01515038483762410,
+		0.01223701332240520,
+		0.00869244058559189,
+		0.00529469386492945,
+		0.00328609724536106,
+		0.00194751964322071,
+		0.00114713861262733,
+		0.00086662207093871],
+		[0.15777933298339800,
+		0.15671077815250300,
+		0.12447815070139100,
+		0.08939377850853680,
+		0.07830223837100820,
+		0.08053563812713150,
+		0.07682071635522590,
+		0.06269916689630620,
+		0.04365876627610810,
+		0.03084162032257200,
+		0.02432244409407740,
+		0.02120157090634930,
+		0.01791380814933710,
+		0.01326354596024400,
+		0.00968643784396050,
+		0.00633359323592785,
+		0.00349435421488265,
+		0.00158514030722019,
+		0.00062587894057936,
+		0.00035303965324001],
+		[0.96726540940724300,
+		1.03084161446685000,
+		1.04551821911720000,
+		1.01249668698901000,
+		0.91377904610163700,
+		0.71793506186340200,
+		0.67630912102504800,
+		0.81996977584158100,
+		1.05847758500203000,
+		1.33386431492214000,
+		1.36610600401065000,
+		1.11490766666616000,
+		0.87264547467534200,
+		0.81805292713174800,
+		0.89240386671080400,
+		0.86800712885521700,
+		0.80860485322858600,
+		0.90961820179781800,
+		1.18839220506104000,
+		1.77284683642290000,
+		2.37438923518884000]
+	],[
+		[27749565,
+		13838477,
+		13911088,
+		24.59760821726010,
+		24.93140692365050,
+		24.25806641635340,
+		77.89121151531350],
+		[0.13460476947529500,
+		0.14372006850062500,
+		0.12847108657610600,
+		0.09875785820893480,
+		0.07155805029015120,
+		0.06299959058572970,
+		0.06669930695548060,
+		0.06620210601954020,
+		0.05883374707069510,
+		0.04833706700819440,
+		0.03521801565126300,
+		0.02559536412958920,
+		0.02062306586521670,
+		0.01576211515574400,
+		0.01023801649094930,
+		0.00572503164287636,
+		0.00307516687772024,
+		0.00165330051290922,
+		0.00104697926747485,
+		0.00087929371550523],
+		[0.13970508453303800,
+		0.13975442365362800,
+		0.11681679473806300,
+		0.09435373241811580,
+		0.08802952295423720,
+		0.08580953135424240,
+		0.07740975573970180,
+		0.06538018068005290,
+		0.04960049471620990,
+		0.03735678030431880,
+		0.02976493031984740,
+		0.02384624281925690,
+		0.01786909883056510,
+		0.01280223896627530,
+		0.00854305561048803,
+		0.00534781144388522,
+		0.00336845668342047,
+		0.00201559921183726,
+		0.00124722944598909,
+		0.00097903557682698],
+		[0.99478035075329800,
+		0.95846318148882600,
+		1.02300804808641000,
+		1.09402516010135000,
+		1.04121346671673000,
+		0.80864396372867400,
+		0.73034724501018900,
+		0.85714209189972800,
+		1.00728620755889000,
+		1.17996112502462000,
+		1.28717635944761000,
+		1.17702912743046000,
+		1.06774746443199000,
+		1.14809486978252000,
+		1.22477345443636000,
+		1.19214694369792000,
+		1.06494947429125000,
+		0.90816533289574900,
+		0.81597117843348200,
+		0.83506239070880300,
+		0.89343444858290900]
+	],[
+		[27773083,
+		14068521,
+		13704562,
+		26.03124974398200,
+		26.46223974345070,
+		25.59233340000260,
+		66.99286359589060],
+		[0.11075465721807600,
+		0.12531352270434800,
+		0.12461977157255700,
+		0.11125959454297800,
+		0.08638877858554280,
+		0.06731675090789110,
+		0.06187750302195390,
+		0.06283663484842800,
+		0.05868334457568110,
+		0.05026814063111530,
+		0.04079416969542070,
+		0.03139012243581270,
+		0.02388339994025160,
+		0.01756428234835730,
+		0.01203845901370310,
+		0.00701750790134651,
+		0.00386618590184589,
+		0.00206610447696370,
+		0.00117506121489637,
+		0.00088600846283140],
+		[0.11432537302481000,
+		0.12667609073231400,
+		0.11974891524623500,
+		0.10506132545858400,
+		0.09301444384053810,
+		0.08267846594852100,
+		0.07221670745205490,
+		0.06493541188927070,
+		0.05720135869997910,
+		0.04682451198762990,
+		0.03485427327295350,
+		0.02629070404866000,
+		0.01998999845792230,
+		0.01428519039077750,
+		0.00980039073555805,
+		0.00599266397652053,
+		0.00331791767499821,
+		0.00156650907345305,
+		0.00072094415435746,
+		0.00049880393486330],
+		[1.02655750690901000,
+		0.99449511323857500,
+		1.01551553024478000,
+		1.06831332671397000,
+		1.08712098857701000,
+		0.95343309606544400,
+		0.83582242597784900,
+		0.87958614394243600,
+		0.99337814815975000,
+		1.05315379343805000,
+		1.10205392288684000,
+		1.20150435531963000,
+		1.22567146812179000,
+		1.22649751828565000,
+		1.26219850103057000,
+		1.26098752647638000,
+		1.20211569414631000,
+		1.19619066818704000,
+		1.35395006440030000,
+		1.67317801793479000,
+		1.82343918147671000]
+	],[
+		[27763227,
+		14197178,
+		13566049,
+		27.18018253648030,
+		27.20726467467510,
+		27.15223055717600,
+		58.62068064918010],
+		[0.09684619409307840,
+		0.11118728522535100,
+		0.12478646127724500,
+		0.11986149426641600,
+		0.09520840637648180,
+		0.07266436962641580,
+		0.06157942773922730,
+		0.05776990145557140,
+		0.05595079146694350,
+		0.05422906155293650,
+		0.04606394160905190,
+		0.03460401579477880,
+		0.02431694855838520,
+		0.01695117276859440,
+		0.01211661291564830,
+		0.00784551008485565,
+		0.00430794264393258,
+		0.00206401896375649,
+		0.00099084255721430,
+		0.00065560102411584],
+		[0.09693358901304290,
+		0.10652960384957600,
+		0.11580433409088400,
+		0.11321777793810400,
+		0.09912292067710200,
+		0.08131783917502760,
+		0.07048109387720830,
+		0.06833459006738460,
+		0.06313644652192900,
+		0.05255568033191890,
+		0.03903863379099840,
+		0.02910689297792140,
+		0.02269025908501970,
+		0.01651322011205660,
+		0.01126491285383100,
+		0.00657328507941835,
+		0.00372023325715849,
+		0.00195236631466226,
+		0.00099341991698984,
+		0.00071290106976617],
+		[1.04652268320717000,
+		1.04557914271650000,
+		1.09227868937597000,
+		1.12769408251422000,
+		1.10793353197135000,
+		1.00519391705143000,
+		0.93515656400210500,
+		0.91434829403035100,
+		0.88472781091218400,
+		0.92741634411137500,
+		1.07984413189527000,
+		1.23485263418514000,
+		1.24416877771066000,
+		1.12154903817441000,
+		1.07427786276195000,
+		1.12564654732811000,
+		1.24907168423899000,
+		1.21184866195041000,
+		1.10637161065473000,
+		1.04380755195023000,
+		0.96240750921599800]
+	],[
+		[27754352,
+		14075999,
+		13678353,
+		29.11682279982730,
+		29.25251358929000,
+		28.97478042663600,
+		50.90167162031000],
+		[0.07773301902264660,
+		0.09756477612918870,
+		0.11769211568808000,
+		0.11953094319783700,
+		0.10070874902748300,
+		0.07710380627667010,
+		0.06107481209270700,
+		0.05557245339785060,
+		0.05625960991605260,
+		0.05655944052572760,
+		0.05050018273054490,
+		0.03998167380585820,
+		0.03018284824156070,
+		0.02178128532719260,
+		0.01546004923447120,
+		0.01053184010191340,
+		0.00618324070639374,
+		0.00309253762350306,
+		0.00148564380196157,
+		0.00100097315235749],
+		[0.07414870947175290,
+		0.08945795766137910,
+		0.11321883781048900,
+		0.11651658562245200,
+		0.09931926283967810,
+		0.08029240511352740,
+		0.07198971835798040,
+		0.07305219001114050,
+		0.06968907391161920,
+		0.06031073521142600,
+		0.04701710534217110,
+		0.03436632086919040,
+		0.02578058253156860,
+		0.01918327371957260,
+		0.01236986721101920,
+		0.00632468067099160,
+		0.00324813634215291,
+		0.00173308253350124,
+		0.00107597562154257,
+		0.00090549914684498],
+		[1.02907119007676000,
+		1.07881594924275000,
+		1.12232721275485000,
+		1.06972980730035000,
+		1.05569391096106000,
+		1.04346799653703000,
+		0.98820437091643300,
+		0.87304591541007500,
+		0.78283773210481600,
+		0.83076356851850300,
+		0.96506352588551000,
+		1.10530588311237000,
+		1.19721831153422000,
+		1.20479432618776000,
+		1.16843941971104000,
+		1.28614891275391000,
+		1.71360639234849000,
+		1.95896791328722000,
+		1.83628956559048000,
+		1.42088092397757000,
+		1.13757438283678000]
+	]
+]