À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Úžt˜Ú¹“Ä‹.³5[ºoÁ´g¾¦n¨‘÷jZ“~Mž}KCÏÒªðÑN"„ÚpKÇ“oqèŽB´!eïaúÄ	JîºÆ&ÇQ ÿçàCúÅ0r’•X‘ËpuÙu¼†™:`ðt®ÒÉ&W
òd4ò ½›Öëõšá"é¿Æú¹éÝ†[Ä@Tè";0yFwèo¶G¬ª°W4?Úqé“BÖ¬€¯|–_Å­Ê1¨&^² [êcTØç
* 	)Ì ©P×hF£Ï-8Eâ…a¶áˆ^÷¶=éžóe¾\œ%
pØ@•°IFèR‡Åé!h¯>Réð^Å%ÄXÄøù)á¹}@tßseJ“ÐN»ÔÀÔ5[y-¡üÄ£L‹²ëŠ7ÀÍŒÂÁ2!ôUˆÒýÚyß–®iÉNØ²è1Šß%‹>®„Ý¤RJŽ=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ YAÌ·¾=§‰þ²µFÓ¿džxƒ~jß}&ÇBZñ&­\ûbEëòH$¯$¢1=ù3à
Å*yÀ«ckhôeMW¸·5§€¡ó&wÝû¾qb³©¥DdO²ùPh@"…¡ZLÓ¹d³+&M|X?åÙ$3ÉLá?#»b§ôŒÆc¤¥ìk+Ë•­uóÕðÂšoU†ME¨òVä* „@Ž½kÅfžô:Kò…lÉþöÿyS|:0œ®bUC0(‡!j¸J¦CÞc‹YiuDv¦_°ò/™Aú|#É4®úª/]]þƒq‘mÊU¡/Í³™T´K‰¢ð=Ð8ÅÖ“}Çær©»É7=
ÁYjx, Š‰¦ZøÔgçBo¯ÐÇ¿?eât¾ve‘®¶ƒÈŒ1m‡åõnZxìREŸ`íÒ´Øp²zŠWÊc’Ö‰ 'msñFO4$˜žB¤|ò’êÓ*vT@hò«Eˆÿö½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇûü*Opõ318”cÇØgrbøIo"‹ƒ&çÀØÿZ¼&M|X?åÙ$3ÉLá?#»b§ôŒÆc¤¥ìk+Ë•­uóÕðÂšoU†ME¨òV,°8tXWRHKqA­€z¥Þšx‰! ¸¢)°a<›¨õ±‡gçBo¯ÐÇ¿?eât¾ve‘®¶ƒÈŒ1m‡åõn‘-LaÒqÞ¢?ìƒFêiƒyžhbÏÅƒç[9bÐ ‹Z*/º/ð×'RãrÛlCÚîù*.|¦—ð“Í=RÒvû"7Z¦ì‘z)Ì|¥[ï:kÙ¤Âî¬)	›Á×Ø çØ¹m7óÃŸ[ïãÖ¸Ç¢°‘çdDßS€HXWœ6üËÉ}"óPªá@£²þÍIBLL¦–oìDõ0m¼7T˜†ß? Q+ñ6uûa HdmùoÖ&: –ÃÐÔÑ¢Šõ¤MÈàD›ÿZ‡·ÚW—Ñ¶¦|Ú[¹1”ÕZš¬ç!ãfÙp2ØÈ;šè€œ—^‡*Ð{ò<!Tâ‹ˆÍÅâeÏ5:ÅÍ¸rœ)ž!x——sÇpû¾²\óetCçå`Ý¾xÇB9½7õ‘IHM%\xhÄ}?
•O¶ˆV4ƒ‹Ñ4žb– Ñû*ÛŽ:UÄ™+S,Ù€O)y Èa:›Zb>Ÿüfqœ©…üÞ*¬;E¤}ó!ÖGÒ g?d±-æÄ(—•ûXÃ2Œ3ØËó˜wjj qXu¨Ð% bØ˜GÈñÈøÛ?a®ŒV3\÷s—r$'Éå²Ü@=j‰ŽZdò3PëÑä±ˆß$hÎ“—*³ñD% sîžj:¹Ÿ‚§ýª¿J[‘û…ªö
Øã’¥Ë¯só¥]VIÏÊóœñ´B¡£Ø£!õÞïA–Ø$4Ñê5÷œCÍÇ›€Ag‰” ~&:È¿3EƒöTµ>Xq9ÐÐÇ‡¹1‘;ü²§ä	è›,Dÿž6+¤"-ÐØcFC™Ä¶ôêÊÌ)æÌ¾:%š‹¹y’TVõr¾Kw?“IfHXr3$š¢TmCAÜšÞúÔ•÷äî·Öaí{Õk\•Cr``#?“H ³Çì´ÉžÐ¨´×‹S,p"³5•ÈEQØy–l/×ŸƒÓö”¼¸ü.K9Â¢˜SZGPˆñ?P¡DQP‡^®N½Î†*h4§„ÉÝOÛpÒL"[EU.ÁéJ¤"-ÐØcFC™Ä¶ôêA[’|Ë›oçs9tyIñJ&×”“Œz^þˆKwÏ“§Û8nnà&,ô‚`\ÍfõOåeóAC{È8Ð ó¾DQP‡^®N½Î†*h4§¾óÆaqµÃ€ :?²Sˆ*,L¤­	»G„ÌÙÍÀÄÕô`Û8nnà&,ô‚`\Ífö€ºý£#´»÷}e€Ÿí;þ7¨
eðÜ.ZÛ‚Û8nnà&,ô‚`\ÍfqsX·èÅD‡7˜JôÎDv3R‡XP‹TÕà¼–“a£çŒóæ·Ü˜;‡=¡Mœ¸©‹ÎE¤+ZòpDmíì.Èû{ÔùŠÂ¨–`×¸QŽ á 3ÏrÌ¯ù]±¼6þg6´ÀO0!rG%CølÐ¸Íí=».{7GZ,ÁÉš¤-Þ6·-;U~Þ{CšóìÞu	°¹ºÇO§ˆ½À	F[2›ö—>c¤"-ÐØcFC™Ä¶ôêžÿ!Ò@ï¬$ÕgŸþcX©ÖRjÔÖÚÏ;”»Ç½_[úÛ8nnà&,ô‚`\Ífrl9Ì%—Á0\¨“L‹S¦ØzêùÓ¶çOÄz¤Rž#ïoÆûe‡Å½/\Nª~}®ÊÆ0ÛÚ=R 6×³ã*-Yêù-Õ‚íÓ ‘_Ëß
¥àiŸ;40îG`ð“Þ,q­ò+zØsÑÝÌÐ	sò
ëé%’«æš<š¸lH•Ö‚Èk£|EL‘åá´ÉBûú"W©9hÄ—ÕC	VÐ^äFjs¤6Ç ­ºÖË¥3W&âFÈ¿¹(:A#FÁƒ¸A^ï»Y/Pu»!íµz8ü®nÚÚ³ˆlqÛ8nnà&,ô‚`\ÍfÐ'5{±¾ßæ©Îúè¨*¡Û8nnà&,ô‚`\ÍfVÃ£û†üÌ‚v5·",Û8nnà&,ô‚`\ÍfÜ\(1#ë|ÜJöÒ”†éwä`¼,o³Íip¡ËàµÝÛ8nnà&,ô‚`\Íf ÜÂY¼žŠXËMgÛ8nnà&,ô‚`\Íf1@¢k¼¡e¸:’ÊAI4¾R£èê&OM“•sD¯$Á<hÞ “°ÁÄß›"oÒÛ8nnà&,ô‚`\ÍfŸ…W®¶ Óû½w|ü@Û8nnà&,ô‚`\Íf,ü«ƒ²$ó½ßª—F;­D6šxµæ8%{Å¥aX·P,í1¼µÓZ²4…e‡k ¸Šç?A«xM[/ÐÒ[ëïM5 stUM‚®Ü^û'½¡©gÕÀŠKWœ×5)z‰Ïo ÍÁdÿRlÃƒˆÿ‘‰ŽD:*ôµE=ãmF-æ=Øë!Nþï§).ãNÅ»“’åF‹­RŠââ©EŽØÐîÉ{’Hôw@z#øuòu@¡ÜUîî''‘¿õž‹lÖDJî—g|ÛþdUÝ˜Iñ»?À†9Á™"šß 9£| zVe)<Q=XÙX•ªvÊvø(»˜Öæ£»ã$¤¬=FÆíLŒ]
,Ó	Ó•ÒËÇþœî©‚–3»ÖÞN_ªy¼^§ið›Q$ª[=¢GèåVÏš¯$¾/;o®Ul¾œ˜’,Têï¿š¢úýë—>\w·§ãËt_¸Å¿§VñoÛ—ˆðø™vžú$×_+>šCÃôóÓ¾Þ4í>R¥ŠÃitx‡PÀ>Y7mÇ“û2ë×ºL¹½ñß|Æ7¼‚aAìÛwP™?ÎhŒ»ú]ënÈ] ì	zê3Ù~¬ÇªVíÔL@Áï×qt….«‚Zã¼£¥#hh3ÓÜDQP‡^®N½Î†*h4§üòxm× ¿3?ðþ‹×rÖò!ØDþ.Û5>Òã=ŸôžÒ9_Bp:~ú® Kì£‘=‰ŠðíýpåÙY#p
kÏÄ*¼u2Ká€ª†Þ(Ü›ªOðÉXÙbÊŒ3ÈÄ)†n¤N„0aÛ8nnà&,ô‚`\Íf½
#Ê¾òtáªw”Ê-”Hïv¨b0õ¹&½Ù@&|«w-ÅI–”•WU9ÕvMZ„Öo ©LÓé=©ûAÝ\]ì£¶Rä¸(ç§¾#²]K¿;O­'…E'¸ Åù‡è->C	°u‰“Ðq„9Ä§ÊÌŽÒjžpîb4Ü#Æ¦§>;š½Ç)fI
Ývó<wÝÄ–X'Ýš3Ÿú’àRQSà¢RPSxßÔSTg=a†Ã)¹hììå_­âM‘G)äÆØl[Y[ñÈpüo’ Áã~4Î’•o1CÄU}I™¿>e©çkŠtl~xTƒ·‡¯Ç
]3nûŸúÐKß+—C@WšpeO0+D@=B„…>;G©’úëÔ-Jºº&!B'o1ñ¸:ït$‰B0Ø¦%-ŒC²0XÚ¼;¦€Àþ|‘ÄƒöÀhC²ìÀ›Ža!«-’¸òt„V¶([Òƒ¤íÚÀHìÅz3ùl,–•ÔqËŠ Çø¬bQYå"ËõXÝ`q¿þ»ÀÐ5Oå=%u¬I3®GyøÛ8nnà&,ô‚`\Íf8¶u]UST`—>~ŽpxÌ×ü+< «½âËö¾1_ßFÎòB1LœÉéýcaëí•
ïw`ãê\Ì¹$jžÌ-ïÃÃ†»[iC8:x€aÊK!]ìÃq>J²†!›­¹Ž²$Îí—çN¿‡i•ï\‰„(øe)0^’ŽùàÇ0}:@LíÌ
’Ô^I¯À¯þÚ…eVëz«Jœ åF˜ætöý	°æþøò#ÿÒ,šÿû	¿0˜tÃÛêWðÃåV¥r8"¡]bädE.¹J¯{É1Rã}¾Ôø©Ò †š‚GÁ<7_ï7“V¼ö¯ÈÛð@ ¾äk¿#‚>¸wÌÔ1Î'[¥D©ÓAo†V "w0ÉŠ<¥pÖýôŽþŠÎA¡Ð'kÒ—‘é!      var value = event.args.value;
                chartInstance.xAxis.tickMarks.step = parseInt(value);
                chartInstance.refresh();
            });

            $("#inputXAxisGridLinesStep").jqxNumberInput({ width: '50px', height: '25px', inputMode: 'simple', min: 1, max: 10, value: 1, decimalDigits: 0, digits: 2, spinButtons: true })
            .on('valueChanged', function (event) {
                var value = event.args.value;
                chartInstance.xAxis.gridLines.step = parseInt(value);
                chartInstance.refresh();
            });

            $("#btnValuesBetweenTicks").jqxCheckBox({ width: 120, height: 25, hasThreeStates: false, checked: false });
            $("#btnValuesBetweenTicks").on('change', function (event) {
                chartInstance.xAxis.valuesOnTicks = !event.args.checked;
                chartInstance.refresh();
            });

            // valueAxis settigns inputs
            $("#inputValueAxisUnitInterval").jqxNumberInput({ width: '50px', height: '25px', inputMode: 'simple', min: 1, max: 10, value: 5, decimalDigits: 0, digits: 2, spinButtons: true })
                .on('valueChanged', function (event) {
                    var value = event.args.value;
                    chartInstance.valueAxis.unitInterval = parseInt(value);
                    chartInstance.refresh();
                });

            $("#inputValueAxisLabelsStep").jqxNumberInput({ width: '50px', height: '25px', inputMode: 'simple', min: 1, max: 10, value: 1, decimalDigits: 0, digits: 2, spinButtons: true })
                .on('valueChanged', function (event) {
                    var value = event.args.value;
                    chartInstance.valueAxis.labels.step = parseInt(value);
                    chartInstance.refresh();
                });

            $("#inputValueAxisTickMarksStep").jqxNumberInput({ width: '50px', height: '25px', inputMode: 'simple', min: 1, max: 10, value: 1, decimalDigits: 0, digits: 2, spinButtons: true })
            .on('valueChanged', function (event) {
                var value = event.args.value;
                chartInstance.valueAxis.tickMarks.step = parseInt(value);
                chartInstance.refresh();
            });

            $("#inputValueAxisGridLinesStep").jqxNumberInput({ width: '50px', height: '25px', inputMode: 'simple', min: 1, max: 10, value: 1, decimalDigits: 0, digits: 2, spinButtons: true })
            .on('valueChanged', function (event) {
                var value = event.args.value;
                chartInstance.valueAxis.gridLines.step = parseInt(value);
                chartInstance.refresh();
            });

            $("#btnValueAxisValuesBetweenTicks").jqxCheckBox({ width: 120, height: 25, hasThreeStates: false, checked: false });
            $("#btnValueAxisValuesBetweenTicks").on('change', function (event) {
                chartInstance.valueAxis.valuesOnTicks = !event.args.checked;
                chartInstance.refresh();
            });


        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px">
    </div>
    <table>
    <tr>
    <td>
        <table>
            <tr style="height: 50px"><td colspan="2"><b>xAxis settings:</b></td></tr>
            <tr>
                <td>Labels step</td><td><div id='inputXAxisLabelsStep'></div></td>
            </tr>
            <tr>
                <td>Grid lines step</td><td><div id='inputXAxisGridLinesStep'></div></td>
            </tr>
            <tr>
                <td>Tick marks step</td><td><div id='inputXAxisTickMarksStep'></div></td>
            </tr>
            <tr>
                <td>Unit interval</td><td><div id='inputXAxisUnitInterval'></div></td>
            </tr>
            <tr style="height: 40px">
                <td colspan="2"><div id="btnValuesBetweenTicks">Values between ticks</div></td>
            </tr>
        </table>
    
    </td>
    <td>
        <table style="padding-left: 100px;">
            <tr style="height: 50px"><td colspan="2"><b>valueAxis settings:</b></td></tr>
            <tr>
                <td>Labels step</td><td><div id='inputValueAxisLabelsStep'></div></td>
            </tr>
            <tr>
                <td>Grid lines step</td><td><div id='inputValueAxisGridLinesStep'></div></td>
            </tr>
            <tr>
                <td>Tick marks step</td><td><div id='inputValueAxisTickMarksStep'></div></td>
            </tr>
            <tr>
                <td>Unit interval</td><td><div id='inputValueAxisUnitInterval'></div></td>
            </tr>
            <tr style="height: 40px">
                <td colspan="2"><div id="btnValueAxisValuesBetweenTicks">Values between ticks</div></td>
            </tr>
        </table>
    
    </td>
    </tr>
    </table>
</body>
</html>