À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Ú3D†LVì¯xyUq"$¿`ŽZÙµX¶„F)"í3 ö»0øàúíqòª—%GL«Wqí.2VX9°ObÍhs„#–ÛÄcÚ&9ð*£‹Fi±A#©W‘G›ÍpänÜ…¥¸–+ÁNê~=Ž¡HîþgçRúÝ‰@¶¿}{¥ˆkÉðÓ¹ÆùTTÂÖJxK%Lš`”)r·âìýñ7»µ¯êý©&¦'Æ2ÿG›uˆ«³ÂÞn†c¶B©\?{»ªÀHVðjýbôÃŒ¦• ÿ¶F ÆrµP<ùóüÎnKFÊÅ©ù6ú“w0«A²«e)Ö¥;â-Ó
ºú`9šEìLkþIçiT6UR•÷Ž§þ™1@a-lÀŸHeÌ‰ÿÔ2’«N ñ ·TQ–ÀÉÍ™|´Ñ“w»-ê£$ö¹B®j°ëñð&9¿)ÖˆK¼1‹UC¡¯zÿÈç¬D(8?çéIvî’´“é‹2ï/€Îå…RS&­\ûbEëòH$¯$¢1=ù3à
Å*yÀ«ckhôeMW¸·5§€¡ó&wÝûx!À_¡™ß¦(”ÅÁhñz’ZO…H¡{iÍõˆ¦Û„{'+ï^Åëgú5l—º ±o:hREâ…a¶áˆ^÷¶=éžóe¾\œ%
pØ@•°Iá#•—£{–wc,™ÝCßˆÖh.Ì@KVª¹†ÃgçBo¯ÐÇ¿?eât¾ve‘®¶ƒÈŒ1m‡åõnZxìREŸ`íÒ´Øp²zŠ1fWM³pÄ}xÓ®é°9[Wºœn£ öêØ|™ ñ ·TQ–ÀÉÍ™|´Ñ“w»-ê£$ö¹B®j°ëñð&9¿)ÖˆK¼1‹UC¡¯HG©½;@¦ÜÀ ›e‡kã¤óãÑboüÿÖñ2|hÓ*vT@hò«Eˆÿö½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇûü*Opõ318”cÇØg_­pîŠkú2f/b‹Bï^Åëgú5l—º ±o:hREâ…a¶áˆ^÷¶=éžóe¾\œ%
pØ@•°Iá#•—£{–wc,™ÝCßþó›Dß¨Û³9æxŠï^Åëgú5l—º ±o:hREâ…a¶áˆ^÷¶=éžóe¾\œ%
pØ@•°Iá#•—£{–wc,™ÝCß·ñ&³­P<Àf©îÛ‹a¬ýØ2¼;e9¢Ù–~y‚‚ü†‰6\2¿K»È˜­§¶’¡jõJH‰87]'Õð:6ü"ñ…£YÈêå[ýônªPÒ;esü
H-]è÷&­\ûbEëòH$¯$¢1=ù3à
Å*yÀ«ckhôeMW¸·5§€¡ó&wÝû¾qb³©¥DdO²ùP}ƒ˜M„Èª­dç‘>?´˜¨ö¤ø0„N!¼²'Ç5ÁÂì¥÷™Þ‰Y	ñòãÉ\8˜U»JU—¤ÑA·ÿPÑþA™Ì>¾û®´ð¿€k`úéi²áÀs[F½7É=µÀ¦7-Ú_ÍáøÌÿöoåjDÞQÝe£#C¬ƒ>8àâF‚P©(ö“"d{LâËÇ$D±0†_X	dóŒfÆ-'8Ðñ»œdclÄÙ¾o5¨»Õ+Ü	ÕÉŸÒ‰ˆñ‹Eháã(¥\ñ‹Æ:5~\Ç`+8¹ütÍR7gü?oQ)ƒ[Ü¶þòÖeîÞ-{.ÿØP¶õÈêüÿ¿Î
Ö£æímŸ`¤ñ}àØNstpC†o#‰…V¼¶ý”0ÊYÃñÄq.kö¼Pu“U	)"$dÚ‡%ûþ¡;4…Z&|?’•ò¸>^û\­äE½êà¹Ú-\0½6,ØÖ±!°==í8ÁžÝZË“¾Bòt[öõÿcw_ŸS{6,Ã™C:ä4ÄÊ>0ÝÁaNü‚ÿD-ªÀ@DNj·©x©[4´ UmÕ[›/÷©4/:0‚©·ZkÍyx%dZk´êõKA
¼Ílb.Âîïé’­û‘ÍñG»òÉ)á-,	drƒö¸¾i^(a¯;uJ4¼/*>¥%kŸÙÖáQ7üÞ²‘°õZð6žÕ@ªW‘WS†(Ñ¼žÀP½‡\uÏ›]•_ÑÓGAÈ
nÍ»˜·§î)Ñ‹€¢…C†í“¹3D©ãÖÛQ]æÑ@~ÿŸ!9zz¯®zì§Ën1c›=8Ï0ÖÕöh-†M–€ÏÔµ€`l;_eR«ê'!4èòÏ›]•_ÑÓGAÈ
nÍ»˜±pR$Qˆô+Æõþ—YŽkŒ°t#Ä+v¼‚ud_®ºÜ‡ëþ¬yÜÿ„é‡å):;³ÛOë§ËžÒ*æþOKúœv©	%^®ó
þâ¬8ç•	5	c©C‚Jz]DQP‡^®N½Î†*h4§Ì«î Ë0žg¦•øj[zº"¥hßãÏkwRV>W4k§—Ù›KXž_“‰Ö{¯TÙråB)±RSJR‘yP¾Ã?â¨HžwwÉ¤zYªvèšD8DBP	Š²Ø„³ß"g€c—N²ÆîDqúROV9%zvc‚|±‰KÌ<'2Á'~/3]…^*9[.þÆ€žò"(7cü a3]¢ŒZiNÈ$¹mÒFã*-Yêù-Õ‚íÓ ‘_Ë­ ^ñnT·aHØ£bòEÉ¨ë¯@quŸ‡&ƒ=)ÿ@ylÄ>JÍ2ìd´£xùç†t¥/³ìˆùÐ¼¨\~n5ªô‰PßÝU—|näB¾tFñ·Ð™Æ–~[u-Í7ÖEÃVú¡–Æ;CC£”‹~ÌèáûmÀQöyÐ&q}qïäzyLNíãdc’ÏÉqØ¶9´®Áæpsx,bh¨à`ìÖtÆÄ˜²\`)uWP®D/ç	±ðÖ/ãzC[gË~o^Ë"þxîq5ð¬#Û$3%éˆ®Ëÿq>o8c…C¢%LL‚œï¥‘µS—ÔÙt™sf0Ñ›ã5Í- pðb	àM¡G–åS;b7™ý6Wâ|Îb¾;žt}-Ï½Ÿ4ŸÖNo±æžÞwÒýŒ”Î½@Q¢nB7â×|Y©úþjýÈÖ!íÁüþirÛlCÚîù*.|¦—ð“Í×«á^ÒÝRãm%aêŽ]"blš”	{»“GÛnÿ¬'¶â‘cz¤oä±ÚGŒg€p¨›Y-bËD ÷L9CÒ¯‰1:oz«êÛÇë6ë)ìÞ(Ø‹c¦õv	Iˆvºhå ¹;2?ÕššÛ²·_U´w9vo»O±q7°¹”>–;yÎ	7<ˆFªÉÕùç$añ„íxu‚`ƒVåñ†œœbsZ5b¸Ö„æÅàçd««TS> lg4Z*Ý7™ý6Wâ|Îb¾;žt}-pIŽƒh-=Œ%Ã›åÙµŠ%Ï8P^UÝ˜àÎ8‡ãÒîÅÃ
Ç#²ârr×c>ÑŽaÌÊAÖ½9v}î¼)9(a_ÛÐìŠ øëy.+b]w±Ï!ñ=™c¨)¨uDÅ„©‚Ã 6k_Â’î
)Kž(¨7™ý6Wâ|Îb¾;žt}-Yo85&E±—t]À‚Bþß`ï ©Á1w>[úgååßEõÐ™d% Ý}…öÂVå‚nz¸ç:ý>n–f«f <Ýi\¬ò6A “B’Þ“¾elz``æ¶9m\U1ž©?àob¹abÒè1#q¶4ùâš±Úù-8¹¡)û‡„gU]~K¤ò¶œÅZžÐ0šäcXßÖ‰„³¨Bîúüp³R0ÒàÁÒ}­8á±ôæ Š-‹ÌNk?š`ÿŒÝB*Ÿ˜eJìM}\÷º_Á³ëö*TúÊç,c™âKéµ ù>gµ»Uä,]¥ÛX#1f¢ØL‘\¼ÚR/v7™ý6Wâ|Îb¾;žt}-ï´_É	7ê©é„ûÌk3q'kt}€ð?“ uOø¾‡xöC]g³	4Ç¸‘<1‘	ÿçüª†4}:xQgÒZ<]Í7ÖEÃVú¡–Æ;CC£”Ç€Ÿ`ÏïD{rfÀú’}1eÄiiõF‡ ACÕú·VYY™¢ÓÿÄCÑ‘n¼x®F8×LçòÊˆO*@Üä7»cÍÍ´Ïž©Ø'¦;íAMa¶u:ê×/Šnµà³%À× ›×!BÙkä»[i¼í9gv–Ásÿ`Ùè‡¢Êûè}^½÷­ŽmùfäO&\¨?{&½³¡³ê6iaÇ?tm&T«i(èŒã!hmf¿öœ¢!=o bJ¹ >™½rè¢¸l§.Œ…Hzõ™¿}Ó¿‡óé_æ_i}PÛ8nnà&,ô‚`\Íf¤ÒÓc:‰b·t=Ä)FQ}†¬ßôm7Ê›¯;@ç?øš(þÿ¹UqnŠZÿ-v6WIhU\)w6oVEæ+–²Àð·‰è­Û“ýVêX…5„Â±AÚQlz·qÚâož,ÉMÕýR Óö }l+!$Ëµ¸‚õpáaáÀÈ¬½}Ý¨Šx;ydý¯‡·"”>…Š„ïu„,uÓˆi¾q¨`­ õÛ8nnà&,ô‚`\Íf‹~ÌèáûmÀQöyÐ&q}qó[±ÍðWDna›®Pd.ÎôaYØóŠVP°Ló<7Ü¼þÖ1ãTíšdÜwk<èÚ.õÖ©M^F/à€a^;Ž$<ÀTZäŽÊ6½lE‡[;‰r6’qAN™*¦£|åsùÊ”útRuøŽ.ˆ@±WøgdXP%.nµìËÃÏ@ø€%ÌÂ£b~ÿ©V"òHkI”à«5ßS?(ü°ú;ÿVØe;äü‡ºËÇÁ‘«B›kùs>£IyÉê9í{n:®(íëi-ZšøA»É4^PÑ,bY¾a"þ¾¡ˆ§*IqÜ—dIæ)8’øõ-¦¨å»»°pù´¬”™¬É˜un?úI†•xX,	d;Çn¥þg®½”)Ôžã*³nÿIëê$ÿ	Òc¸i6jc2UÆ®·A:Åžèsï>8ÚÒD½I4éŸÂ«Në(îÜj"'Í·šºAnîB" rè¢¸l§.Œ…Hzõ™¿}Ó¿‡óé_æ_i}PÛ8nnà&,ô‚`\Íf¤ÒÓc:‰b·t=Ä)FQ}†¬ßôm7Ê›¯;@ç?øÌ/\ÂRú›G‚Ëx©‡V¡HD¨SíŒexjDÈ‚­áJ´ÅKB÷„[¬Í
°z_Øjb/NRØD’:q†¡YTicks.visible = true;
                } else {
                    majorTicks.visible = false;
                    minorTicks.visible = false;
                }
                $('#gauge').jqxLinearGauge('ticksMajor', majorTicks);
                $('#gauge').jqxLinearGauge('ticksMinor', minorTicks);
            });

            $('#showLabelsCheckbox').on('change', function (e) {
                if (e.args.checked) {
                    labels.visible = true;
                } else {
                    labels.visible = false;
                }
                $('#gauge').jqxLinearGauge('labels', labels);
            });

            $('#showRangesCheckbox').on('change', function (e) {
                if (e.args.checked) {
                    $('#gauge').jqxLinearGauge('showRanges', true);
                } else {
                    $('#gauge').jqxLinearGauge('showRanges', false);
                }
            });

            $('#showBackgroundCheckbox').on('change', function (e) {
                if (e.args.checked) {
                    $('#gauge').jqxLinearGauge('background', { visible: true });
                } else {
                    $('#gauge').jqxLinearGauge('background', { visible: false });
                }
            });

            $('#labelsNearRadio').on('checked', function () {
                labels.position = 'near';
                $('#gauge').jqxLinearGauge('labels', labels);
            });
            $('#labelsFarRadio').on('checked', function () {
                labels.position = 'far';
                $('#gauge').jqxLinearGauge('labels', labels);
            });
            $('#labelsBothRadio').on('checked', function () {
                labels.position = 'both';
                $('#gauge').jqxLinearGauge('labels', labels);
            });
            $('#ticksNearRadio').on('checked', function () {
                $('#gauge').jqxLinearGauge('ticksPosition', 'near');
            });
            $('#ticksFarRadio').on('checked', function () {
                $('#gauge').jqxLinearGauge('ticksPosition', 'far');
            });
            $('#ticksBothRadio').on('checked', function () {
                $('#gauge').jqxLinearGauge('ticksPosition', 'both');
            });
            $('#showAnimationButton').on('click', function () {
                $('#gauge').jqxLinearGauge('animationDuration', 0);
                $('#gauge').jqxLinearGauge('value', -60);
                $('#gauge').jqxLinearGauge('animationDuration', 1000);
                $('#gauge').jqxLinearGauge('value', 50);
            });
        });
    </script>
    <style type="text/css">
    .demo-options
    {
        list-style: none;
        padding: 0px;
        margin: 10px;
    }
    .demo-options li
    {
        padding: 3px;
        font-family: Verdana;
        font-size: 12px;        
    }
    </style>
</head>
<body class='default'>
        <div class="demo-gauge">
        <div id="gauge" style="margin-left: 20px; float: left;"></div>
        <div id="panel" style="margin-left: 330px;">
            <div class="demo-options-header">
                Options
            </div>
            <div>
                <div id="isVerticalCheckbox" style="margin-bottom: 4px; margin-left: 10px; margin-top: 10px;">Is vertical</div>
                <br />
                <div>
                    <table style="float:left; margin-left: 10px;">
                        <tr>
                            <td>Labels position:</td>
                        </tr>
                        <tr>
                            <td>
                                <div id="labelsNearRadio">Near</div>                                
                            </td>
                        </tr>   
                        <tr>
                            <td>
                                <div id="labelsFarRadio">Far</div>
                            </td>
                        </tr>   
                        <tr>
                            <td>
                                <div id="labelsBothRadio">Both</div>
                            </td>
                        </tr>                            
                    </table>
                    <table style="float: right; margin-right: 10px;">
                        <tr>
                            <td>Ticks position:</td>
                        </tr>                        
                        <tr>
                            <td>
                                <div id="ticksNearRadio">Near</div>
                            </td>
                        </tr>   
                        <tr>
                            <td>
                                <div id="ticksFarRadio">Far</div>
                            </td>
                        </tr>   
                        <tr>
                            <td>
                                <div id="ticksBothRadio">Both</div>
                            </td>
                        </tr>
                    </table>
                    <div style="clear: both;"></div>
                </div>
                <br />
                <div id="showTicksCheckbox" style="margin-bottom: 4px; margin-left: 10px;">Show ticks</div>
                <div id="showLabelsCheckbox" style="margin-bottom: 4px; margin-left: 10px;">Show labels</div>
                <div id="showRangesCheckbox" style="margin-bottom: 4px; margin-left: 10px;">Show ranges</div>
                <div id="showBackgroundCheckbox" style="margin-bottom: 4px; margin-left: 10px;">Show background</div>
                <br />
                <div id="showAnimationButton" style="margin: auto; text-align: center;">Reset value</div>
            </div>
        </div>
    </div>
</body>
</html>